API tools faq
paste
SparklyLightus

Multi Universe Alt

SparklyLightus
Oct 16th, 2020 (edited)
749
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 46.11 KB | None | 1 0
raw download clone embed print report
  1. <a class="btn btn-secondary" style="position:fixed; bottom:5px; right:5px; z-index:5;" href="#top"><i class="fad fa-chevron-double-up"></i></a>
  2. <!-- CONTENT -->
  3. <div class="card bg-faded border-0 rounded-0 m-2 p-2">
  4.     <h1 class="text-primary font-weight-light display-4"><i class="fas fa-star"></i> NAME</h1> <hr class="m-1 mb-2">
  5.     <!-- BASICS ROW -->
  6.     <div class="row m-0">
  7.         <!-- LEFT -->
  8.         <div class="col-lg-3 card border-0 rounded-0 m-1 p-1" style="height: auto;">
  9.             <!-- IMAGE -->
  10.             <div class="btn btn-outline-secondary m-1 p-1 mx-auto mt-3" style="width: 190px; height: 190px;">
  11.                 <div class="rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 180px; width: 180px;"></div>
  12.             </div>
  13.             <!-- INFO -->
  14.             <ul class="list-group list-group-flush mt-2">
  15.                 <li class="list-group-item p-2 d-flex justify-content-between border-0">
  16.                     <span class="text-secondary">NAME</span><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">ALIAS</span><span>INFO</span></li>
  19.                 <li class="list-group-item p-2 d-flex justify-content-between border-0">
  20.                     <span class="text-secondary">AGE</span><span>INFO</span></li>
  21.                 <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  22.                     <span class="text-secondary">RACE</span><span>INFO</span></li>
  23.                 <li class="list-group-item p-2 d-flex justify-content-between border-0">
  24.                     <span class="text-secondary">GENDER</span><span>INFO</span></li>
  25.                 <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  26.                     <span class="text-secondary">BIRTHDAY</span><span>INFO</span></li>
  27.                 <li class="list-group-item p-2 d-flex justify-content-between border-0">
  28.                     <span class="text-secondary">ORIENTATION</span><span>INFO</span></li>
  29.             </ul>
  30.         </div>
  31.         <!-- RIGHT -->
  32.         <div class="col-lg card border-0 rounded-0 m-1 p-1">
  33.             <div class="m-0" style="height: 483px; overflow: auto;">
  34.                 <!-- IMAGE -->
  35.                 <div class="float-lg-right m-2 p-1" style="width: auto; height: 300px;">
  36.                     <div class="rounded mx-auto" style="background-image: url(//via.placeholder.com/500x500); background-size: cover; background-position: center; height: 300px; width: 200px;"></div>
  37.                 </div>
  38.                 <!-- OVERVIEW -->
  39.                 <div>
  40.                     <h3 class="text-secondary font-weight-light m-2"><i class="fas fa-binoculars"></i> Overview</h3> <div class="card m-0"></div>
  41.                     <p class="mt-2 ml-3 mr-3">This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus ullamcorper neque, sit amet auctor metus eleifend eu. Proin sed odio imperdiet, imperdiet mauris eu, sodales arcu. Donec blandit augue augue, quis rutrum tellus vestibulum volutpat. Suspendisse eu nisl faucibus, porttitor massa et, volutpat lectus. Quisque quam nulla, dignissim non ante tincidunt, sagittis fringilla lorem.</p>
  42.                 </div>
  43.                 <!-- PERSONALITY -->
  44.                 <div>
  45.                     <h3 class="text-secondary font-weight-light m-2"><i class="fas fa-lightbulb"></i> Personality</h3> <div class="card m-0"></div>
  46.                     <p class="mt-2 ml-3 mr-3">In eleifend malesuada laoreet. Phasellus ornare molestie dui ac gravida. In in eros a tortor gravida consectetur rhoncus at libero. Aenean blandit semper facilisis. Phasellus tempor pretium condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue in ex vel dignissim. Etiam pellentesque, velit eget dignissim fringilla, augue magna pharetra ipsum, eu facilisis leo eros vitae risus.</p>
  47.                     <p class="mt-2 ml-3 mr-3">Donec a tristique lacus. Donec sit amet placerat orci, ac ornare enim. Quisque quis risus iaculis, dictum est id, mattis augue. Donec facilisis convallis urna, in semper massa. Praesent in lacus at neque luctus vestibulum in non risus. In pharetra tincidunt urna, sed interdum quam dignissim sed. Donec sagittis, erat sed euismod vestibulum, nisi dui suscipit erat, eu vehicula velit arcu id arcu. Cras tempus cursus tempus. </p>
  48.                 </div>
  49.             </div>
  50.         </div>
  51.     </div>
  52.     <!-- STORY ROW -->
  53.     <div class="row m-0">
  54.         <!-- LEFT -->
  55.         <div class="col-lg-5 col-lg card border-0 rounded-0 m-1 p-1">
  56.             <!-- NAV BUTTONS -->
  57.             <ul class="nav nav-pills d-flex text-center justify-content-center">
  58.                 <li class="nav-item m-1"><a data-toggle="tab" href="#DETAIL" role="tab" class="btn btn-outline-secondary active"> <i class="fas fa-plus"></i> </a></li>
  59.                 <li class="nav-item m-1"><a data-toggle="tab" href="#LIKES" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-heart"></i> </a></li>
  60.                 <li class="nav-item m-1"><a data-toggle="tab" href="#DISLIKES" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-heart-broken"></i> </a></li>
  61.                 <li class="nav-item m-1"><a data-toggle="tab" href="#TRIVIA" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-question-circle"></i> </a></li>
  62.             </ul>
  63.             <!-- NAV CONTENT -->
  64.             <div class="tab-content tab-content p-1" style="height: 350px; overflow: auto;">
  65.                 <!-- DETAILS -->
  66.                 <div class="tab-pane fade show active" id="DETAIL">
  67.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">DETAILS</p>
  68.                     <ul class="list-group list-group-flush mt-2">
  69.                         <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  70.                             <span class="text-secondary">OCCUPATION</span><span>INFO</span></li>
  71.                         <li class="list-group-item p-2 d-flex justify-content-between border-0">
  72.                             <span class="text-secondary">HEIGHT</span><span>INFO</span></li>
  73.                         <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  74.                             <span class="text-secondary">WEIGHT</span><span>INFO</span></li>
  75.                         <li class="list-group-item p-2 d-flex justify-content-between border-0">
  76.                             <span class="text-secondary">BLOOD TYPE</span><span>INFO</span></li>
  77.                         <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  78.                             <span class="text-secondary">MBTI</span><span>INFO</span></li>
  79.                         <li class="list-group-item p-2 d-flex justify-content-between border-0">
  80.                             <span class="text-secondary">RELATIONSHIP STATUS</span><span>INFO</span></li>
  81.                         <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  82.                             <span class="text-secondary">STATUS</span><span>INFO</span></li>
  83.                         <li class="list-group-item p-2 d-flex justify-content-between border-0">
  84.                             <span class="text-secondary">ORIGIN</span><span>INFO</span></li>
  85.                         <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  86.                             <span class="text-secondary">RESIDENCE</span><span>INFO</span></li>
  87.                         <li class="list-group-item p-2 d-flex justify-content-between border-0">
  88.                             <span class="text-secondary">RELIGION</span><span>INFO</span></li>
  89.                         <li class="list-group-item p-2 d-flex justify-content-between border-0 bg-faded">
  90.                             <span class="text-secondary">SOCIAL STANDING</span><span>INFO</span></li>
  91.                         <li class="list-group-item p-2 d-flex justify-content-between border-0">
  92.                             <span class="text-secondary">ETHNICITY</span><span>INFO</span></li>
  93.                     </ul>
  94.                 </div>
  95.                 <!-- LIKES -->
  96.                 <div class="tab-pane fade" id="LIKES">
  97.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">LIKES</p>
  98.                     <ul class="list-group list-group-flush mt-2">
  99.                         <li class="list-group-item p-2 bg-faded">
  100.                             <b>INFO:</b>&nbsp;Morbi porta venenatis urna sit amet pharetra.</li>
  101.                         <li class="list-group-item p-2 bg-faded">
  102.                             <b>INFO:</b>&nbsp;Mauris quis leo risus.</li>
  103.                         <li class="list-group-item p-2 bg-faded">
  104.                             <b>INFO:</b>&nbsp;Interdum et malesuada fames ac ante ipsum primis in faucibus.</li>
  105.                         <li class="list-group-item p-2 bg-faded">
  106.                             <b>INFO:</b>&nbsp;Pellentesque fermentum porta turpis, non vehicula ipsum.</li>
  107.                         <li class="list-group-item p-2 bg-faded">
  108.                             <b>INFO:</b>&nbsp;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
  109.                     </ul>
  110.                 </div>
  111.                 <!-- DISLIKES -->
  112.                 <div class="tab-pane fade" id="DISLIKES">
  113.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">DISLIKES</p>
  114.                     <ul class="list-group list-group-flush mt-2">
  115.                         <li class="list-group-item p-2 bg-faded">
  116.                             <b>INFO:</b>&nbsp;Phasellus et nibh posuere, dapibus dolor ut, porttitor ligula.</li>
  117.                         <li class="list-group-item p-2 bg-faded">
  118.                             <b>INFO:</b>&nbsp;Fusce at congue massa, commodo cursus augue.</li>
  119.                         <li class="list-group-item p-2 bg-faded">
  120.                             <b>INFO:</b>&nbsp;Mauris lacus elit, pretium ut scelerisque ac, pellentesque ut turpis.</li>
  121.                         <li class="list-group-item p-2 bg-faded">
  122.                             <b>INFO:</b>&nbsp;Vestibulum pellentesque dictum risus, vel scelerisque tellus auctor sed.</li>
  123.                         <li class="list-group-item p-2 bg-faded">
  124.                             <b>INFO:</b>&nbsp;Vivamus rutrum nibh ut quam ullamcorper, nec tempus ligula vehicula.</li>
  125.                     </ul>
  126.                 </div>
  127.                 <!-- TRIVIA -->
  128.                 <div class="tab-pane fade" id="TRIVIA">
  129.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">TRIVIA</p>
  130.                     <ul class="list-group list-group-flush mt-2">
  131.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  132.                             Etiam sed metus sed mi hendrerit aliquam.</li>
  133.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  134.                             Etiam semper ex odio, non sollicitudin nunc vestibulum vel.</li>
  135.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  136.                             Nunc molestie velit eu lectus pellentesque, sit amet commodo nisi ultrices.</li>
  137.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  138.                             Vestibulum malesuada velit nulla, eu tincidunt metus consequat non.</li>
  139.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  140.                             Nam consectetur eros vel tellus lacinia ultricies.</li>
  141.                     </ul>
  142.                 </div>
  143.             </div>
  144.         </div>
  145.         <!-- RIGHT -->
  146.         <div class="col-lg card border-0 rounded-0 m-1 p-1">
  147.             <div class="m-0" style="height: 394px; overflow: auto;">
  148.                 <h3 class="text-secondary font-weight-light m-2"><i class="fas fa-books"></i> Story</h3> <hr class="m-0">
  149.                
  150.                 <h3 class="text-primary font-weight-light ml-3 mt-2"> <i class="far fa-bookmark"></i> Header </h3>
  151.                 <p class="ml-3 mr-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend malesuada laoreet. Phasellus ornare molestie dui ac gravida. In in eros a tortor gravida consectetur rhoncus at libero. Aenean blandit semper facilisis. Phasellus tempor pretium condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue in ex vel dignissim.</p>
  152.                
  153.                 <h3 class="text-primary font-weight-light ml-3 mt-2"> <i class="far fa-bookmark"></i> Header </h3>
  154.                 <p class="ml-3 mr-3"> Etiam pellentesque, velit eget dignissim fringilla, augue magna pharetra ipsum, eu facilisis leo eros vitae risus. Donec a tristique lacus. Donec sit amet placerat orci, ac ornare enim. Quisque quis risus iaculis, dictum est id, mattis augue. Donec facilisis convallis urna, in semper massa. Praesent in lacus at neque luctus vestibulum in non risus. In pharetra tincidunt urna, sed interdum quam dignissim sed. Donec sagittis, erat sed euismod vestibulum, nisi dui suscipit erat, eu vehicula velit arcu id arcu. Cras tempus cursus tempus. </p>
  155.                
  156.                 <h3 class="text-primary font-weight-light ml-3 mt-2"> <i class="far fa-bookmark"></i> Header </h3>
  157.                 <p class="ml-3 mr-3"> Sed at vestibulum leo. Phasellus vehicula est in dui iaculis elementum. Donec ac tortor maximus, eleifend velit ac, imperdiet ex. Nullam magna purus, dignissim non convallis ut, bibendum vitae sapien. Integer at sem et ligula molestie maximus at a augue. Integer non nisl volutpat nisl rutrum aliquet eget vel sem. Cras iaculis commodo felis, quis placerat arcu accumsan non. Aenean eleifend placerat enim, et tincidunt ipsum semper eu. Fusce ac fermentum ipsum. </p>
  158.             </div>
  159.         </div>
  160.     </div>
  161.     <!-- MISC ROW -->
  162.     <div class="row m-0">
  163.         <!-- LEFT -->
  164.         <div class="col-lg-auto card border-0 rounded-0 m-1 p-1">
  165.             <div class="m-0" style="height: 257px; overflow: auto;">
  166.                 <div class="justify-content-center my-auto row m-0">
  167.                     <div class="d-inline-block m-1 rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 120px; width: 120px;"></div>
  168.                     <div class="d-inline-block m-1 rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 120px; width: 120px;"></div>
  169.                     <div class="d-inline-block m-1 rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 120px; width: 120px;"></div>
  170.                 </div>
  171.                 <div class="justify-content-center my-auto row m-0">
  172.                     <div class="d-inline-block m-1 rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 120px; width: 120px;"></div>
  173.                     <div class="d-inline-block m-1 rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 120px; width: 120px;"></div>
  174.                     <div class="d-inline-block m-1 rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 120px; width: 120px;"></div>
  175.                 </div>
  176.             </div>
  177.         </div>
  178.         <!-- RIGHT -->
  179.         <div class="col-lg card border-0 rounded-0 m-1 p-1">
  180.             <!-- NAV BUTTONS -->
  181.             <ul class="nav nav-pills d-flex text-center justify-content-center">
  182.                 <li class="nav-item m-1"><a data-toggle="tab" href="#QUOTE" role="tab" class="btn btn-outline-secondary active"> <i class="fas fa-comment"></i> </a></li>
  183.                 <li class="nav-item m-1"><a data-toggle="tab" href="#PALETTE" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-palette"></i> </a></li>
  184.                 <li class="nav-item m-1"><a data-toggle="tab" href="#NOTE" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-user-edit"></i> </a></li>
  185.                 <li class="nav-item m-1"><a data-toggle="tab" href="#PLAYLIST" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-music"></i> </a></li>
  186.             </ul>
  187.             <!-- NAV CONTENT -->
  188.             <div class="tab-content tab-content p-1" style="height: 213px; overflow: auto;">
  189.                 <!-- QUOTES -->
  190.                 <div class="tab-pane fade show active" id="QUOTE">
  191.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">QUOTES</p>
  192.                     <ul class="list-group list-group-flush mt-2">
  193.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  194.                             Morbi aliquet lobortis purus, sit amet sollicitudin ex bibendum ut.</li>
  195.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  196.                             Quisque eu consequat ligula.</li>
  197.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  198.                             Cras cursus nulla at libero iaculis lobortis.</li>
  199.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  200.                             Maecenas sit amet turpis ultricies eros ultricies commodo.</li>
  201.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  202.                             In hac habitasse platea dictumst.</li>
  203.                     </ul>
  204.                 </div>
  205.                 <!-- PALETTE -->
  206.                 <div class="tab-pane fade" id="PALETTE">
  207.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">PALETTE</p>
  208.                     <ul class="list-group list-group-flush mt-2">
  209.                         <li class="list-group-item p-1 text-center font-weight-bold text-danger bg-faded">
  210.                             PHYSICAL:</li>
  211.                         <li class="list-group-item p-1 text-center font-weight-bold bg-faded">
  212.                             <div class="card pb-2 rounded-0 border-0 m-1 col-lg text-dark" style="height: 25px; background-color:#FFFFFF;">Skin</div>
  213.                             <div class="card pb-2 rounded-0 border-0 m-1 col-lg text-dark" style="height: 25px; background-color:#FFFFFF;">Hair</div>
  214.                             <div class="card pb-2 rounded-0 border-0 m-1 col-lg text-dark" style="height: 25px; background-color:#FFFFFF;">Eyes</div></li>
  215.                         <li class="list-group-item p-1 text-center font-weight-bold text-danger bg-faded">
  216.                             OUTFITS: Each line is an outfit.</li>
  217.                         <li class="list-group-item p-1 text-center font-weight-bold bg-faded">
  218.                             <div class="card pb-2 rounded-0 border-0 m-1 col-lg text-dark" style="height: 25px; background-color:#FFFFFF;">Jacket</div>
  219.                             <div class="card pb-2 rounded-0 border-0 m-1 col-lg text-dark" style="height: 25px; background-color:#FFFFFF;">Jewelry</div>
  220.                             <div class="card pb-2 rounded-0 border-0 m-1 col-lg text-dark" style="height: 25px; background-color:#FFFFFF;">Top</div>
  221.                             <div class="card pb-2 rounded-0 border-0 m-1 col-lg text-dark" style="height: 25px; background-color:#FFFFFF;">Bottoms</div>
  222.                             <div class="card pb-2 rounded-0 border-0 m-1 col-lg text-dark" style="height: 25px; background-color:#FFFFFF;">Shoes</div></li>
  223.                         <li class="list-group-item p-1 text-center font-weight-bold bg-faded">
  224.                             <div class="card pb-2 rounded-0 border-0 m-1 col-lg text-dark" style="height: 25px; background-color:#FFFFFF;">Jewelry</div>
  225.                             <div class="card pb-2 rounded-0 border-0 m-1 col-lg text-dark" style="height: 25px; background-color:#FFFFFF;">Dress</div>
  226.                             <div class="card pb-2 rounded-0 border-0 m-1 col-lg text-dark" style="height: 25px; background-color:#FFFFFF;">Shoes</div></li>
  227.                         <!-- add more lines here -->
  228.                     </ul>
  229.                 </div>
  230.                 <!-- NOTES -->
  231.                 <div class="tab-pane fade" id="NOTE">
  232.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">DESIGN NOTES</p>
  233.                     <ul class="list-group list-group-flush mt-2">
  234.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  235.                             Put design notes/quirks here. Morbi non metus sem. Suspendisse potenti.</li>
  236.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  237.                             Duis a consequat ipsum, sed iaculis diam.</li>
  238.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  239.                             Mauris ullamcorper neque at felis accumsan, eget lobortis lacus accumsan.</li>
  240.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  241.                             Praesent et augue ex. Suspendisse sed neque vitae tellus consequat consectetur.</li>
  242.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  243.                             Mauris semper, augue eget blandit tempus, arcu nunc pellentesque erat, id ultricies diam ipsum at metus.</li>
  244.                     </ul>
  245.                 </div>
  246.                 <!-- PLAYLIST -->
  247.                 <div class="tab-pane fade" id="PLAYLIST">
  248.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">PLAYLISTS</p>
  249.                     <ul class="list-group list-group-flush mt-2">
  250.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  251.                             <a href="SONGLINK"><i class="fas fa-play"></i> SONGNAME - songartist</a></li>
  252.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  253.                             <a href="SONGLINK"><i class="fas fa-play"></i> SONGNAME - songartist</a></li>
  254.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  255.                             <a href="SONGLINK"><i class="fas fa-play"></i> SONGNAME - songartist</a></li>
  256.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  257.                             <a href="SONGLINK"><i class="fas fa-play"></i> SONGNAME - songartist</a></li>
  258.                         <li class="list-group-item p-2 d-flex justify-content-between bg-faded">
  259.                             <a href="SONGLINK"><i class="fas fa-play"></i> SONGNAME - songartist</a></li>
  260.                     </ul>
  261.                 </div>
  262.             </div>
  263.         </div>
  264.     </div>
  265.     <!-- IN DEPTH ROW -->
  266.     <div class="row m-0">
  267.         <!-- LEFT -->
  268.         <div class="col-lg card border-0 rounded-0 m-1 p-1">
  269.             <!-- NAV BUTTONS -->
  270.             <ul class="nav nav-pills d-flex text-center justify-content-center">
  271.                 <li class="nav-item m-1"><a data-toggle="tab" href="#HOBBY" role="tab" class="btn btn-outline-secondary active"> <i class="fas fa-puzzle-piece"></i> </a></li>
  272.                 <li class="nav-item m-1"><a data-toggle="tab" href="#HABIT" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-user-tag"></i> </a></li>
  273.                 <li class="nav-item m-1"><a data-toggle="tab" href="#STRENGTH" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-chevron-up"></i> </a></li>
  274.                 <li class="nav-item m-1"><a data-toggle="tab" href="#WEAKNESS" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-chevron-down"></i> </a></li>
  275.             </ul>
  276.             <!-- NAV CONTENT -->
  277.             <div class="tab-content tab-content p-1" style="height: 235px; overflow: auto;">
  278.                 <!-- HOBBIES -->
  279.                 <div class="tab-pane fade show active" id="HOBBY">
  280.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">HOBBIES</p>
  281.                     <ul class="list-group list-group-flush mt-2">
  282.                         <li class="list-group-item p-2 bg-faded">
  283.                             <b>INFO:</b>&nbsp;Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  284.                         <li class="list-group-item p-2 bg-faded">
  285.                             <b>INFO:</b>&nbsp;Nam dapibus erat et augue aliquam consequat.</li>
  286.                         <li class="list-group-item p-2 bg-faded">
  287.                             <b>INFO:</b>&nbsp;Etiam nec condimentum nulla.</li>
  288.                         <li class="list-group-item p-2 bg-faded">
  289.                             <b>INFO:</b>&nbsp;Maecenas venenatis nisi non nulla posuere, quis lacinia ligula congue.</li>
  290.                         <li class="list-group-item p-2 bg-faded">
  291.                             <b>INFO:</b>&nbsp;Duis venenatis leo ut lorem commodo pretium.</li>
  292.                     </ul>
  293.                 </div>
  294.                 <!-- HABITS -->
  295.                 <div class="tab-pane fade" id="HABIT">
  296.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">HABITS</p>
  297.                     <ul class="list-group list-group-flush mt-2">
  298.                         <li class="list-group-item p-2 bg-faded">
  299.                             <b>INFO:</b>&nbsp;Sed id mi malesuada, ullamcorper nisl eu, volutpat libero.</li>
  300.                         <li class="list-group-item p-2 bg-faded">
  301.                             <b>INFO:</b>&nbsp;Duis et fermentum arcu, sit amet viverra massa.</li>
  302.                         <li class="list-group-item p-2 bg-faded">
  303.                             <b>INFO:</b>&nbsp;Aliquam vulputate luctus lectus, vitae commodo felis volutpat vel.</li>
  304.                         <li class="list-group-item p-2 bg-faded">
  305.                             <b>INFO:</b>&nbsp;Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</li>
  306.                         <li class="list-group-item p-2 bg-faded">
  307.                             <b>INFO:</b>&nbsp;In accumsan leo nibh, vitae hendrerit velit vestibulum vel.</li>
  308.                     </ul>
  309.                 </div>
  310.                 <!-- STRENGTHS -->
  311.                 <div class="tab-pane fade" id="STRENGTH">
  312.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">STRENGTHS</p>
  313.                     <ul class="list-group list-group-flush mt-2">
  314.                         <li class="list-group-item p-2 bg-faded">
  315.                             <b>INFO:</b>&nbsp;Maecenas interdum dui in bibendum ultricies.</li>
  316.                         <li class="list-group-item p-2 bg-faded">
  317.                             <b>INFO:</b>&nbsp;Suspendisse eget massa id libero consequat consectetur.</li>
  318.                         <li class="list-group-item p-2 bg-faded">
  319.                             <b>INFO:</b>&nbsp;Ut accumsan massa volutpat venenatis mattis.</li>
  320.                         <li class="list-group-item p-2 bg-faded">
  321.                             <b>INFO:</b>&nbsp;Sed venenatis vestibulum odio, vitae molestie est placerat quis.</li>
  322.                         <li class="list-group-item p-2 bg-faded">
  323.                             <b>INFO:</b>&nbsp;Aenean eget lacus sapien.</li>
  324.                     </ul>
  325.                 </div>
  326.                 <!-- WEAKNESSES -->
  327.                 <div class="tab-pane fade" id="WEAKNESS">
  328.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">WEAKNESSES</p>
  329.                     <ul class="list-group list-group-flush mt-2">
  330.                         <li class="list-group-item p-2 bg-faded">
  331.                             <b>INFO:</b>&nbsp;Ut consectetur arcu eget dapibus aliquam.</li>
  332.                         <li class="list-group-item p-2 bg-faded">
  333.                             <b>INFO:</b>&nbsp;Suspendisse potenti.</li>
  334.                         <li class="list-group-item p-2 bg-faded">
  335.                             <b>INFO:</b>&nbsp;Nunc euismod ac lectus et facilisis.</li>
  336.                         <li class="list-group-item p-2 bg-faded">
  337.                             <b>INFO:</b>&nbsp;Morbi non arcu vehicula, dapibus nunc at, lacinia purus.</li>
  338.                         <li class="list-group-item p-2 bg-faded">
  339.                             <b>INFO:</b>&nbsp;Nullam sit amet nunc non neque fringilla interdum.</li>
  340.                     </ul>
  341.                 </div>
  342.             </div>
  343.         </div>
  344.         <!-- RIGHT -->
  345.         <div class="col-lg card border-0 rounded-0 m-1 p-1">
  346.             <!-- NAV BUTTONS -->
  347.             <ul class="nav nav-pills d-flex text-center justify-content-center">
  348.                 <li class="nav-item m-1"><a data-toggle="tab" href="#SKILL" role="tab" class="btn btn-outline-secondary active"> <i class="fas fa-dice"></i> </a></li>
  349.                 <li class="nav-item m-1"><a data-toggle="tab" href="#GOAL" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-trophy"></i> </a></li>
  350.                 <li class="nav-item m-1"><a data-toggle="tab" href="#FEAR" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-skull"></i> </a></li>
  351.                 <li class="nav-item m-1"><a data-toggle="tab" href="#SECRET" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-volume-mute"></i> </a></li>
  352.             </ul>
  353.             <!-- NAV CONTENT -->
  354.             <div class="tab-content tab-content p-1" style="height: 235px; overflow: auto;">
  355.                 <!-- SKILLS -->
  356.                 <div class="tab-pane fade show active" id="SKILL">
  357.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">SKILLS</p>
  358.                     <ul class="list-group list-group-flush mt-2">
  359.                         <li class="list-group-item p-2 bg-faded">
  360.                             <b>INFO:</b>&nbsp;Suspendisse lacus quam, congue id rutrum quis, volutpat vitae justo.</li>
  361.                         <li class="list-group-item p-2 bg-faded">
  362.                             <b>INFO:</b>&nbsp;Vestibulum nec lacus ut leo tincidunt hendrerit.</li>
  363.                         <li class="list-group-item p-2 bg-faded">
  364.                             <b>INFO:</b>&nbsp;Aliquam sagittis ante et eros feugiat, at volutpat ex egestas.</li>
  365.                         <li class="list-group-item p-2 bg-faded">
  366.                             <b>INFO:</b>&nbsp;Etiam ac lectus ex.</li>
  367.                         <li class="list-group-item p-2 bg-faded">
  368.                             <b>INFO:</b>&nbsp;Vestibulum hendrerit justo ut ligula iaculis, eu dictum lectus sollicitudin.</li>
  369.                     </ul>
  370.                 </div>
  371.                 <!-- GOALS -->
  372.                 <div class="tab-pane fade" id="GOAL">
  373.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">GOALS</p>
  374.                     <ul class="list-group list-group-flush mt-2">
  375.                         <li class="list-group-item p-2 bg-faded">
  376.                             <b>INFO:</b>&nbsp;Nulla a quam tellus.</li>
  377.                         <li class="list-group-item p-2 bg-faded">
  378.                             <b>INFO:</b>&nbsp;Vivamus sed sem nisl.</li>
  379.                         <li class="list-group-item p-2 bg-faded">
  380.                             <b>INFO:</b>&nbsp;Curabitur at elementum massa.</li>
  381.                         <li class="list-group-item p-2 bg-faded">
  382.                             <b>INFO:</b>&nbsp;Fusce libero est, imperdiet sit amet augue ac, hendrerit ullamcorper lacus.</li>
  383.                         <li class="list-group-item p-2 bg-faded">
  384.                             <b>INFO:</b>&nbsp;Sed elit orci, egestas vitae risus ac, egestas eleifend justo.</li>
  385.                     </ul>
  386.                 </div>
  387.                 <!-- FEARS -->
  388.                 <div class="tab-pane fade" id="FEAR">
  389.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">FEARS</p>
  390.                     <ul class="list-group list-group-flush mt-2">
  391.                         <li class="list-group-item p-2 bg-faded">
  392.                             <b>INFO:</b>&nbsp;Vivamus a ante eget nunc hendrerit posuere ac in ante.</li>
  393.                         <li class="list-group-item p-2 bg-faded">
  394.                             <b>INFO:</b>&nbsp;Maecenas commodo massa enim, eget ultricies magna blandit quis.</li>
  395.                         <li class="list-group-item p-2 bg-faded">
  396.                             <b>INFO:</b>&nbsp;Sed ex ipsum, placerat ut libero interdum, iaculis tempus eros.</li>
  397.                         <li class="list-group-item p-2 bg-faded">
  398.                             <b>INFO:</b>&nbsp;Aliquam lacus quam, vestibulum imperdiet libero a, varius malesuada justo.</li>
  399.                         <li class="list-group-item p-2 bg-faded">
  400.                             <b>INFO:</b>&nbsp;Nam eget elementum libero.</li>
  401.                     </ul>
  402.                 </div>
  403.                 <!-- SECRETS -->
  404.                 <div class="tab-pane fade" id="SECRET">
  405.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">SECRETS</p>
  406.                     <ul class="list-group list-group-flush mt-2">
  407.                         <li class="list-group-item p-2 bg-faded">
  408.                             <b>INFO:</b>&nbsp;Donec at gravida diam. Praesent eu odio magna.</li>
  409.                         <li class="list-group-item p-2 bg-faded">
  410.                             <b>INFO:</b>&nbsp;Phasellus placerat orci a risus hendrerit ultrices.</li>
  411.                         <li class="list-group-item p-2 bg-faded">
  412.                             <b>INFO:</b>&nbsp;Maecenas bibendum aliquet urna ac venenatis.</li>
  413.                         <li class="list-group-item p-2 bg-faded">
  414.                             <b>INFO:</b>&nbsp;Curabitur efficitur ligula non nibh commodo, vel pellentesque dui commodo.</li>
  415.                         <li class="list-group-item p-2 bg-faded">
  416.                             <b>INFO:</b>&nbsp;Proin rhoncus nibh libero, sagittis aliquam felis posuere non.</li>
  417.                     </ul>
  418.                 </div>
  419.             </div>
  420.         </div>
  421.     </div>
  422.     <!-- RELATIONSHIPS -->
  423.     <div class="row m-0">
  424.         <div class="col-lg card border-0 rounded-0 m-1 p-1">
  425.             <!-- NAV BUTTONS -->
  426.             <ul class="nav nav-pills d-flex text-center justify-content-center">
  427.                 <li class="nav-item m-1"><a data-toggle="tab" href="#FAMILY" role="tab" class="btn btn-outline-secondary active"> <i class="fas fa-users"></i> </a></li>
  428.                 <li class="nav-item m-1"><a data-toggle="tab" href="#FRIEND" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-user-plus"></i> </a></li>
  429.                 <li class="nav-item m-1"><a data-toggle="tab" href="#OTHER" role="tab" class="btn btn-outline-secondary"> <i class="fas fa-user-cog"></i> </a></li>
  430.             </ul>
  431.             <!-- NAV CONTENT -->
  432.             <div class="tab-content tab-content p-1" style="height: auto;">
  433.                 <!-- TO CHANGE THE ICON AFTER 'RELATIONSHIP', REPLACE <i class="fas fa-star"></i> WITH THE FOLLOWING:
  434.                <i class="fas fa-check"></i> - positive | <i class="fas fa-times"></i> - negative | <i class="fas fa-star"></i> - romantic love -->
  435.                 <!-- FAMILY -->
  436.                 <div class="tab-pane fade show active" id="FAMILY">
  437.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">FAMILY</p>
  438.                     <!-- PERSON -->
  439.                     <div class="row m-0">
  440.                         <div class="col-lg-auto">
  441.                             <div class="btn btn-outline-secondary m-1 p-1" style="width: 150px; height: 150px;">
  442.                                 <div class="rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 140px; width: 140px;"></div>
  443.                             </div>
  444.                             <h3 class="text-center font-weight-light"><a href="LINK">Name</a></h3>
  445.                         </div>
  446.                         <div class="col-lg card bg-faded rounded-0 border-0 m-1 p-3">
  447.                             <p class="text-secondary mb-1">Relationship • <i class="fas fa-star"></i> </p> <hr class="m-0 mb-2">
  448.                             <p>This box will not scroll. Vestibulum maximus justo sit amet elit congue euismod sed vitae erat. Maecenas ligula ipsum, faucibus sit amet ante sed, placerat consectetur elit. Phasellus aliquam sapien a arcu euismod, id interdum eros sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dapibus tellus. Nullam varius consectetur vehicula. Donec in vestibulum massa, sed congue quam. Pellentesque auctor enim ac volutpat ultrices. In accumsan dapibus odio, sit amet hendrerit neque efficitur non. Pellentesque mollis ipsum ligula, non fringilla tortor interdum id. Aenean maximus neque non mauris condimentum malesuada. Ut hendrerit quam quis mi malesuada hendrerit. Sed congue condimentum sem vitae vehicula. </p>
  449.                         </div>
  450.                     </div>
  451.                     <hr class="m-1">
  452.                    
  453.                     <!-- PERSON -->
  454.                     <div class="row m-0">
  455.                         <div class="col-lg-auto">
  456.                             <div class="btn btn-outline-secondary m-1 p-1" style="width: 150px; height: 150px;">
  457.                                 <div class="rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 140px; width: 140px;"></div>
  458.                             </div>
  459.                             <h3 class="text-center font-weight-light"><a href="LINK">Name</a></h3>
  460.                         </div>
  461.                         <div class="col-lg card bg-faded rounded-0 border-0 m-1 p-3">
  462.                             <p class="text-secondary mb-1">Relationship • <i class="fas fa-star"></i> </p> <hr class="m-0 mb-2">
  463.                             <p>This box will not scroll. Vestibulum maximus justo sit amet elit congue euismod sed vitae erat. Maecenas ligula ipsum, faucibus sit amet ante sed, placerat consectetur elit. Phasellus aliquam sapien a arcu euismod, id interdum eros sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dapibus tellus. Nullam varius consectetur vehicula. Donec in vestibulum massa, sed congue quam. Pellentesque auctor enim ac volutpat ultrices. In accumsan dapibus odio, sit amet hendrerit neque efficitur non. Pellentesque mollis ipsum ligula, non fringilla tortor interdum id. Aenean maximus neque non mauris condimentum malesuada. Ut hendrerit quam quis mi malesuada hendrerit. Sed congue condimentum sem vitae vehicula. </p>
  464.                         </div>
  465.                     </div>
  466.                     <hr class="m-1">
  467.                 </div>
  468.                 <!-- FRIENDS -->
  469.                 <div class="tab-pane fade" id="FRIEND">
  470.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">FRIENDS</p>
  471.                     <!-- PERSON -->
  472.                     <div class="row m-0">
  473.                         <div class="col-lg-auto">
  474.                             <div class="btn btn-outline-secondary m-1 p-1" style="width: 150px; height: 150px;">
  475.                                 <div class="rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 140px; width: 140px;"></div>
  476.                             </div>
  477.                             <h3 class="text-center font-weight-light"><a href="LINK">Name</a></h3>
  478.                         </div>
  479.                         <div class="col-lg card bg-faded rounded-0 border-0 m-1 p-3">
  480.                             <p class="text-secondary mb-1">Relationship • <i class="fas fa-star"></i> </p> <hr class="m-0 mb-2">
  481.                             <p>This box will not scroll. Vestibulum maximus justo sit amet elit congue euismod sed vitae erat. Maecenas ligula ipsum, faucibus sit amet ante sed, placerat consectetur elit. Phasellus aliquam sapien a arcu euismod, id interdum eros sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dapibus tellus. Nullam varius consectetur vehicula. Donec in vestibulum massa, sed congue quam. Pellentesque auctor enim ac volutpat ultrices. In accumsan dapibus odio, sit amet hendrerit neque efficitur non. Pellentesque mollis ipsum ligula, non fringilla tortor interdum id. Aenean maximus neque non mauris condimentum malesuada. Ut hendrerit quam quis mi malesuada hendrerit. Sed congue condimentum sem vitae vehicula. </p>
  482.                         </div>
  483.                     </div>
  484.                     <hr class="m-1">
  485.                    
  486.                     <!-- PERSON -->
  487.                     <div class="row m-0">
  488.                         <div class="col-lg-auto">
  489.                             <div class="btn btn-outline-secondary m-1 p-1" style="width: 150px; height: 150px;">
  490.                                 <div class="rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 140px; width: 140px;"></div>
  491.                             </div>
  492.                             <h3 class="text-center font-weight-light"><a href="LINK">Name</a></h3>
  493.                         </div>
  494.                         <div class="col-lg card bg-faded rounded-0 border-0 m-1 p-3">
  495.                             <p class="text-secondary mb-1">Relationship • <i class="fas fa-star"></i> </p> <hr class="m-0 mb-2">
  496.                             <p>This box will not scroll. Vestibulum maximus justo sit amet elit congue euismod sed vitae erat. Maecenas ligula ipsum, faucibus sit amet ante sed, placerat consectetur elit. Phasellus aliquam sapien a arcu euismod, id interdum eros sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dapibus tellus. Nullam varius consectetur vehicula. Donec in vestibulum massa, sed congue quam. Pellentesque auctor enim ac volutpat ultrices. In accumsan dapibus odio, sit amet hendrerit neque efficitur non. Pellentesque mollis ipsum ligula, non fringilla tortor interdum id. Aenean maximus neque non mauris condimentum malesuada. Ut hendrerit quam quis mi malesuada hendrerit. Sed congue condimentum sem vitae vehicula. </p>
  497.                         </div>
  498.                     </div>
  499.                     <hr class="m-1">
  500.                 </div>
  501.                 <!-- OTHERS -->
  502.                 <div class="tab-pane fade" id="OTHER">
  503.                     <p class="text-primary font-weight-bold text-center" style="font-size: 16px;">OTHER</p>
  504.                     <!-- PERSON -->
  505.                     <div class="row m-0">
  506.                         <div class="col-lg-auto">
  507.                             <div class="btn btn-outline-secondary m-1 p-1" style="width: 150px; height: 150px;">
  508.                                 <div class="rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 140px; width: 140px;"></div>
  509.                             </div>
  510.                             <h3 class="text-center font-weight-light"><a href="LINK">Name</a></h3>
  511.                         </div>
  512.                         <div class="col-lg card bg-faded rounded-0 border-0 m-1 p-3">
  513.                             <p class="text-secondary mb-1">Relationship • <i class="fas fa-star"></i> </p> <hr class="m-0 mb-2">
  514.                             <p>This box will not scroll. Vestibulum maximus justo sit amet elit congue euismod sed vitae erat. Maecenas ligula ipsum, faucibus sit amet ante sed, placerat consectetur elit. Phasellus aliquam sapien a arcu euismod, id interdum eros sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dapibus tellus. Nullam varius consectetur vehicula. Donec in vestibulum massa, sed congue quam. Pellentesque auctor enim ac volutpat ultrices. In accumsan dapibus odio, sit amet hendrerit neque efficitur non. Pellentesque mollis ipsum ligula, non fringilla tortor interdum id. Aenean maximus neque non mauris condimentum malesuada. Ut hendrerit quam quis mi malesuada hendrerit. Sed congue condimentum sem vitae vehicula. </p>
  515.                         </div>
  516.                     </div>
  517.                     <hr class="m-1">
  518.                    
  519.                     <!-- PERSON -->
  520.                     <div class="row m-0">
  521.                         <div class="col-lg-auto">
  522.                             <div class="btn btn-outline-secondary m-1 p-1" style="width: 150px; height: 150px;">
  523.                                 <div class="rounded" style="background-image: url(//via.placeholder.com/200x200); background-size: cover; height: 140px; width: 140px;"></div>
  524.                             </div>
  525.                             <h3 class="text-center font-weight-light"><a href="LINK">Name</a></h3>
  526.                         </div>
  527.                         <div class="col-lg card bg-faded rounded-0 border-0 m-1 p-3">
  528.                             <p class="text-secondary mb-1">Relationship • <i class="fas fa-star"></i> </p> <hr class="m-0 mb-2">
  529.                             <p>This box will not scroll. Vestibulum maximus justo sit amet elit congue euismod sed vitae erat. Maecenas ligula ipsum, faucibus sit amet ante sed, placerat consectetur elit. Phasellus aliquam sapien a arcu euismod, id interdum eros sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in dapibus tellus. Nullam varius consectetur vehicula. Donec in vestibulum massa, sed congue quam. Pellentesque auctor enim ac volutpat ultrices. In accumsan dapibus odio, sit amet hendrerit neque efficitur non. Pellentesque mollis ipsum ligula, non fringilla tortor interdum id. Aenean maximus neque non mauris condimentum malesuada. Ut hendrerit quam quis mi malesuada hendrerit. Sed congue condimentum sem vitae vehicula. </p>
  530.                         </div>
  531.                     </div>
  532.                     <hr class="m-1">
  533.                 </div>
  534.             </div>
  535.         </div>
  536.     </div>
  537. </div>
  538. <!-- CREDIT, DON'T MOVE -->
  539. <div class="text-right">
  540.     <a data-toggle="tooltip" title="SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
  541. </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!