API tools faq
paste
Viragora

for8km

Viragora
Oct 27th, 2020
97
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 12.41 KB | None | 0 0
raw download clone embed print report
  1. <div class="container p-0" style="max-width:885px; min-height: 630px; font-size: 10pt;">
  2. <div class="card bg-faded p-md-3 p-2 mb-2" style="border-radius: 1em;">
  3.   <div class="row no-gutters">
  4.     <div class="col-md-4 mb-md-0 mb-3 pr-md-2">
  5.         <!--------- SIDE STATS -------------------------------------------------------->
  6.         <div class="card rounded-0 modal-open h-100" style="border-radius: 1em;">
  7.           <!------ focal image -- will scale with screen -- focus in top center of image------->
  8.           <div style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/images/23471745_uDJmehms0JPTUHv.png);
  9.          background-size: cover; background-position: center 0; background-repeat: no-repeat; min-height: 280px;" class="mb-3"></div>
  10.           <div class="mt-1 w-100">
  11.           <!---- stats section --- you can chang the font awesome icons to do different stats --->
  12.           <div class="px-3 d-flex align-items-center mb-3">
  13.               <div class="bg-faded p-1 rounded">
  14.                   <i class="fal fa-user fa-fw" />
  15.               </div><div class="pl-2 text-muted text-muted">
  16.                 name here
  17.               </div>
  18.           </div>
  19.    
  20.           <div class="px-3 d-flex align-items-center mb-3">
  21.               <div class="bg-faded p-1 rounded">
  22.                   <i class="fal fa-calendar-alt fa-fw" />
  23.               </div><div class="pl-2 text-muted">
  24.                   age here
  25.               </div>
  26.           </div>
  27.    
  28.           <div class="px-3 d-flex align-items-center mb-3">
  29.               <div class="bg-faded p-1 rounded">
  30.                   <i class="fal fa-venus-mars fa-fw" />
  31.               </div><div class="pl-2 text-muted">
  32.                   gender here
  33.               </div>
  34.           </div>
  35.    
  36.           <div class="px-3 d-flex align-items-center mb-3">
  37.               <div class="bg-faded p-1 rounded">
  38.                   <i class="fal fa-dna fa-fw" />
  39.                 </div><div class="pl-2 text-muted">
  40.                   race/species here
  41.                 </div>
  42.           </div>
  43.    
  44.           <div class="px-3 d-flex align-items-center mb-3">
  45.               <div class="bg-faded p-1 rounded">
  46.                   <i class="fal fa-ruler fa-fw" />
  47.                 </div><div class="pl-2 text-muted">
  48.                   height here
  49.                 </div>
  50.           </div>
  51.    
  52.           <div class="px-3 d-flex align-items-center mb-3">
  53.               <div class="bg-faded p-1 rounded">
  54.                   <i class="fal fa-balance-scale fa-fw" />
  55.                 </div><div class="pl-2 text-muted">
  56.                   MBTI here
  57.                 </div>
  58.           </div>
  59.          
  60.           </div>
  61.         </div>
  62.     </div>
  63.   <!--------- CONTENT AREA -------------------------------------------------------->
  64.     <div class="col-md-8 card" style="border-radius:1em;">
  65.       <div class="card-header bg-faded">
  66.         <ul class="nav nav-tabs card-header-tabs nav-justified text-uppercase">
  67.           <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#ONE">About <i class="fal fa-bookmark fa-fw" /></a></li>
  68.           <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#TWO">Traits <i class="fal fa-heartbeat fa-fw" /></a></li>
  69.           <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#THREE">History <i class="fal fa-books fa-fw" /></a></li>
  70.           <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#FOUR">Related <i class="fal fa-users fa-fw" /></a></li>
  71.         </ul>
  72.       </div>
  73.      
  74.       <div class="tab-content">
  75.         <div class="tab-pane active show px-2 pt-4 pb-1" style="min-height: 550px" id="ONE">
  76.           <div class="bg-faded px-2 py-1 mb-2 justify-content-between" style="font-size:1.5em;font-weight:300;letter-spacing:1px;border-radius:.5em;"><div>About tab title</div></div>
  77.           <div class="text-muted px-2 mb-3">
  78.             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis. Aliquam erat
  79.                     volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum. Phasellus pretium non libero eu ultricies. Proin et est vitae metus interdum ullamcorper vel sit amet augue. Integer et diam eu massa
  80.                     faucibus molestie non vitae metus.
  81.             </p>
  82.           </div>        
  83.         </div>
  84.         <div class="tab-pane px-2 pt-4 pb-1" style="min-height: 550px" id="TWO">
  85.           <div class="row no-gutters">
  86.             <div class="col-md-6 pr-md-1">
  87.               <!--- header block ---------------->
  88.               <div class="bg-faded px-2 py-1 mb-2" style="font-size: 1.5em; font-weight: 300; letter-spacing: 1px; border-radius: 0.5em;"><div class="justify-content-between">
  89.                   <div>Traits</div>
  90.                   <div><i class="fal fa-heartbeat fa-fw" /></div>
  91.               </div></div>
  92.               <ul class="mb-3 pl-4 text-muted">
  93.                   <li class="mb-1">personality traits</li>
  94.                   <li class="mb-1">two</li>
  95.                   <li class="mb-1">three</li>
  96.                   <li class="mb-1">four</li>
  97.               </ul>
  98.           </div>
  99.             <div class="col-md-6 pl-md-1">
  100.               <!--- header block ---------------->
  101.               <div class="bg-faded px-2 py-1 mb-2" style="font-size: 1.5em; font-weight: 300; letter-spacing: 1px; border-radius: 0.5em;"><div class="justify-content-between">
  102.                   <div>Likes</div>
  103.                   <div><i class="fal fa-plus-circle fa-fw" /></div>
  104.               </div></div>
  105.               <ul class="mb-3 pl-4 text-muted">
  106.                   <li class="mb-1">things they like</li>
  107.                   <li class="mb-1">two</li>
  108.                   <li class="mb-1">three</li>
  109.                   <li class="mb-1">four</li>
  110.               </ul>
  111.           </div>
  112.           </div>
  113.         </div>
  114.         <div class="tab-pane px-2 pt-4 pb-1" style="min-height: 550px" id="THREE">
  115.           <div class="bg-faded px-2 py-1 mb-2" style="font-size: 1.5em; font-weight: 300; letter-spacing: 1px; border-radius: 0.5em;"><div class="justify-content-between">
  116.             <div>Background</div>
  117.             <div><i class="fal fa-books fa-fw" /></div>
  118.           </div></div>
  119.           <div class="text-muted px-2 mb-3">
  120.               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis. Aliquam erat
  121.                   volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum. Phasellus pretium non libero eu ultricies. Proin et est vitae metus interdum ullamcorper vel sit amet augue. Integer et diam eu massa
  122.                   faucibus molestie non vitae metus. Donec cursus lectus eros, in vestibulum sapien porta et. Aliquam ac est lorem. Integer et diam eu massa faucibus molestie non vitae metus.</p>
  123.  
  124.               <p>Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum. Phasellus pretium non libero eu ultricies. Proin et est vitae metus interdum ullamcorper vel sit amet augue. Integer et diam eu
  125.                   massa faucibus molestie non vitae metus. Donec cursus lectus eros, in vestibulum sapien porta et. Aliquam ac est lorem. Etiam pulvinar laoreet augue, et faucibus ligula ornare quis. Pellentesque sed leo
  126.                   tincidunt, consectetur dui in, tincidunt nunc. </p>
  127.           </div>
  128.          
  129.           <div class="bg-faded px-2 py-1 mb-2" style="font-size: 1.5em; font-weight: 300; letter-spacing: 1px; border-radius: 0.5em;"><div class="justify-content-between">
  130.             <div>Trivia</div>
  131.             <div><i class="fal fa-list-alt fa-fw" /></div>
  132.           </div></div>
  133.         <!--- content block ---------------->
  134.           <div class="text-muted px-2 mb-3">
  135.               <ul class="pl-4 mb-0 text-muted">
  136.                   <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
  137.                   <li class="mb-2">Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra</li>
  138.                   <li class="mb-2">Donec non dui id augue pellentesque aliquam et eget felis</li>
  139.                   <li class="mb-2">Aliquam erat volutpat. Nulla nulla augue, vehicula id volutpat nec, auctor et ipsum</li>
  140.                   <li class="mb-2">Phasellus pretium non libero eu ultricies</li>
  141.               </ul>
  142.           </div>
  143.         </div>
  144.         <div class="tab-pane px-2 pt-4 pb-1" style="min-height: 550px" id="FOUR">
  145.           <div class="bg-faded px-2 py-1 mb-2" style="font-size: 1.5em; font-weight: 300; letter-spacing: 1px; border-radius: 0.5em;"><div class="justify-content-between">
  146.             <div>Related</div>
  147.             <div><i class="fal fa-users fa-fw" /></div>
  148.         </div></div>
  149.           <div class="px-2 text-muted">
  150.             <div class="row no-gutters">
  151.               <div class="col-12 mb-3">
  152.                 <a href="CHARACTER_LINK" target="_BLANK">
  153.                     <!--- character image -------->
  154.                     <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23471735_uVZLl4qpjPREyqr.png"
  155.                    style="max-height: 150px; border-radius: 0.5em;" class="float-md-right ml-md-2 d-block mx-auto mb-2" />
  156.                 </a>
  157.                 <div class="text-md-left text-center">
  158.                     <p style="font-size: 1.15em; letter-spacing: 1px;" class="mb-2">
  159.                       Character Name
  160.                     </p><p>
  161.                       <!-- change the font awesome icon to fit their realtionship ---->
  162.                       <i class="fas fa-heart fa-fw" /> <i style="letter-spacing: 1px;">relationship</i> <br />
  163.                      
  164.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis.Aliquam erat volutpat. </p>
  165.                 </div>
  166.               </div>
  167.               <div class="col-12 mb-3">
  168.                 <a href="CHARACTER_LINK" target="_BLANK">
  169.                     <!--- character image -------->
  170.                     <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23471735_uVZLl4qpjPREyqr.png"
  171.                    style="max-height: 150px; border-radius: 0.5em;" class="float-md-right ml-md-2 d-block mx-auto mb-2" />
  172.                 </a>
  173.                 <div class="text-md-left text-center">
  174.                     <p style="font-size: 1.15em; letter-spacing: 1px;" class="mb-2">
  175.                       Character Name
  176.                     </p><p>
  177.                       <!-- change the font awesome icon to fit their realtionship ---->
  178.                       <i class="fas fa-skull fa-fw" /> <i style="letter-spacing: 1px;">relationship</i> <br />
  179.                      
  180.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis.Aliquam erat volutpat.</p>
  181.                 </div>
  182.               </div>
  183.               <div class="col-12 mb-3">
  184.                 <a href="CHARACTER_LINK" target="_BLANK">
  185.                     <!--- character image -------->
  186.                     <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/23471735_uVZLl4qpjPREyqr.png"
  187.                    style="max-height: 150px; border-radius: 0.5em;" class="float-md-right ml-md-2 d-block mx-auto mb-2" />
  188.                 </a>
  189.                 <div class="text-md-left text-center">
  190.                     <p style="font-size: 1.15em; letter-spacing: 1px;" class="mb-2">
  191.                       Character Name
  192.                     </p><p>
  193.                       <!-- change the font awesome icon to fit their realtionship ---->
  194.                       <i class="fas fa-question fa-fw" /> <i style="letter-spacing: 1px;">relationship</i> <br />
  195.                      
  196.                         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis ex quis enim condimentum, vulputate elementum lacus viverra. Donec non dui id augue pellentesque aliquam et eget felis.Aliquam erat volutpat. </p>
  197.                 </div>
  198.               </div>
  199.             </div>
  200.           </div>
  201.         </div>
  202.       </div>
  203.     </div>
  204. </div>
  205. <p class="small text-right text-right">HTML by  @eggy</p>
  206. </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!