API tools faq
paste
SparklyLightus

No Scroll

SparklyLightus
Nov 7th, 2020 (edited)
689
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.69 KB | None | 0 0
raw download clone embed print report
  1. <div class="m-2">
  2.     <div class="card bg-faded rounded-0 m-1 p-1 col-lg" style="border-style: solid; border-width: 6px;">
  3.         <!-- BASICS -->
  4.         <div class="row m-1">
  5.             <!-- INFO COL 1 -->
  6.             <div class="col-lg card rounded-0 p-0 m-1 my-auto" style="border-style: solid; border-width: 3px;">
  7.                 <ul class="list-group list-group-flush m-0 w-100">
  8.                     <li class="list-group-item p-2 d-flex justify-content-between border-0">
  9.                         <span class="text-secondary">FULL NAME</span>
  10.                         <span>INFO</span></li>
  11.                     <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  12.                         <span class="text-secondary">AGE</span>
  13.                         <span>INFO</span></li>
  14.                     <li class="list-group-item p-2 d-flex justify-content-between border-0">
  15.                         <span class="text-secondary">GENDER</span>
  16.                         <span>INFO</span></li>
  17.                     <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  18.                         <span class="text-secondary">RACE</span>
  19.                         <span>INFO</span></li>
  20.                     <li class="list-group-item p-2 d-flex justify-content-between border-0">
  21.                         <span class="text-secondary">ORIENTATION</span>
  22.                         <span>INFO</span></li>
  23.                     <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  24.                         <span class="text-secondary">STATUS</span>
  25.                         <span>INFO</span></li>
  26.                 </ul>
  27.             </div>
  28.             <!-- IMAGE / THEME -->
  29.             <div class="col-lg-auto card rounded-0 p-1 m-1" style="border-style: solid; border-width: 3px;">
  30.                 <div class="text-center font-weight-bold">
  31.                     <h3 class="text-secondary font-weight-light m-">
  32.                         <i class="fal fa-star"></i> NAME <i class="fal fa-star"></i>
  33.                     </h3>
  34.                     <!-- img - use a square image -->
  35.                     <img class="rounded-circle my-auto bg-faded" src="//via.placeholder.com/200x200" style="width: 200px; height: 200px;"><br>
  36.                     <!-- THEME -->
  37.                     <a href="SONGLINK" target="_blank">
  38.                         <i class="fas fa-music"></i> SONGNAME
  39.                     </a>
  40.                 </div>
  41.             </div>
  42.             <!-- INFO COL 2 -->
  43.             <div class="col-lg card rounded-0 p-0 m-1 my-auto" style="border-style: solid; border-width: 3px;">
  44.                 <ul class="list-group list-group-flush m-0 w-100">
  45.                     <li class="list-group-item p-2 d-flex justify-content-between border-0">
  46.                         <span class="text-secondary">MBTI</span>
  47.                         <span>INFO</span></li>
  48.                     <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  49.                         <span class="text-secondary">HEIGHT</span>
  50.                         <span>INFO</span></li>
  51.                     <li class="list-group-item p-2 d-flex justify-content-between border-0">
  52.                         <span class="text-secondary">OCCUPATION</span>
  53.                         <span>INFO</span></li>
  54.                     <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  55.                         <span class="text-secondary">REL STATUS</span>
  56.                         <span>INFO</span></li>
  57.                     <li class="list-group-item p-2 d-flex justify-content-between border-0">
  58.                         <span class="text-secondary">ORIGIN</span>
  59.                         <span>INFO</span></li>
  60.                     <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  61.                         <span class="text-secondary">DESIGNER</span>
  62.                         <span>INFO</span></li>
  63.                 </ul>
  64.             </div>
  65.         </div>
  66.         <!-- TEXT -->
  67.         <div class="row m-1">
  68.             <!-- BOX -->
  69.             <div class="col-lg card rounded-0 p-1 m-1" style="border-style: solid; border-width: 3px;">
  70.                 <!-- OVERVIEW -->
  71.                 <div class="m-2">
  72.                     <h3 class="text-secondary font-weight-light"> <i class="fal fa-eye"></i> Overview </h3><hr class="m-0 bg-secondary">
  73.                     <p class="mt-2">Introduce your character here. This box will not scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit, nisi et placerat feugiat, dolor purus imperdiet quam, at ultricies arcu diam in mi. Cras imperdiet ut sapien at consectetur. Sed ultrices ligula vitae urna malesuada, quis elementum tortor iaculis. Maecenas ut lacus porttitor ligula pulvinar gravida.</p>
  74.                 </div>
  75.                 <!-- PERSONALITY -->
  76.                 <div class="m-2">
  77.                     <h3 class="text-secondary font-weight-light"> <i class="fal fa-comment"></i> Personality </h3><hr class="m-0 bg-secondary">
  78.                     <p class="mt-2">Etiam id efficitur justo, ut aliquam elit. Donec non justo congue, elementum nulla eu, condimentum ante. Sed et risus convallis, lacinia metus quis, auctor mauris. </p>
  79.                     <p class="mt-2">Integer eleifend hendrerit lectus at posuere. Suspendisse vitae sem tincidunt tellus accumsan dignissim at et dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet faucibus mauris. Donec consequat mattis velit, a posuere lectus rhoncus eget. Integer volutpat egestas arcu, vitae sollicitudin odio venenatis non. Donec pellentesque, tortor eu lacinia tincidunt, tellus nulla maximus tellus, sed hendrerit ipsum orci et neque. Quisque sit amet orci nisl. Fusce vulputate eget lacus id vestibulum. Integer porttitor, ante quis venenatis dapibus, neque lectus pretium odio, et interdum orci nisi eu ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc mattis quis nisl eu luctus. </p>
  80.                 </div>
  81.                 <!-- STORY -->
  82.                 <div class="m-2">
  83.                     <h3 class="text-secondary font-weight-light"> <i class="fal fa-books"></i> Story </h3><hr class="m-0 bg-secondary">
  84.                     <p class="mt-2">Morbi tincidunt sem at urna ullamcorper rutrum. Nam maximus orci nec turpis condimentum, vel ultrices risus interdum. Sed eu venenatis ante, in porta urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam dapibus dapibus massa, non rhoncus ligula scelerisque non. Aenean semper neque ut purus vulputate, eget luctus ligula sodales. Nulla facilisi. Morbi porta quam in iaculis tristique. Morbi quis pellentesque lectus. </p>
  85.                     <p class="mt-2">Cras sit amet pellentesque dolor. Ut dapibus ut mauris vitae tristique. Fusce ante est, finibus sit amet sem vitae, ultricies consectetur erat. Vestibulum velit lectus, aliquam a sodales ut, luctus sit amet felis.</p>
  86.                     <p class="mt-2">Vivamus sollicitudin neque eu arcu eleifend vehicula. Donec et consequat est. Ut lacinia non dolor sit amet ornare. Nulla aliquam eu augue at pretium. Quisque a leo sodales, feugiat nunc non, dignissim ipsum. Maecenas accumsan mauris sit amet neque viverra lobortis. Phasellus quis metus ut neque venenatis mollis. Suspendisse quam purus, cursus et nibh facilisis, commodo finibus lacus. Donec pulvinar pretium odio vitae lacinia. Ut in est non ante sodales maximus. In eget bibendum massa.</p>
  87.                 </div>
  88.             </div>
  89.             <!-- TRIVIA -->
  90.             <div class="col-lg-3 card rounded-0 p-1 m-1" style="border-style: solid; border-width: 3px;">
  91.                 <div class="m-2">
  92.                     <h3 class="text-secondary font-weight-light"> <i class="fal fa-star"></i> Trivia </h3><hr class="m-0 bg-secondary">
  93.                    
  94.                     <ul class="list-unstyled mt-2">
  95.                         <li><i class="fal fa-star"></i> Put some trivia here. This box does not scroll. Sed nec nunc ut ligula luctus laoreet.</li>
  96.                         <li><i class="fal fa-star"></i> Aliquam arcu felis, venenatis a ligula nec, euismod fermentum leo.</li>
  97.                         <li><i class="fal fa-star"></i> Duis quis congue ex. In ut auctor massa. Nam semper ullamcorper tempor. </li>
  98.                         <li><i class="fal fa-star"></i> Pellentesque varius, sapien et malesuada maximus, magna tortor varius dui, sed varius lorem libero eget risus. Aliquam erat volutpat. Aliquam vel pharetra dolor. Etiam eu diam quis nisl molestie mollis. </li>
  99.                         <li><i class="fal fa-star"></i> In hac habitasse platea dictumst. Nullam ut mollis dolor, eu sagittis felis. Sed blandit egestas mauris, eu ornare ante viverra eu. Phasellus lobortis metus tincidunt, laoreet tellus id, pharetra nulla. Suspendisse tristique pharetra risus, eu suscipit turpis posuere non. Suspendisse tempus eget nulla vitae aliquam. Proin eros arcu, bibendum non aliquam vitae, tristique at sem. </li>
  100.                     </ul>
  101.                 </div>
  102.             </div>
  103.         </div>
  104.         <!-- RELATIONSHIPS -->
  105.         <div class="row m-1">
  106.             <!-- IMAGE - width will always be 220px and other widths will adjust - use a vertical/portrait image here! -->
  107.             <div class="col-lg-auto p-0 justify-content-center">
  108.                 <div class="card rounded-0 my-auto p-0 m-1" style="border-style: solid; border-width: 3px;">
  109.                     <img src="https://via.placeholder.com/250x450" style="width: 220px;">
  110.                 </div>
  111.             </div>
  112.             <!-- RELATIONSHIPS -->
  113.             <div class="col-lg card rounded-0 p-2 m-1" style="border-style: solid; border-width: 3px;">
  114.                 <h3 class="text-secondary font-weight-light"> <i class="fal fa-link"></i> Relationships </h3><hr class="m-0 bg-secondary">
  115.                 <!-- RELATIONSHIP ICON GUIDE:
  116.                    <i class="fas fa-heart"></i> - romantic love
  117.                    <i class="fas fa-star"></i> - non-romantic love
  118.                    <i class="fas fa-check"></i> - positive
  119.                    <i class="fas fa-times"></i> - negative-->
  120.                
  121.                 <!-- PERSON 1 -->
  122.                 <div class="row bg-faded m-1 p-0">
  123.                     <!-- IMAGE -->
  124.                     <div class="col-lg-auto card rounded-0 m-1 p-0" style="width: 150px; height: 150px;">
  125.                         <img class="mx-auto" src="https://via.placeholder.com/200x200"><br>
  126.                     </div>
  127.                     <!-- TEXT -->
  128.                     <div class="col-lg m-1 p-1 text-justify">
  129.                         <p class="text-uppercase mb-0 mt-0">
  130.                             <a href="LINK">NAME</a>
  131.                             <span class="text-secondary mt-2"> <i class="fas fa-heart"></i> RELATIONSHIP </span>
  132.                         </p>
  133.                         <p>This box will expand with text. Donec vestibulum, magna et sagittis viverra, sem felis venenatis sapien, sed rutrum elit enim in lacus. Nulla porttitor felis non molestie lacinia. In ac sollicitudin nunc. Pellentesque tincidunt pretium arcu, non faucibus urna bibendum eget. Ut ante nibh, iaculis sit amet euismod id, maximus accumsan nisl. Aliquam varius, augue ac ornare tristique, mi tellus lobortis enim, a interdum purus massa quis elit. Maecenas accumsan et metus eu sollicitudin. Donec tempus dapibus est sit amet dictum. Vestibulum pharetra imperdiet efficitur. Aenean gravida dignissim augue in vestibulum. </p>
  134.                     </div>
  135.                 </div>
  136.                 <!-- PERSON 2 -->
  137.                 <div class="row bg-faded m-1 p-0">
  138.                     <!-- IMAGE -->
  139.                     <div class="col-lg-auto card rounded-0 m-1 p-0" style="width: 150px; height: 150px;">
  140.                         <img class="mx-auto" src="https://via.placeholder.com/200x200"><br>
  141.                     </div>
  142.                     <!-- TEXT -->
  143.                     <div class="col-lg m-1 p-1 text-justify">
  144.                         <p class="text-uppercase mb-0 mt-0">
  145.                             <a href="LINK">NAME</a>
  146.                             <span class="text-secondary mt-2"> <i class="fas fa-heart"></i> RELATIONSHIP </span>
  147.                         </p>
  148.                         <p>This box will expand with text. Donec vestibulum, magna et sagittis viverra, sem felis venenatis sapien, sed rutrum elit enim in lacus. Nulla porttitor felis non molestie lacinia. In ac sollicitudin nunc. Pellentesque tincidunt pretium arcu, non faucibus urna bibendum eget. Ut ante nibh, iaculis sit amet euismod id, maximus accumsan nisl. Aliquam varius, augue ac ornare tristique, mi tellus lobortis enim, a interdum purus massa quis elit. Maecenas accumsan et metus eu sollicitudin. Donec tempus dapibus est sit amet dictum. Vestibulum pharetra imperdiet efficitur. Aenean gravida dignissim augue in vestibulum. </p>
  149.                     </div>
  150.                 </div>
  151.                 <!-- PERSON 3 -->
  152.                 <div class="row bg-faded m-1 p-0">
  153.                     <!-- IMAGE -->
  154.                     <div class="col-lg-auto card rounded-0 m-1 p-0" style="width: 150px; height: 150px;">
  155.                         <img class="mx-auto" src="https://via.placeholder.com/200x200"><br>
  156.                     </div>
  157.                     <!-- TEXT -->
  158.                     <div class="col-lg m-1 p-1 text-justify">
  159.                         <p class="text-uppercase mb-0 mt-0">
  160.                             <a href="LINK">NAME</a>
  161.                             <span class="text-secondary mt-2"> <i class="fas fa-heart"></i> RELATIONSHIP </span>
  162.                         </p>
  163.                         <p>This box will expand with text. Donec vestibulum, magna et sagittis viverra, sem felis venenatis sapien, sed rutrum elit enim in lacus. Nulla porttitor felis non molestie lacinia. In ac sollicitudin nunc. Pellentesque tincidunt pretium arcu, non faucibus urna bibendum eget. Ut ante nibh, iaculis sit amet euismod id, maximus accumsan nisl. Aliquam varius, augue ac ornare tristique, mi tellus lobortis enim, a interdum purus massa quis elit. Maecenas accumsan et metus eu sollicitudin. Donec tempus dapibus est sit amet dictum. Vestibulum pharetra imperdiet efficitur. Aenean gravida dignissim augue in vestibulum. </p>
  164.                     </div>
  165.                 </div>
  166.                 <!-- ADD MORE PEOPLE ABOVE HERE -->
  167.             </div>
  168.         </div>
  169.         <!-- END CARD -->
  170.     </div>
  171.     <!-- CREDIT, DON'T MOVE -->
  172.     <div class="text-center m-1">
  173.         <a class="btn btn-outline-primary p-1 rounded-0" data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes">
  174.             <i class="fa fa-code"></i>
  175.         </a>
  176.     </div>
  177. </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!