API tools faq
paste
SparklyLightus

Double

SparklyLightus
Sep 30th, 2020 (edited)
247
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 28.57 KB | None | 0 0
raw download clone embed print report
  1. <!-- CHARACTER 1: #000FFF CHARACTER 2: #FFF000 -->
  2. <div class="row m-1">
  3.     <!--CHARACTER 1 -->
  4.     <div class="col-lg m-1">
  5.         <!-- BASICS -->
  6.         <div class="card border-0 rounded-0 bg-faded p-1">
  7.             <!-- HEADER -->
  8.             <div class="row p-1">
  9.                 <div class="col-lg-4 text-center"><img src="//via.placeholder.com/200x200" height="200px" width="200px"></div>
  10.                 <div class="col-lg-7 my-auto mx-auto text-left text-uppercase" style="font-size: 20px; color: #000FFF;">
  11.                     <!-- put info below -->
  12.                     <i class="far fa-pen"></i> Name1
  13.                     <hr class="m-0">
  14.                     <span style="font-size: 14px;">
  15.                         <i class="far fa-pencil"></i> Alias •
  16.                         <i class="far fa-comment-dots"></i> pronouns •
  17.                         <a href="SONGLINK"><i class="far fa-music"></i> Theme</a>
  18.                     </span>
  19.                     <span class="justify-content-end mt-1" style="font-size: 14px;">
  20.                         <!-- NAV BUTTONS -->
  21.                         <ul class="nav nav-pills m-2 p-1 text-center">
  22.                             <li class="nav-item"><a data-toggle="tab" href="#basics1" role="tab" class="nav-link active btn btn-secondary p-2 m-1" style="width: 75px;"> <i class="far fa-user-edit"></i></a></li>
  23.                             <li class="nav-item"><a data-toggle="tab" href="#tastes1" role="tab" class="nav-link btn btn-secondary p-2 m-1" style="width: 75px;"> <i class="far fa-user-plus"></i></a></li>
  24.                         </ul>
  25.                     </span>
  26.                 </div>
  27.             </div>
  28.             <!-- COLLAPSABLE TABS -->
  29.             <div class="card border-0 rounded-0 m-1">
  30.                 <!-- NAV CONTENT -->
  31.                 <div class="tab-content">
  32.                     <!-- BASICS -->
  33.                     <div class="tab-pane fade show active" id="basics1">
  34.                         <ul class="list-group list-group-flush" style="height: 220px; overflow: auto;">
  35.                             <li class="list-group-item justify-content-between p-1 pt-2">
  36.                                 <div class="text-secondary"><i class="far fa-birthday-cake"></i> Age</div>
  37.                                 <div>Lorem ipsum dolor sit amet</div>
  38.                             </li>
  39.                             <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  40.                                 <div class="text-secondary"><i class="far fa-restroom"></i> Gender</div>
  41.                                 <div>Lorem ipsum dolor sit amet</div>
  42.                             </li>
  43.                             <li class="list-group-item border-0 justify-content-between p-1">
  44.                                 <div class="text-secondary"><i class="far fa-users"></i> Race</div>
  45.                                 <div>Lorem ipsum dolor sit amet</div>
  46.                             </li>
  47.                             <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  48.                                 <div class="text-secondary"><i class="far fa-cross"></i> Status</div>
  49.                                 <div>Lorem ipsum dolor sit amet</div>
  50.                             </li>
  51.                             <li class="list-group-item border-0 justify-content-between p-1 pb-2">
  52.                                 <div class="text-secondary"><i class="far fa-rings-wedding"></i> Rel. Status</div>
  53.                                 <div>Lorem ipsum dolor sit amet</div>
  54.                             </li>
  55.                             <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  56.                                 <div class="text-secondary"><i class="far fa-user-clock"></i> Occupation</div>
  57.                                 <div>Lorem ipsum dolor sit amet</div>
  58.                             </li>
  59.                             <li class="list-group-item border-0 justify-content-between p-1">
  60.                                 <div class="text-secondary"><i class="far fa-heart"></i> Orientation</div>
  61.                                 <div>Lorem ipsum dolor sit amet</div>
  62.                             </li>
  63.                             <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  64.                                 <div class="text-secondary"><i class="far fa-brain"></i> MBTI</div>
  65.                                 <div>Lorem ipsum dolor sit amet</div>
  66.                             </li>
  67.                             <li class="list-group-item border-0 justify-content-between p-1 pb-2">
  68.                                 <div class="text-secondary"><i class="far fa-sort-alt"></i> Height</div>
  69.                                 <div>Lorem ipsum dolor sit amet</div>
  70.                             </li>
  71.                         </ul>
  72.                     </div>
  73.                     <!-- TASTES -->
  74.                     <div class="tab-pane fade" id="tastes1">
  75.                         <div class="row" style="height: 220px; overflow: auto; width: 103%">
  76.                             <!-- LIKES -->
  77.                             <ul class="col-lg list-group list-group-flush">
  78.                                 <li class="list-group-item justify-content-between align-items-center p-2">
  79.                                     <i class="text-success far fa-plus-circle"></i>
  80.                                     <div>Lorem ipsum dolor sit amet</div>
  81.                                 </li>
  82.                                 <li class="list-group-item justify-content-between align-items-center p-2">
  83.                                     <i class="text-success far fa-plus-circle"></i>
  84.                                     <div>Lorem ipsum dolor sit amet</div>
  85.                                 </li>
  86.                                 <li class="list-group-item justify-content-between align-items-center p-2">
  87.                                     <i class="text-success far fa-plus-circle"></i>
  88.                                     <div>Lorem ipsum dolor sit amet</div>
  89.                                 </li>
  90.                                 <li class="list-group-item justify-content-between align-items-center p-2 border-bottom-0">
  91.                                     <i class="text-success far fa-plus-circle"></i>
  92.                                     <div>Lorem ipsum dolor sit amet</div>
  93.                                 </li>
  94.                             </ul>
  95.                             <!-- DISLIKES -->
  96.                             <ul class="col-lg list-group list-group-flush">
  97.                                 <li class="list-group-item justify-content-between align-items-center p-2 border-top-0">
  98.                                     <i class="text-danger far fa-minus-circle"></i>
  99.                                     <div>Lorem ipsum dolor sit amet</div>
  100.                                 </li>
  101.                                 <li class="list-group-item justify-content-between align-items-center p-2">
  102.                                     <i class="text-danger far fa-minus-circle"></i>
  103.                                     <div>Lorem ipsum dolor sit amet</div>
  104.                                 </li>
  105.                                 <li class="list-group-item justify-content-between align-items-center p-2">
  106.                                     <i class="text-danger far fa-minus-circle"></i>
  107.                                     <div>Lorem ipsum dolor sit amet</div>
  108.                                 </li>
  109.                                 <li class="list-group-item justify-content-between align-items-center p-2">
  110.                                     <i class="text-danger far fa-minus-circle"></i>
  111.                                     <div>Lorem ipsum dolor sit amet</div>
  112.                                 </li>
  113.                             </ul>
  114.                         </div>
  115.                     </div>
  116.                 </div>
  117.                 <!-- end nav content -->
  118.             </div>
  119.         </div>
  120.         <!-- BIOGRAPHY -->
  121.         <div class="card border-0 rounded-0 bg-faded p-1 mt-1">
  122.             <!-- HEADER -->
  123.             <div class="row p-1">
  124.                 <span class="mx-auto my-auto text-uppercase p-1" style="font-size: 20px; color: #000FFF;">
  125.                     <i class="far fa-books"></i> Biography
  126.                 </span>
  127.             </div>
  128.             <!-- CONTENT -->
  129.             <div class="card border-0 rounded-0 p-2 m-1 text-left" style="height: 250px; overflow: auto;">
  130.                 <!-- OVERVIEW -->
  131.                 <h4 class="text-secondary">Overview</h4>
  132.                 <p>This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit, nunc in porta luctus, leo turpis varius nunc, lacinia porttitor justo felis nec sapien. Proin nec augue quis mi laoreet egestas et tincidunt ante. Duis accumsan sodales dui, eu placerat arcu sodales eget. Aenean pulvinar, mauris a viverra rhoncus, nisi est laoreet mi, vitae cursus est libero vel libero. Aliquam a ex lorem. Vestibulum a nisi quam. Cras eros justo, consequat sit amet lacus a, euismod fringilla turpis.</p>
  133.                 <!-- PERSONALITY -->
  134.                 <h4 class="text-secondary">Personality</h4>
  135.                 <p>Maecenas commodo quam id tempus porta. Praesent volutpat lobortis mattis. Suspendisse libero arcu, tincidunt vitae turpis sit amet, pulvinar dictum leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vel tellus quis magna viverra pellentesque a eu est. Vivamus porttitor, lorem a tempus sodales, ante purus suscipit est, non cursus mi nibh nec mauris. Praesent dolor mauris, ultricies quis ante sed, vehicula congue nisl.</p>
  136.             </div>
  137.         </div>
  138.         <!-- STORY -->
  139.         <div class="card border-0 rounded-0 bg-faded p-1 mt-1">
  140.             <!-- HEADER -->
  141.             <div class="row p-1">
  142.                 <span class="mx-auto my-auto text-uppercase p-1" style="font-size: 20px; color: #000FFF;">
  143.                     <i class="far fa-hourglass"></i> Story
  144.                 </span>
  145.             </div>
  146.             <!-- CONTENT -->
  147.             <div class="card border-0 rounded-0 p-2 m-1 text-left" style="height: 275px; overflow: auto;">
  148.                 <p>This box will scroll. Maecenas commodo quam id tempus porta. Praesent volutpat lobortis mattis. Suspendisse libero arcu, tincidunt vitae turpis sit amet, pulvinar dictum leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vel tellus quis magna viverra pellentesque a eu est. Vivamus porttitor, lorem a tempus sodales, ante purus suscipit est, non cursus mi nibh nec mauris. Praesent dolor mauris, ultricies quis ante sed, vehicula congue nisl.</p>
  149.                 <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec consequat bibendum libero in ornare. Aenean tincidunt a nisi ut feugiat. Vivamus pulvinar turpis nec nisi condimentum egestas. Vivamus pharetra sapien id augue ullamcorper vestibulum. Duis tincidunt est ut sem venenatis, eget euismod nulla rhoncus. Nullam accumsan dapibus augue, auctor efficitur nulla tristique at. In ut tincidunt tortor, et vestibulum enim.</p>
  150.             </div>
  151.         </div>
  152.         <!-- TRIVIA -->
  153.         <div class="card border-0 rounded-0 bg-faded p-1 mt-1">
  154.             <!-- HEADER -->
  155.             <div class="p-1 text-center text-uppercase" style="font-size: 20px; color: #000FFF;">
  156.                 <i class="far fa-star"></i> Trivia
  157.             </div>
  158.             <!-- CONTENT -->
  159.             <div class="card border-0 rounded-0 m-1" style="height: 210px; overflow: auto;">
  160.                 <ul class="list-group list-group-flush">
  161.                     <li class="list-group-item justify-content-between p-1 pt-2">
  162.                         This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  163.                     </li>
  164.                     <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  165.                         Aenean vel vulputate diam. Praesent imperdiet neque vel nulla facilisis dignissim.
  166.                     </li>
  167.                     <li class="list-group-item border-0 justify-content-between p-1">
  168.                         Ut sed sem efficitur, ultrices massa in, laoreet dui. Quisque volutpat est eget erat tincidunt accumsan.
  169.                     </li>
  170.                     <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  171.                         In egestas consequat consectetur. Integer sed rhoncus tortor, nec pretium enim
  172.                     </li>
  173.                     <li class="list-group-item border-0 justify-content-between p-1 pb-2">
  174.                         Nullam risus orci, tempus quis ex ut, fermentum commodo augue. Nullam a quam in odio facilisis varius.
  175.                     </li>
  176.                 </ul>
  177.             </div>
  178.         </div>
  179.         <!-- LINKS -->
  180.         <div class="card border-0 rounded-0 bg-faded p-1 mt-1">
  181.             <!-- HEADER -->
  182.             <div class="p-1 text-center text-uppercase" style="font-size: 20px; color: #000FFF;">
  183.                 <i class="far fa-user-friends"></i> Links
  184.             </div>
  185.             <!-- CONTENT -->
  186.             <div class="card border-0 rounded-0 m-1" style="height: auto;">
  187.                 <ul class="list-group list-group-flush">
  188.                     <li class="list-group-item border-0 justify-content-between p-1">
  189.                         <span class="text-muted font-weight-bold"><a href="CHARLINK">NAME</a>:</span>
  190.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris augue, pretium vitae porta quis, porta in purus. Aliquam erat volutpat.
  191.                     </li>
  192.                     <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  193.                         <span class="text-muted font-weight-bold"><a href="CHARLINK">NAME</a>:</span>
  194.                         Morbi eleifend urna ac posuere scelerisque. Donec ac efficitur enim, non pharetra risus. Ut finibus justo ac ultricies iaculis.
  195.                     </li>
  196.                     <li class="list-group-item border-0 justify-content-between p-1">
  197.                         <span class="text-muted font-weight-bold"><a href="CHARLINK">NAME</a>:</span>
  198.                         Quisque et diam diam. In nunc ante, imperdiet ut est quis, faucibus gravida augue.
  199.                     </li>
  200.                     <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  201.                         <span class="text-muted font-weight-bold"><a href="CHARLINK">NAME</a>:</span>
  202.                         Aliquam semper vulputate leo sed gravida. In sit amet varius tellus, sed laoreet nibh.
  203.                     </li>
  204.                 </ul>
  205.             </div>
  206.         </div> <!-- END LINKS -->
  207.     </div>
  208.     <!--CHARACTER 2 -->
  209.     <div class="col-lg m-1">
  210.         <!-- BASICS -->
  211.         <div class="card border-0 rounded-0 bg-faded p-1">
  212.             <!-- HEADER -->
  213.             <div class="row p-1">
  214.                 <div class="col-lg-7 my-auto mx-auto text-left text-uppercase pt-2" style="font-size: 20px; color: #FFF000;">
  215.                     <!-- put info below -->
  216.                     <i class="far fa-pen"></i> Name2
  217.                     <hr class="m-0">
  218.                     <span style="font-size: 14px;">
  219.                         <i class="far fa-pencil"></i> Alias •
  220.                         <i class="far fa-comment-dots"></i> pronouns •
  221.                         <a href="#"><i class="far fa-music"></i> Theme</a>
  222.                     </span>
  223.                     <span class="justify-content-start ml-2 mt-1" style="font-size: 14px;">
  224.                         <!-- NAV BUTTONS -->
  225.                         <ul class="nav nav-pills m-2 p-1 text-center">
  226.                             <li class="nav-item"><a data-toggle="tab" href="#basics2" role="tab" class="nav-link active btn btn-secondary p-2 m-1" style="width: 75px;"> <i class="far fa-user-edit"></i></a></li>
  227.                             <li class="nav-item"><a data-toggle="tab" href="#tastes2" role="tab" class="nav-link btn btn-secondary p-2 m-1" style="width: 75px;"> <i class="far fa-user-plus"></i></a></li>
  228.                         </ul>
  229.                     </span>
  230.                 </div>
  231.                 <div class="col-lg-4 text-right"><img src="//via.placeholder.com/200x200" height="200px" width="200px"></div>
  232.             </div>
  233.             <!-- COLLAPSABLE TABS -->
  234.             <div id="two" class="card border-0 rounded-0 m-1">
  235.                 <!-- NAV CONTENT -->
  236.                 <div class="tab-content">
  237.                     <!-- BASICS -->
  238.                     <div class="tab-pane fade show active" id="basics2">
  239.                         <ul class="list-group list-group-flush" style="height: 220px; overflow: auto;">
  240.                             <li class="list-group-item justify-content-between p-1 pt-2">
  241.                                 <div>Lorem ipsum dolor sit amet</div><div class="text-secondary">Age <i class="far fa-birthday-cake"></i></div>
  242.                             </li>
  243.                             <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  244.                                 <div>Lorem ipsum dolor sit amet</div><div class="text-secondary">Gender <i class="far fa-restroom"></i></div>
  245.                             </li>
  246.                             <li class="list-group-item border-0 justify-content-between p-1">
  247.                                 <div>Lorem ipsum dolor sit amet</div><div class="text-secondary">Race <i class="far fa-users"></i></div>
  248.                             </li>
  249.                             <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  250.                                 <div>Lorem ipsum dolor sit amet</div><div class="text-secondary">Status <i class="far fa-cross"></i></div>
  251.                             </li>
  252.                             <li class="list-group-item border-0 justify-content-between p-1 pb-2">
  253.                                 <div>Lorem ipsum dolor sit amet</div><div class="text-secondary">Rel. Status <i class="far fa-rings-wedding"></i></div>
  254.                             </li>
  255.                             <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  256.                                 <div>Lorem ipsum dolor sit amet</div><div class="text-secondary">Occupation <i class="far fa-user-clock"></i></div>
  257.                             </li>
  258.                             <li class="list-group-item border-0 justify-content-between p-1">
  259.                                 <div>Lorem ipsum dolor sit amet</div><div class="text-secondary">Orientation <i class="far fa-heart"></i></div>
  260.                             </li>
  261.                             <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  262.                                 <div>Lorem ipsum dolor sit amet</div><div class="text-secondary">MBTI <i class="far fa-brain"></i></div>
  263.                             </li>
  264.                             <li class="list-group-item border-0 justify-content-between p-1 pb-2">
  265.                                 <div>Lorem ipsum dolor sit amet</div><div class="text-secondary">Height <i class="far fa-sort-alt"></i></div>
  266.                             </li>
  267.                         </ul>
  268.                     </div>
  269.                     <!-- TASTES -->
  270.                     <div class="tab-pane fade" id="tastes2">
  271.                         <div class="row" style="height: 220px; overflow: auto; width: 103%">
  272.                             <!-- DISLIKES -->
  273.                             <ul class="col-lg list-group list-group-flush">
  274.                                 <li class="list-group-item justify-content-between align-items-center p-2 border-top-0">
  275.                                     <i class="text-danger far fa-minus-circle"></i><div>Lorem ipsum dolor sit amet</div>
  276.                                 </li>
  277.                                 <li class="list-group-item justify-content-between align-items-center p-2">
  278.                                     <i class="text-danger far fa-minus-circle"></i><div>Lorem ipsum dolor sit amet</div>
  279.                                 </li>
  280.                                 <li class="list-group-item justify-content-between align-items-center p-2">
  281.                                     <i class="text-danger far fa-minus-circle"></i><div>Lorem ipsum dolor sit amet</div>
  282.                                 </li>
  283.                                 <li class="list-group-item justify-content-between align-items-center p-2">
  284.                                     <i class="text-danger far fa-minus-circle"></i><div>Lorem ipsum dolor sit amet</div>
  285.                                 </li>
  286.                             </ul>
  287.                             <!-- LIKES -->
  288.                             <ul class="col-lg list-group list-group-flush">
  289.                                 <li class="list-group-item justify-content-between align-items-center p-2">
  290.                                     <i class="text-success far fa-plus-circle"></i><div>Lorem ipsum dolor sit amet</div>
  291.                                 </li>
  292.                                 <li class="list-group-item justify-content-between align-items-center p-2">
  293.                                     <i class="text-success far fa-plus-circle"></i><div>Lorem ipsum dolor sit amet</div>
  294.                                 </li>
  295.                                 <li class="list-group-item justify-content-between align-items-center p-2">
  296.                                     <i class="text-success far fa-plus-circle"></i><div>Lorem ipsum dolor sit amet</div>
  297.                                 </li>
  298.                                 <li class="list-group-item justify-content-between align-items-center p-2 border-bottom-0">
  299.                                     <i class="text-success far fa-plus-circle"></i><div>Lorem ipsum dolor sit amet</div>
  300.                                 </li>
  301.                             </ul>
  302.                         </div>
  303.                     </div>
  304.                 </div>
  305.             </div>
  306.         </div>
  307.         <!-- BIOGRAPHY -->
  308.         <div class="card border-0 rounded-0 bg-faded p-1 mt-1">
  309.             <!-- HEADER -->
  310.             <div class="row p-1">
  311.                 <span class="mx-auto my-auto text-uppercase p-1" style="font-size: 20px; color: #FFF000;">
  312.                     <i class="far fa-books"></i> Biography
  313.                 </span>
  314.             </div>
  315.             <!-- CONTENT -->
  316.             <div class="card border-0 rounded-0 p-2 m-1 text-right" style="height: 250px; overflow: auto;">
  317.                 <!-- OVERVIEW -->
  318.                 <h4 class="text-secondary">Overview</h4>
  319.                 <p>This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus fringilla nibh, in porttitor arcu hendrerit ac. Cras posuere varius rhoncus. Sed suscipit ligula vehicula est tempus, vitae consequat nunc lobortis. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla blandit hendrerit luctus. Aliquam a eros velit. Praesent sagittis odio ligula, a pellentesque lacus molestie quis.</p>
  320.                 <!-- PERSONALITY -->
  321.                 <h4 class="text-secondary">Personality</h4>
  322.                 <p>Sed eu enim id odio commodo convallis. Proin congue erat et erat lacinia, auctor consequat elit pharetra. Duis facilisis cursus leo, sed lacinia felis laoreet quis. Nunc a dictum dolor, et elementum mi. Pellentesque nec egestas nisi, sed tempor augue. Praesent ante diam, dictum ut erat ac, hendrerit placerat dolor.</p>
  323.             </div>
  324.         </div>
  325.         <!-- STORY -->
  326.         <div class="card border-0 rounded-0 bg-faded p-1 mt-1">
  327.             <!-- HEADER -->
  328.             <div class="row p-1">
  329.                 <span class="mx-auto my-auto text-uppercase p-1" style="font-size: 20px; color: #FFF000;">
  330.                     <i class="far fa-hourglass"></i> Story
  331.                 </span>
  332.             </div>
  333.             <!-- CONTENT -->
  334.             <div class="card border-0 rounded-0 p-2 m-1 text-right" style="height: 275px; overflow: auto;">
  335.                 <p>This box will scroll. Nam non urna id magna pulvinar lobortis vehicula quis ligula. Vivamus sodales, nunc eget cursus rhoncus, lacus massa bibendum leo, a pellentesque ipsum leo non ipsum. Etiam vel dui dictum, luctus ex et, porttitor sem. Fusce finibus molestie suscipit. Donec ac sapien lobortis, interdum lectus sit amet, volutpat ex. Maecenas non risus lectus. Nulla euismod ex non orci pharetra, id suscipit massa consequat. </p>
  336.                 <p>In nisl tortor, laoreet ut nisl vel, congue pharetra sapien. Phasellus porttitor vestibulum diam et blandit. Aliquam erat volutpat. Sed eget est feugiat orci facilisis aliquet eu quis purus. Morbi a mauris pulvinar, pretium dolor in, sodales odio. Proin vitae tortor vitae nisi sagittis volutpat in sit amet justo. Cras porttitor sem at lorem tempor, sed auctor purus ultrices. Maecenas at lacus neque. Donec a augue mattis, vestibulum urna vitae, luctus odio. Morbi ut luctus orci, ac aliquam arcu. Aenean vitae laoreet magna. Nam id varius justo.</p>
  337.             </div>
  338.         </div>
  339.         <!-- TRIVIA -->
  340.         <div class="card border-0 rounded-0 bg-faded p-1 mt-1">
  341.             <!-- HEADER -->
  342.             <div class="p-1 text-center text-uppercase" style="font-size: 20px; color: #FFF000;">
  343.                 <i class="far fa-star"></i> Trivia
  344.             </div>
  345.             <!-- CONTENT -->
  346.             <div class="card border-0 rounded-0 m-1" style="height: 210px; overflow: auto;">
  347.                 <ul class="list-group list-group-flush">
  348.                     <li class="list-group-item justify-content-between p-1 pt-2">
  349.                         This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  350.                     </li>
  351.                     <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  352.                         Suspendisse varius felis vitae placerat iaculis. Donec ac leo dui.
  353.                     </li>
  354.                     <li class="list-group-item border-0 justify-content-between p-1">
  355.                         Duis velit ex, accumsan efficitur ante id, faucibus laoreet nibh.
  356.                     </li>
  357.                     <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  358.                         Curabitur ac tristique quam. Sed tempor pharetra facilisis.
  359.                     </li>
  360.                     <li class="list-group-item border-0 justify-content-between p-1 pb-2">
  361.                         Nulla faucibus pulvinar metus. Sed diam ipsum, egestas at ullamcorper id, pulvinar congue nunc.
  362.                     </li>
  363.                 </ul>
  364.             </div>
  365.         </div>
  366.         <!-- LINKS -->
  367.         <div class="card border-0 rounded-0 bg-faded p-1 mt-1">
  368.             <!-- HEADER -->
  369.             <div class="p-1 text-center text-uppercase" style="font-size: 20px; color: #FFF000;">
  370.                 <i class="far fa-user-friends"></i> Links
  371.             </div>
  372.             <!-- CONTENT -->
  373.             <div class="card border-0 rounded-0 m-1" style="height: auto;">
  374.                 <ul class="list-group list-group-flush">
  375.                     <li class="list-group-item border-0 justify-content-between p-1">
  376.                         <span class="text-muted font-weight-bold"><a href="CHARLINK">NAME</a>:</span>
  377.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris augue, pretium vitae porta quis, porta in purus. Aliquam erat volutpat.
  378.                     </li>
  379.                     <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  380.                         <span class="text-muted font-weight-bold"><a href="CHARLINK">NAME</a>:</span>
  381.                         Morbi eleifend urna ac posuere scelerisque. Donec ac efficitur enim, non pharetra risus. Ut finibus justo ac ultricies iaculis.
  382.                     </li>
  383.                     <li class="list-group-item border-0 justify-content-between p-1">
  384.                         <span class="text-muted font-weight-bold"><a href="CHARLINK">NAME</a>:</span>
  385.                         Quisque et diam diam. In nunc ante, imperdiet ut est quis, faucibus gravida augue.
  386.                     </li>
  387.                     <li class="list-group-item border-0 justify-content-between p-1 bg-faded">
  388.                         <span class="text-muted font-weight-bold"><a href="CHARLINK">NAME</a>:</span>
  389.                         Aliquam semper vulputate leo sed gravida. In sit amet varius tellus, sed laoreet nibh.
  390.                     </li>
  391.                 </ul>
  392.             </div>
  393.         </div> <!-- END LINKS -->
  394.     </div>
  395. </div>
  396.  
  397. <!-- CREDIT, DON'T MOVE -->
  398. <div class="text-center">
  399.     <a data-toggle="tooltip" title="SparklyLightus" href="/SparklyLightus"><i class="far fa-code"></i></a>
  400. </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!