API tools faq
paste
Advertisement
meromerc

Dead Weight

meromerc
Apr 16th, 2024
690
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.58 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.    DEAD WEIGHT
  4.  
  5.    a code by meromercury
  6.    pssst... this one was always my favorite ;]
  7.    
  8.    created: 06/28/21 // updated: 2/25/23 // made free: 4/16/24
  9.    
  10.    bootstrap versions are included. remove <!-- and --\> to use.
  11.    
  12.      accent color: #7154FB
  13.      ctrl+F to change. replace the hex code with a space for no color
  14.  
  15. -->
  16.  
  17. <div class="container">
  18. <div style="font-size:14px;max-width:1100px;">
  19. <div class="row">
  20.  
  21. <!-------------------
  22.  
  23.      SIDE PANEL
  24.  
  25. --------------------->
  26.  
  27. <div class="container col-md p-0 mr-3 m-0" style="max-width:301px;">
  28. <div class="card d-block rounded-0" style="height:600px">
  29.  
  30.   <!-------- SIDE IMAGE -------->
  31.   <div class="border-0 p-0 m-0 mb-1" style="background:url(https://images.unsplash.com/photo-1610209204869-4822c0a980da) top center; background-repeat: no-repeat; border:muted; background-size:cover;min-height:300px;width:300px;z-index:9999">
  32.   </div>
  33.  
  34.   <div class="tab-content p-0" style="height:250px">
  35.     <div class="tab-pane active show fade mb-0" id="left1">
  36.       <div class="container p-0" style="max-height:250px; overflow:auto">
  37.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  38.           <div style="font-weight:600; color:#7154FB">
  39.             NAME
  40.           </div>
  41.           <span class="pull-right" style="font-weight:200">
  42.             content
  43.           </span>
  44.         </div>
  45.         <hr class="my-2">
  46.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  47.           <div style="font-weight:600; color:#7154FB">
  48.             AGE
  49.           </div>
  50.           <span class="pull-right" style="font-weight:200">
  51.             content
  52.           </span>
  53.         </div>
  54.         <hr class="my-2">
  55.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  56.           <div style="font-weight:600; color:#7154FB">
  57.             COLOR
  58.           </div>
  59.           <span class="pull-right" style="font-weight:200">
  60.             content
  61.           </span>
  62.         </div>
  63.         <hr class="my-2">
  64.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  65.           <div style="font-weight:600; color:#7154FB">
  66.             GENDER
  67.           </div>
  68.           <span class="pull-right" style="font-weight:200">
  69.             content
  70.           </span>
  71.         </div>
  72.         <hr class="my-2">
  73.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  74.           <div style="font-weight:600; color:#7154FB">
  75.             PRONOUNS
  76.           </div>
  77.           <span class="pull-right" style="font-weight:200">
  78.             content
  79.           </span>
  80.         </div>
  81.         <hr class="my-2">
  82.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  83.           <div style="font-weight:600; color:#7154FB">
  84.             ORIENTATION
  85.           </div>
  86.           <span class="pull-right" style="font-weight:200">
  87.             content
  88.           </span>
  89.         </div>
  90.      </div>
  91.     </div>
  92.     <div class="tab-pane show fade" id="left2">
  93.       <div class="container p-0" style="max-height:250px; overflow:auto">
  94.        
  95.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  96.           <div style="font-weight:600; color:#7154FB">
  97.             BIRTHDAY
  98.           </div>
  99.           <span class="pull-right" style="font-weight:200">
  100.             content
  101.           </span>
  102.         </div>
  103.         <hr class="my-2">
  104.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  105.           <div style="font-weight:600; color:#7154FB">
  106.             OCCUPATION
  107.           </div>
  108.           <span class="pull-right" style="font-weight:200">
  109.             content
  110.           </span>
  111.         </div>
  112.         <hr class="my-2">
  113.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  114.           <div style="font-weight:600; color:#7154FB">
  115.             STRIFE SPECIBUS
  116.           </div>
  117.           <span class="pull-right" style="font-weight:200">
  118.             content
  119.           </span>
  120.         </div>
  121.         <hr class="my-2">
  122.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  123.           <div style="font-weight:600; color:#7154FB">
  124.             ROLE
  125.           </div>
  126.           <span class="pull-right" style="font-weight:200">
  127.             content
  128.           </span>
  129.         </div>
  130.         <hr class="my-2">
  131.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  132.           <div style="font-weight:600; color:#7154FB">
  133.             MOON
  134.           </div>
  135.           <span class="pull-right" style="font-weight:200">
  136.             content
  137.           </span>
  138.         </div>
  139.         <hr class="my-2">
  140.         <div class="my-2 mx-3 justify-content-between" style="font-size:15px">
  141.           <div style="font-weight:600; color:#7154FB">
  142.             GUARDIAN
  143.           </div>
  144.           <span class="pull-right" style="font-weight:200">
  145.             content
  146.           </span>
  147.         </div>
  148.      </div>
  149.     </div>
  150.     <hr class="mt-0 mb-2">
  151. </div>
  152.  
  153. <!-- BOOTSTRAP
  154.  <ul class="nav nav-pills nav-fill row mb-1 m-0 p-0 justify-content-center text-center" style="font-size:20px">
  155.    <li class="col-sm-4 mx-4"><a class="nav-link active border-none p-0" data-toggle="tab" href="#left1"><i class="fas fa-caret-left"></i></a></li>
  156.    <li class="col-sm-4 mx-4"><a class="nav-link p-0" data-toggle="tab" href="#left2"><i class="fas fa-caret-right"></i></a></li>
  157.  </ul>
  158. -->
  159.   <ul class="nav nav-pills nav-fill row mb-1 m-0 p-0 justify-content-center text-center" style="font-size:20px;">
  160.     <li class="col-sm-4 mx-4"><a class="nav-link active text-white border-none p-0" style="background-color:#7154FB" data-toggle="tab" href="#left1"><i class="fas fa-caret-left"></i></a></li>
  161.     <li class="col-sm-4 mx-4"><a class="nav-link text-white p-0" style="background-color:#7154FB" data-toggle="tab" href="#left2"><i class="fas fa-caret-right"></i></a></li>
  162.   </ul>
  163.  
  164. </div>
  165. </div>
  166.  
  167. <!-------------------
  168.  
  169.      MAIN PANEL
  170.  
  171. --------------------->
  172.  
  173. <div class="card col-lg mb-2 rounded-0 p-0" style="max-width:800px;min-width:800px">
  174.  
  175. <div class="card-header border-0 py-0" style="width:800px;height:52px">
  176.  
  177.   <!-- BOOTSTRAP
  178.  <ul class="nav nav-tabs card-header-tabs nav-fill mx-4 pt-2 p-0 border-dark">
  179.    <li class="nav-item"><a class="nav-link active border-none" data-toggle="tab" href="#tab1"><i class="fas fa-user fa-2x"></i></a></li>
  180.    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab2"><i class="fas fa-pen fa-2x"></i></a></li>
  181.    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab3"><i class="fas fa-image fa-2x"></i></a></li>
  182.    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab4"><i class="fas fa-book-user fa-2x"></i></a></li>
  183.    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab5"><i class="fas fa-user-friends fa-2x"></i></a></li>
  184.    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab6"><i class="fas fa-user-edit fa-2x"></i></a></li>
  185.  </ul>
  186.  -->
  187.   <ul class="nav nav-tabs card-header-tabs nav-fill mx-4 pt-2 p-0 border-dark">
  188.     <li class="nav-item"><a class="nav-link active border-none" data-toggle="tab" href="#tab1" style="color:#7154FB"><i class="fas fa-user fa-2x"></i></a></li>
  189.     <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab2" style="color:#7154FB"><i class="fas fa-pen fa-2x"></i></a></li>
  190.     <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab3" style="color:#7154FB"><i class="fas fa-image fa-2x"></i></a></li>
  191.     <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab4" style="color:#7154FB"><i class="fas fa-book-user fa-2x"></i></a></li>
  192.     <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab5" style="color:#7154FB"><i class="fas fa-user-friends fa-2x"></i></a></li>
  193.     <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab6" style="color:#7154FB"><i class="fas fa-user-edit fa-2x"></i></a></li>
  194.   </ul>
  195.  
  196. </div>
  197.  
  198. <div class="tab-content p-0" style="height:545px">
  199.  
  200. <!-------------------
  201.  
  202.      TAB 1 — ABOUT
  203.  
  204. --------------------->
  205.  
  206. <div class="tab-pane active show card-block p-0 table-responsive fade" style="height:545px" id="tab1">
  207.   <div class="text-center font-italic mt-1 p-3" style="font-size:20px; font-weight:200;">
  208.     <span class="pull-left ml-2 px-2" style="font-size:22px"><i class="fas fa-quote-left"></i></span>
  209.     <span style="font-size:25px">O</span>h, what the hell can I do? To fill the pages? Meet the strangers?
  210.     <span class="pull-right mr-2 px-2" style="font-size:22px"><i class="fas fa-quote-right"></i></span>
  211.   </div>
  212.   <hr class="mx-4 mt-0 mb-2">
  213.   <div class="container p-4">
  214.     <p style="line-height: 1.5;">Write a short summary here. 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>
  215.    
  216.     <p style="line-height: 1.5;">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>
  217.    
  218.     <div style="font-size:18px; font-weight:200;">
  219.       Etymology
  220.     </div>
  221.     <hr class="mt-1 mb-3">
  222.    
  223.     <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>
  224.   </div>
  225. </div>
  226.  
  227. <!-------------------
  228.  
  229.      TAB 2 — PERSONALITY
  230.  
  231. --------------------->
  232.  
  233. <div class="tab-pane show card-block p-0 table-responsive fade" style="height:545px" id="tab2">
  234.   <div class="container p-4">
  235.    
  236.     <div style="font-size:22px; font-weight:200;">
  237.       Typing Quirk
  238.     </div>
  239.     <hr class="mt-1 mb-3">
  240.     <p class="mb-1" 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>
  241.     <div class="text-center font-italic mt-0 p-3 mb-0" style="font-size:16px; font-weight:200;">
  242.       <span class="pull-left ml-2 px-2" style="font-size:18px"><i class="fas fa-quote-left"></i></span>
  243.       <span style="color:#7154FB">
  244.         The quick brown fox jumps over the lazy dog.
  245.       </span>
  246.       <span class="pull-right mr-2 px-2" style="font-size:18px"><i class="fas fa-quote-right"></i></span>
  247.     </div>
  248.    
  249.     <div class="row p-0 m-0">
  250.       <div class="col-md-6 p-0">
  251.         <div style="font-size:18px; font-weight:200;">
  252.           Likes
  253.         </div>
  254.         <hr class="mt-1 mr-3 mb-3">
  255.         <ul class="fa-ul mr-3">
  256.           <li class="mb-2"><span class="fa-li"><i class="fas fa-check"></i></span>Yes</li>
  257.           <li class="mb-2"><span class="fa-li"><i class="fas fa-check"></i></span>Yes</li>
  258.           <li class="mb-2"><span class="fa-li"><i class="fas fa-check"></i></span>Yes</li>
  259.           <li class="mb-2"><span class="fa-li"><i class="fas fa-check"></i></span>Yes</li>
  260.         </ul>
  261.       </div>
  262.       <div class="col-md-6 p-0">
  263.         <div class="ml-3" style="font-size:18px; font-weight:200;">
  264.           Dislikes
  265.         </div>
  266.         <hr class="mt-1 ml-3 mb-3">
  267.         <ul class="fa-ul ml-5">
  268.           <li class="mb-2"><span class="fa-li"><i class="fas fa-times"></i></span>No</li>
  269.           <li class="mb-2"><span class="fa-li"><i class="fas fa-times"></i></span>No</li>
  270.           <li class="mb-2"><span class="fa-li"><i class="fas fa-times"></i></span>No</li>
  271.           <li class="mb-2"><span class="fa-li"><i class="fas fa-times"></i></span>No</li>
  272.         </ul>
  273.       </div>
  274.     </div>
  275.    
  276.     <div style="font-size:22px; font-weight:200;">
  277.       Personality
  278.     </div>
  279.     <hr class="mt-1 mb-1">
  280.    
  281.     <div class="row p-0 m-0 text-center mb-2" style="font-weight:200">
  282.       <div class="col-md-6 p-0 mt-1 text-success">
  283.         <i class="fas fa-plus mr-2"></i> good, good, good
  284.       </div>
  285.       <div class="col-md-6 p-0 mt-1 text-warning">
  286.         <i class="fas fa-minus mr-2"></i> bad, bad, bad
  287.       </div>
  288.     </div>
  289.     <p style="line-height: 1.5;">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>
  290.    
  291.   </div>
  292. </div>
  293.  
  294. <!-------------------
  295.  
  296.      TAB 3 — REFERENCE
  297.  
  298. --------------------->
  299.  
  300. <div class="tab-pane show card-block p-0 fade" style="height:545px" id="tab3">
  301. <div class="row p-0 m-0" style="height:545px; width:800px">
  302.   <div class="col-md-7 p-0 m-4" style="min-width:415px; max-width:415px; max-height:495px">
  303.     <div class="mx-1" style="font-size:22px; font-weight:200;">
  304.       Appearance/Design
  305.     </div>
  306.     <hr class="mx-1 mt-1 mb-3">
  307.     <div class="py-0 px-2" style="max-height:450px; overflow-y:auto; overflow-x:hidden;">
  308.       <ul style="list-style-type: circle">
  309.         <li class="mb-2">Put notes about this design here.</li>
  310.         <li class="mb-2">Copy this line and paste below to add more.</li>
  311.         <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  312.        
  313.         <p style="line-height: 1.5;">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>
  314.        
  315.         <p style="line-height: 1.5;">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>
  316.       </ul>
  317.     </div>
  318.   </div>
  319.   <div class="col-lg-5 p-0 my-4 m-0"  style="max-width:310px; min-width:310px; max-height:500px; min-height:500px; background:url(https://images.unsplash.com/photo-1582769923195-c6e60dc1d8dc); background-size:cover; background-repeat: no-repeat"> </div>
  320. </div>
  321. </div>
  322.  
  323. <!-------------------
  324.  
  325.      TAB 4 — BIO
  326.  
  327. --------------------->
  328.  
  329. <div class="tab-pane show card-block p-0 table-responsive fade" style="height:545px" id="tab4">
  330. <div class="container p-4">
  331.   <div class="mx-1" style="font-size:22px; font-weight:200;">
  332.     Biography
  333.   </div>
  334.   <hr class="mx-1 mt-1 mb-3">
  335.   <div class="px-1 mb-2">
  336.     <p style="line-height: 1.5;">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>
  337.    
  338.     <p style="line-height: 1.5;">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>
  339.    
  340.     <div style="font-size:18px; font-weight:200;">
  341.       Subheader
  342.     </div>
  343.     <hr class="mt-1 mb-3">
  344.    
  345.     <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>
  346.    
  347.     <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>
  348.    
  349.     <div style="font-size:18px; font-weight:200;">
  350.       Subheader
  351.     </div>
  352.     <hr class="mt-1 mb-3">
  353.    
  354.     <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>
  355.    
  356.     <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>
  357.   </div>
  358. </div>
  359. </div>
  360.  
  361. <!-------------------
  362.  
  363.      TAB 5 — RELATIONSHIPS
  364.  
  365. --------------------->
  366.  
  367. <div class="tab-pane show card-block p-0 table-responsive fade" style="height:545px" id="tab5">
  368. <div class="container">
  369.   <div class="row my-2 mx-0 p-1">
  370.     <div class="col-sm-3 text-center h-100 p-2">
  371.       <img src="https://i.imgur.com/XNO9z5Q.png">
  372.     </div>
  373.    
  374.     <div class="col-lg-9 p-2">
  375.       <div class="text-left align-bottom" style="font-size:22px"><a href="CHARACTER LINK" style="color:#7154FB; font-weight:300">Name</a></div>
  376.       <div class="text-muted mb-1 align-bottom" style="font-size:15px; font-weight:200">Relationship
  377.         <span class="pull-right" style="font-size:17px">
  378.         <i class="fas fa-heart"></i>
  379.         <i class="fas fa-heart"></i>
  380.         <i class="fas fa-heart"></i>
  381.         <i class="far fa-heart"></i>
  382.         <i class="far fa-heart"></i></span>
  383.       </div>
  384.       <hr class="mt-1 mb-3">
  385.      
  386.       <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>
  387.     </div>
  388.   </div>
  389.  
  390.   <div class="row my-2 mx-0 p-1">
  391.     <div class="col-lg-9 p-2">
  392.       <div class="text-left align-bottom" style="font-size:22px"><a href="CHARACTER LINK" style="color:#7154FB; font-weight:300">Name</a></div>
  393.       <div class="text-muted mb-1 align-bottom" style="font-size:15px; font-weight:200">Relationship
  394.         <span class="pull-right" style="font-size:17px">
  395.         <i class="fas fa-spade"></i>
  396.         <i class="fas fa-spade"></i>
  397.         <i class="fas fa-spade"></i>
  398.         <i class="far fa-spade"></i>
  399.         <i class="far fa-spade"></i></span>
  400.       </div>
  401.       <hr class="mt-1 mb-3">
  402.      
  403.       <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>
  404.      
  405.       <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>
  406.     </div>
  407.    
  408.     <div class="col-sm-3 text-center h-100 p-2">
  409.       <img src="https://i.imgur.com/XNO9z5Q.png">
  410.     </div>
  411.   </div>
  412.  
  413.   <div class="row my-2 mx-0 p-1">
  414.     <div class="col-sm-3 text-center h-100 p-2">
  415.       <img src="https://i.imgur.com/XNO9z5Q.png">
  416.     </div>
  417.    
  418.     <div class="col-lg-9 p-2">
  419.       <div class="text-left align-bottom" style="font-size:22px"><a href="CHARACTER LINK" style="color:#7154FB; font-weight:300">Name</a></div>
  420.       <div class="text-muted mb-1 align-bottom" style="font-size:15px; font-weight:200">Relationship
  421.         <span class="pull-right" style="font-size:17px">
  422.         <i class="fas fa-heart-broken"></i>
  423.         <i class="fas fa-heart-broken"></i>
  424.         <i class="fas fa-heart-broken"></i>
  425.         <i class="far fa-heart-broken"></i>
  426.         <i class="far fa-heart-broken"></i></span>
  427.       </div>
  428.       <hr class="mt-1 mb-3">
  429.      
  430.       <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>
  431.     </div>
  432.   </div>
  433. </div>
  434. </div>
  435.  
  436. <!-------------------
  437.  
  438.      TAB 6 — TRIVIA
  439.  
  440. --------------------->
  441.  
  442. <div class="tab-pane show card-block p-0 table-responsive fade" style="height:545px" id="tab6">
  443.   <div class="row p-0 m-0" style="height:545px;">
  444.   <div class="col-md-7 p-0 mr-0 ml-4 my-4" style="min-width:415px; max-width:415px; max-height:495px">
  445.     <div class="mx-1" style="font-size:22px; font-weight:200;">
  446.       Trivia
  447.     </div>
  448.     <hr class="mt-1 mx-1 mb-2">
  449.     <div class="my-2 mx-3 justify-content-between">
  450.       <div style="font-weight:500;">
  451.         Obtained
  452.       </div>
  453.       <span class="pull-right" style="font-weight:200">
  454.         content
  455.       </span>
  456.     </div>
  457.     <hr class="mx-1 my-1">
  458.     <div class="my-2 mx-3 justify-content-between">
  459.       <div style="font-weight:500;">
  460.         Worth
  461.       </div>
  462.       <span class="pull-right" style="font-weight:200">
  463.         content
  464.       </span>
  465.     </div>
  466.     <hr class="mx-1 my-1">
  467.     <div class="my-2 mx-3 justify-content-between">
  468.       <div style="font-weight:500;">
  469.         UFS/T/O
  470.       </div>
  471.       <span class="pull-right" style="font-weight:200">
  472.         content
  473.       </span>
  474.     </div>
  475.    
  476.     <hr class="mx-1 my-1 mb-3">
  477.    
  478.     <div class="py-0 px-2" style="max-height:450px; overflow-y:auto; overflow-x:hidden;">
  479.       <ul style="list-style-type: circle">
  480.         <li class="mb-1">I love what I can’t see</li>
  481.         <li class="mb-1">What’s expected of you?</li>
  482.           <ul style="list-style-type: circle">
  483.             <li class="mb-1">What's expected of <i>me?</i></li>
  484.           </ul>
  485.         <li class="mb-1">Now it’s quarter to three</li>
  486.         <li class="mb-1">Let it all get away</li>
  487.       </ul>
  488.     </div>
  489.   </div>
  490.  
  491.   <div class="col-lg-5 p-0 ml-0 mr-4 my-4"  style="max-width:330px; min-width:330px; max-height:500px; min-height:500px;">
  492.     <div class="mx-1 ml-3" style="font-size:22px; font-weight:200;">
  493.       Music
  494.     </div>
  495.     <hr class="mt-1 ml-3 mr-1 mb-0">
  496.    
  497.     <div class="card card-block border-0 mt-0 p-3">
  498.       <iframe width="310" height="175" src="https://www.youtube.com/embed/OdnTQqB4q4w" frameborder="0" class=" m-auto"></iframe>
  499.     </div>
  500.    
  501.     <hr class="mt-1 ml-3 mr-1 mb-3">
  502.    
  503.     <div class="ml-3 mr-1 px-0">
  504.       <div class="col-lg-12 mb-1 px-0" style="font-weight:200">
  505.         <span>Introvert</span>
  506.         <span class="pull-right">Extrovert</span>
  507.       </div>
  508.     <div class="progress mb-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="background-color:#7154FB;width:50%;height:14px"></div></div>
  509.       <div class="col-lg-12 mb-1 px-0" style="font-weight:200">
  510.         <span>Observant</span>
  511.         <span class="pull-right">Intuitive</span>
  512.       </div>
  513.     <div class="progress mb-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="background-color:#7154FB;width:50%;height:14px"></div></div>
  514.       <div class="col-lg-12 mb-1 px-0" style="font-weight:200">
  515.         <span>Thinking</span>
  516.         <span class="pull-right">Feeling</span>
  517.       </div>
  518.     <div class="progress mb-2 rounded-0"><div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="background-color:#7154FB;width:50%;height:14px"></div></div>
  519.       <div class="col-lg-12 mb-1 px-0" style="font-weight:200">
  520.         <span>Judging</span>
  521.         <span class="pull-right">Prospecting</span>
  522.       </div>
  523.     <div class="progress rounded-0"><div class="progress-bar" role="progressbar" aria-valuemin ="0" aria-valuemax="100" style="background-color:#7154FB;width:50%;height:14px"></div></div>
  524.     </div>
  525.   </div>
  526. </div>
  527.  
  528. <!---- END TABS ---->
  529.  
  530. </div>
  531. </div>
  532. </div>
  533.  
  534.  
  535.  
  536. <!------------------- my credit, please don't remove! --------------------->
  537.  
  538. <div class="mx-auto text-center text-primary" style="font-size:12px">
  539. <a target="_blank" href="https://toyhou.se/meromercury" class="tooltipster" title="made by cass" style="color:#A4A4A4;font-weight:600"><i class="fal fa-code"></i></a></div>
  540. </div>
  541. </div>
  542. </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!