API tools faq
paste
tera-toma

Penultimate DnD MAIN

tera-toma
Dec 25th, 2020 (edited)
480
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 72.23 KB | None | 0 0
raw download clone embed print report
  1. <div class="container">
  2.     <div class="row no-gutters">
  3.         <div class="col-3 p-1">
  4.            
  5.             <div><h1 class="d-flex mb-3 text-info text-uppercase" style="font-weight: 100; letter-spacing: 1rem;">name</div>
  6.            
  7.             <div class="card-primary text-primary w-100 p-3" style="text-align: right; height: 270px; background-image: url(https://via.placeholder.com/270); background-size: cover; background-position: center; background-repeat: no-repeat;"><span style="line-height: 420px; font-weight: 500; font-size: 2rem; ">lvl</span> <span style="line-height: 420px; font-weight: bold; font-size: 4rem; ">9</span></div>
  8.            
  9.                 <div class="card d-block bg-faded mt-2 p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  10.                     <span class="text-secondary text-uppercase">title</span>
  11.                     <span class="text pull-right">info</span>
  12.                 </div>
  13.                 <div class="card d-block bg p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  14.                     <span class="text-secondary text-uppercase">world</span>
  15.                     <span class="text pull-right">info</span>
  16.                 </div>
  17.                 <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  18.                     <span class="text-secondary text-uppercase">arc</span>
  19.                     <span class="text pull-right">info</span>
  20.                 </div>
  21.                 <div class="card d-block bg p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  22.                     <span class="text-secondary text-uppercase">birthday</span>
  23.                     <span class="text pull-right">info</span>
  24.                 </div>
  25.                 <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  26.                     <span class="text-secondary text-uppercase">designer</span>
  27.                     <span class="text pull-right">info</span>
  28.                 </div>
  29.                 <div class="card d-block bg p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  30.                     <span class="text-secondary text-uppercase">value</span>
  31.                     <span class="text pull-right">info</span>
  32.                 </div>
  33.                 <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; font-size: 0.8em;">
  34.                     <span class="text-secondary text-uppercase">active?</span>
  35.                     <span class="text pull-right">info</span>
  36.                 </div>
  37.         </div>
  38.        
  39.         <div class="col-9 p-1">
  40.             <div class="card">
  41.             <div class="card-header">
  42.             <ul class="nav nav-tabs card-header-tabs nav-justified">
  43.                 <li class="nav-item"><a class="nav-link text-uppercase active show" data-toggle="tab" href="#ONE">synopsis</a></li>
  44.                 <li class="nav-item"><a class="nav-link text-uppercase" data-toggle="tab" href="#TWO">build</a></li>
  45.                 <li class="nav-item"><a class="nav-link text-uppercase" data-toggle="tab" href="#THREE">character</a></li>
  46.                 <li class="nav-item"><a class="nav-link text-uppercase" data-toggle="tab" href="#FOUR">spells</a></li>
  47.                 <li class="nav-item"><a class="nav-link text-uppercase" data-toggle="tab" href="#FIVE">relations</a></li>
  48.             </ul>
  49.             </div>
  50.  
  51.             <div class="tab-content">
  52.            
  53.             <div class="tab-pane active show p-1" style="border-top-left-radius: 0; border-top-right-radius: 0; height: 505px; border-top: 0px;" id="ONE">
  54.                 <div class="row no-gutters">
  55.                     <div class="col-12 pb-2">
  56.                         <i class="fas text-warning fa-quote-left float-left p-1" style="font-size: 1.25rem;  text-indent: 25px;"></i> <p class="float-left" style="line-height: 50px; font-weight: 100; font-size: 1.5rem; text-indent: 25px;">This is the beginning of your quote here...</p>
  57.                         <p class="float-right" style="font-style: italic; line-height: 0px; font-weight: 100; font-size: 1.5rem; padding-right:25px;">... and the end here. Keep it short, but it can be pretty long. <i class="fas text-warning fa-quote-right float-right p-1" style="font-size: 1.25rem; text-indent: 25px; "></i></p>
  58.                     </div>
  59.                    
  60.                     <div class="col-2 p-1">
  61.                         <div class="card p-2" style="text-align: center; height: 100px;">
  62.                             <p class="text-info" style="font-size: 1rem; font-weight: 100; letter-spacing: 6px; ">STR</p>
  63.                             <p style="line-height: 5px; font-size: 2rem; letter-spacing: 4px; ">16</p>
  64.                             <p class="text-primary" style="line-height: px; font-weight: 500; font-size: 1rem; letter-spacing: 2px; ">+3</p>
  65.                         </div>
  66.                     </div>
  67.                    
  68.                     <div class="col-2 p-1">
  69.                         <div class="card p-2" style="text-align: center; height: 100px;">
  70.                             <p class="text-info" style="font-size: 1rem; font-weight: 100; letter-spacing: 6px; ">DEX</p>
  71.                             <p style="line-height: 5px; font-size: 2rem; letter-spacing: 4px; ">12</p>
  72.                             <p class="text-primary" style="line-height: px; font-weight: 500; font-size: 1rem; letter-spacing: 2px; ">+1</p>
  73.                         </div>
  74.                     </div>
  75.                    
  76.                     <div class="col-2 p-1">
  77.                         <div class="card p-2" style="text-align: center; height: 100px;">
  78.                             <p class="text-info" style="font-size: 1rem; font-weight: 100; letter-spacing: 6px; ">CON</p>
  79.                             <p style="line-height: 5px; font-size: 2rem; letter-spacing: 4px; ">8</p>
  80.                             <p class="text-primary" style="line-height: px; font-weight: 500; font-size: 1rem; letter-spacing: 2px; ">-1</p>
  81.                         </div>
  82.                     </div>
  83.                    
  84.                     <div class="col-2 p-1">
  85.                         <div class="card p-2" style="text-align: center; height: 100px;">
  86.                             <p class="text-info" style="font-size: 1rem; font-weight: 100; letter-spacing: 6px; ">INT</p>
  87.                             <p style="line-height: 5px; font-size: 2rem; letter-spacing: 4px; ">17</p>
  88.                             <p class="text-primary" style="line-height: px; font-weight: 500; font-size: 1rem; letter-spacing: 2px; ">+3</p>
  89.                         </div>
  90.                     </div>
  91.                    
  92.                     <div class="col-2 p-1">
  93.                         <div class="card p-2" style="text-align: center; height: 100px;">
  94.                             <p class="text-info" style="font-size: 1rem; font-weight: 100; letter-spacing: 6px; ">WIS</p>
  95.                             <p style="line-height: 5px; font-size: 2rem; letter-spacing: 4px; ">14</p>
  96.                             <p class="text-primary" style="line-height: px; font-weight: 500; font-size: 1rem; letter-spacing: 2px; ">+2</p>
  97.                         </div>
  98.                     </div>
  99.                    
  100.                     <div class="col-2 p-1">
  101.                         <div class="card p-2" style="text-align: center; height: 100px;">
  102.                             <p class="text-info" style="font-size: 1rem; font-weight: 100; letter-spacing: 6px; ">CHA</p>
  103.                             <p style="line-height: 5px; font-size: 2rem; letter-spacing: 4px; ">19</p>
  104.                             <p class="text-primary" style="line-height: px; font-weight: 500; font-size: 1rem; letter-spacing: 2px; ">+4</p>
  105.                         </div>
  106.                     </div>
  107.                    
  108.                     <div class="col-12 p-1">
  109.                         <ul class="list-group">
  110.                             <div class="row no-gutters">
  111.                                 <div class="col-6">
  112.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border: 0;">
  113.                                         <span class="text-secondary text-uppercase">class</span>
  114.                                         <span class="text pull-right">INFO</span>
  115.                                     </div>
  116.                                 </div>
  117.                                 <div class="col-6">
  118.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border: 0;">
  119.                                         <span class="text-secondary text-uppercase">background</span>
  120.                                         <span class="text pull-right">INFO</span>
  121.                                     </div>
  122.                                 </div>
  123.                                
  124.                                 <div class="col-6">
  125.                                     <div class="card d-block bg p-2 px-3" style="border-radius: 0; border: 0;">
  126.                                         <span class="text-secondary text-uppercase">origin</span>
  127.                                         <span class="text pull-right">INFO</span>
  128.                                     </div>
  129.                                 </div>
  130.                                 <div class="col-6">
  131.                                     <div class="card d-block bg p-2 px-3" style="border-radius: 0; border: 0;">
  132.                                         <span class="text-secondary text-uppercase">orientation</span>
  133.                                         <span class="text pull-right">INFO</span>
  134.                                     </div>
  135.                                 </div>
  136.                                
  137.                                 <div class="col-6">
  138.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border: 0;">
  139.                                         <span class="text-secondary text-uppercase">gender</span>
  140.                                         <span class="text pull-right">INFO</span>
  141.                                     </div>
  142.                                 </div>
  143.                                 <div class="col-6">
  144.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border: 0;">
  145.                                         <span class="text-secondary text-uppercase">pronouns</span>
  146.                                         <span class="text pull-right">INFO</span>
  147.                                     </div>
  148.                                 </div>
  149.                                
  150.                                 <div class="col-6">
  151.                                     <div class="card d-block bg p-2 px-3" style="border-radius: 0; border: 0;">
  152.                                         <span class="text-secondary text-uppercase">alignment</span>
  153.                                         <span class="text pull-right">INFO</span>
  154.                                     </div>
  155.                                 </div>
  156.                                 <div class="col-6">
  157.                                     <div class="card d-block bg p-2 px-3" style="border-radius: 0; border: 0;">
  158.                                         <span class="text-secondary text-uppercase">passive wis</span>
  159.                                         <span class="text pull-right">INFO</span>
  160.                                     </div>
  161.                                 </div>
  162.                                
  163.                                 <div class="col-6">
  164.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border: 0;">
  165.                                         <span class="text-secondary text-uppercase">inspiration</span>
  166.                                         <span class="text pull-right">INFO</span>
  167.                                     </div>
  168.                                 </div>
  169.                                 <div class="col-6">
  170.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border: 0;">
  171.                                         <span class="text-secondary text-uppercase">experience</span>
  172.                                         <span class="text pull-right">INFO</span>
  173.                                     </div>
  174.                                 </div>
  175.                             </div>
  176.                         </ul>
  177.                     </div>
  178.                        
  179.                             <div class="col-3 p-1">
  180.                                 <div class="card" style="height: 86px; background-image: url(https://via.placeholder.com/201x86); background-size: cover; background-position: center; background-repeat: no-repeat;">
  181.                                 </div>
  182.                             </div>
  183.                             <div class="col-3 p-1">
  184.                                 <div class="card" style="height: 86px; background-image: url(https://via.placeholder.com/201x86); background-size: cover; background-position: center; background-repeat: no-repeat;">
  185.                                 </div>
  186.                             </div>
  187.                             <div class="col-3 p-1">
  188.                                 <div class="card" style="height: 86px; background-image: url(https://via.placeholder.com/201x86); background-size: cover; background-position: center; background-repeat: no-repeat;">
  189.                                 </div>
  190.                             </div>
  191.                             <div class="col-3 p-1">
  192.                                 <div class="card" style="height: 86px; background-image: url(https://via.placeholder.com/201x86); background-size: cover; background-position: center; background-repeat: no-repeat;">
  193.                                 </div>
  194.                             </div>
  195.                    
  196.                 </div>
  197.                
  198.             </div>
  199.            
  200.             <div class="tab-pane p-1" style="border-top-left-radius: 0; border-top-right-radius: 0; height: 505px; border-top: 0px;" id="TWO">
  201.                 <div class="row no-gutters justify-content-center">
  202.                    
  203.                     <div class="col-1 p-3 text-center"><i class="fas fa-dice-d20 fa-3x"></i></div>
  204.                    
  205.                 <div class="col-3 p-1">
  206.                     <div class="card w-100" style="text-align: center; height: 75px;">
  207.                         <div class="card-header text-info text-uppercase" style="font-size: 1rem; font-weight: 100; letter-spacing: 4px; line-height: 5px;">AC</div>
  208.                         <p class="text-secondary" style="line-height: 40px; font-size: 2rem; letter-spacing: 4px; ">16</p>
  209.                     </div>
  210.                 </div>
  211.                
  212.                 <div class="col-3 p-1">
  213.                     <div class="card w-100" style="text-align: center; height: 75px;">
  214.                         <div class="card-header text-info text-uppercase" style="font-size: 1rem; font-weight: 100; letter-spacing: 4px; line-height: 5px;">speed</div>
  215.                         <p class="text-secondary" style="line-height: 40px; font-size: 2rem; letter-spacing: 4px; ">45</p>
  216.                     </div>
  217.                 </div>
  218.                
  219.                 <div class="col-3 p-1">
  220.                     <div class="card w-100" style="text-align: center; height: 75px;">
  221.                         <div class="card-header text-info text-uppercase" style="font-size: 1rem; font-weight: 100; letter-spacing: 4px; line-height: 5px;">initiative</div>
  222.                         <p class="text-secondary" style="line-height: 40px; font-size: 2rem; letter-spacing: 4px; ">3</p>
  223.                     </div>
  224.                 </div>
  225.                
  226.                     <div class="col-1 p-3 text-center"><i class="fas fa-dice-d20 fa-3x"></i></div>
  227.                
  228.                     <div class="col-12 p-1">
  229.                        
  230.                             <div class="card rounded-0 w-100" style="">
  231.                                 <ul class="list-group">
  232.                             <div class="row no-gutters" style="font-size: 0.8em;">
  233.                                
  234.                                 <div class="col-4">
  235.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border: 0;">
  236.                                         <span class="text-secondary text-uppercase">acrobatics</span>
  237.                                         <span class="text pull-right">INFO</span>
  238.                                     </div>
  239.                                 </div>
  240.                                 <div class="col-4">
  241.                                     <div class="card d-block bg p-2 px-3" style="border-radius: 0; border-top: 0; border-bottom: 0;">
  242.                                         <span class="text-secondary text-uppercase">insight</span>
  243.                                         <span class="text pull-right">INFO</span>
  244.                                     </div>
  245.                                 </div>
  246.                                
  247.                                 <div class="col-4">
  248.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border: 0;">
  249.                                         <span class="text-secondary text-uppercase">performance</span>
  250.                                         <span class="text pull-right">INFO</span>
  251.                                     </div>
  252.                                 </div>
  253.                                
  254.                                 <div class="col-4">
  255.                                     <div class="card d-block d-block bg-faded p-2 px-3" style="border-radius: 0; border-bottom: 0; border-left: 0; border-right: 0;">
  256.                                         <span class="text-secondary text-uppercase">animal handling</span>
  257.                                         <span class="text pull-right">INFO</span>
  258.                                     </div>
  259.                                 </div>
  260.                                 <div class="col-4">
  261.                                     <div class="card d-block bg p-2 px-3" style="border-radius: 0; border-bottom: 0;">
  262.                                         <span class="text-secondary text-uppercase">intimidation</span>
  263.                                         <span class="text pull-right">INFO</span>
  264.                                     </div>
  265.                                 </div>
  266.                                
  267.                                 <div class="col-4">
  268.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0;  border-bottom: 0; border-left: 0; border-right: 0;">
  269.                                         <span class="text-secondary text-uppercase">persuasion</span>
  270.                                         <span class="text pull-right">INFO</span>
  271.                                     </div>
  272.                                 </div>
  273.                                
  274.                                 <div class="col-4">
  275.                                     <div class="card d-block d-block bg-faded p-2 px-3" style="border-radius: 0; border-bottom: 0; border-left: 0; border-right: 0;">
  276.                                         <span class="text-secondary text-uppercase">arcana</span>
  277.                                         <span class="text pull-right">INFO</span>
  278.                                     </div>
  279.                                 </div>
  280.                                 <div class="col-4">
  281.                                     <div class="card d-block bg p-2 px-3" style="border-radius: 0; border-bottom: 0;">
  282.                                         <span class="text-secondary text-uppercase">investigation</span>
  283.                                         <span class="text pull-right">INFO</span>
  284.                                     </div>
  285.                                 </div>
  286.                                
  287.                                 <div class="col-4">
  288.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0;  border-bottom: 0; border-left: 0; border-right: 0;">
  289.                                         <span class="text-secondary text-uppercase">religion</span>
  290.                                         <span class="text pull-right">INFO</span>
  291.                                     </div>
  292.                                 </div>
  293.                                
  294.                                 <div class="col-4">
  295.                                     <div class="card d-block d-block bg-faded p-2 px-3" style="border-radius: 0; border-bottom: 0; border-left: 0; border-right: 0;">
  296.                                         <span class="text-secondary text-uppercase">athletics</span>
  297.                                         <span class="text pull-right">INFO</span>
  298.                                     </div>
  299.                                 </div>
  300.                                 <div class="col-4">
  301.                                     <div class="card d-block bg p-2 px-3" style="border-radius: 0; border-bottom: 0;">
  302.                                         <span class="text-secondary text-uppercase">medicine</span>
  303.                                         <span class="text pull-right">INFO</span>
  304.                                     </div>
  305.                                 </div>
  306.                                
  307.                                 <div class="col-4">
  308.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0;  border-bottom: 0; border-left: 0; border-right: 0;">
  309.                                         <span class="text-secondary text-uppercase">sleight of hand</span>
  310.                                         <span class="text pull-right">INFO</span>
  311.                                     </div>
  312.                                 </div>
  313.                                
  314.                                 <div class="col-4">
  315.                                     <div class="card d-block d-block bg-faded p-2 px-3" style="border-radius: 0; border-bottom: 0; border-left: 0; border-right: 0;">
  316.                                         <span class="text-secondary text-uppercase">deception</span>
  317.                                         <span class="text pull-right">INFO</span>
  318.                                     </div>
  319.                                 </div>
  320.                                 <div class="col-4">
  321.                                     <div class="card d-block bg p-2 px-3" style="border-radius: 0; border-bottom: 0;">
  322.                                         <span class="text-secondary text-uppercase">nature</span>
  323.                                         <span class="text pull-right">INFO</span>
  324.                                     </div>
  325.                                 </div>
  326.                                
  327.                                 <div class="col-4">
  328.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0;  border-bottom: 0; border-left: 0; border-right: 0;">
  329.                                         <span class="text-secondary text-uppercase">stealth</span>
  330.                                         <span class="text pull-right">INFO</span>
  331.                                     </div>
  332.                                 </div>
  333.                                
  334.                                 <div class="col-4">
  335.                                     <div class="card d-block d-block bg-faded p-2 px-3" style="border-radius: 0; border-bottom: 0; border-left: 0; border-right: 0;">
  336.                                         <span class="text-secondary text-uppercase">history</span>
  337.                                         <span class="text pull-right">INFO</span>
  338.                                     </div>
  339.                                 </div>
  340.                                 <div class="col-4">
  341.                                     <div class="card d-block bg p-2 px-3" style="border-radius: 0;border-bottom: 0;">
  342.                                         <span class="text-secondary text-uppercase">perception</span>
  343.                                         <span class="text pull-right">INFO</span>
  344.                                     </div>
  345.                                 </div>
  346.                                
  347.                                 <div class="col-4">
  348.                                     <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-bottom: 0; border-left: 0; border-right: 0;">
  349.                                         <span class="text-secondary text-uppercase">survival</span>
  350.                                         <span class="text pull-right">INFO</span>
  351.                                     </div>
  352.                                 </div>
  353.  
  354.                             </div>
  355.                         </ul>
  356.                             </div>
  357.  
  358.                     </div>
  359.                    
  360.                 <div class="col-4 pt-2 p-1">
  361.                     <div class="card w-100" style="text-align: center; height: 85px;">
  362.                         <div class="card-header text-info text-uppercase" style="font-size: 1rem; font-weight: 100; letter-spacing: 4px; line-height: 5px;">current hp</div>
  363.                         <p class="text" style="line-height: 50px; font-size: 2rem; letter-spacing: 4px; ">52</p>
  364.                     </div>
  365.                 </div>
  366.                 <div class="col-4 pt-2 p-1">
  367.                     <div class="card w-100" style="text-align: center; height: 85px;">
  368.                         <div class="card-header text-info text-uppercase" style="font-size: 1rem; font-weight: 100; letter-spacing: 4px; line-height: 5px;">maximum hp</div>
  369.                         <p class="text" style="line-height: 50px; font-size: 2rem; letter-spacing: 4px; ">64</p>
  370.                     </div>
  371.                 </div>
  372.                 <div class="col-4 pt-2 p-1">
  373.                     <div class="card w-100" style="text-align: center; height: 85px;">
  374.                         <div class="card-header text-info text-uppercase" style="font-size: 1rem; font-weight: 100; letter-spacing: 4px; line-height: 5px;">temporary hp</div>
  375.                         <p class="text" style="line-height: 50px; font-size: 2rem; letter-spacing: 4px; ">12</p>
  376.                     </div>
  377.                 </div>
  378.                
  379.                 <div class="col-1 pt-5 p-2 text-center"><i class="fas fa-scroll fa-flip-horizontal fa-3x"></i></div>
  380.                
  381.                 <div class="col-2 p-1">
  382.                     <div class="card w-100" style="text-align: center; height: 96px;">
  383.                         <div class="card-header text-info text-uppercase" style="font-size: 1rem; font-weight: 100; letter-spacing: 4px; line-height: 5px;">saves</div>
  384.                         <p class="text-secondary" style="line-height: 65px; font-size: 2rem; letter-spacing: 4px; ">3/3</p>
  385.                     </div>
  386.                 </div>
  387.                 <div class="col-2 p-1">
  388.                     <div class="card w-100" style="text-align: center; height: 96px;">
  389.                         <div class="card-header text-info text-uppercase" style="font-size: 1rem; font-weight: 100; letter-spacing: 4px; line-height: 5px;">cp</div>
  390.                         <p class="text-secondary" style="line-height: 65px; font-size: 2rem; letter-spacing: 4px; ">97</p>
  391.                     </div>
  392.                 </div>
  393.                 <div class="col-2 p-1">
  394.                     <div class="card w-100" style="text-align: center; height: 96px;">
  395.                         <div class="card-header text-info text-uppercase" style="font-size: 1rem; font-weight: 100; letter-spacing: 4px; line-height: 5px;">sp</div>
  396.                         <p class="text-secondary" style="line-height: 65px; font-size: 2rem; letter-spacing: 4px; ">25</p>
  397.                     </div>
  398.                 </div>
  399.                 <div class="col-2 p-1">
  400.                     <div class="card w-100" style="text-align: center; height: 96px;">
  401.                         <div class="card-header text-info text-uppercase" style="font-size: 1rem; font-weight: 100; letter-spacing: 4px; line-height: 5px;">gp</div>
  402.                         <p class="text-secondary" style="line-height: 65px; font-size: 2rem; letter-spacing: 4px; ">174</p>
  403.                     </div>
  404.                 </div>
  405.                 <div class="col-2 p-1">
  406.                     <div class="card w-100" style="text-align: center; height: 96px;">
  407.                         <div class="card-header text-info text-uppercase" style="font-size: 1rem; font-weight: 100; letter-spacing: 4px; line-height: 5px;">pp</div>
  408.                         <p class="text-secondary" style="line-height: 65px; font-size: 2rem; letter-spacing: 4px; ">5</p>
  409.                     </div>
  410.                 </div>
  411.                
  412.                 <div class="col-1 pt-5 p-2 text-center"><i class="fas fa-scroll fa-3x"></i></div>
  413.  
  414.                 </div>
  415.             </div>
  416.            
  417.             <div class="tab-pane p-1" style="border-top-left-radius: 0; border-top-right-radius: 0; height: 505px; border-top: 0px;" id="THREE">
  418.                 <div class="row no-gutters">
  419.                     <div class="col-7 p-1">
  420.                         <div class="card p-2" style="height: 490px; overflow: auto;">
  421.                             <div class="bg-faded p-2">
  422.                             <h1 class="text-info text-uppercase" style="font-weight: 400; letter-spacing: 0.5rem;">appearance</h1>
  423.                             <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis lorem tempor, euismod magna vel, viverra ipsum. Morbi sapien augue, vestibulum nec est a, gravida egestas enim. Praesent fermentum enim eget feugiat commodo. Integer tincidunt odio nec egestas facilisis. Proin luctus feugiat nibh, id hendrerit lacus porttitor ut. Duis ullamcorper ipsum gravida tortor pretium accumsan. Mauris a quam vel lacus volutpat suscipit eget vitae ante. Sed eu sapien eu neque placerat finibus at sed lacus.</p>
  424.                             <p class="text-justify"><span class="text-primary text-uppercase" style="font-size: 0.8rem; font-weight: bold; letter-spacing: 0.25rem;">subtitle</span><br>
  425.                             Praesent porttitor faucibus ornare. Nulla facilisis felis dignissim elit vulputate convallis. Etiam tincidunt est id nisi molestie, ac egestas mi maximus. Vivamus consequat, massa vel tincidunt congue, tellus dui faucibus turpis, sed vestibulum elit orci ac nulla. Nam porta dapibus leo. Aenean pellentesque aliquam ante semper egestas. Aliquam quam lorem, hendrerit eget mauris id, molestie faucibus leo. In efficitur auctor ex sed scelerisque. Suspendisse convallis aliquet felis, et blandit ex commodo eu. Donec molestie blandit mi nec finibus. Mauris viverra ipsum nec sem imperdiet, id luctus urna consequat. Vestibulum ex dolor, dictum id lacinia sit amet, ornare commodo quam. In vel pretium turpis.</p>
  426.                             </div>
  427.                            
  428.                             <div class="p-2">
  429.                             <h1 class="p-1 text-info text-uppercase" style="font-weight: 400; letter-spacing: 0.5rem;">backstory</h1>
  430.                             <p class="text-justify px-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis lorem tempor, euismod magna vel, viverra ipsum. Morbi sapien augue, vestibulum nec est a, gravida egestas enim. Praesent fermentum enim eget feugiat commodo. Integer tincidunt odio nec egestas facilisis. Proin luctus feugiat nibh, id hendrerit lacus porttitor ut. Duis ullamcorper ipsum gravida tortor pretium accumsan. Mauris a quam vel lacus volutpat suscipit eget vitae ante. Sed eu sapien eu neque placerat finibus at sed lacus.</p>
  431.                             <p class="text-justify px-1"><span class="text-primary text-uppercase" style="font-size: 0.8rem; font-weight: bold; letter-spacing: 0.25rem;">inline subtitle</span>
  432.                             Praesent porttitor faucibus ornare. Nulla facilisis felis dignissim elit vulputate convallis. Etiam tincidunt est id nisi molestie, ac egestas mi maximus. Vivamus consequat, massa vel tincidunt congue, tellus dui faucibus turpis, sed vestibulum elit orci ac nulla. Nam porta dapibus leo. Aenean pellentesque aliquam ante semper egestas. Aliquam quam lorem, hendrerit eget mauris id, molestie faucibus leo. In efficitur auctor ex sed scelerisque. Suspendisse convallis aliquet felis, et blandit ex commodo eu. Donec molestie blandit mi nec finibus. Mauris viverra ipsum nec sem imperdiet, id luctus urna consequat. Vestibulum ex dolor, dictum id lacinia sit amet, ornare commodo quam. In vel pretium turpis.</p>
  433.                             </div>
  434.                            
  435.                             <div class="bg-faded p-2">
  436.                             <h1 class="text-info text-uppercase" style="font-weight: 400; letter-spacing: 0.5rem;">allies & orgs</h1>
  437.                            <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis lorem tempor, euismod magna vel, viverra ipsum. Morbi sapien augue, vestibulum nec est a, gravida egestas enim. Praesent fermentum enim eget feugiat commodo. Integer tincidunt odio nec egestas facilisis. Proin luctus feugiat nibh, id hendrerit lacus porttitor ut. Duis ullamcorper ipsum gravida tortor pretium accumsan. Mauris a quam vel lacus volutpat suscipit eget vitae ante. Sed eu sapien eu neque placerat finibus at sed lacus.</p>
  438.                            <p class="text-justify"><span class="text-primary text-uppercase" style="font-size: 0.8rem; font-weight: bold; letter-spacing: 0.25rem;">subtitle</span><br>
  439.                             Praesent porttitor faucibus ornare. Nulla facilisis felis dignissim elit vulputate convallis. Etiam tincidunt est id nisi molestie, ac egestas mi maximus. Vivamus consequat, massa vel tincidunt congue, tellus dui faucibus turpis, sed vestibulum elit orci ac nulla. Nam porta dapibus leo. Aenean pellentesque aliquam ante semper egestas. Aliquam quam lorem, hendrerit eget mauris id, molestie faucibus leo. In efficitur auctor ex sed scelerisque. Suspendisse convallis aliquet felis, et blandit ex commodo eu. Donec molestie blandit mi nec finibus. Mauris viverra ipsum nec sem imperdiet, id luctus urna consequat. Vestibulum ex dolor, dictum id lacinia sit amet, ornare commodo quam. In vel pretium turpis.</p>
  440.                             </div>
  441.                            
  442.                             <div class="p-2">
  443.                             <h1 class="p-1 text-info text-uppercase" style="font-weight: 400; letter-spacing: 0.5rem;">features & traits</h1>
  444.                            <p class="text-justify px-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis lorem tempor, euismod magna vel, viverra ipsum. Morbi sapien augue, vestibulum nec est a, gravida egestas enim. Praesent fermentum enim eget feugiat commodo. Integer tincidunt odio nec egestas facilisis. Proin luctus feugiat nibh, id hendrerit lacus porttitor ut. Duis ullamcorper ipsum gravida tortor pretium accumsan. Mauris a quam vel lacus volutpat suscipit eget vitae ante. Sed eu sapien eu neque placerat finibus at sed lacus.</p>
  445.                            <p class="text-justify px-1"><span class="text-primary text-uppercase" style="font-size: 0.8rem; font-weight: bold; letter-spacing: 0.25rem;">inline subtitle</span>
  446.                             Praesent porttitor faucibus ornare. Nulla facilisis felis dignissim elit vulputate convallis. Etiam tincidunt est id nisi molestie, ac egestas mi maximus. Vivamus consequat, massa vel tincidunt congue, tellus dui faucibus turpis, sed vestibulum elit orci ac nulla. Nam porta dapibus leo. Aenean pellentesque aliquam ante semper egestas. Aliquam quam lorem, hendrerit eget mauris id, molestie faucibus leo. In efficitur auctor ex sed scelerisque. Suspendisse convallis aliquet felis, et blandit ex commodo eu. Donec molestie blandit mi nec finibus. Mauris viverra ipsum nec sem imperdiet, id luctus urna consequat. Vestibulum ex dolor, dictum id lacinia sit amet, ornare commodo quam. In vel pretium turpis.</p>
  447.                             </div>
  448.                            
  449.                             <div class="bg-faded p-2">
  450.                             <h1 class="text-info text-uppercase" style="font-weight: 400; letter-spacing: 0.5rem;">treasure</h1>
  451.                             <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras quis lorem tempor, euismod magna vel, viverra ipsum. Morbi sapien augue, vestibulum nec est a, gravida egestas enim. Praesent fermentum enim eget feugiat commodo. Integer tincidunt odio nec egestas facilisis. Proin luctus feugiat nibh, id hendrerit lacus porttitor ut. Duis ullamcorper ipsum gravida tortor pretium accumsan. Mauris a quam vel lacus volutpat suscipit eget vitae ante. Sed eu sapien eu neque placerat finibus at sed lacus.</p>
  452.                             <p class="text-justify"><span class="text-primary text-uppercase" style="font-size: 0.8rem; font-weight: bold; letter-spacing: 0.25rem;">subtitle</span><br>
  453.                             Praesent porttitor faucibus ornare. Nulla facilisis felis dignissim elit vulputate convallis. Etiam tincidunt est id nisi molestie, ac egestas mi maximus. Vivamus consequat, massa vel tincidunt congue, tellus dui faucibus turpis, sed vestibulum elit orci ac nulla. Nam porta dapibus leo. Aenean pellentesque aliquam ante semper egestas. Aliquam quam lorem, hendrerit eget mauris id, molestie faucibus leo. In efficitur auctor ex sed scelerisque. Suspendisse convallis aliquet felis, et blandit ex commodo eu. Donec molestie blandit mi nec finibus. Mauris viverra ipsum nec sem imperdiet, id luctus urna consequat. Vestibulum ex dolor, dictum id lacinia sit amet, ornare commodo quam. In vel pretium turpis.</p>
  454.                             </div>
  455.                         </div>
  456.                     </div>
  457.                    
  458.                     <div class="col-5 p-1">
  459.                         <div class="card d-block pl-5" style="border-radius: 50px 0px 0px 50px; height: 63px;">
  460.                        
  461.                             <div id="carousel1" class="p-4 carousel slide mx-auto mb-0" data-ride="carousel" style="font-size: 0.8em;">
  462.                                 <div class="carousel-inner">
  463.                                     <!---- SONG INFO ---->
  464.                                     <div class="carousel-item active text-truncate">
  465.                                         Sailormoon Moonlight Densetsu  - SilverStrike
  466.                                     </div>
  467.    
  468.                                     <!---- SONG INFO ---->
  469.                                     <div class="carousel-item text-truncate">
  470.                                         Moonlight Densetsu Lo-fi remix- Patrick Moon Bird
  471.                                     </div>
  472.    
  473.                                     <!---- SONG INFO ---->
  474.                                     <div class="carousel-item text-truncate">
  475.                                         Dream - clumby
  476.                                      </div>
  477.  
  478.                                     <!---- SONG INFO ---->
  479.                                     <div class="carousel-item text-truncate">
  480.                                         confusion - jinsang
  481.                                     </div>
  482.                                     <!--- put more songs before this line --->
  483.                                
  484.                                 </div>
  485.                             </div>
  486.                        
  487.                         </div>
  488.                         <div class="card" style="height: 63px; width: 63px; border-radius: 50px; position: absolute; top: 4px;"><a class="p-0 mt-2 btn melody-embed" style="z-index:2;">
  489.  
  490.  
  491.                             <!---- playlist ID -- it's the code on the end of your playlist link that starts with PL ----->
  492.                                 <iframe style="opacity:.02;position:absolute;left:0;right:0;top:0;bottom:0;" class="h-100 w-100"
  493.                                    src="
  494.      
  495.                                    https://www.youtube.com/embed/videoseries?list=PL6g-otkGU2XOIZfM29OdomxC0pWAc1lxt
  496.      
  497.                                    " frameborder="0"></iframe>
  498.                                         <i class="fas fa-play fa-lg p-4" style="z-index:-1;position:absolute;left:0;top:0;font-size:1rem;text-align:center;height:100%;width:100%;"></i></a></div>
  499.                                        
  500.                                 <!-----Playlist code from Omeletto's pretty guardian! Check it out HERE: https://toyhou.se/7988107.-f2u-pretty-guardian------>
  501.                                
  502.                         <div class="card d-block bg-faded mt-2 p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  503.                             <span class="text-primary text-uppercase">title</span>
  504.                             <span class="text pull-right">artist</span>
  505.                         </div>
  506.                         <div class="card d-block bg p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  507.                             <span class="text-primary text-uppercase">title</span>
  508.                             <span class="text pull-right">artist</span>
  509.                        </div>
  510.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  511.                             <span class="text-primary text-uppercase">title</span>
  512.                             <span class="text pull-right">artist</span>
  513.                         </div>
  514.                         <div class="card d-block bg p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  515.                             <span class="text-primary text-uppercase">title</span>
  516.                             <span class="text pull-right">artist</span>
  517.                         </div>
  518.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  519.                             <span class="text-primary text-uppercase">title</span>
  520.                             <span class="text pull-right">artist</span>
  521.                         </div>
  522.                         <div class="card d-block bg p-2 px-3" style="border-radius: 0; font-size: 0.8em;">
  523.                             <span class="text-primary text-uppercase">title</span>
  524.                             <span class="text pull-right">artist</span>
  525.                         </div>  
  526.  
  527.                         <div class="card d-block bg-faded mt-2 p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  528.                             <span class="text-secondary text-uppercase">age</span>
  529.                             <span class="text pull-right">info</span>
  530.                         </div>
  531.                         <div class="card d-block bg p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  532.                             <span class="text-secondary text-uppercase">height</span>
  533.                             <span class="text pull-right">info</span>
  534.                        </div>
  535.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  536.                             <span class="text-secondary text-uppercase">weight</span>
  537.                             <span class="text pull-right">info</span>
  538.                         </div>
  539.                         <div class="card d-block bg p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  540.                             <span class="text-secondary text-uppercase">eyes</span>
  541.                             <span class="text pull-right">info</span>
  542.                         </div>
  543.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; font-size: 0.8em; border-bottom: 0;">
  544.                             <span class="text-secondary text-uppercase">skin</span>
  545.                             <span class="text pull-right">info</span>
  546.                         </div>
  547.                         <div class="card d-block bg p-2 px-3" style="border-radius: 0; font-size: 0.8em;">
  548.                             <span class="text-secondary text-uppercase">hair</span>
  549.                             <span class="text pull-right">info</span>
  550.                         </div>                    
  551.                     </div>
  552.                 </div>
  553.             </div>
  554.            
  555.             <div class="tab-pane p-1" style="border-top-left-radius: 0; border-top-right-radius: 0; height: 505px; border-top: 0px; overflow:auto;" id="FOUR">
  556.                 <div class="row no-gutters">
  557.                     <div class="col-2 py-1 pl-1">
  558.                         <div class="card bg" style="text-align: center; height: 187px; border-right: 0; border-radius: 0;"><p style="line-height: 90px; font-weight: 100; font-size: 1.5rem;">level</p>
  559.                         <p class="text-primary" style="line-height:10px; font-weight: bold; font-size: 4rem;">0</p></div>
  560.                     </div>
  561.                     <div class="col-4 py-1 pr-1">
  562.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-bottom: 0;">
  563.                             <span class="text-secondary text-uppercase">name</span>
  564.                             <span class="text pull-right">school</span>
  565.                         </div>
  566.                        
  567.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  568.                             <span class="text-secondary text-uppercase">name</span>
  569.                             <span class="text pull-right">school</span>
  570.                         </div>
  571.                        
  572.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;  border-bottom: 0;">
  573.                             <span class="text-secondary text-uppercase">name</span>
  574.                             <span class="text pull-right">school</span>
  575.                         </div>
  576.                        
  577.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  578.                             <span class="text-secondary text-uppercase">name</span>
  579.                             <span class="text pull-right">school</span>
  580.                         </div>
  581.                        
  582.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;">
  583.                             <span class="text-secondary text-uppercase">name</span>
  584.                             <span class="text pull-right">school</span>
  585.                         </div>
  586.                     </div>
  587.                    
  588.                     <div class="col-2 py-1 pl-1">
  589.                         <div class="card bg" style="text-align: center; height: 187px; border-right: 0; border-radius: 0;"><p style="line-height: 90px; font-weight: 100; font-size: 1.5rem;">level</p>
  590.                         <p class="text-primary" style="line-height:10px; font-weight: bold; font-size: 4rem;">1</p></div>
  591.                     </div>
  592.                     <div class="col-4 py-1 pr-1">
  593.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-bottom: 0;">
  594.                             <span class="text-secondary text-uppercase">name</span>
  595.                             <span class="text pull-right">school</span>
  596.                         </div>
  597.                        
  598.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  599.                             <span class="text-secondary text-uppercase">name</span>
  600.                             <span class="text pull-right">school</span>
  601.                         </div>
  602.                        
  603.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;  border-bottom: 0;">
  604.                             <span class="text-secondary text-uppercase">name</span>
  605.                             <span class="text pull-right">school</span>
  606.                         </div>
  607.                        
  608.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  609.                             <span class="text-secondary text-uppercase">name</span>
  610.                             <span class="text pull-right">school</span>
  611.                         </div>
  612.                        
  613.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;">
  614.                             <span class="text-secondary text-uppercase">name</span>
  615.                             <span class="text pull-right">school</span>
  616.                         </div>
  617.                     </div>
  618.                    
  619.                     <div class="col-2 py-1 pl-1">
  620.                         <div class="card bg-faded" style="text-align: center; height: 187px; border-right: 0; border-radius: 0;"><p style="line-height: 90px; font-weight: 100; font-size: 1.5rem;">level</p>
  621.                         <p class="text-primary" style="line-height:10px; font-weight: bold; font-size: 4rem;">2</p></div>
  622.                     </div>
  623.                     <div class="col-4 py-1 pr-1">
  624.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-bottom: 0;">
  625.                             <span class="text-secondary text-uppercase">name</span>
  626.                             <span class="text pull-right">school</span>
  627.                         </div>
  628.                        
  629.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  630.                             <span class="text-secondary text-uppercase">name</span>
  631.                             <span class="text pull-right">school</span>
  632.                         </div>
  633.                        
  634.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;  border-bottom: 0;">
  635.                             <span class="text-secondary text-uppercase">name</span>
  636.                             <span class="text pull-right">school</span>
  637.                         </div>
  638.                        
  639.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  640.                             <span class="text-secondary text-uppercase">name</span>
  641.                             <span class="text pull-right">school</span>
  642.                         </div>
  643.                        
  644.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;">
  645.                             <span class="text-secondary text-uppercase">name</span>
  646.                             <span class="text pull-right">school</span>
  647.                         </div>
  648.                     </div>
  649.                    
  650.                     <div class="col-2 py-1 pl-1">
  651.                         <div class="card bg-faded" style="text-align: center; height: 187px; border-right: 0; border-radius: 0;"><p style="line-height: 90px; font-weight: 100; font-size: 1.5rem;">level</p>
  652.                         <p class="text-primary" style="line-height:10px; font-weight: bold; font-size: 4rem;">3</p></div>
  653.                     </div>
  654.                     <div class="col-4 py-1 pr-1">
  655.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-bottom: 0;">
  656.                             <span class="text-secondary text-uppercase">name</span>
  657.                             <span class="text pull-right">school</span>
  658.                         </div>
  659.                        
  660.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  661.                             <span class="text-secondary text-uppercase">name</span>
  662.                             <span class="text pull-right">school</span>
  663.                         </div>
  664.                        
  665.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;  border-bottom: 0;">
  666.                             <span class="text-secondary text-uppercase">name</span>
  667.                             <span class="text pull-right">school</span>
  668.                         </div>
  669.                        
  670.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  671.                             <span class="text-secondary text-uppercase">name</span>
  672.                             <span class="text pull-right">school</span>
  673.                         </div>
  674.                        
  675.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;">
  676.                             <span class="text-secondary text-uppercase">name</span>
  677.                             <span class="text pull-right">school</span>
  678.                         </div>
  679.                     </div>
  680.                    
  681.                     <div class="col-2 py-1 pl-1">
  682.                         <div class="card bg" style="text-align: center; height: 187px; border-right: 0; border-radius: 0;"><p style="line-height: 90px; font-weight: 100; font-size: 1.5rem;">level</p>
  683.                         <p class="text-primary" style="line-height:10px; font-weight: bold; font-size: 4rem;">4</p></div>
  684.                     </div>
  685.                     <div class="col-4 py-1 pr-1">
  686.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-bottom: 0;">
  687.                             <span class="text-secondary text-uppercase">name</span>
  688.                             <span class="text pull-right">school</span>
  689.                         </div>
  690.                        
  691.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  692.                             <span class="text-secondary text-uppercase">name</span>
  693.                             <span class="text pull-right">school</span>
  694.                         </div>
  695.                        
  696.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;  border-bottom: 0;">
  697.                             <span class="text-secondary text-uppercase">name</span>
  698.                             <span class="text pull-right">school</span>
  699.                         </div>
  700.                        
  701.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  702.                             <span class="text-secondary text-uppercase">name</span>
  703.                             <span class="text pull-right">school</span>
  704.                         </div>
  705.                        
  706.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;">
  707.                             <span class="text-secondary text-uppercase">name</span>
  708.                             <span class="text pull-right">school</span>
  709.                         </div>
  710.                     </div>
  711.                    
  712.                     <div class="col-2 py-1 pl-1">
  713.                         <div class="card bg" style="text-align: center; height: 187px; border-right: 0; border-radius: 0;"><p style="line-height: 90px; font-weight: 100; font-size: 1.5rem;">level</p>
  714.                         <p class="text-primary" style="line-height:10px; font-weight: bold; font-size: 4rem;">5</p></div>
  715.                     </div>
  716.                     <div class="col-4 py-1 pr-1">
  717.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-bottom: 0;">
  718.                             <span class="text-secondary text-uppercase">name</span>
  719.                             <span class="text pull-right">school</span>
  720.                         </div>
  721.                        
  722.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  723.                             <span class="text-secondary text-uppercase">name</span>
  724.                             <span class="text pull-right">school</span>
  725.                         </div>
  726.                        
  727.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;  border-bottom: 0;">
  728.                             <span class="text-secondary text-uppercase">name</span>
  729.                             <span class="text pull-right">school</span>
  730.                         </div>
  731.                        
  732.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  733.                             <span class="text-secondary text-uppercase">name</span>
  734.                             <span class="text pull-right">school</span>
  735.                         </div>
  736.                        
  737.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;">
  738.                             <span class="text-secondary text-uppercase">name</span>
  739.                             <span class="text pull-right">school</span>
  740.                         </div>
  741.                     </div>
  742.                    
  743.                     <div class="col-2 py-1 pl-1">
  744.                         <div class="card bg-faded" style="text-align: center; height: 187px; border-right: 0; border-radius: 0;"><p style="line-height: 90px; font-weight: 100; font-size: 1.5rem;">level</p>
  745.                         <p class="text-primary" style="line-height:10px; font-weight: bold; font-size: 4rem;">6</p></div>
  746.                     </div>
  747.                     <div class="col-4 py-1 pr-1">
  748.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-bottom: 0;">
  749.                             <span class="text-secondary text-uppercase">name</span>
  750.                             <span class="text pull-right">school</span>
  751.                         </div>
  752.                        
  753.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  754.                             <span class="text-secondary text-uppercase">name</span>
  755.                             <span class="text pull-right">school</span>
  756.                         </div>
  757.                        
  758.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;  border-bottom: 0;">
  759.                             <span class="text-secondary text-uppercase">name</span>
  760.                             <span class="text pull-right">school</span>
  761.                         </div>
  762.                        
  763.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  764.                             <span class="text-secondary text-uppercase">name</span>
  765.                             <span class="text pull-right">school</span>
  766.                         </div>
  767.                        
  768.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;">
  769.                             <span class="text-secondary text-uppercase">name</span>
  770.                             <span class="text pull-right">school</span>
  771.                         </div>
  772.                     </div>
  773.                    
  774.                     <div class="col-2 py-1 pl-1">
  775.                         <div class="card bg-faded" style="text-align: center; height: 187px; border-right: 0; border-radius: 0;"><p style="line-height: 90px; font-weight: 100; font-size: 1.5rem;">level</p>
  776.                         <p class="text-primary" style="line-height:10px; font-weight: bold; font-size: 4rem;">7</p></div>
  777.                     </div>
  778.                     <div class="col-4 py-1 pr-1">
  779.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-bottom: 0;">
  780.                             <span class="text-secondary text-uppercase">name</span>
  781.                             <span class="text pull-right">school</span>
  782.                         </div>
  783.                        
  784.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  785.                             <span class="text-secondary text-uppercase">name</span>
  786.                             <span class="text pull-right">school</span>
  787.                         </div>
  788.                        
  789.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;  border-bottom: 0;">
  790.                             <span class="text-secondary text-uppercase">name</span>
  791.                             <span class="text pull-right">school</span>
  792.                         </div>
  793.                        
  794.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  795.                             <span class="text-secondary text-uppercase">name</span>
  796.                             <span class="text pull-right">school</span>
  797.                         </div>
  798.                        
  799.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;">
  800.                             <span class="text-secondary text-uppercase">name</span>
  801.                             <span class="text pull-right">school</span>
  802.                         </div>
  803.                     </div>
  804.                    
  805.                     <div class="col-2 py-1 pl-1">
  806.                         <div class="card bg" style="text-align: center; height: 187px; border-right: 0; border-radius: 0;"><p style="line-height: 90px; font-weight: 100; font-size: 1.5rem;">level</p>
  807.                         <p class="text-primary" style="line-height:10px; font-weight: bold; font-size: 4rem;">8</p></div>
  808.                     </div>
  809.                     <div class="col-4 py-1 pr-1">
  810.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-bottom: 0;">
  811.                             <span class="text-secondary text-uppercase">name</span>
  812.                             <span class="text pull-right">school</span>
  813.                         </div>
  814.                        
  815.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  816.                             <span class="text-secondary text-uppercase">name</span>
  817.                             <span class="text pull-right">school</span>
  818.                         </div>
  819.                        
  820.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;  border-bottom: 0;">
  821.                             <span class="text-secondary text-uppercase">name</span>
  822.                             <span class="text pull-right">school</span>
  823.                         </div>
  824.                        
  825.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  826.                             <span class="text-secondary text-uppercase">name</span>
  827.                             <span class="text pull-right">school</span>
  828.                         </div>
  829.                        
  830.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;">
  831.                             <span class="text-secondary text-uppercase">name</span>
  832.                             <span class="text pull-right">school</span>
  833.                         </div>
  834.                     </div>
  835.                    
  836.                     <div class="col-2 py-1 pl-1">
  837.                         <div class="card bg" style="text-align: center; height: 187px; border-right: 0; border-radius: 0;"><p style="line-height: 90px; font-weight: 100; font-size: 1.5rem;">level</p>
  838.                         <p class="text-primary" style="line-height:10px; font-weight: bold; font-size: 4rem;">9</p></div>
  839.                     </div>
  840.                     <div class="col-4 py-1 pr-1">
  841.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-bottom: 0;">
  842.                             <span class="text-secondary text-uppercase">name</span>
  843.                             <span class="text pull-right">school</span>
  844.                         </div>
  845.                        
  846.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  847.                             <span class="text-secondary text-uppercase">name</span>
  848.                             <span class="text pull-right">school</span>
  849.                         </div>
  850.                        
  851.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;  border-bottom: 0;">
  852.                             <span class="text-secondary text-uppercase">name</span>
  853.                             <span class="text pull-right">school</span>
  854.                         </div>
  855.                        
  856.                         <div class="card d-block p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0; border-bottom: 0;">
  857.                             <span class="text-secondary text-uppercase">name</span>
  858.                             <span class="text pull-right">school</span>
  859.                         </div>
  860.                        
  861.                         <div class="card d-block bg-faded p-2 px-3" style="border-radius: 0; border-left: 0; border-top: 0;">
  862.                             <span class="text-secondary text-uppercase">name</span>
  863.                             <span class="text pull-right">school</span>
  864.                         </div>
  865.                     </div>
  866.                    
  867.                    
  868.                 </div>
  869.             </div>
  870.            
  871.             <div class="tab-pane p-1" style="border-top-left-radius: 0; border-top-right-radius: 0; height: 505px; border-top: 0px; overflow:auto;" id="FIVE">
  872.                 <div class="row no-gutters">
  873.                     <div class="col-3 p-1">
  874.                         <div class="card" style="height: 193px; background-image: url(https://via.placeholder.com/200); background-size: cover; background-position: center; background-repeat: no-repeat;"></div>
  875.                     </div>
  876.                    
  877.                     <div class="col-9 p-0 py-1 pr-1">
  878.                         <div class="card" style="height: 193px; border-radius: 0;">
  879.                             <h2 class="card-header text-danger text-uppercase" style="font-size: 1.1rem; font-weight: bold; letter-spacing: 0.25rem;">name
  880.                             <span class="pull-right" style="font-weight: 100;">relation</span></h2>
  881.                             <p class="p-2 text-justify" style="overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean felis lorem, scelerisque et euismod ut, ornare non sem. Sed commodo odio neque, tempor scelerisque lacus dignissim non. Duis dapibus facilisis sapien, vel sollicitudin magna condimentum ac. Vestibulum a volutpat velit. Etiam lobortis augue nunc, quis tincidunt nisl ullamcorper a. Vestibulum placerat, quam a lacinia accumsan, nulla tellus mattis libero, ac semper libero turpis non metus. Quisque lacinia feugiat sem ac dignissim. Vestibulum eu dignissim ante. Nunc lacinia eros quis vehicula vestibulum. Nulla luctus et libero et consectetur. Sed libero eros, fringilla vitae fermentum id, dictum id tortor. Morbi faucibus faucibus odio, eu facilisis magna ullamcorper sed. Suspendisse vitae ornare dui. Curabitur in ipsum sit amet est commodo mattis sit amet eu mi. Aliquam eget laoreet lorem, vitae lacinia sapien.</p>
  882.                         </div>
  883.                     </div>
  884.                    
  885.                     <div class="col-9 p-0 py-1 pl-1">
  886.                         <div class="card" style="height: 193px; border-radius: 0;">
  887.                             <h2 class="card-header text-warning text-uppercase" style="font-size: 1.1rem; font-weight: bold; letter-spacing: 0.25rem;">name
  888.                             <span class="pull-right" style="font-weight: 100;">relation</span></h2>
  889.                             <p class="p-2 text-justify" style="overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean felis lorem, scelerisque et euismod ut, ornare non sem. Sed commodo odio neque, tempor scelerisque lacus dignissim non. Duis dapibus facilisis sapien, vel sollicitudin magna condimentum ac. Vestibulum a volutpat velit. Etiam lobortis augue nunc, quis tincidunt nisl ullamcorper a. Vestibulum placerat, quam a lacinia accumsan, nulla tellus mattis libero, ac semper libero turpis non metus. Quisque lacinia feugiat sem ac dignissim. Vestibulum eu dignissim ante. Nunc lacinia eros quis vehicula vestibulum. Nulla luctus et libero et consectetur. Sed libero eros, fringilla vitae fermentum id, dictum id tortor. Morbi faucibus faucibus odio, eu facilisis magna ullamcorper sed. Suspendisse vitae ornare dui. Curabitur in ipsum sit amet est commodo mattis sit amet eu mi. Aliquam eget laoreet lorem, vitae lacinia sapien.</p>
  890.                         </div>
  891.                     </div>
  892.                    
  893.                     <div class="col-3 p-1">
  894.                         <div class="card" style="height: 193px; background-image: url(https://via.placeholder.com/200); background-size: cover; background-position: center; background-repeat: no-repeat;"></div>
  895.                     </div>
  896.                    
  897.                     <div class="col-3 p-1">
  898.                         <div class="card" style="height: 193px; background-image: url(https://via.placeholder.com/200); background-size: cover; background-position: center; background-repeat: no-repeat;"></div>
  899.                     </div>
  900.                    
  901.                     <div class="col-9 p-0 py-1 pr-1">
  902.                         <div class="card" style="height: 193px; border-radius: 0;">
  903.                             <h2 class="card-header text-success text-uppercase" style="font-size: 1.1rem; font-weight: bold; letter-spacing: 0.25rem;">name
  904.                             <span class="pull-right" style="font-weight: 100;">relation</span></h2>
  905.                             <p class="p-2 text-justify" style="overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean felis lorem, scelerisque et euismod ut, ornare non sem. Sed commodo odio neque, tempor scelerisque lacus dignissim non. Duis dapibus facilisis sapien, vel sollicitudin magna condimentum ac. Vestibulum a volutpat velit. Etiam lobortis augue nunc, quis tincidunt nisl ullamcorper a. Vestibulum placerat, quam a lacinia accumsan, nulla tellus mattis libero, ac semper libero turpis non metus. Quisque lacinia feugiat sem ac dignissim. Vestibulum eu dignissim ante. Nunc lacinia eros quis vehicula vestibulum. Nulla luctus et libero et consectetur. Sed libero eros, fringilla vitae fermentum id, dictum id tortor. Morbi faucibus faucibus odio, eu facilisis magna ullamcorper sed. Suspendisse vitae ornare dui. Curabitur in ipsum sit amet est commodo mattis sit amet eu mi. Aliquam eget laoreet lorem, vitae lacinia sapien.</p>
  906.                         </div>
  907.                     </div>
  908.                 </div>
  909.             </div>
  910.            
  911.             </div>
  912.            
  913.             </div>
  914.            
  915.            
  916.         </div>
  917.        
  918.        
  919.        
  920.        
  921.        
  922.        
  923.        
  924.        
  925.        
  926.        
  927.        
  928.        
  929.     </div>
  930.     <a class="pull-right p-1" href="https://toyhou.se/teratoma" data-toggle="tooltip" data-placement="bottom" title="code by teratoma"><i class="fas fa-terminal pull-right"></i></a>
  931. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!