API tools faq
paste
Advertisement
sodabranch

fuzzy [f2u] [custom colours]

sodabranch
Feb 17th, 2024 (edited)
219
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.50 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    FUZZY [f2u]
  3.    
  4.    code by @ sodabranch on TH
  5.    do not remove credit
  6.    
  7.    *~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*~*
  8.    live code editor:
  9.    [https://th.circlejourney.net/]
  10.    
  11.    WARNING !! do not delete " " or
  12.    it might not look correct
  13.    
  14.    ____________________________________
  15.    
  16.    COLOUR GUIDE:
  17.    
  18.    main border/horizontal rule: #999999
  19.    
  20.    background: #faf8f9
  21.    banners/coloured hr: #EEAA99
  22.    
  23.    main font: #343A40
  24.    coloured font: #5577AA
  25.    icons: #AA9988
  26.    
  27.    relationship hearts:
  28.        filled: #d1583b
  29.        empty: #d6745c>
  30.    
  31.    
  32. -->
  33.  
  34. <div class="container p-4" style="
  35. max-width: 820px;
  36. background:url('https://file.garden/ZcPXKEClQE8Z0nqs/images-th/pattern%20289.gif');
  37. background-size:auto;
  38. background-repeat;
  39. background-position: center center;
  40. background-attachment: fixed;
  41. border-radius: 1000px;
  42. color: #343A40">
  43.     <div class="row flex-lg-row-reverse">
  44.         <div class="col-lg-4">
  45.             <div class="cardmb-2 p-2 shadow-sm rounded-circle" style="
  46.             background-color: #faf8f9;
  47.             border: solid 1px #999999;
  48.             ">
  49.                 <div class="card-body rounded-circle">
  50.                     <!-- enter your image here -->
  51.                     <img src="https://file.garden/ZcPXKEClQE8Z0nqs/images-th/FnnGYEOXgAA6dCK.jpg" class="img-fluid rounded-circle" style="
  52.                         object-fit: cover;
  53.                         object-position: center center;
  54.                         min-height: 60px;
  55.                         height: 215px;
  56.                         width: 400px;
  57.                         border: solid 1px #fff;">
  58.                 </div>
  59.             </div>
  60.         </div>
  61.         <div class="col-lg">
  62.             <div class="card mb-2 p-2 rounded shadow-sm" style="
  63.             background-color: #faf8f9;
  64.             border: solid 1px #999999;
  65.             ">
  66.                 <div>
  67.                     <div class="row no-gutters align-items-center mb-0">
  68.                         <div class="col-auto">
  69.                             <h3><span style="color: #5577AA;"><i class="fas fa-solid fa-clouds"></i>&nbsp;&nbsp;Name</span> Surname</h3>
  70.                         </div>
  71.                         <div class="col px-2">
  72.                         </div>
  73.                         <div class="col-auto"><span style="color: #5577AA;"><a href="https://toyhou.se/sodabranch" id="" class="faded"><i class="fa-solid fa-code"></i> — code</a></span></div>
  74.                     </div>
  75.                     <hr class="faded mt-0 mb-1" style="border-top: solid 1px #999999;">
  76.                     <!-- INFO -->
  77.                     <div class="row no-gutters align-items-center mb-0">
  78.                         <div class="col-auto"><span class="text-uppercase font-weight-bold" style="color: #5577AA;"><i class="fa-solid fa-cake-candles"></i>&nbsp;&nbsp;age</span></div>
  79.                         <div class="col px-2">
  80.                             <hr class="faded" style="border-top: solid 1px #EEAA99">
  81.                         </div>
  82.                         <!-- age -->
  83.                         <div class="col-auto">content</div>
  84.                     </div>
  85.                     <div class="row no-gutters align-items-center mb-0">
  86.                         <div class="col-auto"><span class="text-uppercase font-weight-bold" style="color: #5577AA;"><i class="fa-solid fa-signature"></i>&nbsp;&nbsp;pronouns</span></div>
  87.                         <div class="col px-2">
  88.                             <hr class="faded" style="border-top: solid 1px #EEAA99">
  89.                         </div>
  90.                         <!-- pronouns -->
  91.                         <div class="col-auto">content</div>
  92.                     </div>
  93.                     <div class="row no-gutters align-items-center mb-0">
  94.                         <div class="col-auto"><span class="text-uppercase font-weight-bold" style="color: #5577AA;"><i class="fa-solid fa-user"></i>&nbsp;&nbsp;gender</span></div>
  95.                         <div class="col px-2">
  96.                             <hr class="faded" style="border-top: solid 1px #EEAA99">
  97.                         </div>
  98.                         <!-- gender -->
  99.                         <div class="col-auto">content</div>
  100.                     </div>
  101.                     <div class="row no-gutters align-items-center mb-0">
  102.                         <div class="col-auto"><span class="text-uppercase font-weight-bold" style="color: #5577AA;"><i class="fa-solid fa-heart"></i>&nbsp;&nbsp;orientation</span></div>
  103.                         <div class="col px-2">
  104.                             <hr class="faded" style="border-top: solid 1px #EEAA99">
  105.                         </div>
  106.                         <!-- orientation -->
  107.                         <div class="col-auto">content</div>
  108.                     </div>
  109.                     <div class="row no-gutters align-items-center mb-0">
  110.                         <div class="col-auto"><span class="text-uppercase font-weight-bold" style="color: #5577AA;"><i class="fa-solid fa-paw"></i>&nbsp;&nbsp;species</span></div>
  111.                         <div class="col px-2">
  112.                             <hr class="faded" style="border-top: solid 1px #EEAA99">
  113.                         </div>
  114.                         <!-- species -->
  115.                         <div class="col-auto">content</div>
  116.                     </div>
  117.                 </div>
  118.             </div>
  119.         </div>
  120.     </div>
  121.     <div class="row">
  122.         <div class="col-lg">
  123.             <div class="card mb-2 p-2 rounded shadow-sm" style="
  124.             position: static;
  125.             background-color: #faf8f9;
  126.             border: solid 1px #999999;
  127.             ">
  128.                 <div class="row no-gutters align-items-center mb-0">
  129.                     <div class="col-auto">
  130.                         <!-- ABOUT -->
  131.                         <h3><span style="color: #5577AA;">About</span></h3>
  132.                     </div>
  133.                     <div class="col px-2">
  134.                         <hr class="faded" style="border-top: solid 1px #EEAA99">
  135.                     </div>
  136.                     <div class="col-auto"><span class="font-weight-bold faded" style="font-size: 20px; color: #AA9988;"><i class="fa-solid fa-circle-info"></i></span></div>
  137.                 </div>
  138.                 <!-- -->
  139.                 <div style="overflow-y: auto; overflow-x: hidden; height: 160px;">
  140.                 <!-- adjectives
  141.                 add as many as you want -->
  142.                 <div style="text-align: center;">
  143.                 <span class="badge" style="background-color: #EEAA99;">adjective</span>
  144.                 <span>•</span>
  145.                 <span class="badge" style="background-color: #EEAA99;">adjective</span>
  146.                 <span>•</span>
  147.                 <span class="badge" style="background-color: #EEAA99;">adjective</span>
  148.                 </div>
  149.                 <!-- write about your character here -->
  150.                 <h4><span style="color: #5577AA;">General</h4>
  151.                 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.
  152.                 <h4 class="mt-3"><span style="color: #5577AA;">Personality</h4>
  153.                 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.
  154.                 </div>
  155.             </div>
  156.             <div class="card mb-2 p-2 rounded shadow-sm" style="
  157.             position: static;
  158.             background-color: #faf8f9;
  159.             border: solid 1px #999999;
  160.             ">
  161.                 <div class="row no-gutters align-items-center mb-0">
  162.                     <div class="col-auto">
  163.                         <!-- DESIGN -->
  164.                         <h3><span style="color: #5577AA;">Design</span></h3>
  165.                     </div>
  166.                     <div class="col px-2">
  167.                         <hr class="faded" style="border-top: solid 1px #EEAA99">
  168.                     </div>
  169.                     <div class="col-auto"><span class="font-weight-bold faded" style="font-size: 20px; color: #AA9988;"><i class="fa-solid fa-magnifying-glass"></i></span></div>
  170.                 </div>
  171.                 <!-- -->
  172.                 <h4><span style="color: #5577AA;"><i class="fa-solid fa-book"></i>&nbsp;&nbsp;Notes</span></h4>
  173.                 <div style="overflow-y: auto; overflow-x: hidden; height: 80px;">
  174.                     <!-- design notes here -->
  175.                     <ul>
  176.                         <li>content</li>
  177.                         <li>content</li>
  178.                         <li>content</li>
  179.                         <li>content</li>
  180.                     </ul>
  181.                 </div>
  182.                 <div>
  183.                     <hr class="faded my-2 w-75" style="border-top: solid 1px #999999;">
  184.                 </div>
  185.                 <h4><span style="color: #5577AA;"><i class="fa-solid fa-comment"></i>&nbsp;&nbsp;Trivia</span></h4>
  186.                 <div style="overflow-y: auto; overflow-x: hidden; height: 80px;">
  187.                     <!-- trivia here -->
  188.                     <ul>
  189.                         <li>content</li>
  190.                         <li>content</li>
  191.                         <li>content</li>
  192.                         <li>content</li>
  193.                     </ul>
  194.                 </div>
  195.             </div>
  196.         </div>
  197.         <div class="col-lg">
  198.             <div class="card mb-2 p-2 rounded shadow-sm" style="
  199.             position: static;
  200.             background-color: #faf8f9;
  201.             border: solid 1px #999999;
  202.             ">
  203.                 <div class="row no-gutters align-items-center mb-0">
  204.                     <div class="col-auto">
  205.                         <!-- LIKES & DISLIKES -->
  206.                         <h3><span style="color: #5577AA;">Preferences</span></h3>
  207.                     </div>
  208.                     <div class="col px-2">
  209.                         <hr class="faded" style="border-top: solid 1px #EEAA99">
  210.                     </div>
  211.                     <div class="col-auto"><span class="font-weight-bold faded" style="font-size: 20px; color: #AA9988;"><i class="fa-solid fa-question"></i></span></div>
  212.                 </div>
  213.                 <!-- -->
  214.                 <h4><span style="color: #5577AA;"><i class="fa-solid fa-heart"></i>&nbsp;&nbsp;Likes</span></h4>
  215.                 <div style="overflow-y: auto; overflow-x: hidden; height: 80px;">
  216.                     <!-- likes -->
  217.                     <ul>
  218.                         <li>content</li>
  219.                         <li>content</li>
  220.                         <li>content</li>
  221.                         <li>content</li>
  222.                     </ul>
  223.                 </div>
  224.                 <div>
  225.                     <hr class="faded my-2 w-75" style="border-top: solid 1px #999999;">
  226.                 </div>
  227.                 <h4><span style="color: #5577AA;"><i class="fa-solid fa-heart-crack"></i>&nbsp;&nbsp;Likes</span></h4>
  228.                 <div style="overflow-y: auto; overflow-x: hidden; height: 80px;">
  229.                     <!-- dislikes -->
  230.                     <ul>
  231.                         <li>content</li>
  232.                         <li>content</li>
  233.                         <li>content</li>
  234.                         <li>content</li>
  235.                     </ul>
  236.                 </div>
  237.             </div>
  238.             <div class="card mb-2 p-2 rounded shadow-sm" style="
  239.             position: static;
  240.             background-color: #faf8f9;
  241.             border: solid 1px #999999;
  242.             ">
  243.                 <div class="row no-gutters align-items-center mb-0">
  244.                     <div class="col-auto">
  245.                         <!-- RELATIONSHIPS -->
  246.                         <h3><span style="color: #5577AA;">Relationships</span></h3>
  247.                     </div>
  248.                     <div class="col px-2">
  249.                         <hr class="faded" style="border-top: solid 1px #EEAA99">
  250.                     </div>
  251.                     <div class="col-auto"><span class="font-weight-bold faded" style="font-size: 20px; color: #AA9988;"><i class="fa-solid fa-users"></i></span></div>
  252.                 </div>
  253.                 <!-- -->
  254.                 <div style="overflow-y: auto; overflow-x: hidden; height: 158px;">
  255.                     <!-- relationship 1 -->
  256.                     <div style="overflow-y: hidden; overflow-x: hidden; height: 150px;">
  257.                         <!-- link & image -->
  258.                         <a href="URL_HERE"><img class="rounded" src="https://file.garden/ZcPXKEClQE8Z0nqs/images-th/16a.jpg" style="width: 120px; height: 120px; float: left; margin-right: 10px"></a>
  259.                         <span>
  260.                             <!-- relationship stats -->
  261.                             <i class="fas fa-heart" style="color: #d1583b;"></i>
  262.                             <i class="far fa-heart" style="color: #d6745c;"></i>
  263.                             <i class="far fa-heart" style="color: #d6745c;"></i>
  264.                             <i class="far fa-heart" style="color: #d6745c;"></i>
  265.                             <i class="far fa-heart" style="color: #d6745c;"></i>
  266.                         </span>
  267.                         <br>
  268.                         <!-- relationship description -->
  269.                         <h5 class="mb-0" style="color: #5577AA;">Name</h5> Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off.
  270.                     </div>
  271.                     <hr class="faded w-75" style="border-top: solid 1px #999999;">
  272.                     <!-- relationship 2 -->
  273.                     <div style="overflow-y: hidden; overflow-x: hidden; height: 150px;">
  274.                         <!-- link & image -->
  275.                         <a href="URL_HERE"><img class="rounded" src="https://file.garden/ZcPXKEClQE8Z0nqs/images-th/stuart_big" style="width: 120px; height: 120px; float: left; margin-right: 10px"></a>
  276.                         <span></span>
  277.                             <!-- relationship stats -->
  278.                             <i class="fas fa-heart" style="color: #d1583b;"></i>
  279.                             <i class="far fa-heart" style="color: #d6745c;">></i>
  280.                             <i class="far fa-heart" style="color: #d6745c;">></i>
  281.                             <i class="far fa-heart" style="color: #d6745c;">></i>
  282.                             <i class="far fa-heart" style="color: #d6745c;"></i>
  283.                         </span>
  284.                         <br>
  285.                         <!-- relationship description -->
  286.                         <h5 class="mb-0" style="color: #5577AA;">Name</h5> Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off.
  287.                     </div>
  288.                     <hr class="faded w-75" style="border-top: solid 1px #999999;">
  289.                     <!-- relationship 3 -->
  290.                     <div style="overflow-y: hidden; overflow-x: hidden; height: 150px;">
  291.                         <!-- link & image -->
  292.                         <a href="URL_HERE"><img class="rounded" src="https://file.garden/ZcPXKEClQE8Z0nqs/images-th/u85s8PZ.png" style="width: 120px; height: 120px; float: left; margin-right: 10px"></a>
  293.                         <span></span>
  294.                             <!-- relationship stats -->
  295.                             <i class="fas fa-heart" style="color: #d1583b;"></i>
  296.                             <i class="far fa-heart" style="color: #d6745c;"></i>
  297.                             <i class="far fa-heart" style="color: #d6745c;"></i>
  298.                             <i class="far fa-heart" style="color: #d6745c;"></i>
  299.                             <i class="far fa-heart" style="color: #d6745c;"></i>
  300.                         </span>
  301.                         <br>
  302.                         <!-- relationship description -->
  303.                         <h5 class="mb-0" style="color: #5577AA;">Name</h5> Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off. Small description, if it's soo long it'll get cut off.
  304.                     </div>
  305.                 </div>
  306.             </div>
  307.         </div>
  308.     </div>
  309.     <div class="row">
  310.         <div class="col-lg">
  311.             <div class="card p-2 shadow-sm"  style="
  312.             position: static;
  313.             background-color: #faf8f9;
  314.             border: solid 1px #999999;
  315.             border-radius: 20px;">
  316.                 <div class="card-body">
  317.                     <div class="row no-gutters align-items-center mb-0">
  318.                         <div class="card-body">
  319.                             <div class="overflow-hidden" style="height: 30px; width: 30px; position: absolute; top: -4px; left: 6px; z-index: 101;">
  320.                                 <audio controls="" style="opacity:0; width:100px;">
  321.                                     <!-- MUSIC PLAYER
  322.                             you can use filegarden.com to upload your mp3 file. It's easy to use and all you need to do is copy and paste the link of the file, no other tricks involved. -->
  323.                                     <source src="https://file.garden/ZcPXKEClQE8Z0nqs/The%20Tito%20Beltr%C3%A1n%20Massacre.mp3">
  324.                                 </audio>
  325.                             </div>
  326.                             <i class="fas fa-play text-uppercase font-weight-bold ml-2" style="color: #5577AA; font-size: 20px;"></i>
  327.                         </div>
  328.                         <div class="col-auto"><span class="text-uppercase font-weight-bold" style="color: #5577AA;">&nbsp;&nbsp;"Song Name"</span> by Artist</div>
  329.                         <div class="col px-2">
  330.                         </div>
  331.                     </div>
  332.                 </div>
  333.             </div>
  334.         </div>
  335.         <div class="col-lg">
  336.         </div>
  337.     </div>
Tags: html Code toyhouse
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!