API tools faq
paste
Advertisement
SparklyLightus

Network

SparklyLightus
Jul 6th, 2021
732
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.53 KB | None | 0 0
raw download clone embed print report
  1. <div class="row no-gutters mx-auto" style="max-width: 1000px;">
  2.     <!-- ....................... HEADER -->
  3.     <div class="col-12"> <div class="m-1 card border-0 bg-faded" style="border-radius: 30px;">
  4.         <div class="m-2 row no-gutters justify-content-center" style="font-size: 16px; letter-spacing: 2px;">
  5.             <!-- 'disabling' a character:
  6.                -add 'faded' to the class of the <div> with 'col-auto'
  7.                -add 'disabled' to the class of the <a>
  8.            -->
  9.             <!-- PERSON - DISABLED -->
  10.             <div class="p-1 px-2 col-auto faded">
  11.                 <div style="background: url('//via.placeholder.com/200') center;
  12.                    background-size: cover; height: 120px; width: 120px;" class="rounded-circle">
  13.                     <a href="LINK" class="h-100 w-100 btn btn-outline-secondary rounded-circle border-0 disabled" style="mix-blend-mode: screen;"></a> </div>
  14.                 <p class="m-0 text-center text-secondary font-weight-bold">NAME</p>
  15.             </div>
  16.             <!-- PERSON -->
  17.             <div class="p-1 px-2 col-auto">
  18.                 <div style="background: url('//via.placeholder.com/200') center;
  19.                    background-size: cover; height: 120px; width: 120px;" class="rounded-circle">
  20.                     <a href="LINK" class="h-100 w-100 btn btn-outline-secondary rounded-circle border-0" style="mix-blend-mode: screen;"></a> </div>
  21.                 <p class="m-0 text-center text-secondary font-weight-bold">NAME</p>
  22.             </div>
  23.             <!-- PERSON -->
  24.             <div class="p-1 px-2 col-auto">
  25.                 <div style="background: url('//via.placeholder.com/200') center;
  26.                    background-size: cover; height: 120px; width: 120px;" class="rounded-circle">
  27.                     <a href="LINK" class="h-100 w-100 btn btn-outline-secondary rounded-circle border-0" style="mix-blend-mode: screen;"></a> </div>
  28.                 <p class="m-0 text-center text-secondary font-weight-bold">NAME</p>
  29.             </div>
  30.             <!-- PERSON -->
  31.             <div class="p-1 px-2 col-auto">
  32.                 <div style="background: url('//via.placeholder.com/200') center;
  33.                    background-size: cover; height: 120px; width: 120px;" class="rounded-circle">
  34.                     <a href="LINK" class="h-100 w-100 btn btn-outline-secondary rounded-circle border-0" style="mix-blend-mode: screen;"></a> </div>
  35.                 <p class="m-0 text-center text-secondary font-weight-bold">NAME</p>
  36.             </div>
  37.             <!-- PERSON -->
  38.             <div class="p-1 px-2 col-auto">
  39.                 <div style="background: url('//via.placeholder.com/200') center;
  40.                    background-size: cover; height: 120px; width: 120px;" class="rounded-circle">
  41.                     <a href="LINK" class="h-100 w-100 btn btn-outline-secondary rounded-circle border-0" style="mix-blend-mode: screen;"></a> </div>
  42.                 <p class="m-0 text-center text-secondary font-weight-bold">NAME</p>
  43.             </div>
  44.             <!-- add more above here-->
  45.         </div>
  46.     </div> </div>
  47.    
  48.     <!-- ....................... LEFT -->
  49.     <div class="col-lg-8">
  50.         <!-- BIO -->
  51.         <div class="m-1 card border-0 bg-faded" style="border-radius: 30px; overflow: hidden;"> <div class="p-2 row no-gutters" style=" height: 530px; overflow: auto;">
  52.             <!-- ABOUT -->
  53.             <div class="p-1 col-12">
  54.                 <h1 class="mb-2 pb-1 text-primary display-4" style="border-bottom: 1px solid;">About</h1>
  55.                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia vel urna blandit lobortis. Morbi sed posuere lorem, id viverra ligula. Etiam libero ante, malesuada sit amet venenatis at, ullamcorper vel sem. Proin sed sollicitudin magna.</p>
  56.             </div>
  57.             <!-- PERSONALITY -->
  58.             <div class="p-1 col-12">
  59.                 <h1 class="mb-2 pb-1 text-primary display-4" style="border-bottom: 1px solid;">Personality</h1>
  60.                 <p>Fusce fermentum nisi elementum, euismod purus sed, sollicitudin sapien. Aenean hendrerit dictum mattis. Integer iaculis sit amet turpis sit amet finibus. Integer at ex dapibus, finibus nisl at, luctus ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat. Fusce auctor quam id est scelerisque, sit amet dictum massa dictum.</p>
  61.             </div>
  62.             <!-- STORY -->
  63.             <div class="p-1 col-12">
  64.                 <h1 class="mb-2 pb-1 text-primary display-4" style="border-bottom: 1px solid;">Story</h1>
  65.                 <a href="#story" data-toggle="collapse" class="p-1 w-100 btn btn-default rounded-0">Show/hide story <i class="fas fa-arrow-down"></i></a>
  66.                 <div id="story" data-toggle="collapse" class="collapse">
  67.                     <div class="m-2 float-sm-left justify-content-center">
  68.                         <img src="//via.placeholder.com/500" style="max-height: 250px; max-width: 200px;"></div>
  69.                    
  70.                     <h1 class="my-1 text-secondary font-weight-bold">Header</h1>
  71.                     <p>Vivamus mollis nulla id pretium fermentum. Vivamus ultrices tellus ante, convallis bibendum ligula pretium eget. In fringilla sapien enim, eu blandit enim viverra nec. Etiam scelerisque eu libero sit amet ultrices. Sed pharetra semper cursus. Fusce faucibus porta ipsum, eu dignissim arcu iaculis vel. Suspendisse eu consequat dui, at placerat dolor. Nam pretium ornare convallis. In a mi at risus commodo pellentesque.</p>
  72.                     <p>Integer nec luctus lorem. Mauris sed iaculis arcu. Pellentesque commodo lectus nulla, vitae pulvinar leo blandit ut. Proin at libero maximus arcu iaculis egestas. Sed sodales convallis eros, nec vulputate nibh. Aenean mauris ipsum, maximus non enim ut, luctus finibus orci. Morbi sodales sem mi, ac sollicitudin orci pretium ut.</p>
  73.                     <h1 class="my-1 text-secondary font-weight-bold">Header</h1>
  74.                     <p>Aliquam sit amet elit in ante scelerisque vestibulum ac nec dui. Integer placerat dolor eros, a cursus sem dictum id. Ut sed sem viverra nunc luctus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nibh quam, placerat in rhoncus id, ornare sed enim. Pellentesque id magna suscipit, ultrices arcu non, tempor libero.</p>
  75.                 </div>
  76.             </div>
  77.             <!-- TASTES -->
  78.             <div class="p-1 col-md-4">
  79.                 <h1 class="mb-2 pb-1 text-primary display-4" style="border-bottom: 1px solid;">Tastes</h1>
  80.                 <ul class="list-unstyled">
  81.                     <li><i class="fas fa-plus"></i> Like</li>
  82.                     <li><i class="fas fa-plus"></i> Like</li>
  83.                     <li><i class="fas fa-minus"></i> Dislike</li>
  84.                     <li><i class="fas fa-minus"></i> Dislike</li>
  85.                 </ul>
  86.             </div>
  87.             <!-- TRIVIA -->
  88.             <div class="p-1 col-md-8">
  89.                 <h1 class="mb-2 pb-1 text-primary display-4" style="border-bottom: 1px solid;">Trivia</h1>
  90.                 <ul class="list-unstyled">
  91.                     <li><i class="fas fa-star"></i> Vestibulum feugiat interdum nisl quis viverra. Ut in pulvinar urna, vel vestibulum erat.</li>
  92.                     <li><i class="fas fa-star"></i> Integer vitae nisl mollis, auctor ligula a, tempor quam.</li>
  93.                     <li><i class="fas fa-star"></i> Phasellus a leo nec lacus rutrum mollis vitae ac nulla.</li>
  94.                     <li><i class="fas fa-star"></i> Aenean ultrices congue faucibus. Cras tempor erat a lectus malesuada accumsan.</li>
  95.                 </ul>
  96.             </div>
  97.             <!-- RELATIONSHIPS -->
  98.             <div class="p-1 col-12 row no-gutters">
  99.                 <div class="col-12"> <h1 class="mb-2 pb-1 text-primary display-4 " style="border-bottom: 1px solid;">Relationships</h1> </div>
  100.                 <!-- PERSON -->
  101.                 <div class="p-1 col-md-6">
  102.                     <h3 class="mx-1 mb-0 font-weight-bold float-left"> <a href="LINK" class="text-secondary">Name:</a></h3>
  103.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non justo dictum, efficitur sapien euismod, finibus augue. Sed nunc nulla, ultricies at lacus at, semper accumsan dui.</p>
  104.                 </div>
  105.                 <!-- PERSON -->
  106.                 <div class="p-1 col-md-6">
  107.                     <h3 class="mx-1 mb-0 font-weight-bold float-left"> <a href="LINK" class="text-secondary">Name:</a></h3>
  108.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non justo dictum, efficitur sapien euismod, finibus augue. Sed nunc nulla, ultricies at lacus at, semper accumsan dui.</p>
  109.                 </div>
  110.                 <!-- PERSON -->
  111.                 <div class="p-1 col-md-6">
  112.                     <h3 class="mx-1 mb-0 font-weight-bold float-left"> <a href="LINK" class="text-secondary">Name:</a></h3>
  113.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non justo dictum, efficitur sapien euismod, finibus augue. Sed nunc nulla, ultricies at lacus at, semper accumsan dui.</p>
  114.                 </div>
  115.                 <!-- PERSON -->
  116.                 <div class="p-1 col-md-6">
  117.                     <h3 class="mx-1 mb-0 font-weight-bold float-left"> <a href="LINK" class="text-secondary">Name:</a></h3>
  118.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non justo dictum, efficitur sapien euismod, finibus augue. Sed nunc nulla, ultricies at lacus at, semper accumsan dui.</p>
  119.                 </div>
  120.             </div>
  121.         </div> </div>
  122.         <!-- COLORS -->
  123.         <div class="row no-gutters">
  124.             <div class="p-1 col-3"> <div style="background: #ffffff; height: 30px; width: 100%; border-radius: 30px;"></div> </div>
  125.             <div class="p-1 col-3"> <div style="background: #aaaaaa; height: 30px; width: 100%; border-radius: 30px;"></div> </div>
  126.             <div class="p-1 col-3"> <div style="background: #777777; height: 30px; width: 100%; border-radius: 30px;"></div> </div>
  127.             <div class="p-1 col-3"> <div style="background: #555555; height: 30px; width: 100%; border-radius: 30px;"></div> </div>
  128.         </div>
  129.     </div>
  130.     <!-- ....................... RIGHT -->
  131.     <div class="col-lg-4 flex-column">
  132.         <!-- IMAGE -->
  133.         <div class="w-100 justify-content-center" style="margin-top: -15px; margin-bottom: -15px; z-index: 100">
  134.             <!-- image url down here -->
  135.             <div style="background: url('//via.placeholder.com/500'); background-position: center; background-size: cover;
  136.            height: 280px; width: 70%; max-width: 250px; overflow: hidden; border-radius: 22px;" class="align-items-end">
  137.                 <!-- BUTTONS -->
  138.                 <ul class="w-100 nav nav-pills text-center row no-gutters justify-content-center" style="font-size: 15px; background: rgba(0,0,0,0.6);">
  139.                     <li class="p-1 col nav-item"><a data-toggle="tab" class="nav-link active" style="border-radius: 30px;" href="#I">
  140.                         <i class="fas fa-user"></i> </a></li>
  141.                     <li class="p-1 col nav-item"><a data-toggle="tab" class="nav-link" style="border-radius: 30px;" href="#II">
  142.                         <i class="fas fa-chart-bar"></i> </a></li>
  143.                     <li class="p-1 col nav-item"><a data-toggle="tab" class="nav-link" style="border-radius: 30px;" href="#III">
  144.                         <i class="fas fa-pencil-paintbrush"></i> </a></li>
  145.                 </ul>
  146.             </div>
  147.         </div>
  148.         <!-- BOX -->
  149.         <div class="m-1 card border-0 bg-faded" style="border-radius: 30px; overflow: hidden;"> <div class="p-3" style="height: 318px; overflow: auto;">
  150.             <!-- NAV CONTENT -->
  151.             <div class="tab-content">
  152.                 <!-- ONE -->
  153.                 <div class="tab-pane fade show active" id="I">
  154.                     <div class="my-2 row no-gutters">
  155.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Name</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  156.                         <p class="m-0 px-1 col-auto">content</p>  </div>
  157.                     <div class="my-2 row no-gutters">
  158.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Alias</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  159.                         <p class="m-0 px-1 col-auto">content</p>  </div>
  160.                     <div class="my-2 row no-gutters">
  161.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Age</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  162.                         <p class="m-0 px-1 col-auto">content</p>  </div>
  163.                     <div class="my-2 row no-gutters">
  164.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Gender</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  165.                         <p class="m-0 px-1 col-auto">content</p>  </div>
  166.                     <div class="my-2 row no-gutters">
  167.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Race</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  168.                         <p class="m-0 px-1 col-auto">content</p>  </div>
  169.                     <div class="my-2 row no-gutters">
  170.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Orientation</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  171.                         <p class="m-0 px-1 col-auto">content</p>  </div>
  172.                     <div class="my-2 row no-gutters">
  173.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Occupation</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  174.                         <p class="m-0 px-1 col-auto">content</p>  </div>
  175.                 </div>
  176.                 <!-- TWO -->
  177.                 <div class="tab-pane fade" id="II"> <div class="row no-gutters text-center">
  178.                     <!-- CHANGE fas TO fal TO MAKE THE ICONS OUTLINE ONLY-->
  179.                     <!-- CHARACTER -->
  180.                     <div class="px-1 col-6">
  181.                         <p class="mt-2 m-0 text-secondary font-weight-bold">Charisma</p>
  182.                         <p class="m-0">
  183.                             <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </p>
  184.                        
  185.                         <p class="mt-2 m-0 text-secondary font-weight-bold">Courage</p>
  186.                         <p class="m-0">
  187.                             <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i>
  188.                             <i class="fal fa-star"></i> </p>
  189.                        
  190.                         <p class="mt-2 m-0 text-secondary font-weight-bold">Humor</p>
  191.                         <p class="m-0">
  192.                             <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i>
  193.                             <i class="fal fa-star"></i> <i class="fal fa-star"></i> </p>
  194.                            
  195.                         <p class="mt-2 m-0 text-secondary font-weight-bold">Integrity</p>
  196.                         <p class="m-0">
  197.                             <i class="fas fa-star"></i> <i class="fas fa-star"></i>
  198.                             <i class="fal fa-star"></i>  <i class="fal fa-star"></i> <i class="fal fa-star"></i> </p>
  199.                        
  200.                         <p class="mt-2 m-0 text-secondary font-weight-bold">Kindness</p>
  201.                         <p class="m-0">
  202.                             <i class="fas fa-star"></i>
  203.                             <i class="fal fa-star"></i> <i class="fal fa-star"></i>  <i class="fal fa-star"></i> <i class="fal fa-star"></i> </p>
  204.                     </div>
  205.                     <!-- BATTLE -->
  206.                     <div class="px-1 col-6">
  207.                         <p class="mt-2 m-0 text-secondary font-weight-bold">Attack</p>
  208.                         <p class="m-0">
  209.                             <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </p>
  210.                        
  211.                         <p class="mt-2 m-0 text-secondary font-weight-bold">Defense</p>
  212.                         <p class="m-0">
  213.                             <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i>
  214.                             <i class="fal fa-star"></i> </p>
  215.                        
  216.                         <p class="mt-2 m-0 text-secondary font-weight-bold">Magic</p>
  217.                         <p class="m-0">
  218.                             <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i>
  219.                             <i class="fal fa-star"></i> <i class="fal fa-star"></i> </p>
  220.                            
  221.                         <p class="mt-2 m-0 text-secondary font-weight-bold">Resistance</p>
  222.                         <p class="m-0">
  223.                             <i class="fas fa-star"></i> <i class="fas fa-star"></i>
  224.                             <i class="fal fa-star"></i>  <i class="fal fa-star"></i> <i class="fal fa-star"></i> </p>
  225.                        
  226.                         <p class="mt-2 m-0 text-secondary font-weight-bold">Speed</p>
  227.                         <p class="m-0">
  228.                             <i class="fas fa-star"></i>
  229.                             <i class="fal fa-star"></i> <i class="fal fa-star"></i>  <i class="fal fa-star"></i> <i class="fal fa-star"></i> </p>
  230.                     </div>
  231.                 </div> </div>
  232.                 <!-- THREE -->
  233.                 <div class="tab-pane fade" id="III">
  234.                     <div class="my-2 row no-gutters">
  235.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Body shape</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  236.                         <p class="m-0 px-1 col-auto">content</p>  </div>
  237.                     <div class="my-2 row no-gutters">
  238.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Build</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  239.                         <p class="m-0 px-1 col-auto">content</p>  </div>
  240.                     <div class="my-2 row no-gutters">
  241.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Posture</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  242.                         <p class="m-0 px-1 col-auto">content</p>  </div>
  243.                     <div class="my-2 row no-gutters">
  244.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Demeanor</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  245.                         <p class="m-0 px-1 col-auto">content</p>  </div>
  246.                     <div class="my-2 row no-gutters">
  247.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Height</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  248.                         <p class="m-0 px-1 col-auto">content</p>  </div>
  249.                     <div class="my-2 row no-gutters">
  250.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Designer</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  251.                         <p class="m-0 px-1 col-auto">@/user</p>  </div>
  252.                     <div class="my-2 row no-gutters">
  253.                         <p class="m-0 px-1 col-auto text-secondary font-weight-bold">Value</p>  <div class="mb-2 col text-secondary" style="border-bottom: 1px dotted;"></div>
  254.                         <p class="m-0 px-1 col-auto">$$$</p>  </div>
  255.                 </div>
  256.             </div>
  257.             <!-- CREDITS -->
  258.             <p style="position: absolute; bottom: 5px; right: 10px;">
  259.                 <a data-toggle="tooltip" title="HTML by SparklyCodes" href="/SparklyCodes"><i class="fas fa-code"></i></a>
  260.                 <a data-toggle="tooltip" title="Layout by Togo" href="https://toyhou.se/~world/82691.coders-quarters/page/33776.july-challenge"><i class="fas fa-paint-brush"></i></a>
  261.             </p>
  262.         </div> </div>
  263.     </div>
  264. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!