API tools faq
paste
SparklyLightus

Lines

SparklyLightus
Feb 19th, 2022 (edited)
431
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.75 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    B21E45 >> ACCENT COLOR
  3. -->
  4. <div class="p-3 container">
  5.     <div class="mx-auto row no-gutters" style="max-width: 900px">
  6.         <!-- ................. IMAGES -->
  7.         <div class="p-1 col-sm-1 order-1">
  8.             <div class="p-3 bg-faded overflow-auto" style="background: url('IMG_URL') center; background-size: cover; height: 100%; min-height: 50px"></div>
  9.         </div>
  10.         <div class="p-1 col-sm-1 order-3">
  11.             <div class="p-3 bg-faded overflow-auto" style="background: url('IMG_URL') center; background-size: cover; height: 100%; min-height: 50px"></div>
  12.         </div>
  13.         <!-- ................. CONTENT -->
  14.         <div class="p-1 col-sm-10 order-2">
  15.             <div class="p-1 bg-faded">
  16.                 <!-- ................... HEADER -->
  17.                 <div class="m-1 px-2 mb-2 row no-gutters" style="border: 2px solid #B21E45">
  18.                     <!-- IMAGE LINK -->
  19.                     <img src="IMG_URL"
  20.                        style="max-height: 140px; max-width: 140px" class="m-1 my-2 col-lg-auto mx-auto">
  21.                     <!-- BASIC INFO -->
  22.                     <div class="p-2 col-lg row no-gutters">
  23.                         <h1 class="col-12 display-4 font-weight-light" style="color: #B21E45">Name</h1>
  24.                        
  25.                         <p class="m-0 p-1 col-sm-6"><span class="px-1 text-white float-right" style="background: #B21E45">FULL NAME</span>
  26.                             Information</p>
  27.                         <p class="m-0 p-1 col-sm-6"><span class="px-1 text-white float-right" style="background: #B21E45">AGE</span>
  28.                             Information</p>
  29.                         <p class="m-0 p-1 col-sm-6"><span class="px-1 text-white float-right" style="background: #B21E45">GENDER</span>
  30.                             Information</p>
  31.                         <p class="m-0 p-1 col-sm-6"><span class="px-1 text-white float-right" style="background: #B21E45">PRONOUNS</span>
  32.                             Information</p>
  33.                         <p class="m-0 p-1 col-sm-6"><span class="px-1 text-white float-right" style="background: #B21E45">ORIENTATION</span>
  34.                             Information</p>
  35.                         <p class="m-0 p-1 col-sm-6"><span class="px-1 text-white float-right" style="background: #B21E45">RACE</span>
  36.                             Information</p>
  37.                     </div>
  38.                 </div>
  39.                 <!-- ................... BIO -->
  40.                 <div class="m-1 p-2" style="border: 2px solid #B21E45">
  41.                     <p>Talk about your character here. This box will expand forever. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce finibus nisl lectus, id accumsan sem tempus ac. Sed quis porta tellus, sed vehicula justo. Aliquam ut tellus rhoncus, tincidunt felis vel, dignissim ante. Morbi odio neque, laoreet in ipsum ac, accumsan ornare magna. Donec suscipit neque non nibh lobortis, ut fermentum ex tincidunt. Quisque eu placerat erat, nec gravida libero. Sed dignissim tortor sed faucibus elementum. Etiam eu purus gravida, egestas nisi at, sagittis erat. In vel dui porttitor, vestibulum est maximus, consequat velit. Quisque convallis nec mauris non volutpat. Fusce leo metus, auctor tincidunt leo et, tristique laoreet lacus. </p>
  42.                 </div>
  43.                 <!-- ................... LINKS -->
  44.                 <div class="m-1 mt-2 overflow-auto" style="max-height: 350px; border: 2px solid #B21E45">
  45.                     <!-- HOW TO ADD MORE PEOPLE:
  46.                        1. Copy + paste person row <div>
  47.                        2. At the INFO comment mark, search for id="[LETTER]" and href="#[LETTER]" (ie. A, B)
  48.                        3. Change [LETTER] to a fresh string of letters/numbers. It cannot start with a number, and must be consistent on both instances
  49.                        4. done :)
  50.                    -->
  51.  
  52.                     <!-- PERSON -->
  53.                     <div class="m-1 row no-gutters">
  54.                         <!-- IMAGE LINK -->
  55.                         <img src="IMG_URL" style="max-height: 120px; max-width: 120px;" class="m-1 col-md-auto">
  56.                         <!-- INFORMATION -->
  57.                         <div class="p-2 col-md">
  58.                             <h1 class="mb-0"><a href="LINK">Name</a></h1> <!-- CHARACTER LINK -->
  59.                             <p class="mb-0 text-right">
  60.                                 <span class="float-left">Relationship | Gender | Age</span>
  61.                                 <!-- HEARTS - CHANGE SOLID TO DUOTONE FOR A FADED HEART (and the other way around) -->
  62.                                 <i class="fa-solid fa-heart"></i>
  63.                                 <i class="fa-solid fa-heart"></i>
  64.                                 <i class="fa-solid fa-heart"></i>
  65.                                 <i class="fa-solid fa-heart"></i>
  66.                                 <i class="fa-solid fa-heart"></i>
  67.                             </p>
  68.                             <!-- INFO - IDS FOR ADDING CHARACTERS ARE HERE (href="#A" and id="A")-->
  69.                             <a class="mt-2 p-1 w-100 btn btn-primary" data-toggle="collapse" href="#A"> <i class="fa-solid fa-chevron-down"></i> </a>
  70.                             <div id="A" class="p-1 collapse">
  71.                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie volutpat urna non fermentum. Nullam pellentesque velit at arcu efficitur porttitor. Nullam ac mi odio. Nunc vehicula massa ac malesuada tristique. Nulla dolor erat, sollicitudin vitae accumsan rhoncus, luctus ac turpis.</p>
  72.                                 <p>Integer tincidunt sapien id interdum efficitur. Duis purus lectus, commodo sit amet nulla vel, porta faucibus tortor. Quisque vulputate lorem at augue scelerisque, eget varius mauris facilisis. Mauris mi metus, aliquet vitae convallis eget, laoreet eget leo. </p>
  73.                             </div>
  74.                         </div>
  75.                     </div>
  76.                     <!-- PERSON -->
  77.                     <div class="m-1 row no-gutters">
  78.                         <!-- IMAGE LINK -->
  79.                         <img src="IMG_URL" style="max-height: 120px; max-width: 120px;" class="m-1 col-md-auto">
  80.                         <!-- INFORMATION -->
  81.                         <div class="p-2 col-md">
  82.                             <h1 class="mb-0"><a href="LINK">Name</a></h1> <!-- CHARACTER LINK -->
  83.                             <p class="text-right">
  84.                                 <span class="float-left">Relationship | Gender | Age</span>
  85.                                 <!-- HEARTS - CHANGE SOLID TO DUOTONE FOR A FADED HEART (and the other way around) -->
  86.                                 <i class="fa-solid fa-heart"></i>
  87.                                 <i class="fa-solid fa-heart"></i>
  88.                                 <i class="fa-solid fa-heart"></i>
  89.                                 <i class="fa-solid fa-heart"></i>
  90.                                 <i class="fa-duotone fa-heart"></i>
  91.                             </p>
  92.                             <!-- INFO - IDS FOR ADDING CHARACTERS ARE HERE (href="#B" and id="B")-->
  93.                             <a class="mt-2 p-1 w-100 btn btn-primary" data-toggle="collapse" href="#B"> <i class="fa-solid fa-chevron-down"></i> </a>
  94.                             <div id="B" class="p-1 collapse">
  95.                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie volutpat urna non fermentum. Nullam pellentesque velit at arcu efficitur porttitor. Nullam ac mi odio. Nunc vehicula massa ac malesuada tristique. Nulla dolor erat, sollicitudin vitae accumsan rhoncus, luctus ac turpis.</p>
  96.                                 <p>Integer tincidunt sapien id interdum efficitur. Duis purus lectus, commodo sit amet nulla vel, porta faucibus tortor. Quisque vulputate lorem at augue scelerisque, eget varius mauris facilisis. Mauris mi metus, aliquet vitae convallis eget, laoreet eget leo. </p>
  97.                             </div>
  98.                         </div>
  99.                     </div>
  100.                     <!-- PERSON -->
  101.                     <div class="m-1 row no-gutters">
  102.                         <!-- IMAGE LINK -->
  103.                         <img src="IMG_URL" style="max-height: 120px; max-width: 120px;" class="m-1 col-md-auto">
  104.                         <!-- INFORMATION -->
  105.                         <div class="p-2 col-md">
  106.                             <h1 class="mb-0"><a href="LINK">Name</a></h1> <!-- CHARACTER LINK -->
  107.                             <p class="text-right">
  108.                                 <span class="float-left">Relationship | Gender | Age</span>
  109.                                 <!-- HEARTS - CHANGE SOLID TO DUOTONE FOR A FADED HEART (and the other way around) -->
  110.                                 <i class="fa-solid fa-heart"></i>
  111.                                 <i class="fa-solid fa-heart"></i>
  112.                                 <i class="fa-solid fa-heart"></i>
  113.                                 <i class="fa-duotone fa-heart"></i>
  114.                                 <i class="fa-duotone fa-heart"></i>
  115.                             </p>
  116.                             <!-- INFO - IDS FOR ADDING CHARACTERS ARE HERE (href="#C" and id="C")-->
  117.                             <a class="mt-2 p-1 w-100 btn btn-primary" data-toggle="collapse" href="#C"> <i class="fa-solid fa-chevron-down"></i> </a>
  118.                             <div id="C" class="p-1 collapse">
  119.                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie volutpat urna non fermentum. Nullam pellentesque velit at arcu efficitur porttitor. Nullam ac mi odio. Nunc vehicula massa ac malesuada tristique. Nulla dolor erat, sollicitudin vitae accumsan rhoncus, luctus ac turpis.</p>
  120.                                 <p>Integer tincidunt sapien id interdum efficitur. Duis purus lectus, commodo sit amet nulla vel, porta faucibus tortor. Quisque vulputate lorem at augue scelerisque, eget varius mauris facilisis. Mauris mi metus, aliquet vitae convallis eget, laoreet eget leo. </p>
  121.                             </div>
  122.                         </div>
  123.                     </div>
  124.                     <!-- PERSON -->
  125.                     <div class="m-1 row no-gutters">
  126.                         <!-- IMAGE LINK -->
  127.                         <img src="IMG_URL" style="max-height: 120px; max-width: 120px;" class="m-1 col-md-auto">
  128.                         <!-- INFORMATION -->
  129.                         <div class="p-2 col-md">
  130.                             <h1 class="mb-0"><a href="LINK">Name</a></h1> <!-- CHARACTER LINK -->
  131.                             <p class="text-right">
  132.                                 <span class="float-left">Relationship | Gender | Age</span>
  133.                                 <!-- HEARTS - CHANGE SOLID TO DUOTONE FOR A FADED HEART (and the other way around) -->
  134.                                 <i class="fa-solid fa-heart"></i>
  135.                                 <i class="fa-solid fa-heart"></i>
  136.                                 <i class="fa-duotone fa-heart"></i>
  137.                                 <i class="fa-duotone fa-heart"></i>
  138.                                 <i class="fa-duotone fa-heart"></i>
  139.                             </p>
  140.                             <!-- INFO - IDS FOR ADDING CHARACTERS ARE HERE (href="#D" and id="D")-->
  141.                             <a class="mt-2 p-1 w-100 btn btn-primary" data-toggle="collapse" href="#D"> <i class="fa-solid fa-chevron-down"></i> </a>
  142.                             <div id="D" class="p-1 collapse">
  143.                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie volutpat urna non fermentum. Nullam pellentesque velit at arcu efficitur porttitor. Nullam ac mi odio. Nunc vehicula massa ac malesuada tristique. Nulla dolor erat, sollicitudin vitae accumsan rhoncus, luctus ac turpis.</p>
  144.                                 <p>Integer tincidunt sapien id interdum efficitur. Duis purus lectus, commodo sit amet nulla vel, porta faucibus tortor. Quisque vulputate lorem at augue scelerisque, eget varius mauris facilisis. Mauris mi metus, aliquet vitae convallis eget, laoreet eget leo. </p>
  145.                             </div>
  146.                         </div>
  147.                     </div>
  148.                     <!-- PERSON -->
  149.                     <div class="m-1 row no-gutters">
  150.                         <!-- IMAGE LINK -->
  151.                         <img src="IMG_URL" style="max-height: 120px; max-width: 120px;" class="m-1 col-md-auto">
  152.                         <!-- INFORMATION -->
  153.                         <div class="p-2 col-md">
  154.                             <h1 class="mb-0"><a href="LINK">Name</a></h1> <!-- CHARACTER LINK -->
  155.                             <p class="text-right">
  156.                                 <span class="float-left">Relationship | Gender | Age</span>
  157.                                 <!-- HEARTS - CHANGE SOLID TO DUOTONE FOR A FADED HEART (and the other way around) -->
  158.                                 <i class="fa-solid fa-heart"></i>
  159.                                 <i class="fa-duotone fa-heart"></i>
  160.                                 <i class="fa-duotone fa-heart"></i>
  161.                                 <i class="fa-duotone fa-heart"></i>
  162.                                 <i class="fa-duotone fa-heart"></i>
  163.                             </p>
  164.                             <!-- INFO - IDS FOR ADDING CHARACTERS ARE HERE (href="#E" and id="E")-->
  165.                             <a class="mt-2 p-1 w-100 btn btn-primary" data-toggle="collapse" href="#E"> <i class="fa-solid fa-chevron-down"></i> </a>
  166.                             <div id="E" class="p-1 collapse">
  167.                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie volutpat urna non fermentum. Nullam pellentesque velit at arcu efficitur porttitor. Nullam ac mi odio. Nunc vehicula massa ac malesuada tristique. Nulla dolor erat, sollicitudin vitae accumsan rhoncus, luctus ac turpis.</p>
  168.                                 <p>Integer tincidunt sapien id interdum efficitur. Duis purus lectus, commodo sit amet nulla vel, porta faucibus tortor. Quisque vulputate lorem at augue scelerisque, eget varius mauris facilisis. Mauris mi metus, aliquet vitae convallis eget, laoreet eget leo. </p>
  169.                             </div>
  170.                         </div>
  171.                     </div>
  172.                     <!-- PERSON -->
  173.                     <div class="m-1 row no-gutters">
  174.                         <!-- IMAGE LINK -->
  175.                         <img src="IMG_URL" style="max-height: 120px; max-width: 120px;" class="m-1 col-md-auto">
  176.                         <!-- INFORMATION -->
  177.                         <div class="p-2 col-md">
  178.                             <h1 class="mb-0"><a href="LINK">Name</a></h1> <!-- CHARACTER LINK -->
  179.                             <p class="text-right">
  180.                                 <span class="float-left">Relationship | Gender | Age</span>
  181.                                 <!-- HEARTS - CHANGE SOLID TO DUOTONE FOR A FADED HEART (and the other way around) -->
  182.                                 <i class="fa-duotone fa-heart"></i>
  183.                                 <i class="fa-duotone fa-heart"></i>
  184.                                 <i class="fa-duotone fa-heart"></i>
  185.                                 <i class="fa-duotone fa-heart"></i>
  186.                                 <i class="fa-duotone fa-heart"></i>
  187.                             </p>
  188.                             <!-- INFO - IDS FOR ADDING CHARACTERS ARE HERE (href="#F" and id="F")-->
  189.                             <a class="mt-2 p-1 w-100 btn btn-primary" data-toggle="collapse" href="#F"> <i class="fa-solid fa-chevron-down"></i> </a>
  190.                             <div id="F" class="p-1 collapse">
  191.                                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie volutpat urna non fermentum. Nullam pellentesque velit at arcu efficitur porttitor. Nullam ac mi odio. Nunc vehicula massa ac malesuada tristique. Nulla dolor erat, sollicitudin vitae accumsan rhoncus, luctus ac turpis.</p>
  192.                                 <p>Integer tincidunt sapien id interdum efficitur. Duis purus lectus, commodo sit amet nulla vel, porta faucibus tortor. Quisque vulputate lorem at augue scelerisque, eget varius mauris facilisis. Mauris mi metus, aliquet vitae convallis eget, laoreet eget leo. </p>
  193.                             </div>
  194.                         </div>
  195.                     </div>
  196.                     <!-- END PEOPLE -->
  197.                 </div>
  198.             </div>
  199.         </div>
  200.         <!-- ................. CREDITS - NO TOUCHY -->
  201.         <div class="p-0 col-12 order-4 text-center">
  202.             <a href="/SparklyCodes" class="tooltipster" title="HTML by SparklyCodes" style="color: #B21E45"><i class="fa-solid fa-code"></i></a>
  203.         </div>
  204.     </div>
  205. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
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!