API tools faq
paste
Advertisement
meromerc

Dead Weight! (Updated)

meromerc
Feb 28th, 2025
205
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 34.56 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.    DEAD WEIGHT!
  4.    by meromercury
  5.    
  6.    created: 06/28/21 // updated: 3/1/25
  7.    
  8.      accent color 1: #7154FB
  9.      accent color 2: #2387f4
  10.      highlight, then CTRL+F to select all and replace.
  11.      change both to the same color if you only want one color.
  12.    
  13.    see FontAwesome.com for a full list of available symbols
  14.  
  15. -->
  16.  
  17. <div class="container" style="font-size:14px;">
  18. <div class="row">
  19.  
  20. <!-------------------
  21.  
  22.      SIDE PANEL
  23.  
  24. --------------------->
  25.  
  26. <div class="container col-sm-12 col-lg-3 p-0 mr-lg-3 m-0 mb-3 mb-lg-0" style="">
  27. <div class="card d-block rounded-0" style="height:600px">
  28.  
  29.   <!-------- SIDE IMAGE -------->
  30.   <!------- replace URL with the link to your image - it will automatically adjust ------->
  31.   <div class="border-0 p-0 m-0 mb-1" style="background:url(
  32.  URL
  33.  ) top center; background-repeat: no-repeat; border:muted; background-size:cover;height:350px;width:100%;">
  34.         <div class="p-2" style="position:absolute;right:0;top:315px">
  35.             <a target="_blank" href="https://toyhou.se/meromercury" class="tooltipster bg-faded p-2 pb-2" title="code" style="font-size:13px; border-radius:15px 15px 0px 0px;color:#2387f4"><i class="far fa-code" aria-hidden="true"></i></a>
  36.            
  37.   <!----- IMAGE CREDIT - ADD THE LINK TO THE ARTIST BELOW ----->
  38.             <a target="_blank" href="
  39.            ARTIST LINK
  40.            " class="tooltipster bg-faded p-2 pb-2" title="image credit" style="font-size:14px; border-radius:15px 15px 0px 0px;color:#7154FB"><i class="far fa-image-landscape" aria-hidden="true"></i></a>
  41.         </div>
  42.   </div>
  43.  
  44.   <!----- SIDE INFO ----->
  45.   <div class="tab-content p-0" style="height:195px">
  46.     <div class="tab-pane active show mb-0" id="left1">
  47.       <div class="container p-0" style="max-height:250px; overflow:auto">
  48.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  49.           <div style="font-weight:600; color:#7154FB">
  50.             NAME
  51.           </div>
  52.           <span class="pull-right" style="font-weight:200">
  53.             content
  54.           </span>
  55.         </div>
  56.         <hr class="my-2">
  57.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  58.           <div style="font-weight:600; color:#7154FB">
  59.             AGE
  60.           </div>
  61.           <span class="pull-right" style="font-weight:200">
  62.             content
  63.           </span>
  64.         </div>
  65.         <hr class="my-2">
  66.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  67.           <div style="font-weight:600; color:#7154FB">
  68.             GENDER
  69.           </div>
  70.           <span class="pull-right" style="font-weight:200">
  71.             content
  72.           </span>
  73.         </div>
  74.         <hr class="my-2">
  75.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  76.           <div style="font-weight:600; color:#7154FB">
  77.             PRONOUNS
  78.           </div>
  79.           <span class="pull-right" style="font-weight:200">
  80.             content
  81.           </span>
  82.         </div>
  83.         <hr class="my-2">
  84.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  85.           <div style="font-weight:600; color:#7154FB">
  86.             ORIENTATION
  87.           </div>
  88.           <span class="pull-right" style="font-weight:200">
  89.             content
  90.           </span>
  91.         </div>
  92.      </div>
  93.     </div>
  94.     <div class="tab-pane show" id="left2">
  95.       <div class="container p-0" style="max-height:250px; overflow:auto">
  96.        
  97.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  98.           <div style="font-weight:600; color:#2387f4">
  99.             BIRTHDAY
  100.           </div>
  101.           <span class="pull-right" style="font-weight:200">
  102.             content
  103.           </span>
  104.         </div>
  105.         <hr class="my-2">
  106.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  107.           <div style="font-weight:600; color:#2387f4">
  108.             OCCUPATION
  109.           </div>
  110.           <span class="pull-right" style="font-weight:200">
  111.             content
  112.           </span>
  113.         </div>
  114.         <hr class="my-2">
  115.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  116.           <div style="font-weight:600; color:#2387f4">
  117.             SPECIES
  118.           </div>
  119.           <span class="pull-right" style="font-weight:200">
  120.             content
  121.           </span>
  122.         </div>
  123.         <hr class="my-2">
  124.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  125.           <div style="font-weight:600; color:#2387f4">
  126.             WORTH
  127.           </div>
  128.           <span class="pull-right" style="font-weight:200">
  129.             content
  130.           </span>
  131.         </div>
  132.         <hr class="my-2">
  133.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  134.           <div style="font-weight:600; color:#2387f4">
  135.             DESIGNER
  136.           </div>
  137.           <span class="pull-right" style="font-weight:200">
  138.             content
  139.           </span>
  140.         </div>
  141.      </div>
  142.     </div>
  143.     <hr class="mt-0 mb-2">
  144. </div>
  145.  
  146.  
  147.   <ul class="nav nav-tabs row mb-1 p-0 text-center border-0 ml-lg-3 ml-2" style="font-size:20px;margin-top:2px">
  148.     <li class="nav-item w-25"><a class="nav-link active p-0 bg-faded" style="border-radius:0px 0px 15px 15px;border-top:0;color:#7154FB" data-toggle="tab" href="#left1"><i class="fas fa-address-card" aria-hidden="true"></i></a></li>
  149.     <li class="nav-item w-25"><a class="nav-link p-0 bg-faded" style="border-radius:0px 0px 15px 15px; border-top:0;color:#2387f4" data-toggle="tab" href="#left2"><i class="fas fa-pencil" aria-hidden="true"></i></a></li>
  150.   </ul>
  151.  
  152. </div>
  153. </div>
  154.  
  155. <!-------------------
  156.  
  157.      MAIN PANEL
  158.  
  159. --------------------->
  160.  
  161. <div class="card col mb-2 rounded-0 p-0" style="max-width:800px">
  162.  
  163.     <!----- main tabs ----->
  164.     <div class="card-header border-0 py-0" style="height:52px">
  165.       <ul class="nav nav-tabs card-header-tabs nav-fill mx-lg-4 mx-n3 pt-2 p-0 border-dark">
  166.         <li class="nav-item"><a class="nav-link active border-none" data-toggle="tab" href="#tab1" style="color:#7154FB"><i class="fas fa-person fa-2x" aria-hidden="true"></i></a></li>
  167.         <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab2" style="color:#7154FB"><i class="fas fa-heart fa-2x" aria-hidden="true"></i></a></li>
  168.         <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab3" style="color:#7154FB"><i class="fas fa-brush fa-2x" aria-hidden="true"></i></a></li>
  169.         <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab4" style="color:#7154FB"><i class="fas fa-books fa-2x" aria-hidden="true"></i></a></li>
  170.         <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab5" style="color:#7154FB"><i class="fas fa-messages fa-2x" aria-hidden="true"></i></a></li>
  171.         <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab6" style="color:#7154FB"><i class="fas fa-edit fa-2x" aria-hidden="true"></i></a></li>
  172.       </ul>
  173.     </div>
  174.     <!----- end main tabs ----->
  175.  
  176. <div class="tab-content p-0" style="height:545px">
  177.  
  178. <!-------------------
  179.  
  180.      TAB 1 — ABOUT
  181.  
  182. --------------------->
  183.  
  184. <div class="tab-pane show active card-block p-0 table-responsive fade" style="height:545px" id="tab1">
  185.   <div class="text-center font-italic mt-1 p-3" style="font-size:20px; font-weight:200;">
  186.     <span class="pull-left ml-2 px-2" style="font-size:22px;color:#2387f4"><i class="fas fa-quote-left" aria-hidden="true"></i></span>
  187.  
  188.     <!----- QUOTE ----->
  189.     <span style="color:#7154FB">
  190.         Oh, what the hell can I do? To fill the pages? Meet the strangers?
  191.     </span>
  192.     <span class="pull-right mr-2 px-2" style="font-size:22px;color:#2387f4"><i class="fas fa-quote-right" aria-hidden="true"></i></span>
  193.   </div>
  194.   <hr class="mx-4 mt-0 mb-1">
  195.  
  196.   <!----- ABOUT ----->
  197.   <div class="container p-4" style="line-height: 1.5;">
  198.     <p>Write a short summary here. Don't forget the &lt; p &gt; tags! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend leo quis purus molestie consequat. Sed euismod orci eu augue ullamcorper dapibus. Nulla posuere ac orci at interdum. Etiam quam magna, sodales ac magna sit amet, lobortis sollicitudin nunc. Aenean sed consequat velit, vel tempus lorem. Donec diam nulla, accumsan eget ex ut, gravida pharetra nunc. Sed vel varius magna, nec ornare ante. Praesent quis cursus ex, in finibus nunc. Pellentesque sed nibh dapibus, aliquam sem vitae, porta diam. Nullam non interdum urna.</p>
  199.    
  200.     <p>Cras nec massa nulla. Nunc orci mi, posuere at porttitor eu, interdum sit amet risus. Praesent porta rhoncus sagittis. Curabitur id vehicula arcu. Vivamus pulvinar sed enim vel scelerisque. Ut tellus odio, tincidunt nec feugiat in, lobortis eget odio. Cras vitae orci eu tellus imperdiet sagittis et non odio. Etiam imperdiet molestie sapien a laoreet. Curabitur tempus dignissim justo, sed accumsan lacus sodales sed.</p>
  201.    
  202.     <!----- write your text above this line! remember the <p>paragraph</p> tags! ----->
  203.    
  204.     <div style="font-size:18px; font-weight:200;">
  205.       Etymology
  206.     </div>
  207.     <hr class="mt-1 mb-3">
  208.    
  209.     <p>Nullam dolor quam, feugiat efficitur massa ac, ultrices fringilla metus. Nunc placerat, justo vel dapibus convallis, velit felis scelerisque ante, non ultrices velit odio quis velit. Phasellus ultricies diam sed nisi tristique, quis suscipit metus faucibus.</p>
  210.    
  211.     <!----- write your text above this line! remember the <p>paragraph</p> tags! ----->
  212.   </div>
  213. </div>
  214.  
  215. <!-------------------
  216.  
  217.      TAB 2 — PERSONALITY
  218.  
  219. --------------------->
  220.  
  221. <div class="tab-pane show card-block p-0 table-responsive fade" style="height:545px" id="tab2">
  222.   <div class="container p-4" style="line-height: 1.5;">
  223.    
  224.     <div class="row p-0 m-0" style="line-height: 1;">
  225.       <div class="col p-0">
  226.         <div class="mx-3" style="font-size:18px; font-weight:200;">
  227.           Likes
  228.         </div>
  229.         <hr class="mt-1 mx-2">
  230.         <ul class="fa-ul">
  231.           <li class="mb-2"><span class="fa-li"><i class="fas fa-check" style="color:#7154FB" aria-hidden="true"></i></span>
  232.               Yes
  233.           </li>
  234.           <li class="mb-2"><span class="fa-li"><i class="fas fa-check" style="color:#7154FB" aria-hidden="true"></i></span>
  235.               Yes
  236.           </li>
  237.           <li class="mb-2"><span class="fa-li"><i class="fas fa-check" style="color:#7154FB" aria-hidden="true"></i></span>
  238.               Yes
  239.           </li>
  240.           <li class="mb-2"><span class="fa-li"><i class="fas fa-check" style="color:#7154FB" aria-hidden="true"></i></span>
  241.               Yes
  242.           </li>
  243.           <!-- You can copy from here to end and paste below to add more! -->
  244.           <li class="mb-2"><span class="fa-li"><i class="fas fa-check" style="color:#7154FB" aria-hidden="true"></i></span>
  245.               Yes
  246.           </li>
  247.           <!-- end list -->
  248.          
  249.           <!---- paste above this line to add on ---->
  250.         </ul>
  251.       </div>
  252.      
  253.       <div class="col p-0">
  254.         <div class="mx-3" style="font-size:18px; font-weight:200;">
  255.           Dislikes
  256.         </div>
  257.         <hr class="mt-1 mx-2">
  258.         <ul class="fa-ul">
  259.           <li class="mb-2"><span class="fa-li"><i class="fas fa-times" style="color:#2387f4" aria-hidden="true"></i></span>
  260.               No
  261.           </li>
  262.           <li class="mb-2"><span class="fa-li"><i class="fas fa-times" style="color:#2387f4" aria-hidden="true"></i></span>
  263.               No
  264.           </li>
  265.           <li class="mb-2"><span class="fa-li"><i class="fas fa-times" style="color:#2387f4" aria-hidden="true"></i></span>
  266.               No
  267.           </li>
  268.           <li class="mb-2"><span class="fa-li"><i class="fas fa-times" style="color:#2387f4" aria-hidden="true"></i></span>
  269.               No
  270.           </li>
  271.           <!-- You can copy from here to end and paste below to add more! -->
  272.           <li class="mb-2"><span class="fa-li"><i class="fas fa-times" style="color:#2387f4" aria-hidden="true"></i></span>
  273.               No
  274.           </li>
  275.           <!-- end list -->
  276.          
  277.           <!---- paste above this line to add on ---->
  278.         </ul>
  279.       </div>
  280.      
  281.       <div class="col-sm-12 col-lg-4 p-0">
  282.         <div class="mx-3" style="font-size:18px; font-weight:200;">
  283.           Traits
  284.         </div>
  285.         <hr class="mt-1 mx-2">
  286.        
  287.         <!----- TRAITS BARS - you can use the dummy div below to collapse from view ----->
  288.         <div>
  289.         <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px;">
  290.             <div class="col text-right">
  291.                 introvert
  292.             </div>
  293.             <div class="col-5 mx-2">
  294.                 <div class="progress my-auto" style="height:3px; overflow:visible">
  295.                
  296.                 <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  297.                 <div class="progress-bar" role="progressbar" style="background-color:#2387f4; width:50%; height:100%"></div>
  298.                
  299.             <div style="color:#7154FB;margin:-7px;border-radius:50%;z-index:999">
  300.             <i class="fas fa-circle" aria-hidden="true"></i></div></div></div>
  301.             <div class="col">
  302.                 extrovert
  303.             </div>
  304.         </div>
  305.         <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px;">
  306.             <div class="col text-right">
  307.                 brave
  308.             </div>
  309.             <div class="col-5 mx-2">
  310.                 <div class="progress my-auto" style="height:3px; overflow:visible">
  311.                
  312.                 <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  313.                 <div class="progress-bar" role="progressbar" style="background-color:#2387f4; width:50%; height:100%"></div>
  314.                
  315.             <div style="color:#7154FB;margin:-7px;border-radius:50%;z-index:999">
  316.             <i class="fas fa-circle" aria-hidden="true"></i></div></div></div>
  317.             <div class="col">
  318.                 coward
  319.             </div>
  320.         </div>
  321.         <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px;">
  322.             <div class="col text-right">
  323.                 selfish
  324.             </div>
  325.             <div class="col-5 mx-2">
  326.                 <div class="progress my-auto" style="height:3px; overflow:visible">
  327.                
  328.                 <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  329.                 <div class="progress-bar" role="progressbar" style="background-color:#2387f4; width:50%; height:100%"></div>
  330.                
  331.             <div style="color:#7154FB;margin:-7px;border-radius:50%;z-index:999">
  332.             <i class="fas fa-circle" aria-hidden="true"></i></div></div></div>
  333.             <div class="col">
  334.                 selfless
  335.             </div>
  336.         </div>
  337.         <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px;">
  338.             <div class="col text-right">
  339.                 clever
  340.             </div>
  341.             <div class="col-5 mx-2">
  342.                 <div class="progress my-auto" style="height:3px; overflow:visible">
  343.                
  344.                 <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  345.                 <div class="progress-bar" role="progressbar" style="background-color:#2387f4; width:50%; height:100%"></div>
  346.                
  347.             <div style="color:#7154FB;margin:-7px;border-radius:50%;z-index:999">
  348.             <i class="fas fa-circle" aria-hidden="true"></i></div></div></div>
  349.             <div class="col">
  350.                 dull
  351.             </div>
  352.         </div>
  353.         <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px;">
  354.             <div class="col text-right">
  355.                 optimist
  356.             </div>
  357.             <div class="col-5 mx-2">
  358.                 <div class="progress my-auto" style="height:3px; overflow:visible">
  359.                
  360.                 <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  361.                 <div class="progress-bar" role="progressbar" style="background-color:#2387f4; width:50%; height:100%"></div>
  362.                
  363.             <div style="color:#7154FB;margin:-7px;border-radius:50%;z-index:999">
  364.             <i class="fas fa-circle" aria-hidden="true"></i></div></div></div>
  365.             <div class="col">
  366.                 pessimist
  367.             </div>
  368.         </div>
  369.         <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px;">
  370.             <div class="col text-right">
  371.                 friendly
  372.             </div>
  373.             <div class="col-5 mx-2">
  374.                 <div class="progress my-auto" style="height:3px; overflow:visible">
  375.                
  376.                 <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  377.                 <div class="progress-bar" role="progressbar" style="background-color:#2387f4; width:50%; height:100%"></div>
  378.                
  379.             <div style="color:#7154FB;margin:-7px;border-radius:50%;z-index:999">
  380.             <i class="fas fa-circle" aria-hidden="true"></i></div></div></div>
  381.             <div class="col">
  382.                 reserved
  383.             </div>
  384.         </div>
  385.         <div class="row no-gutters align-items-center" style="margin-bottom:6px; font-size:13px;">
  386.             <div class="col text-right">
  387.                 open
  388.             </div>
  389.             <div class="col-5 mx-2">
  390.                 <div class="progress my-auto" style="height:3px; overflow:visible">
  391.                
  392.                 <!-- to change the value, change WIDTH: to whatever % you'd like. by default, it's 50% -->
  393.                 <div class="progress-bar" role="progressbar" style="background-color:#2387f4; width:50%; height:100%"></div>
  394.                
  395.             <div style="color:#7154FB;margin:-7px;border-radius:50%;z-index:999">
  396.             <i class="fas fa-circle" aria-hidden="true"></i></div></div></div>
  397.             <div class="col">
  398.                 secretive
  399.             </div>
  400.         </div>
  401.        
  402.        
  403.        
  404.       </div>
  405.       </div>
  406.     </div>
  407.    
  408.     <div style="font-size:22px; font-weight:200;">
  409.       Personality
  410.     </div>
  411.     <hr class="mt-1 mb-1">
  412.    
  413.     <div class="row p-0 m-0 text-center mb-2" style="font-weight:200">
  414.       <div class="col-md-6 p-0 mt-1" style="color:#7154FB">
  415.         <i class="fas fa-plus mr-2" aria-hidden="true"></i> good, good, good
  416.       </div>
  417.       <div class="col-md-6 p-0 mt-1" style="color:#2387f4">
  418.         <i class="fas fa-minus mr-2" aria-hidden="true"></i> bad, bad, bad
  419.       </div>
  420.     </div>
  421.    
  422.     <p>Praesent feugiat ullamcorper orci et rutrum. Donec a elit justo. Aenean tempor consectetur consectetur. Integer auctor non sapien eget euismod. Suspendisse potenti. In dapibus finibus lorem nec pretium. Mauris non dignissim urna, nec tincidunt mi. Donec posuere semper quam, et mattis dui egestas ac. Sed sit amet augue nec urna placerat ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
  423.    
  424.     <p>Cras sodales laoreet orci, in dictum libero consectetur a. Quisque eu vehicula orci. Nulla non eleifend diam. Praesent semper maximus arcu, sit amet tincidunt lorem ultricies quis. Vivamus nunc purus, pellentesque non purus vel, hendrerit vestibulum ex. Mauris orci nisl, varius id ornare sed, pellentesque ut urna. </p>
  425.    
  426.     <!----- add text above this line! don't forget the <p>paragraph</p> tags! ----->
  427.    
  428.   </div>
  429. </div>
  430.  
  431. <!-------------------
  432.  
  433.      TAB 3 — REFERENCE
  434.  
  435. --------------------->
  436.  
  437. <div class="tab-pane show card-block p-0 fade" style="height:545px" id="tab3">
  438. <div class="table-responsive" style="overflow-y:auto;">
  439. <div class="row no-gutters mx-lg-2" style="height:545px;">
  440.    
  441.   <div class="col-sm-12 col-md-7 p-3 mb-3 mb-lg-0" style="max-height:495px">
  442.     <div class="mx-1" style="font-size:22px; font-weight:200;">
  443.       Appearance/Design
  444.     </div>
  445.     <hr class="mx-1 mt-1 mb-3">
  446.     <div class="py-0 px-2" style="max-height:450px; overflow-y:auto;">
  447.        
  448.         <!----- LIST - remove from here to </ul> if you don't want a list ----->
  449.         <ul style="list-style-type: circle">
  450.             <li class="mb-2">Put notes about this design here.</li>
  451.             <li class="mb-2">Copy this line and paste below to add more.</li>
  452.             <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  453.         </ul>
  454.        
  455.         <p>If lists aren't your style, you can also just write it out, too. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus in ligula finibus tristique. Aenean maximus, mauris et luctus tincidunt, nulla urna aliquet dolor, eu consequat arcu purus vel est. Ut egestas, nibh sed consequat ornare, nunc leo finibus nisi, eu laoreet nisl nibh at dolor. Ut porttitor, libero vitae tincidunt vulputate.</p>
  456.        
  457.         <p>Etiam egestas, lectus ac suscipit finibus, ante eros scelerisque orci, vel convallis lectus augue at ex. Sed lobortis gravida lorem, ut hendrerit nisl. Cras pretium fermentum cursus. Praesent pharetra quis nisi eget consectetur. Ut posuere nunc vestibulum laoreet fermentum. Fusce sed neque nec neque faucibus tempus. Proin nec justo eu tellus molestie accumsan.</p>
  458.        
  459.        
  460.         <!----- add text above this line! don't forget the <p>paragraph</p> tags! ----->
  461.     </div>
  462.   </div>
  463.  
  464.   <!----- REFERENCE IMAGE - replace IMG URL with your image url ----->
  465.   <div class="col-sm-12 col-lg-5 p-0 mx-auto my-4" style="max-width:310px; max-height:500px; min-height:500px; background:url(
  466.          URL
  467.        ); background-size:cover; background-repeat: no-repeat">
  468.         <div class="p-2" style="position:absolute;right:0;bottom:-1px">
  469.            
  470.   <!----- IMAGE CREDIT - replace ARTIST LINK with the link to the image artist ----->
  471.             <a target="_blank" href="
  472.            ARTIST LINK
  473.            " class="tooltipster bg-faded p-2 pb-2" title="image credit" style="font-size:14px; border-radius:15px 15px 0px 0px;"><i class="far fa-image-landscape" aria-hidden="true"></i></a>
  474.         </div>
  475.   </div>
  476.  
  477. </div></div>
  478. </div>
  479.  
  480. <!-------------------
  481.  
  482.      TAB 4 — BIOGRAPHY
  483.  
  484. --------------------->
  485.  
  486. <div class="tab-pane show card-block p-0 table-responsive fade" style="height:545px" id="tab4">
  487. <div class="container p-4">
  488.   <div class="mx-1" style="font-size:22px; font-weight:200;">
  489.     Biography
  490.   </div>
  491.   <hr class="mx-1 mt-1 mb-3">
  492.   <div class="px-1 mb-2" style="line-height: 1.5;">
  493.     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eleifend leo quis purus molestie consequat. Sed euismod orci eu augue ullamcorper dapibus. Nulla posuere ac orci at interdum. Etiam quam magna, sodales ac magna sit amet, lobortis sollicitudin nunc. Aenean sed consequat velit, vel tempus lorem. Donec diam nulla, accumsan eget ex ut, gravida pharetra nunc. Sed vel varius magna, nec ornare ante. Praesent quis cursus ex, in finibus nunc. Pellentesque sed nibh dapibus, aliquam sem vitae, porta diam. Nullam non interdum urna.</p>
  494.    
  495.     <p>Cras nec massa nulla. Nunc orci mi, posuere at porttitor eu, interdum sit amet risus. Praesent porta rhoncus sagittis. Curabitur id vehicula arcu. Vivamus pulvinar sed enim vel scelerisque. Ut tellus odio, tincidunt nec feugiat in, lobortis eget odio. Cras vitae orci eu tellus imperdiet sagittis et non odio. Etiam imperdiet molestie sapien a laoreet. Curabitur tempus dignissim justo, sed accumsan lacus sodales sed.</p>
  496.    
  497.     <!----- SUBHEADER ----->
  498.     <hr class="mt-1 mb-1">
  499.     <div class="text-center" style="font-size:18px; font-weight:400;color:#2387f4;">
  500.       Subheader Title
  501.     </div>
  502.     <hr class="mt-1 mb-3">
  503.     <!----- END SUBHEADER ----->
  504.    
  505.     <p>Nullam dolor quam, feugiat efficitur massa ac, ultrices fringilla metus. Nunc placerat, justo vel dapibus convallis, velit felis scelerisque ante, non ultrices velit odio quis velit. Phasellus ultricies diam sed nisi tristique, quis suscipit metus faucibus.</p>
  506.    
  507.     <p>Phasellus dignissim lobortis tellus sed vulputate. Quisque dapibus in purus dignissim tristique. Curabitur gravida vestibulum tortor eget ornare. Morbi id dictum erat. Quisque vel turpis quis nulla aliquam facilisis. Proin tristique lacus a turpis maximus, ac rutrum tortor placerat. Donec a ligula a nisl lobortis rhoncus at quis lacus. Integer malesuada fringilla tempor. Nunc convallis viverra rhoncus. Quisque sollicitudin est interdum tempus consectetur. Nulla sit amet mattis turpis. Nam semper ex eu accumsan volutpat. Nam condimentum sit amet ante vel dapibus.</p>
  508.    
  509.     <!----- SUBHEADER ----->
  510.     <hr class="mt-1 mb-1">
  511.     <div class="text-center" style="font-size:18px; font-weight:400;color:#2387f4;">
  512.       Subheader Title
  513.     </div>
  514.     <hr class="mt-1 mb-3">
  515.     <!----- END SUBHEADER ----->
  516.    
  517.     <p style="line-height: 1.5;">Nullam dolor quam, feugiat efficitur massa ac, ultrices fringilla metus. Nunc placerat, justo vel dapibus convallis, velit felis scelerisque ante, non ultrices velit odio quis velit. Phasellus ultricies diam sed nisi tristique, quis suscipit metus faucibus.</p>
  518.    
  519.     <p style="line-height: 1.5;">Phasellus dignissim lobortis tellus sed vulputate. Quisque dapibus in purus dignissim tristique. Curabitur gravida vestibulum tortor eget ornare. Morbi id dictum erat. Quisque vel turpis quis nulla aliquam facilisis. Proin tristique lacus a turpis maximus, ac rutrum tortor placerat. Donec a ligula a nisl lobortis rhoncus at quis lacus. Integer malesuada fringilla tempor. Nunc convallis viverra rhoncus. Quisque sollicitudin est interdum tempus consectetur. Nulla sit amet mattis turpis. Nam semper ex eu accumsan volutpat. Nam condimentum sit amet ante vel dapibus.</p>
  520.    
  521.     <!----- add text above this line! don't forget the <p>paragraph</p> tags! ----->
  522.   </div>
  523. </div>
  524. </div>
  525.  
  526. <!-------------------
  527.  
  528.      TAB 5 — RELATIONSHIPS
  529.  
  530. --------------------->
  531.  
  532. <div class="tab-pane show card-block p-0 table-responsive fade" style="height:545px" id="tab5">
  533. <div class="container">
  534.   <div class="row my-2 mx-0 p-1">
  535.     <div class="col-sm-3 order-1 order-md-1 text-center h-100 px-5 p-md-2">
  536.       <img src="https://i.imgur.com/XNO9z5Q.png">
  537.     </div>
  538.    
  539.     <div class="col-lg-9 order-2 order-md-2 p-2">
  540.       <div class="text-left align-bottom" style="font-size:22px"><a href="CHARACTER LINK" style="color:#7154FB; font-weight:300">Name</a></div>
  541.       <div class="text-muted mb-1 align-bottom" style="font-size:15px; font-weight:200">Relationship
  542.         <span class="pull-right" style="font-size:17px">
  543.             <!----- you can change these icons to whatever you want! visit fontawesome.com for more options ----->
  544.         <i class="fas fa-heart" aria-hidden="true"></i>
  545.         <i class="fas fa-heart" aria-hidden="true"></i>
  546.         <i class="fas fa-heart" aria-hidden="true"></i>
  547.         <i class="far fa-heart" aria-hidden="true"></i>
  548.         <i class="far fa-heart" aria-hidden="true"></i></span>
  549.       </div>
  550.       <hr class="mt-1 mb-3">
  551.      
  552.       <p class="text-justify">These auto-adjust, but it's best to keep them short. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum, libero at facilisis aliquam, ante risus rhoncus magna, quis mattis lacus tellus in ex. Nulla facilisi. Etiam nunc ipsum, rhoncus in porta vel, fringilla vel nisi. Curabitur in justo viverra, volutpat metus vel, sollicitudin mi.</p>
  553.     </div>
  554.   </div>
  555.  
  556.   <!----- RELATIONSHIP RIGHT START ----->
  557.   <!----- THIS MEANS THE CHARACTER ICON IS ALIGNED TO THE RIGHT. IN ORDER TO KEEP THE PATTERN, THE NEXT RELATIONSHIP SHOULD BE 'LEFT' ALIGNED. ----->
  558.   <!----- COPY FROM HERE TO 'END' AND PASTE BELOW A LEFT'S 'END' TO CREATE MORE (RIGHT) RELATIONSHIPS ----->
  559.   <hr class="mx-2 d-block d-md-none">
  560.  
  561.   <div class="row my-2 mx-0 p-1">
  562.     <div class="col-lg-9 order-2 order-md-1 p-2">
  563.       <div class="text-left align-bottom" style="font-size:22px"><a href="CHARACTER LINK" style="color:#7154FB; font-weight:300">Name</a></div>
  564.       <div class="text-muted mb-1 align-bottom" style="font-size:15px; font-weight:200">Relationship
  565.         <span class="pull-right" style="font-size:17px">
  566.             <!----- you can change these icons to whatever you want! visit fontawesome.com for more options ----->
  567.         <i class="fas fa-spade" aria-hidden="true"></i>
  568.         <i class="fas fa-spade" aria-hidden="true"></i>
  569.         <i class="fas fa-spade" aria-hidden="true"></i>
  570.         <i class="far fa-spade" aria-hidden="true"></i>
  571.         <i class="far fa-spade" aria-hidden="true"></i></span>
  572.       </div>
  573.       <hr class="mt-1 mb-3">
  574.      
  575.       <p class="text-justify">These auto-adjust, but it's best to keep them short. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum, libero at facilisis aliquam, ante risus rhoncus magna, quis mattis lacus tellus in ex. Nulla facilisi. Etiam nunc ipsum, rhoncus in porta vel, fringilla vel nisi. Curabitur in justo viverra, volutpat metus vel, sollicitudin mi. Nullam a maximus nisi.</p>
  576.      
  577.       <p class="text-justify">Nulla ante libero, gravida non leo at, tincidunt sagittis lectus. Nam id elit at ante lobortis porta. Integer aliquam odio turpis, nec sodales ex aliquam et. Etiam viverra orci vestibulum urna congue blandit in sed neque.</p>
  578.     </div>
  579.    
  580.     <div class="col-sm-3 order-1 order-md-2 text-center h-100 px-5 p-md-2">
  581.       <img src="https://i.imgur.com/XNO9z5Q.png">
  582.     </div>
  583.   </div>
  584.  
  585.   <!----- END RIGHT RELATIONSHIP. PASTE 'LEFT' BELOW HERE ----->
  586.  
  587.  
  588.   <!----- RELATIONSHIP LEFT START ----->
  589.   <!----- THIS MEANS THE CHARACTER ICON IS ALIGNED TO THE LEFT. IN ORDER TO KEEP THE PATTERN, THE NEXT RELATIONSHIP SHOULD BE 'RIGHT'-ALIGNED. ----->
  590.   <!----- COPY FROM HERE TO 'END' AND PASTE BELOW A RIGHT'S 'END' TO CREATE MORE (LEFT) RELATIONSHIPS ----->
  591.   <hr class="mx-2 d-block d-md-none">
  592.  
  593.   <div class="row my-2 mx-0 p-1">
  594.     <div class="col-sm-3 order-1 order-md-1 text-center h-100 px-5 p-md-2">
  595.       <img src="https://i.imgur.com/XNO9z5Q.png">
  596.     </div>
  597.    
  598.     <div class="col-lg-9 order-2 order-md-2 p-2">
  599.       <div class="text-left align-bottom" style="font-size:22px"><a href="CHARACTER LINK" style="color:#7154FB; font-weight:300">Name</a></div>
  600.       <div class="text-muted mb-1 align-bottom" style="font-size:15px; font-weight:200">Relationship
  601.         <span class="pull-right" style="font-size:17px">
  602.             <!----- you can change these icons to whatever you want! visit fontawesome.com for more options ----->
  603.         <i class="fas fa-heart-broken" aria-hidden="true"></i>
  604.         <i class="fas fa-heart-broken" aria-hidden="true"></i>
  605.         <i class="fas fa-heart-broken" aria-hidden="true"></i>
  606.         <i class="far fa-heart-broken" aria-hidden="true"></i>
  607.         <i class="far fa-heart-broken" aria-hidden="true"></i></span>
  608.       </div>
  609.       <hr class="mt-1 mb-3">
  610.      
  611.       <p class="text-justify">These auto-adjust, but it's best to keep them short. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum, libero at facilisis aliquam, ante risus rhoncus magna, quis mattis lacus tellus in ex. Nulla facilisi. Etiam nunc ipsum, rhoncus in porta vel, fringilla vel nisi.</p>
  612.     </div>
  613.   </div>
  614.  
  615.   <!----- END LEFT RELATIONSHIP. PASTE 'RIGHT' BELOW HERE. ----->
  616.  
  617.  
  618. <!----- RELATIONSHIPS ABOVE THIS LINE! ----->
  619. </div>
  620. </div>
  621.  
  622. <!-------------------
  623.  
  624.      TAB 6 — TRIVIA
  625.  
  626. --------------------->
  627.  
  628. <div class="tab-pane show card-block p-0 table-responsive fade" style="height:545px" id="tab6">
  629.   <div class="row p-3 m-0" style="height:545px;">
  630.   <div class="col-md-7 col-sm-12 p-1" style="max-height:495px">
  631.     <div class="mx-2 p-1" style="font-size:22px; font-weight:200;">
  632.       Trivia
  633.     </div>
  634.     <hr class="mt-1 mb-2">
  635.     <div class="my-2 mx-3 justify-content-between">
  636.       <div style="font-weight:500;">
  637.         Obtained
  638.       </div>
  639.       <span class="pull-right" style="font-weight:200">
  640.         content
  641.       </span>
  642.     </div>
  643.     <hr class="my-1">
  644.     <div class="my-2 mx-3 justify-content-between">
  645.       <div style="font-weight:500;">
  646.         Worth
  647.       </div>
  648.       <span class="pull-right" style="font-weight:200">
  649.         content
  650.       </span>
  651.     </div>
  652.     <hr class="my-1">
  653.     <div class="my-2 mx-3 justify-content-between">
  654.       <div style="font-weight:500;">
  655.         UFS/T/O
  656.       </div>
  657.       <span class="pull-right" style="font-weight:200">
  658.         content
  659.       </span>
  660.     </div>
  661.    
  662.     <hr class="mx-1 my-1 mb-3">
  663.    
  664.     <!----- TRIVIA LIST ----->
  665.     <div class="py-0 px-2" style="max-height:325px; overflow-y:auto; overflow-x:hidden;">
  666.       <ul style="list-style-type: circle">
  667.         <li class="mb-1">I love what I can’t see</li>
  668.         <li class="mb-1">What’s expected of you?</li>
  669.           <ul style="list-style-type: circle">
  670.             <li class="mb-1">What's expected of <i>me?</i></li>
  671.           </ul>
  672.         <li class="mb-1">Now it’s quarter to three</li>
  673.         <li class="mb-1">Let it all get away</li>
  674.       </ul>
  675.     </div>
  676.   </div>
  677.  
  678.  
  679.   <!----- MUSIC PLAYER ----->
  680.   <div class="col-md-5 col-sm-12 mt-2" style="max-height:500px; min-height:500px;">
  681.     <div class="mx-1" style="font-size:22px; font-weight:200;">
  682.       Music
  683.     </div>
  684.     <hr class="mt-1 mb-0">
  685.    
  686.     <div class="card card-block border-0 mt-0 pb-3">
  687.       <iframe width="100%" height="150" src="https://www.youtube.com/embed/URL" frameborder="0" class=""></iframe>
  688.             <!--
  689.            MUSIC PLAYER TUTORIAL
  690.            
  691.            for songs, copy everything after watch?v= and replace "URL" with that
  692.            
  693.            remember to keep the "QUOTATION MARKS" around the link or else it could break.
  694.            -->            
  695.     </div>
  696.    
  697.     <hr class="mt-1 mb-3">
  698.    
  699. <!----- PAGEDOLL ----->
  700.     <div class="card border-0" style="height:252px;width:100%">
  701.        
  702.         <div class="p-2" style="position:absolute;top:-1px;z-index:9">
  703.   <!----- IMAGE CREDIT - ADD THE LINK TO THE ARTIST BELOW ----->
  704.             <a target="_blank" href="
  705.            ARTIST LINK
  706.            " class="tooltipster bg-faded p-2" title="image credit" style="font-size:14px; border-radius:0px 0px 15px 15px;color:#7154FB"><i class="far fa-image-landscape"></i></a>
  707.         </div>
  708.        
  709.        
  710.   <!----- REPLACE "URL" WITH THE URL TO YOUR IMAGE ----->
  711.         <img src="URL" class="mx-auto" style="height:252px;max-width:100%">
  712.     </div>
  713.    
  714.   </div>
  715. </div>
  716.  
  717. <!---- END TABS ---->
  718.  
  719. </div>
  720. </div>
  721. </div>
  722.  
  723. </div></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!