API tools faq
paste
Advertisement
meromerc

Dead Weight

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