API tools faq
paste
SparklyLightus

Historian

SparklyLightus
Jan 1st, 2021 (edited)
270
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 8.82 KB | None | 0 0
raw download clone embed print report
  1. <div class="m-2 p-1 card border-0 bg-faded mx-auto col-sm-10 col-lg-7">
  2.     <!-- NAME/TITLE -->
  3.     <h1 class="m-0 ml-1 mt-1 text-secondary text-center">NAME HERE</h1>
  4.    
  5.     <!-- IMAGE - any size will do -->
  6.     <div class="m-1 mx-auto rounded" style="background: url('//via.placeholder.com/800'); background-size: cover; background-position: center; height: 300px; width: 300px;">
  7.         <!-- BUTTON - DON'T EDIT -->
  8.         <a href="#collapse" data-toggle="collapse" class="justify-content-center btn btn-outline-primary border-0" style="margin-top: 256px;">
  9.             <i class="fas fa-user fa-2x"></i>
  10.         </a>
  11.     </div>
  12.    
  13.     <!-- BASICS -->
  14.     <div id="collapse" class="collapse">
  15.         <div class="m-1 card border-0 text-justify">
  16.             <!-- CONTENT -->
  17.             <div class="m-1 row">
  18.                 <!-- LEFT -->
  19.                 <div class="p-0 col-sm-6">
  20.                     <div class="m-1 p-1 card border-0 bg-faded">
  21.                         <p><i class="fas fa-user text-secondary"></i> NAME</p>
  22.                     </div>
  23.                     <div class="m-1 p-1 card border-0 bg-faded">
  24.                         <p><i class="fas fa-calendar text-secondary"></i> AGE</p>
  25.                     </div>
  26.                     <div class="m-1 p-1 card border-0 bg-faded">
  27.                         <p><i class="fas fa-dna text-secondary"></i> RACE</p>
  28.                     </div>
  29.                     <div class="m-1 p-1 card border-0 bg-faded">
  30.                         <p><i class="fas fa-venus-mars text-secondary"></i> GENDER</p>
  31.                     </div>
  32.                     <div class="m-1 p-1 card border-0 bg-faded">
  33.                         <p><i class="fas fa-brain text-secondary"></i> MBTI</p>
  34.                     </div>
  35.                 </div>
  36.                 <!-- RIGHT -->
  37.                 <div class="p-0 col-sm-6">
  38.                     <div class="m-1 p-1 card border-0 bg-faded">
  39.                         <p><i class="fas fa-ruler text-secondary"></i> HEIGHT</p>
  40.                     </div>
  41.                     <div class="m-1 p-1 card border-0 bg-faded">
  42.                         <p><i class="fas fa-home-heart text-secondary"></i> RELATIONSHIP</p>
  43.                     </div>
  44.                     <div class="m-1 p-1 card border-0 bg-faded">
  45.                         <p><i class="fas fa-heart text-secondary"></i> ORIENTATION</p>
  46.                     </div>
  47.                     <div class="m-1 p-1 card border-0 bg-faded">
  48.                         <p><i class="fas fa-calendar-day text-secondary"></i> BIRTHDAY</p>
  49.                     </div>
  50.                     <div class="m-1 p-1 card border-0 bg-faded">
  51.                         <p><i class="fas fa-music text-secondary"></i> <a href="LINK">THEME</a></p>
  52.                     </div>
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     </div>
  57.    
  58.     <!-- QUOTE -->
  59.     <h4 class="m-1 text-secondary text-center font-italic">"QUOTE..."</h4>
  60.    
  61.     <!-- ABOUT -->
  62.     <div class="m-1 card border-0 text-justify overflow-auto" style="height: 350px;">
  63.         <!-- CONTENT -->
  64.         <div class="m-2">
  65.             <h1 class="m-0 ml-1 mt-1 text-secondary">ABOUT</h1>
  66.             <p class="m-1">Write about your character here, this box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sodales urna id nisi cursus semper. Praesent mollis dui eu ipsum maximus venenatis. Suspendisse vel ipsum sem. Curabitur eu commodo sem. Curabitur eu nulla rutrum, pretium ex eget, facilisis ligula. Pellentesque laoreet efficitur pulvinar. Nunc rhoncus, nunc eget commodo lobortis, quam turpis lobortis libero, at ultrices tellus purus maximus dolor.</p>
  67.            
  68.             <h4 class="m-0 ml-1 mt-1 text-secondary">HEADER</h4>
  69.             <p class="m-1">Phasellus facilisis maximus felis, vel pharetra risus gravida nec. Donec mollis vestibulum tortor, non scelerisque lectus facilisis a. Nunc eleifend orci et semper posuere. Cras sed facilisis sem. Donec quis mattis erat, vitae lacinia ex. Curabitur vehicula mi ac convallis luctus. Vestibulum vitae egestas nisl. Nullam eget felis condimentum, condimentum risus in, rhoncus neque. Cras venenatis suscipit urna varius hendrerit. </p>
  70.             <p class="m-1">Mauris pellentesque neque nunc, sed iaculis mi interdum nec. Morbi sodales arcu non scelerisque placerat. Quisque in consectetur massa. Pellentesque eget est ut risus pretium dignissim nec at urna. Duis consectetur tortor a felis congue convallis. Nunc in quam pretium, malesuada erat sit amet, luctus mi. Fusce aliquet eget tortor a viverra. </p>
  71.            
  72.             <h4 class="m-0 ml-1 mt-1 text-secondary">HEADER</h4>
  73.             <p class="m-1">Donec laoreet metus eget nulla interdum mattis. Mauris et magna nibh. Pellentesque mattis, velit sit amet auctor ultricies, est neque tristique nisi, vehicula suscipit neque mauris at nibh. Maecenas in aliquam sapien. Cras in congue odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris nec odio sem. In fermentum porta nisi. </p>
  74.            
  75.             <h4 class="m-0 ml-1 mt-1 text-secondary">TRIVIA</h4>
  76.             <ul>
  77.                 <li>INFO</li>
  78.                 <li>INFO</li>
  79.                 <li>INFO</li>
  80.             </ul>
  81.         </div>
  82.     </div>
  83.    
  84.     <!-- LINKS -->
  85.     <div class="m-1 card border-0">
  86.         <a href="#links" data-toggle="collapse" class="justify-content-center btn btn-outline-primary border-0">
  87.             <i class="fas fa-chevron-down fa-2x"></i>
  88.         </a>
  89.         <!-- CONTENT -->
  90.         <div  style="max-height: 350px; overflow: auto;">
  91.        
  92.         <div id="links" class="collapse">
  93.             <div class="m-1 row">
  94.                 <!-- TO CHANGE THE ICON BEFORE NAME, REPLACE <i class="fas fa-heart"></i> WITH THE FOLLOWING:
  95.                <i class="fas fa-check"></i> - positive | <i class="fas fa-times"></i> - negative | <i class="fas fa-star"></i> - non romantic love -->
  96.                
  97.                 <!-- PERSON -->
  98.                 <div class="p-0 col-sm-6">
  99.                     <div class="m-1 p-2 card border-0 bg-faded">
  100.                         <p class="m-0 text-secondary"><i class="fas fa-heart"></i> <a href="LINK">NAME</a> — RELATIONSHIP</p>
  101.                         <hr class="m-1">
  102.                        
  103.                         <p>Describe relationship. This box will expand. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor laoreet erat. Suspendisse consequat sit amet justo in varius. Curabitur non pellentesque lacus. Etiam ac bibendum mauris.</p>
  104.                     </div>
  105.                 </div>
  106.                 <!-- PERSON -->
  107.                 <div class="p-0 col-sm-6">
  108.                     <div class="m-1 p-2 card border-0 bg-faded">
  109.                         <p class="m-0 text-secondary"><i class="fas fa-heart"></i> <a href="LINK">NAME</a> — RELATIONSHIP</p>
  110.                         <hr class="m-1">
  111.                        
  112.                         <p>Ut dictum lorem eget dui dignissim, ultrices suscipit ex condimentum. Phasellus ac hendrerit leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  113.                     </div>
  114.                 </div>
  115.                 <!-- PERSON -->
  116.                 <div class="p-0 col-sm-6">
  117.                     <div class="m-1 p-2 card border-0 bg-faded">
  118.                         <p class="m-0 text-secondary"><i class="fas fa-heart"></i> <a href="LINK">NAME</a> — RELATIONSHIP</p>
  119.                         <hr class="m-1">
  120.                        
  121.                         <p>Nulla malesuada ornare mauris sit amet efficitur. Donec porttitor scelerisque dapibus. Aenean elit ligula, dapibus ac quam et, dapibus feugiat nibh. Sed cursus et sapien vel vehicula.</p>
  122.                     </div>
  123.                 </div>
  124.                 <!-- PERSON -->
  125.                 <div class="p-0 col-sm-6">
  126.                     <div class="m-1 p-2 card border-0 bg-faded">
  127.                         <p class="m-0 text-secondary"><i class="fas fa-heart"></i> <a href="LINK">NAME</a> — RELATIONSHIP</p>
  128.                         <hr class="m-1">
  129.                        
  130.                         <p>Cras vulputate risus libero, eget suscipit velit pretium id. Aenean feugiat arcu sed tempor aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</p>
  131.                         <p>Curabitur nisi purus, consectetur id velit ut, venenatis faucibus augue. Aliquam dapibus nec velit ut scelerisque.</p>
  132.                     </div>
  133.                 </div>
  134.                
  135.                 <!-- ADD MORE PEOPLE ABOVE HERE -->
  136.             </div>
  137.         </div>
  138.        
  139.         </div>
  140.     </div>
  141. </div>
  142. <!-- CREDIT, DON'T MOVE -->
  143. <div class="text-center">
  144.     <a data-toggle="tooltip" title="SparklyCodes" href="/SparklyCodes"><i class="fal fa-code"></i></a>
  145. </div>
  146.  
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!