API tools faq
paste
Advertisement
tgCodes

wormy: relation-less

tgCodes
Nov 12th, 2022
338
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.21 KB | None | 0 0
raw download clone embed print report
  1. <div id="main" style="
  2.     max-width:700px;
  3.     margin:auto;">
  4.     <div id="header" style="
  5.         border-bottom:10px solid #73914A;">
  6.         <!--scenery-->
  7.         <div style="position:relative;height:120px;">
  8.             <svg viewBox="0 0 513 395" style="height:90px;position:absolute;bottom:-5px;left:-1px;z-index:5">
  9.                 <path stroke-linecap="round" fill="#73914A" stroke="#73914A" stroke-width="3" stroke-linejoin="round"  d="M6.75 390c-27.5-169.25 130-262.75 130-262.75C120 190.5 129.5 207 129.5 207 254.25 14.25 431.5 3 431.5 3c-59 34.75-90.5 164-90.5 164 54.5-44 100.5-45.5 100.5-45.5-70 69.75-67.75 213.25-67.75 213.25C420.75 269.75 510 239 510 239c-47.75 55.25-46.75 152-46.75 152M7 390.25l456 1.25"/>
  10.             </svg>
  11.             <div style="transform:scaleX(-1);position:absolute;bottom:-30px;left:-35px;font-size:150px;z-index:3;image-rendering:-moz-crisp-edges;">&#128027;</div>
  12.             <svg viewBox="0 0 513 395" style="height:120px;filter:brightness(.9);position:absolute;bottom:-1px;left:50px;z-index:0">
  13.                 <path stroke-linecap="round" fill="#73914A" stroke="#73914A" stroke-width="3" stroke-linejoin="round"  d="M6.75 390c-27.5-169.25 130-262.75 130-262.75C120 190.5 129.5 207 129.5 207 254.25 14.25 431.5 3 431.5 3c-59 34.75-90.5 164-90.5 164 54.5-44 100.5-45.5 100.5-45.5-70 69.75-67.75 213.25-67.75 213.25C420.75 269.75 510 239 510 239c-47.75 55.25-46.75 152-46.75 152M7 390.25l456 1.25"/>
  14.             </svg>
  15.             <svg viewBox="0 0 513 395" style="height:75px;position:absolute;bottom:-2px;right:-9px;z-index:5">
  16.                 <path stroke-linecap="round" fill="#73914A" stroke="#73914A" stroke-width="3" stroke-linejoin="round"  d="M6.75 390c-27.5-169.25 130-262.75 130-262.75C120 190.5 129.5 207 129.5 207 254.25 14.25 431.5 3 431.5 3c-59 34.75-90.5 164-90.5 164 54.5-44 100.5-45.5 100.5-45.5-70 69.75-67.75 213.25-67.75 213.25C420.75 269.75 510 239 510 239c-47.75 55.25-46.75 152-46.75 152M7 390.25l456 1.25"/>
  17.             </svg>
  18.             <!--navigation-->
  19.             <div style="z-index:10;position:absolute;bottom:-20px;left:150px;max-width:600px;">
  20.                 <ul class="nav row" style="filter:drop-shadow(1px 1px 0px #000) drop-shadow(1px -1px 0px #000)  drop-shadow(-1px 1px 0px #000) drop-shadow(-1px -1px 0px #000);font-weight:bold;">
  21.                     <li class="nav-item col-2">
  22.                         <a href="#one" style="text-decoration:none;color:#635994;"><span class="nav-link" style="transform:scaleX(-1);font-size:200%;">
  23.                         <span>&#128028;</span>
  24.                         <span style="position:absolute;transform:scaleX(-1);filter:none;font-size:50%;background-color:#fff;padding:5px;top:-30px;left:20px;text-align:center;border-radius:5px;">surface</span>
  25.                         <span style="position:absolute;width:0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 15px solid #fff;top:0px;right:2px;"></span>
  26.                         </span></a>
  27.                     </li>
  28.                     <li class="nav-item col-2">
  29.                         <a href="#two" style="text-decoration:none;color:#635994;"><span class="nav-link" style="transform:scaleX(-1);font-size:200%;">
  30.                         <span>&#128028;</span>
  31.                         <span style="position:absolute;transform:scaleX(-1);filter:none;font-size:50%;background-color:#fff;padding:5px;top:-50px;left:5px;text-align:center;border-radius:5px;">appearance</span>
  32.                         <span style="position:absolute;width:0;height: 0;border-left: 8px solid transparent;border-right: 8px solid transparent;border-top: 25px solid #fff;top:-25px;right:2px;"></span>
  33.                         </span></a>
  34.                     </li>
  35.                     <li class="nav-item col-2">
  36.                         <a href="#three" style="text-decoration:none;color:#635994;"><span class="nav-link" style="transform:scaleX(-1);font-size:200%;">
  37.                         <span>&#128028;</span>
  38.                         <span style="position:absolute;transform:scaleX(-1);filter:none;font-size:50%;background-color:#fff;padding:5px;top:-20px;left:10px;text-align:center;border-radius:5px;">personality</span>
  39.                         <span style="position:absolute;width:0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 13px solid #fff;top:10px;right:2px;"></span>
  40.                         </span></a>
  41.                     </li>
  42.                     <li class="nav-item col-2">
  43.                         <a href="#four" style="text-decoration:none;color:#635994;"><span class="nav-link" style="transform:scaleX(-1);font-size:200%;">
  44.                         <span>&#128028;</span>
  45.                         <span style="position:absolute;transform:scaleX(-1);filter:none;font-size:50%;background-color:#fff;padding:5px;top:-50px;left:25px;text-align:center;border-radius:5px;">history</span>
  46.                         <span style="position:absolute;width:0;height: 0;border-left: 7px solid transparent;border-right: 7px solid transparent;border-top: 30px solid #fff;top:-25px;right:2px;"></span>
  47.                         </span></a>
  48.                     </li>
  49.                 </ul>
  50.             </div>
  51.         </div>
  52.     </div>
  53.     <div id="body" style="
  54.         padding:15px;
  55.         max-height:1000px;
  56.         overflow:hidden;
  57.         border:4px solid #665547;
  58.         max-height:700px;
  59.         overflow:auto;
  60.         background-color:#90755C;
  61.         color:#D8D0C5;">
  62.         <!--wormspace-->
  63.         <div>
  64.             <!--worm header 1 (head)-->
  65.             <div style="position:relative;">
  66.                 <div class="lightpurp" style="height:80px;background-color:#d4aaff;border-radius:50px 50px 0px 50px;margin-right:0px;"></div>
  67.                 <div class="darkpurp" style="position:absolute;width:100px;height:90px;background-color:#b58ae2;border-radius:10px;margin-top:-85px;margin-left:120px;"></div>
  68.                 <div class="eye" style="position:absolute;width:20px;height:20px;background-color:#886aa8;border-radius:100%;margin-top:-60px;margin-left:30px;"></div>
  69.                 <div id="one" class="display-3" style="color:#4E3A64;right:83px;position:absolute;margin-top:-60px;">surface-level</div>
  70.             </div>
  71.             <!-- - - - - -->
  72.             <!--section 1-->
  73.             <!-- - - - - -->
  74.             <div class="row">
  75.                 <!--box 1-->
  76.                 <div class="col card p-3 m-3" style="max-height:300px;overflow:auto;background-color:#665547;">
  77.                     <!--basic info-->
  78.                     <div class="row">
  79.                         <!--row 1 of basic info-->
  80.                         <div class="card col-sm px-3 mx-2 border-0" style="background:none;">
  81.                             <div class="row">
  82.                                 <div class="p-1 col-1 text-left"><i class="fa-duotone fa-signature"></i></div>
  83.                                 <div class="col-7 text-center" style="width:100%;">
  84.                                     <hr style="border-color:white;">
  85.                                 </div>
  86.                                 <div class="p-1 col-4 text-right">name</div>
  87.                             </div>
  88.                             <div class="row">
  89.                                 <div class="p-1 col-1 text-left"><i class="fa-duotone fa-calendar-heart"></i></div>
  90.                                 <div class="col-7 text-center" style="width:100%;">
  91.                                     <hr style="border-color:white;">
  92.                                 </div>
  93.                                 <div class="p-1 col-4 text-right">age</div>
  94.                             </div>
  95.                             <div class="row">
  96.                                 <div class="p-1 col-1 text-left"><i class="fa-duotone fa-venus-mars"></i></div>
  97.                                 <div class="col-7 text-center" style="width:100%;">
  98.                                     <hr style="border-color:white;">
  99.                                 </div>
  100.                                 <div class="p-1 col-4 text-right">pronouns</div>
  101.                             </div>
  102.                         </div>
  103.                         <!--row 2 of basic info-->
  104.                         <div class="card col-sm px-3 mx-2 border-0" style="background:none;">
  105.                             <div class="row">
  106.                                 <div class="p-1 col-1 text-left"><i class="fa-duotone fa-dna"></i></div>
  107.                                 <div class="col-6 text-center" style="width:100%;">
  108.                                     <hr style="border-color:white;">
  109.                                 </div>
  110.                                 <div class="p-1 col-5 text-right">species</div>
  111.                             </div>
  112.                             <div class="row">
  113.                                 <div class="p-1 col-1 text-left"><i class="fa-duotone fa-masks-theater"></i></div>
  114.                                 <div class="col-6 text-center" style="width:100%;">
  115.                                     <hr style="border-color:white;">
  116.                                 </div>
  117.                                 <div class="p-1 col-5 text-right">personality</div>
  118.                             </div>
  119.                             <div class="row">
  120.                                 <div class="p-1 col-1 text-left"><i class="fa-duotone fa-cake-candles"></i></div>
  121.                                 <div class="col-6 text-center" style="width:100%;">
  122.                                     <hr style="border-color:white;">
  123.                                 </div>
  124.                                 <div class="p-1 col-5 text-right">birthday</div>
  125.                             </div>
  126.                         </div>
  127.                     </div>
  128.                     <p class="pt-3">basic blurb! this box will expand to a point (and the worm along with it), but eventually it'll start scrolling.</p>
  129.                 </div>
  130.                 <!--worm-->
  131.                 <div class="col" style="
  132.                     max-width:80px;
  133.                     margin-right:15px;
  134.                     margin-top:-20px;
  135.                     background-color:#d4aaff;">
  136.                 </div>
  137.             </div>
  138.             <!--worm header 2-->
  139.             <div style="position:relative;">
  140.                 <div style="height:80px;background-color:#d4aaff;border-radius:50px 0px 50px 0px;margin-right:0px;"></div>
  141.                 <div id="two" class="display-3" style="color:#4E3A64;left:83px;position:absolute;margin-top:-60px;">appearance</div>
  142.             </div>
  143.             <!-- - - - - -->
  144.             <!--section 2-->
  145.             <!-- - - - - -->
  146.             <div class="row">
  147.                 <!--wormy-->
  148.                 <div class="col" style="
  149.                     max-width:80px;
  150.                     margin-left:15px;
  151.                     margin-top:-20px;
  152.                     background-color:#d4aaff;">
  153.                 </div>
  154.                 <!--box 2-->
  155.                 <div class="col card p-3 m-3" style="max-height:400px;overflow:auto;background-color:#665547;">
  156.                     <div class="row">
  157.                         <div class="col">
  158.                             <!--appearance basics-->
  159.                             <div class="row">
  160.                                 <div class="card col-sm px-3 mx-2 border-0" style="background:none;">
  161.                                     <div class="row">
  162.                                         <div class="p-1 col-1 text-left"><i class="fa-duotone fa-ruler-vertical"></i></div>
  163.                                         <div class="col-8 text-center" style="width:100%;">
  164.                                             <hr style="border-color:white;">
  165.                                         </div>
  166.                                         <div class="p-1 col-3 text-right">height</div>
  167.                                     </div>
  168.                                     <div class="row">
  169.                                         <div class="p-1 col-1 text-left"><i class="fa-duotone fa-weight-scale"></i></div>
  170.                                         <div class="col-8 text-center" style="width:100%;">
  171.                                             <hr style="border-color:white;">
  172.                                         </div>
  173.                                         <div class="p-1 col-3 text-right">weight</div>
  174.                                     </div>
  175.                                     <div class="row">
  176.                                         <div class="p-1 col-1 text-left"><i class="fa-duotone fa-person"></i></div>
  177.                                         <div class="col-7 text-center" style="width:100%;">
  178.                                             <hr style="border-color:white;">
  179.                                         </div>
  180.                                         <div class="p-1 col-4 text-right">build</div>
  181.                                     </div>
  182.                                     <div class="row">
  183.                                         <div class="p-1 col-1 text-left"><i class="fa-duotone fa-clothes-hanger"></i></div>
  184.                                         <div class="col-7 text-center" style="width:100%;">
  185.                                             <hr style="border-color:white;">
  186.                                         </div>
  187.                                         <div class="p-1 col-4 text-right">style</div>
  188.                                     </div>
  189.                                 </div>
  190.                             </div>
  191.                             <!--color palette: replace both background-color and the text with desired hexes. you can add or remove divs and it should work fine-->
  192.                             <div class="mx-3 my-3">
  193.                                 <div class="row" style="border-radius:5px;border:1px solid #D8D0C5;overflow:hidden;">
  194.                                     <div class="col text-dark" style="background-color:#D8D0C5;">#D8D0C5</div>
  195.                                     <div class="col text-dark" style="background-color:#D4AAFF;">#D4AAFF</div>
  196.                                     <div class="col text-light" style="background-color:#B58AE2;">#B58AE2</div>
  197.                                     <div class="col text-light" style="background-color:#90755C;">#90755C</div>
  198.                                     <div class="col text-light" style="background-color:#665547;">#665547</div>
  199.                                     <div class="col text-light" style="background-color:#73914A;">#73914A</div>
  200.                                 </div>
  201.                             </div>
  202.                             <h3>design notes</h3>
  203.                             <ul class="m-0" style="list-style-type: '\1FAB2';">
  204.                                 <li>design note 1</li>
  205.                                 <li>design note 2</li>
  206.                                 <li>design note 3</li>
  207.                                 <li>design note 4</li>
  208.                             </ul>
  209.                         </div>
  210.                         <div class="col-sm m-2" style="background-image:url('https://placekitten.com/1000/1000');background-size:cover;background-repeat:no-repeat;border-radius:5px;min-height:300px;"></div>
  211.                     </div>
  212.                 </div>
  213.             </div>
  214.             <!--worm header 3-->
  215.             <div style="position:relative;">
  216.                 <div style="height:80px;background-color:#d4aaff;border-radius:0px 50px 0px 50px;margin-right:0px;"></div>
  217.                 <div id="three" class="display-3" style="color:#4E3A64;right:83px;position:absolute;margin-top:-60px;">personality</div>
  218.             </div>
  219.             <!-- - - - - -->
  220.             <!--section 3-->
  221.             <!-- - - - - -->
  222.             <div class="row">
  223.                 <!--box 3-->
  224.                 <div class="col card p-3 m-3" style="max-height:300px;overflow:auto;background-color:#665547;">
  225.                     <!--progress-bar stats-->
  226.                     <div class="row">
  227.                         <div class="col-sm px-3">
  228.                             <!--stat 1 name-->
  229.                             <p class="m-0" style="letter-spacing:1px;">
  230.                                 charisma
  231.                             </p>
  232.                             <div class="progress mb-2 w-100 my-auto" style="background-color:#90755C;">
  233.                                 <!--stat 1 bar (change width %)-->
  234.                                 <div class="progress-bar" style="width:20%; height:10px; background-color:#d4aaff; border-radius:4px; position:relative;">
  235.                                     <div style="background-color:#886aa8;border-radius:100%;width:4px;height:4px;position:absolute;right:5px;top:2px;"></div>
  236.                                     <div style="background-color:#b58ae2;width:10px;height:10px;position:absolute;right:20px;"></div>
  237.                                 </div>
  238.                             </div>
  239.                             <!--stat 2 name-->
  240.                             <p class="m-0" style="letter-spacing:1px;">
  241.                                 patience
  242.                             </p>
  243.                             <div class="progress mb-2 w-100 my-auto" style="background-color:#90755C;">
  244.                                 <!--stat 2 bar (change width %)-->
  245.                                 <div class="progress-bar" style="width:40%; height:10px; background-color:#d4aaff; border-radius:4px; position:relative;">
  246.                                     <div style="background-color:#886aa8;border-radius:100%;width:4px;height:4px;position:absolute;right:5px;top:2px;"></div>
  247.                                     <div style="background-color:#b58ae2;width:10px;height:10px;position:absolute;right:20px;"></div>
  248.                                 </div>
  249.                             </div>
  250.                             <!--stat 3 name-->
  251.                             <p class="m-0" style="letter-spacing:1px;">
  252.                                 optimism
  253.                             </p>
  254.                             <div class="progress mb-2 w-100 my-auto" style="background-color:#90755C;">
  255.                                 <!--stat 3 bar (change width %)-->
  256.                                 <div class="progress-bar" style="width:70%; height:10px; background-color:#d4aaff; border-radius:4px; position:relative;">
  257.                                     <div style="background-color:#886aa8;border-radius:100%;width:4px;height:4px;position:absolute;right:5px;top:2px;"></div>
  258.                                     <div style="background-color:#b58ae2;width:10px;height:10px;position:absolute;right:20px;"></div>
  259.                                 </div>
  260.                             </div>
  261.                         </div>
  262.                         <div class="col-sm px-3">
  263.                             <!--stat 4 name-->
  264.                             <p class="m-0" style="letter-spacing:1px;">
  265.                                 empathy
  266.                             </p>
  267.                             <div class="progress mb-2 w-100 my-auto" style="background-color:#90755C;">
  268.                                 <!--stat 4 bar (change width %)-->
  269.                                 <div class="progress-bar" style="width:80%; height:10px; background-color:#d4aaff; border-radius:4px; position:relative;">
  270.                                     <div style="background-color:#886aa8;border-radius:100%;width:4px;height:4px;position:absolute;right:5px;top:2px;"></div>
  271.                                     <div style="background-color:#b58ae2;width:10px;height:10px;position:absolute;right:20px;"></div>
  272.                                 </div>
  273.                             </div>
  274.                             <!--stat 5 name-->
  275.                             <p class="m-0" style="letter-spacing:1px;">
  276.                                 intelligence
  277.                             </p>
  278.                             <div class="progress mb-2 w-100 my-auto" style="background-color:#90755C;">
  279.                                 <!--stat 5 bar (change width %)-->
  280.                                 <div class="progress-bar" style="width:10%; height: 10px; background-color:#d4aaff; border-radius:4px; position:relative;">
  281.                                     <div style="background-color:#886aa8;border-radius:100%;width:4px;height:4px;position:absolute;right:5px;top:2px;"></div>
  282.                                     <div style="background-color:#b58ae2;width:10px;height:10px;position:absolute;right:20px;"></div>
  283.                                 </div>
  284.                             </div>
  285.                             <!--stat 6 name-->
  286.                             <p class="m-0" style="letter-spacing:1px;">
  287.                                 openness
  288.                             </p>
  289.                             <div class="progress mb-2 w-100 my-auto" style="background-color:#90755C;">
  290.                                 <!--stat 6 bar (change width %)-->
  291.                                 <div class="progress-bar" style="width:90%; height:10px; background-color:#d4aaff; border-radius:4px; position:relative;">
  292.                                     <div style="background-color:#886aa8;border-radius:100%;width:4px;height:4px;position:absolute;right:5px;top:2px;"></div>
  293.                                     <div style="background-color:#b58ae2;width:10px;height:10px;position:absolute;right:20px;"></div>
  294.                                 </div>
  295.                             </div>
  296.                         </div>
  297.                     </div>
  298.                     <p class="pt-3">blurb time again! same deal as before with the expanding and the scrolling-- write as much as you like!</p>
  299.                 </div>
  300.                 <!--wormy-->
  301.                 <div class="col" style="
  302.                     max-width:80px;
  303.                     margin-right:15px;
  304.                     margin-top:-20px;
  305.                     background-color:#d4aaff;">
  306.                 </div>
  307.             </div>
  308.             <!--worm header 4-->
  309.             <div style="position:relative;">
  310.                 <div style="height:80px;background-color:#d4aaff;border-radius:50px 0px 50px 0px;margin-right:0px;"></div>
  311.                 <div id="four" class="display-3" style="color:#4E3A64;left:83px;position:absolute;margin-top:-60px;">history</div>
  312.             </div>
  313.             <!-- - - - - -->
  314.             <!--section 4-->
  315.             <!-- - - - - -->
  316.             <div class="row">
  317.                 <!--wormy-->
  318.                 <div class="col" style="
  319.                     max-width:80px;
  320.                     margin-left:15px;
  321.                     margin-top:-20px;
  322.                     background-color:#d4aaff;">
  323.                 </div>
  324.                 <!--box 4-->
  325.                 <div class="col card p-3 m-3" style="max-height:400px;overflow:auto;background-color:#665547;">
  326.                     <h3 style="letter-spacing:1px;">header</h3>
  327.                     <p class="ml-3">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.</p>
  328.                     <h3 style="letter-spacing:1px;">header</h3>
  329.                     <p class="ml-3">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.</p>
  330.                 </div>
  331.             </div>
  332.             <!--worm footer (end)-->
  333.             <div style="position:relative;">
  334.                 <div class="lightpurp" style="height:80px;background-color:#d4aaff;border-radius:0px 50px 50px 50px;margin-right:0px;"></div>
  335.                 <div class="darkpurp" style="position:absolute;width:100px;height:90px;background-color:#b58ae2;border-radius:10px;margin-top:-85px;right:100px;"></div>
  336.             </div>
  337.         </div>
  338.     </div>
  339.     <div id="credit" class="m-2" style="text-align:center;">
  340.         <a title="code by trashguts" data-placement="bottom" data-toggle="tooltip" href="https://toyhou.se/tgCodes"><i class="fa-duotone fa-worm"></i></a>
  341.     </div>
  342. </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!