SHARE
TWEET

TH

a guest Nov 16th, 2019 103 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!----
  2.  
  3. Quick View by technibabble
  4.  
  5. ---->
  6.  
  7. <div class="container-fluid">
  8.   <div class="row">
  9. <!---- RIGHT COLUMN ---->
  10.     <div class="col-md-4 col-lg-3 flex-md-last">
  11. <!-- NAV -->
  12.       <div class="card rounded-0 mb-3">
  13.         <div class="card-block">
  14.           <ul class="nav nav-pills flex-column">
  15.             <li class="nav-item">
  16.               <a href="#basic" data-toggle="tab" class="nav-link active d-flex justify-content-between">Basics<i class="fal fa-sliders-h fa-fw my-auto"></i></a>
  17.             </li>
  18.             <li class="nav-item">
  19.               <a href="#info" data-toggle="tab" class="nav-link d-flex justify-content-between">Info<i class="fal fa-address-card fa-fw my-auto"></i></a>
  20.             </li>
  21.             <li class="nav-item">
  22.               <a href="#friends" data-toggle="tab" class="nav-link d-flex justify-content-between">Relations<i class="fal fa-heartbeat fa-fw my-auto"></i></a>
  23.             </li>
  24.           </ul>
  25.         </div>
  26.       </div>
  27. <!-- SIDE PICTURE - hidden on small screens -->
  28.       <img class="img-thumbnail rounded-0 mb-3 d-none d-md-block" src="https://cdn.discordapp.com/attachments/430144495573663766/635676606484185098/na.png" />
  29.     </div>
  30. <!---- LEFT COLUMN ---->
  31.     <div class="col-md-8 col-lg-9">
  32.       <div class="tab-content">
  33. <!---- BASIC ---->
  34.         <div class="tab-pane fade in active show" id="basic">
  35.           <div class="card rounded-0 mb-3">
  36.             <div class="card-block">
  37. <!-- ESSENTIALS -->
  38.               <div class="row col-xl-10 mx-xl-auto mb-3">
  39.                 <div class="col-lg">
  40.                   <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Name</span> text</div>
  41.                   <hr class="my-1" />
  42.                   <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Alias</span> text</div>
  43.                   <hr class="my-1" />
  44.                   <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Gender</span> text</div>
  45.                   <hr class="my-1" />
  46.                   <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Birthday</span> text</div>
  47.                   <hr class="my-1" />
  48.                   <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Death</span> text</div>
  49.                   <hr class="d-lg-none my-1" />
  50.                 </div>
  51.                 <div class="col-lg">
  52.                   <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Height</span> text</div>
  53.                   <hr class="my-1" />
  54.                   <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">HC voice</span> <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" id="" style="color:#ff0000;">N/A</a></div>
  55.                   <hr class="my-1" />
  56.                   <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Sexuality</span> text</div>
  57.                   <hr class="my-1" />
  58.                   <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Occupation</span> text</div>
  59.                   <hr class="my-1" />
  60.                   <div class="d-flex justify-content-between"><span class="text-uppercase text-muted font-weight-bold">Theme</span> <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" id="" style="color:#ff0000;">N/A</a></div>
  61.                 </div>
  62.               </div>
  63. <!-- SNIPPET -->
  64.               <div class="text-justify">
  65.                 <p>text</p>
  66.               </div>
  67.             </div>
  68.           </div>
  69. <!--- PALETTE --->
  70.           <div class="row">
  71.             <div class="col-4 col-sm-2 col-md-4 col-lg-2">
  72.               <div class="card rounded-0 mb-3 tooltipster" title="text" style="height:3rem; background-color:#ff0000;"></div>
  73.             </div>
  74.             <div class="col-4 col-sm-2 col-md-4 col-lg-2">
  75.               <div class="card rounded-0 mb-3 tooltipster" title="eyes" style="height:3rem; background-color:#ff0000;"></div>
  76.             </div>
  77.             <div class="col-4 col-sm-2 col-md-4 col-lg-2">
  78.               <div class="card rounded-0 mb-3 tooltipster" title="hair" style="height:3rem; background-color:#ff0000;"></div>
  79.             </div>
  80.             <div class="col-4 col-sm-2 col-md-4 col-lg-2">
  81.               <div class="card rounded-0 mb-3 tooltipster" title="skin" style="height:3rem; background-color:#ff0000;"></div>
  82.             </div>
  83.             <div class="col-4 col-sm-2 col-md-4 col-lg-2">
  84.               <div class="card rounded-0 mb-3 tooltipster" title="text" style="height:3rem; background-color:#ff0000;"></div>
  85.             </div>
  86.             <div class="col-4 col-sm-2 col-md-4 col-lg-2">
  87.               <div class="card rounded-0 mb-3 tooltipster" title="text" style="height:3rem; background-color:#ff0000;"></div>
  88.             </div>
  89.           </div>
  90. <!--- STATS - change "width:1%" to however full you want the bar --->
  91.           <div class="card rounded-0 mb-3">
  92.             <div class="card-block">
  93.               <div class="row">
  94.                 <div class="col-lg">
  95. <!-- STRENGTH -->
  96.                   <p class="text-uppercase mb-0">STRENGTH</p>
  97.                   <div class="progress my-2 rounded-0"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  98.                   style="width:50%;height:16px"></div>
  99.                   </div>
  100. <!-- ENERGY -->
  101.                   <p class="text-uppercase mb-0">ENERGY</p>
  102.                   <div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  103.                   style="width:50%;height:16px"></div>
  104.                   </div>
  105. <!-- DEXTERITY -->
  106.                   <p class="text-uppercase mb-0">DEXTERITY / AGILITY</p>
  107.                   <div class="progress my-2 rounded-0"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  108.                   style="width:50%;height:16px"></div>
  109.                   </div>
  110. <!-- CONCENTRATION -->
  111.                   <p class="text-uppercase mb-0">CONCENTRATION</p>
  112.                   <div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  113.                   style="width:50%;height:16px"></div>
  114.                   </div>
  115. <!-- AFFECTION -->
  116.                   <p class="text-uppercase mb-0">AFFECTION (ROMANCE / ATTACHMENT)</p>
  117.                   <div class="progress my-2 rounded-0"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  118.                   style="width:50%;height:16px"></div>
  119.                   </div>
  120.                 </div>
  121.                 <div class="col-lg">
  122. <!-- EMPATHY -->
  123.                   <p class="text-uppercase mb-0">EMPATHY</p>
  124.                   <div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  125.                   style="width:50%;height:16px"></div>
  126.                   </div>
  127. <!-- INTELLIGENCE -->
  128.                   <p class="text-uppercase mb-0">INTELLIGENCE</p>
  129.                   <div class="progress my-2 rounded-0"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  130.                   style="width:50%;height:16px"></div>
  131.                   </div>
  132. <!-- INTUITION -->
  133.                   <p class="text-uppercase mb-0">INTUITION</p>
  134.                   <div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  135.                   style="width:50%;height:16px"></div>
  136.                   </div>
  137. <!-- CHARISMA -->
  138.                   <p class="text-uppercase mb-0">CHARISMA</p>
  139.                   <div class="progress my-2 rounded-0"><div class="progress-bar bg-dark progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  140.                   style="width:50%;height:16px"></div>
  141.                   </div>
  142. <!-- LIBIDO -->
  143.                   <p class="text-uppercase mb-0">LIBIDO</p>
  144.                   <div class="progress my-2 rounded-0"><div class="progress-bar bg-secondary progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin ="0" aria-valuemax="100"
  145.                   style="width:50%;height:16px"></div>
  146.                   </div>
  147.                 </div>
  148.               </div>
  149.             </div>
  150.           </div>
  151.         </div>
  152. <!--- INFO --->
  153.         <div class="tab-pane fade" id="info">
  154. <!-- ABOUT -->
  155.           <div class="card rounded-0 mb-3">
  156.             <div class="card-block text-justify">
  157.               <h3 class="text-muted text-uppercase d-flex justify-content-between mb-3">About <i class="fal fa-star fa-fw"></i></h3>
  158.                <p dir="ltr"><strong><span style="background-color: initial; font-size: 18px;">Trivia:</span></strong></p><ul style="list-style-type: circle;"><li>text</li></ul><p dir="ltr"><strong><span style="font-size: 18px;">Story:</span></strong></p>text</p>
  159.             </div>
  160.           </div>
  161. <!-- APPEARANCE -->
  162.           <div class="card rounded-0 mb-3">
  163.             <div class="card-block text-justify">
  164.               <h3 class="text-muted text-uppercase d-flex justify-content-between mb-3">Appearance <i class="fal fa-user-circle fa-fw"></i></h3>
  165.               <div class="text-center">
  166. <!-- IMAGE -->
  167.                 <img src="https://cdn.discordapp.com/attachments/430144495573663766/635676606484185098/na.png" class="mb-3" />
  168.               </div>
  169.               <p>text</p>
  170.             </div>
  171.           </div>
  172.         </div>
  173. <!--- FRIENDS --->
  174.         <div class="tab-pane fade" id="friends">
  175. <!-- LEFT-ALIGNED -->
  176.           <div class="card rounded-0 mb-3">
  177.             <div class="card-block text-justify">
  178.               <div class="float-left mr-3">
  179.                 <a href="https://toyhou.se/4735954.noire"><img class="rounded-0 img-thumbnail tooltipster" style="width:125px;" src="https://cdn.discordapp.com/attachments/430144495573663766/635676606484185098/na.png" title="name" /></a>
  180.               </div>
  181.               <p><strong><span style="font-size: 20px;">Name</span></strong></p><p><span style="font-size: 14px;">text</p>
  182.             </div>
  183.           </div>
  184. <!-- LEFT-ALIGNED -->
  185.           <div class="card rounded-0 mb-3">
  186.             <div class="card-block text-justify">
  187.               <div class="float-left mr-3">
  188.                 <a href="https://toyhou.se/4608288.roy"><img class="rounded-0 img-thumbnail tooltipster" style="width:125px;" src="https://cdn.discordapp.com/attachments/430144495573663766/635676606484185098/na.png" title="name" /></a>
  189.               </div>
  190.               <p><strong><span style="font-size: 20px;">Name</span></strong></p><p><span style="font-size: 14px;">text</p>
  191.             </div>
  192.           </div>
  193. <!-- LEFT-ALIGNED -->
  194.           <div class="card rounded-0 mb-3">
  195.             <div class="card-block text-justify">
  196.               <div class="float-left mr-3">
  197.                 <a href="https://toyhou.se/4608288.roy"><img class="rounded-0 img-thumbnail tooltipster" style="width:125px;" src="https://cdn.discordapp.com/attachments/430144495573663766/635676606484185098/na.png" title="name" /></a>
  198.               </div>
  199.               <p><strong><span style="font-size: 20px;">Name</span></strong></p><p><span style="font-size: 14px;">text</p>
  200.             </div>
  201.           </div>
  202. <!-- LEFT-ALIGNED -->
  203.           <div class="card rounded-0 mb-3">
  204.             <div class="card-block text-justify">
  205.               <div class="float-left mr-3">
  206.                 <a href="https://toyhou.se/4920052.anton"><img class="rounded-0 img-thumbnail tooltipster" style="width:125px;" src="https://cdn.discordapp.com/attachments/430144495573663766/635676606484185098/na.png" title="name" /></a>
  207.               </div>
  208.               <p><strong><span style="font-size: 20px;">Name</span></strong></p><p><span style="font-size: 14px;">text</p>
  209.             </div>
  210.           </div>
  211. <!-- END -->
  212.         </div>
  213.       </div>
  214.     </div>
  215.   </div>
  216. </div>
  217.  
  218. <!---- CREDIT - DO NOT REMOVE ---->
  219. <div class="float-right"><a href="/technibabble" title="code|techni" data-placement="left" class="btn btn-outline-primary d-inline-flex p-2 rounded-circle tooltipster"><i class="fal fa-code m-auto" /></a></div>
RAW Paste Data
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
 
Top