API tools faq
paste
Advertisement
circlejourney

Lavender

circlejourney
Sep 10th, 2023 (edited)
1,998
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 17.77 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    Lavender Toyhouse theme created by Circlejourney. See my codes here:
  3.    https://toyhou.se/orchestrator/characters/folder:524040
  4.  
  5.    Based on a sketch from Coders Quarters' September 2023 challenge:
  6.    https://toyhou.se/~world/82691.coders-quarters/page/99574.september-challenge
  7.    
  8.    Aesthetic photo by Daiga Ellaby:
  9.    https://unsplash.com/photos/ClWvcrkBhMY
  10.    
  11.    Placeholders (use Ctrl + F to replace):
  12.        Theme colour: #ec84f1
  13.        Muted theme colour: #b566b9
  14.        Background black: #222
  15.        Greys: #484848
  16.        FA accent icon: fa-flower
  17. -->
  18.  
  19. <div style="margin: -15px -15px 0; background-color: #222; padding: 1rem; font-size: 9.5pt; color: #eee;">
  20.     <div class="p-5" style="border: 3px solid #484848; border-radius: 18px; position: relative; overflow: hidden;">
  21.        
  22.         <div id="CORNER-DECORATIONS" style="color: #484848;">
  23.             <i style="font-size: 40pt; position: absolute; top: -10px; left: -10px;" class="fal fa-flower"></i>
  24.             <i style="font-size: 40pt; position: absolute; top: -10px; right: -10px;" class="fal fa-flower"></i>
  25.             <i style="font-size: 40pt; position: absolute; bottom: -10px; left: -10px;" class="fal fa-flower"></i>
  26.             <i style="font-size: 40pt; position: absolute; bottom: -10px; right: -10px;" class="fal fa-flower"></i>
  27.         </div>
  28.        
  29.         <div class="row">
  30.            
  31.             <div class="col-lg-4 flex-column order-1 order-lg-0 mt-5 mt-lg-0">
  32.                 <div id="TOP-LEFT-CARD" class="p-1 flex-grow-1" style="border: 3px solid #b566b9; border-radius: 10px;">
  33.                     <div class="h-100" style="position: relative; background-color: #484848; border-radius: 4px; overflow: hidden;">
  34.                        
  35.                         <div id="BACKGROUND-ICON" style="position: absolute; left:-15%; bottom: -25%; font-size: 200pt; line-height: 0; z-index: 1;">
  36.                            
  37.                             <i class="fal fa-flower"
  38.                                style="color: #555; transform: rotate(20deg);">
  39.                             </i>
  40.                            
  41.                         </div>
  42.                        
  43.                         <div id="TOP-LEFT-CARD-TITLE" class="p-3 pt-4" style="position:relative; border-top: 0.5rem solid #ec84f1; padding: 1rem calc(1.5rem + 5px); z-index: 2;">
  44.                            
  45.                             <h1 class="text-uppercase text-center" style="font-family: 'Times New Romans', Georgia, serif; color: #ec84f1;">
  46.                                 Character Name
  47.                             </h1>
  48.                            
  49.                             <div class="my-3" style="border-bottom: 3px dotted #ec84f1;"></div>
  50.                            
  51.                             <div class="d-flex justify-content-between flex-wrap">
  52.                                 <div class="font-weight-bold">
  53.                                     Age
  54.                                 </div>
  55.                                 <div>
  56.                                     My age
  57.                                 </div>
  58.                             </div>
  59.                            
  60.                             <div class="d-flex justify-content-between flex-wrap">
  61.                                 <div class="font-weight-bold">
  62.                                     Pronouns
  63.                                 </div>
  64.                                 <div>
  65.                                     My pronouns
  66.                                 </div>
  67.                             </div>
  68.                            
  69.                             <div class="d-flex justify-content-between flex-wrap">
  70.                                 <div class="font-weight-bold">
  71.                                     Background
  72.                                 </div>
  73.                                 <div>
  74.                                     My background
  75.                                 </div>
  76.                             </div>
  77.                            
  78.                             <div class="d-flex justify-content-between flex-wrap">
  79.                                 <div class="font-weight-bold">
  80.                                     Birthday
  81.                                 </div>
  82.                                 <div>
  83.                                     My birthday
  84.                                 </div>
  85.                             </div>
  86.                            
  87.                             <br>
  88.                            
  89.                             <p>
  90.                                 Put a description or summary here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.
  91.                             </p>
  92.                            
  93.                         </div>
  94.                        
  95.                     </div>
  96.                 </div>
  97.                
  98.                 <div id="QUOTE" class="d-flex justify-content-around align-items-center my-3" style="word-break: break-word; font-size: 12pt; font-family: 'Times New Romans', Georgia, serif;">
  99.                     <div style="border-top: 3px dotted #484848; flex-grow: 1;"></div>
  100.                     <div class="text-center mx-1" style="max-width: 75%;">
  101.                         &ldquo; Quote, lorem ipsum dolor sit amet, consectetur adipiscing elit. &rdquo;
  102.                     </div>
  103.                     <div style="border-top: 3px dotted #484848; flex-grow: 1;"></div>
  104.                 </div>
  105.                
  106.                 <div id="BOTTOM-LEFT-CARD" class="p-1 flex-grow-1" style="border: 3px solid #484848; border-radius: 10px;">
  107.                     <div class="h-100 flex-column justify-content-center" style="background-color: #484848; border-radius: 4px; overflow: hidden; position: relative;">
  108.                         <div id="BOTTOM-LEFT-CARD-TITLE" class="p-3">
  109.                            
  110.                             <h4 class="text-uppercase" style="font-family: 'Times New Romans', Georgia, serif;">
  111.                                 Story
  112.                             </h4>
  113.                            
  114.                             <p>
  115.                                 Write a little about the character's story here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  116.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  117.                             </p>
  118.                            
  119.                         </div>
  120.                        
  121.                     </div>
  122.                 </div>
  123.             </div>
  124.            
  125.            
  126.             <div class="col-12 col-lg flex-column mt-4 mt-lg-0 py-4 order-3 order-lg-1">
  127.                
  128.                 <div id="MAINBOX" style="border: 3px solid #484848; border-radius: 10px;">
  129.                    
  130.                     <div id="ACCENT-ICON" class="text-center" style="line-height: 0;">
  131.                         <i style="font-size: 30pt; margin-top: -29px; background-color: #222; color: #ec84f1; border-radius: 10px;" class="fa-thin fa-flower p-2"></i>
  132.                     </div>
  133.                    
  134.                     <div class="row no-gutters">
  135.                         <div id="MAINBOX-LEFT-COLUMN" class="col-12 col-xl p-3 flex-column align-items-center">
  136.                            
  137.                             <div id="MAINBOX-LEFT-TEXT">
  138.                                 <div class="row justify-content-around">
  139.                                    
  140.                                     <div id="LIKES" class="col-5">
  141.                                         <div class="text-uppercase" style="font-family: 'Times New Romans', Georgia, serif; color: #888;">Likes</div>
  142.                                         <i class="fa fa-check"></i> Thing 1
  143.                                         <br>
  144.                                         <i class="fa fa-check"></i> Thing 2
  145.                                         <br>
  146.                                         <i class="fa fa-check"></i> Thing 3
  147.                                     </div>
  148.                                    
  149.                                     <div id="DISLIKES" class="col-5">
  150.                                         <div class="text-uppercase" style="font-family: 'Times New Romans', Georgia, serif; color: #888;">Dislikes</div>
  151.                                         <i class="fa fa-times"></i> Thing 1
  152.                                         <br>
  153.                                         <i class="fa fa-times"></i> Thing 2
  154.                                         <br>
  155.                                         <i class="fa fa-times"></i> Thing 3
  156.                                     </div>
  157.                                    
  158.                                 </div>
  159.                                
  160.                                 <h4 class="text-uppercase text-center mt-3" style="font-family: 'Times New Romans', Georgia, serif; color: #ec84f1;">
  161.                                     TRIVIA
  162.                                 </h4>
  163.                                 <div class="mb-2" style="border-bottom: 3px dotted #ec84f1;"></div>
  164.                                 <p>
  165.                                     This space can contain extra info about the character. The lighter colours draw less attention to this space. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  166.                                 <p>Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  167.                                 </p>
  168.                             </div>
  169.                         </div>
  170.                        
  171.                        
  172.                         <div id="MAINBOX-SEPARATOR" class="mb-2" style="border-right: 3px dotted #484848;"></div>
  173.                        
  174.                        
  175.                         <div id="MAINBOX-RIGHT-COLUMN" class="col-12 col-xl p-3">
  176.                            
  177.                             <div id="RELATIONSHIPS-TEXT">
  178.                                 <h4 class="text-center text-uppercase" style="font-family: 'Times New Romans', Georgia, serif; color: #ec84f1;">Relationships</h4>
  179.                                 <div class="mb-2" style="border-bottom: 3px dotted #ec84f1;"></div>
  180.                                
  181.                                 <div class="d-flex mb-2">
  182.                                     <!-- Replace src link to change relationship image (will automatically crop to fill rectangle) -->
  183.                                     <img class="flex-grow-1 mr-2" src="https://via.placeholder.com/300" style="border-radius: 10px; max-width: 80px; flex-basis: 0; object-fit: cover;">
  184.                                     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
  185.                                     </div>
  186.                                 </div>
  187.                                
  188.                                 <div class="d-flex">
  189.                                     <!-- Replace src link to change relationship image (will automatically crop to fill rectangle) -->
  190.                                     <img class="flex-grow-1 mr-2" src="https://via.placeholder.com/300" style="border-radius: 10px; max-width: 80px; flex-basis: 0; object-fit: cover;">
  191.                                     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
  192.                                     </div>
  193.                                 </div>
  194.                                
  195.                             </div>
  196.                                
  197.                         </div>
  198.                        
  199.                     </div>
  200.                    
  201.                 </div>
  202.                
  203.                 <div id="STATS-AREA" class="mt-3 px-3 flex-grow-1 flex-column justify-content-center">
  204.                    
  205.                     <div id="STATS-HEADER" class="text-center text-uppercase d-flex align-items-center" style="font-size: 12pt;">
  206.                         <i class="fal fa-flower mr-3" style="color:#484848;"></i>
  207.                         <div class="flex-grow-1" style="border-top: 3px dotted #484848"></div>
  208.                         <div class="mx-3" style="font-family: 'Times New Romans', Georgia, serif;">
  209.                             Stats
  210.                         </div>
  211.                         <div class="flex-grow-1" style="border-top: 3px dotted #484848"></div>
  212.                         <i class="fal fa-flower ml-3" style="color:#484848;"></i>
  213.                     </div>
  214.                    
  215.                     <div class="row" style="font-family: monospace;">
  216.                         <div class="col-lg-6 flex-column justify-content-center">
  217.                             <div>empathy</div>
  218.                             <div class="progress mb-3" style="background-color: #484848; height: 10px;">
  219.                                 <div class="progress-bar" style="width: 50%; background-color: #ec84f1; border-right: 5px solid #222;"></div>
  220.                             </div>
  221.                             <div>sociability</div>
  222.                             <div class="progress mb-3" style="background-color: #484848; height: 10px;">
  223.                                 <div class="progress-bar" style="width: 50%; background-color: #ec84f1; border-right: 5px solid #222"></div>
  224.                             </div>
  225.                             <div>creativity</div>
  226.                             <div class="progress mb-3" style="background-color: #484848; height: 10px;">
  227.                                 <div class="progress-bar" style="width: 50%; background-color: #ec84f1; border-right: 5px solid #222"></div>
  228.                             </div>
  229.                         </div>
  230.                        
  231.                         <div class="col-lg-6 flex-column justify-content-center text-right">
  232.                             <div>stability</div>
  233.                             <div class="progress mb-3" style="background-color: #484848; height: 10px;">
  234.                                 <div class="progress-bar" style="width: 50%; background-color: #ec84f1; border-right: 5px solid #222"></div>
  235.                             </div>
  236.                             <div>willpower</div>
  237.                             <div class="progress mb-3" style="background-color: #484848; height: 10px;">
  238.                                 <div class="progress-bar" style="width: 50%; background-color: #ec84f1; border-right: 5px solid #222"></div>
  239.                             </div>
  240.                             <div>self-esteem</div>
  241.                             <div class="progress mb-3" style="background-color: #484848; height: 10px;">
  242.                                 <div class="progress-bar" style="width: 50%; background-color: #ec84f1; border-right: 5px solid #222"></div>
  243.                             </div>
  244.                         </div>
  245.                     </div>
  246.                    
  247.                    
  248.                     <div id="CREDITS" class="text-center d-flex align-items-center">
  249.                         <div class="flex-grow-1" style="border-top: 3px dotted #484848"></div>
  250.                         <div class="mx-1" style="color: #888;">
  251.                             theme by <a href="https://toyhou.se/~forums/16.htmlcss-graphics/75580.circlejourney-s-code-creations-free-" style="color: #b566b9;">circlejourney</a>
  252.                             &bull;
  253.                             sketch by <a href="https://toyhou.se/~world/82691.coders-quarters/page/99574.september-challenge" style="color: #b566b9;">coders quarters</a>
  254.                         </div>
  255.                         <div class="flex-grow-1" style="border-top: 3px dotted #484848"></div>
  256.                     </div>
  257.                    
  258.                 </div>
  259.                
  260.             </div>
  261.            
  262.            
  263.             <div id="RIGHT-BAR" class="col-12 col-lg-auto d-flex order-0 order-lg-2" style="width: 15vw; min-height: 50vh">
  264.                 <div class="flex-grow-1 flex-column justify-content-end" style="position: relative; border-radius: 10px; border: 3px solid #b566b9; padding: 6px;">
  265.                    
  266.                     <!-- Replace background-image link to change right bar background -->
  267.                     <div
  268.                        id="RIGHT-BAR-BACKGROUND"
  269.                        class="w-100 h-100"
  270.                        style="background-image: url(https://i.postimg.cc/6qYLV8Ls/daiga-ellaby-Cl-Wvcrk-Bh-MY-unsplash.jpg);
  271.                            background-size: cover;
  272.                            background-position: right;
  273.                            border-radius: 4px;">
  274.                     </div>
  275.                        
  276.                     <!-- Replace src link to change icon -->
  277.                     <img id="ICON"
  278.                        src="https://file.toyhou.se/characters/2920298"
  279.                        class="mr-2"
  280.                        style="position: absolute; width: 180px; max-width: 100%; max-height: 100%; left: -20px; top: 20px; border: 5px solid #222; border-radius: 10px;">
  281.                 </div>
  282.             </div>
  283.         </div>
  284.     </div>
  285. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!