API tools faq
paste
Advertisement
CrispinAsheYA

Solar (Custom Colours)

CrispinAsheYA
Mar 17th, 2023 (edited)
1,007
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 88.93 KB | Source Code | 0 0
raw download clone embed print report
  1. <!------- PLEASE SEE HERE FOR MY CODE RULES: https://toyhou.se/12931952.bonus-content/17036656.-06-code-rules -------
  2.  
  3. Version: 1.5
  4.  
  5. Default Colours
  6. -Light-Fill / Text Colour: #C95203
  7. -Dark-Fill : #532202
  8. -Text White: #FFFFFF
  9. -Border Black: #000000
  10. -Font Awesome Icons: fas fa-flame | fas fa-sun
  11.  
  12. There are no find and replace variables in this code. By using this code, you agree that you are somewhat familiar with HTML and how it works. There are also less comments in this code than usual, simply because this code is so long already.
  13.  
  14. Most user-changeable varibles are set as # if that helps.
  15.  
  16. Thank you for reading!
  17. Crispin
  18.  
  19. -->
  20.  
  21. <!------------------------------- START BACKGROUND -------------------------------->
  22.  
  23. <!-- No Image -->
  24. <div class="m-0 p-0">
  25.  
  26. <!-- If you want An Image, delete above div and Uncomment code on the line below. -->
  27. <!-- <div style="background-image:url(https://media.discordapp.net/attachments/917542533930823690/996466133202907206/unknown.png?width=574&height=578); background-size:cover; background-position:top-center; overflow:auto;" class="card-block"> -->
  28.  
  29.   <!------------------------------- START ACTUAL CODE -------------------------------->
  30.   <div class="col-12 p-0" style="font-size:1rem; font-family:'comic sans ms'; background-color:#FFFFFF; border:none;">
  31.    
  32.     <!------------------------------- START HEADING -------------------------------->
  33.     <div class="col-12 p-0" style="border:#000000 8px solid; border-bottom:none;">
  34.       <div class="card rounded-0" style="background:url(#); background-position:center; background-size:cover; border:none;"><p class="justify-content-between display-4 m-1 p-3" style="color:#FFFFFF; background:rgba(0,0,0,0.7);">
  35.         <span><a href="https://toyhou.se/20666403.solar-quest4longestcode" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA" data-original-title="Code by: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-sun fa-flip-horizontal"></i></span></a> # - #</span></p></div>
  36.     </div>
  37.     <!------------------------------- END HEADING -------------------------------->
  38.    
  39.    
  40.     <!------------------------------- START BUTTONS -------------------------------->
  41.     <div class="col-12 p-0" style="border:#000000 4px solid; border-bottom:none;">
  42.       <ul class="nav nav-tabs card-header-tabs row p-0 m-0" style="text-align:center;">
  43.         <li class="col-12 col-lg-4 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#one" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">About</a></li>
  44.         <li class="col-12 col-lg-4 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#two" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Personality</a></li>
  45.         <li class="col-12 col-lg-4 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#three" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Design</a></li>
  46.         <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#four" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Identity</a></li>
  47.         <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#five" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Tastes</a></li>
  48.         <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#six" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Values</a></li>
  49.         <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#seven" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Story</a></li>
  50.         <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#eight" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Background</a></li>
  51.         <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#nine" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Demeanour</a></li>
  52.         <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#ten" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Stats</a></lli>
  53.         <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#eleven" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Health</a></li>
  54.         <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#twelve" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Buddies</a></li>
  55.         <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#thirteen" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Trivia</a></li>
  56.         <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#fourteen" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Bonus</a></li>
  57.         <li class="col-12 col-lg-1 nav-item p-0 m-0"><a class="nav-link px-0" data-toggle="tab" href="#fifteen" style="color:#FFFFFF; background:#C95203; border:#000000 4px solid; border-radius:0px">Extras</a></li>
  58.       </ul>
  59.     </div>
  60.     <!------------------------------- END BUTTONS -------------------------------->
  61.    
  62.     <!------------------------------- START MIDDLE SECTION -------------------------------->
  63.     <div class="col-12 mx-auto p-0 row" style="background-color:#532202; border:#000000 4px solid; border-top:none;">
  64.    
  65.       <div class="col-12 col-lg-3 p-0">
  66.        
  67.         <div class="col-12 p-3" style="color:#FFFFFF; font-size:1.2rem; background:#C95203; border:#000000 4px solid;"><i class="fas fa-flame fa-flip-horizontal"></i> Playlist</div>
  68.        
  69.         <!------------------------------- START PLAYLIST -------------------------------->
  70.         <div class="col-12" style="height:688px; overflow:auto; border:#000000 4px solid;">
  71.           <div class="container p-3">
  72.             <div class="p-3 text-center">
  73.               <ul class="list-unstyled">
  74.                
  75.                 <!------ START SONG ----->
  76.                 <td style="width:100%; text-align:center; background-color:transparent; border-color:transparent; border-style:double;">
  77.                   <p="text-center" style="color:#C95203; text-shadow:0px 0px;"><b># - #</b></p>
  78.                   <audio controls="" style="border-radius:0px; background:#C95203; padding:2px; width:200px; height:35px;"><source src="#"></audio></td><br><p style="color:#532202;">-</p>
  79.                 <!------ END SONG ----->
  80.                
  81.               </ul>
  82.             </div>
  83.           </div>
  84.         </div>
  85.         <!------------------------------- End PLAYLIST -------------------------------->
  86.        
  87.       </div>
  88.        
  89.        
  90.         <!------------------------------- START INFO -------------------------------->
  91.         <div class="col-12 col-lg-9 p-0" style="background-color:#532202; border:none;">
  92.           <div class="tab-content" style="border:#000000 4px solid;">
  93.             <div class="col-12 p-3" style="color:#FFFFFF; font-size:1.2rem; background:#C95203; border-bottom:#000000 8px solid;"><i class="fas fa-flame fa-flip-horizontal"></i> Info</div>
  94.            
  95.             <!------------------------------- START TAB 1 -------------------------------->
  96.             <div class="tab-pane active show" id="one"><!-- Start Tab-->
  97.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  98.                
  99.                 <div class="col-12 row">
  100.                  
  101.                   <div class="col-12 col-lg-8">
  102.                    
  103.                     <!------ START INTRODUCTION ----->
  104.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Introduction</span><hr class="mt-1 mb-2">
  105.                     <p>#</p>
  106.                     <p style="color:#532202;">-</p>
  107.                     <!------ START INTRODUCTION ----->
  108.                    
  109.                     <!------ START FLAGS ----->
  110.                     <div class="col-12 my-2 mb-3 text-center">
  111.                       <div data-toggle="tooltip" title="Lesbian" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#E65524,#E65524 20%,#FE9855 20%,#FE9855 40%,#FFD4B8 40%,#FFD4B8 60%,#E17684 60%,#E17684 80%,#C93B5F 80%);line-height:60px;width:80px; font-size:0px;">Lesbian</div>
  112.                     </div>
  113.                     <!------ END FLAGS ----->
  114.                    
  115.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Basic Information</span><hr class="mt-1 mb-2">
  116.                    
  117.                     <div class="col-12 row mb-2 pb-3 p-0 text-center">
  118.                       <div class="col-12">
  119.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  120.                           <p class="mr-2" style="flex-grow:0;">Full-Name</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  121.                         </div>
  122.                       </div>
  123.                       <div class="col-12 col-lg-6">
  124.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  125.                           <p class="mr-2" style="flex-grow:0;">Species</p><hr style="flex-grow:1;"><span class="ml-2"><a href="#" style="color:#C95203;">#</a></span>
  126.                         </div>
  127.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  128.                           <p class="mr-2" style="flex-grow:0;">Birthday</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  129.                         </div>
  130.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  131.                           <p class="mr-2" style="flex-grow:0;">Age</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  132.                         </div>
  133.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  134.                           <p class="mr-2" style="flex-grow:0;">Gender</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  135.                         </div>
  136.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  137.                           <p class="mr-2" style="flex-grow:0;">Orientation</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  138.                         </div>
  139.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  140.                           <p class="mr-2" style="flex-grow:0;">Occupation</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  141.                         </div>
  142.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  143.                           <p class="mr-2" style="flex-grow:0;">Story-Role</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  144.                         </div>
  145.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  146.                           <p class="mr-2" style="flex-grow:0;">Alignment</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  147.                         </div>
  148.                       </div>
  149.                       <div class="col-12 col-lg-6">
  150.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  151.                           <p class="mr-2" style="flex-grow:0;">Birth-Place</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  152.                         </div>
  153.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  154.                           <p class="mr-2" style="flex-grow:0;">Resides</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  155.                         </div>
  156.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  157.                           <p class="mr-2" style="flex-grow:0;">Status</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  158.                         </div>
  159.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  160.                           <p class="mr-2" style="flex-grow:0;">Relationship</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  161.                         </div>
  162.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  163.                           <p class="mr-2" style="flex-grow:0;">Religion</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  164.                         </div>
  165.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  166.                           <p class="mr-2" style="flex-grow:0;">Ethnicity</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  167.                         </div>
  168.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  169.                           <p class="mr-2" style="flex-grow:0;">Race</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  170.                         </div>
  171.                         <div class="d-flex" style="flex-direction:row; align-items:center;">
  172.                           <p class="mr-2" style="flex-grow:0;">Voiceclaim</p><hr style="flex-grow:1;"><span class="ml-2"><a href="#" style="color:#C95203;">#</a></span>
  173.                         </div>
  174.                       </div>
  175.                      
  176.                     </div>
  177.                    
  178.                   </div>
  179.                   <!------ END TEXT ----->
  180.                  
  181.                   <!------ START Image ----->
  182.                   <div class="col-12 col-lg-4 text-center">
  183.                     <img src="#" height="400" width="200">
  184.                   </div>
  185.                   <!------ END Image ----->
  186.                
  187.                 </div>
  188.                
  189.               </div><!--End Tab Set-Up-->
  190.             </div><!-- End Tab -->
  191.             <!------------------------------- END TAB 1 -------------------------------->
  192.              
  193.             <!------------------------------- START TAB 2 -------------------------------->
  194.             <div class="tab-pane fade" id="two"><!-- Start Tab-->
  195.               <div class="card-body p-3 table-responsive" style="height:680px;" style="height:680px;"><!--Start Tab Set-Up-->
  196.                
  197.                 <div class="col-12 row">
  198.                  
  199.                   <!------ START Q&A ----->
  200.                   <div class="col-12 row mb-2 p-0 text-center">
  201.                     <div class="col-12 col-lg-6">
  202.                       <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  203.                         <p class="mr-2" style="flex-grow:0;">MBTI</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  204.                       </div>
  205.                       <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  206.                         <p class="mr-2" style="flex-grow:0;">Western Zodiac</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  207.                       </div>
  208.                       <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  209.                         <p class="mr-2" style="flex-grow:0;">Chinese Zodiac</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  210.                       </div>
  211.                       <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  212.                         <p class="mr-2" style="flex-grow:0;">Birth-Flower</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  213.                       </div>
  214.                       <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  215.                         <p class="mr-2" style="flex-grow:0;">Birth-Stone</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  216.                       </div>
  217.                     </div>
  218.                     <div class="col-12 col-lg-6">
  219.                       <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  220.                         <p class="mr-2" style="flex-grow:0;">Enneagram</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  221.                       </div>
  222.                       <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  223.                         <p class="mr-2" style="flex-grow:0;">Hogwarts House</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  224.                       </div>
  225.                       <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  226.                         <p class="mr-2" style="flex-grow:0;">Blood-Type</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  227.                       </div>
  228.                       <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  229.                         <p class="mr-2" style="flex-grow:0;">Triforce-Piece</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  230.                       </div>
  231.                       <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  232.                         <p class="mr-2" style="flex-grow:0;">Cat/Dog Person</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  233.                       </div>
  234.                     </div>
  235.                   </div>
  236.                   <!------ END Q&A ----->
  237.                  
  238.                   <!------ START TEXT ----->
  239.                   <div class="py-3 pb-5">
  240.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Personality</span><hr class="mt-1 mb-2">
  241.                     <p>#</p>
  242.                   </div>
  243.                   <!------ END TEXT ----->
  244.                  
  245.                   <!------ START TEXT ----->
  246.                   <div class="col-12 row mb-4">
  247.                     <div class="col-12 col-lg-6 mb-4 text-center">
  248.                       <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Positive Traits</span><hr class="mt-1 mb-2">
  249.                       <p>
  250.                         #<br>
  251.                         #<br>
  252.                         #<br>
  253.                       </p>
  254.                     </div>
  255.                     <div class="col-12 col-lg-6 mb-4 text-center">
  256.                       <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Negative Traits</span><hr class="mt-1 mb-2">
  257.                       <p>
  258.                         #<br>
  259.                         #<br>
  260.                         #<br>
  261.                       </p>
  262.                     </div>
  263.                     <div class="col-12 col-lg-6 mb-4 text-center">
  264.                       <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Realistic Goals</span><hr class="mt-1 mb-2">
  265.                       <p>
  266.                         #<br>
  267.                         #<br>
  268.                         #<br>
  269.                       </p>
  270.                     </div>
  271.                     <div class="col-12 col-lg-6 mb-4 text-center">
  272.                       <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Aspirational Dreams</span><hr class="mt-1 mb-2">
  273.                       <p>
  274.                         #<br>
  275.                         #<br>
  276.                         #<br>
  277.                       </p>
  278.                     </div>
  279.                     <div class="col-12 col-lg-6 text-center">
  280.                       <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Fears</span><hr class="mt-1 mb-2">
  281.                       <p>
  282.                         #<br>
  283.                         #<br>
  284.                         #<br>
  285.                       </p>
  286.                     </div>
  287.                     <div class="col-12 col-lg-6 text-center">
  288.                       <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Secrets</span><hr class="mt-1 mb-2">
  289.                       <p>
  290.                         #<br>
  291.                         #<br>
  292.                         #<br>
  293.                       </p>
  294.                     </div>
  295.                   </div>
  296.                   <!------ END TEXT ----->
  297.                  
  298.                 </div>
  299.                
  300.                
  301.                 <!------ START TEXT ----->
  302.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">How Do They Act Alone?</span><hr class="mt-1 mb-2">
  303.                 <p>#</p>
  304.                 <p style="color:#532202;">-</p>
  305.                 <!------ END TEXT ----->
  306.                
  307.                 <!------ START TEXT ----->
  308.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">How Do They Act With Friends?</span><hr class="mt-1 mb-2">
  309.                 <p>#</p>
  310.                 <p style="color:#532202;">-</p>
  311.                 <!------ END TEXT ----->
  312.                
  313.                 <!------ START TEXT ----->
  314.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">How Do They Act With Family?</span><hr class="mt-1 mb-2">
  315.                 <p>#</p>
  316.                 <p style="color:#532202;">-</p>
  317.                 <!------ END TEXT ----->
  318.                
  319.                 <!------ START TEXT ----->
  320.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">How Do They Act With A Partner?</span><hr class="mt-1 mb-2">
  321.                 <p>#</p>
  322.                 <p style="color:#532202;">-</p>
  323.                 <!------ END TEXT ----->
  324.                
  325.                 <!------ START TEXT ----->
  326.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">How Do They Act With An Enemy?</span><hr class="mt-1 mb-2">
  327.                 <p>#</p>
  328.                 <p style="color:#532202;">-</p>
  329.                 <!------ END TEXT ----->
  330.                
  331.                 <!------ START TEXT ----->
  332.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">How Do They Act With An Authority Figure?</span><hr class="mt-1 mb-2">
  333.                 <p>#</p>
  334.                 <p style="color:#532202;">-</p>
  335.                 <!------ END TEXT ----->
  336.  
  337.               </div><!--End Tab Set-Up-->
  338.             </div><!-- End Tab -->
  339.             <!------------------------------- END TAB 2 -------------------------------->
  340.              
  341.             <!------------------------------- START TAB 3 -------------------------------->
  342.             <div class="tab-pane fade" id="three"><!-- Start Tab-->
  343.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  344.                
  345.                 <!------ START IMAGE ------>
  346.                 <div class="card bg-transparent border-0 rounded-0" style="max-width:600px; margin-left:auto; margin-right:auto;">
  347.                   <img src="#">
  348.                   <a href="#" data-toggle="tooltip" title="Full Size" style="color:#FFFFFF; position:absolute; top:3px; right:7px; font-size:1.4rem"> <i class="fas fa-sun"></i></a>
  349.                 </div>
  350.                 <!------ END IMAGE ------>
  351.                
  352.                 <!------------------------------- START COLOUR-PALETTE -------------------------------->
  353.                 <div class="col-12 my-3 px-0" style="border:#000000 4px solid;">
  354.                   <ul class="nav nav-justified" style="font-size:1rem;">
  355.                     <li class="nav-item m-0" style="color:#C95203; font-size:1rem; background:#C95203;">I</li>
  356.                     <li class="nav-item m-0" style="background:#C95203;"></li>
  357.                     <!-- Copy and paste the 2ND LINE ONLY just above this comment to add more! -->
  358.                   </ul>
  359.                 </div>
  360.                 <!------------------------------- END COLOUR-PALETTE -------------------------------->
  361.                  
  362.                 <div class="row my-3" style="max-width:700px; margin-left:auto; margin-right:auto">
  363.                  
  364.                   <!------ START DESIGN NOTES ------>
  365.                   <div class="col-12 col-xl-5 mt-2 mb-3 mb-xl-0">
  366.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  367.                       <p class="mr-2" style="flex-grow:0;">Hair-Type</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  368.                     </div>
  369.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  370.                       <p class="mr-2" style="flex-grow:0;">Hair-Length</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  371.                     </div>
  372.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  373.                       <p class="mr-2" style="flex-grow:0;">Hair-Colour</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  374.                     </div>
  375.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  376.                       <p class="mr-2" style="flex-grow:0;">Eye-Colour</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  377.                     </div>
  378.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  379.                       <p class="mr-2" style="flex-grow:0;">Eye-Vibe</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  380.                     </div>
  381.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  382.                       <p class="mr-2" style="flex-grow:0;">Body-Type</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  383.                     </div>
  384.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  385.                       <p class="mr-2" style="flex-grow:0;">Skin-Tone</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  386.                     </div>
  387.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  388.                       <p class="mr-2" style="flex-grow:0;">Height</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  389.                     </div>
  390.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  391.                       <p class="mr-2" style="flex-grow:0;">Weight</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  392.                     </div>
  393.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  394.                       <p class="mr-2" style="flex-grow:0;">Piercings</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  395.                     </div>
  396.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  397.                       <p class="mr-2" style="flex-grow:0;">Tattoos</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  398.                     </div>
  399.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  400.                       <p class="mr-2" style="flex-grow:0;">Clothing-Style</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  401.                     </div>
  402.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  403.                       <p class="mr-2" style="flex-grow:0;">Presentation</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  404.                     </div>
  405.                   </div>
  406.                   <!------ END DESIGN NOTES ------>
  407.                  
  408.                   <!------ START EXTRA NOTES ------>
  409.                   <div class="col-12 col-xl-7">
  410.                     <span style="color:#C95203; font-size:1.4rem;"> Extra Notes</span><hr class="mt-0 mb-2">
  411.                     <ul>
  412.                       <li>#</li>
  413.                     </ul>
  414.                   </div>
  415.                   <!------ END EXTRA NOTES ------>
  416.                  
  417.                 </div>
  418.                
  419.               </div><!--End Tab Set-Up-->
  420.             </div><!-- End Tab -->
  421.             <!------------------------------- END TAB 3 -------------------------------->
  422.              
  423.             <!------------------------------- START TAB 4 -------------------------------->
  424.             <div class="tab-pane fade" id="four"><!-- Start Tab-->
  425.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  426.                
  427.                 <!------ START Q&A ----->
  428.                 <div class="col-12 row mb-4 p-0 text-center">
  429.                   <div class="col-12 col-lg-6">
  430.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  431.                       <p class="mr-2" style="flex-grow:0;">Full Name</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  432.                     </div>
  433.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  434.                       <p class="mr-2" style="flex-grow:0;">Sexual Orientation</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  435.                     </div>
  436.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  437.                       <p class="mr-2" style="flex-grow:0;">Romantic Orientation</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  438.                     </div>
  439.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  440.                       <p class="mr-2" style="flex-grow:0;">Ethnicity</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  441.                     </div>
  442.                   </div>
  443.                   <div class="col-12 col-lg-6">
  444.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  445.                       <p class="mr-2" style="flex-grow:0;">Sex</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  446.                     </div>
  447.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  448.                       <p class="mr-2" style="flex-grow:0;">Gender</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  449.                     </div>
  450.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  451.                       <p class="mr-2" style="flex-grow:0;">Pronouns</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  452.                     </div>
  453.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  454.                       <p class="mr-2" style="flex-grow:0;">Race</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  455.                     </div>
  456.                   </div>
  457.                 </div>
  458.                 <!------ END Q&A ----->
  459.                
  460.                 <!------ START HERITAGE ----->
  461.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Heritage</span><hr class="mt-1 mb-2">
  462.                 <div class="progress" style="font-size:1.2rem; border:#000000 2px solid; border-radius:0px;">
  463.                   <div class="progress-bar p-2" style="height:36px; width:50%; color:#FFFFFF; background-color:#C95203; border:#000000 2px solid; border-radius:0px;">50% - English<br></div>
  464.                   <div class="progress-bar p-2" style="height:36px; width:25%; color:#FFFFFF; background-color:#C95203; border:#000000 2px solid; border-radius:0px;">25% - Scottish<br></div>
  465.                   <div class="progress-bar p-2" style="height:36px; width:25%; color:#FFFFFF; background-color:#C95203; border:#000000 2px solid; border-radius:0px;">25% - Welsh<br></div>
  466.                 </div>
  467.                 <!------ END HERITAGE ----->
  468.                
  469.                 <!------ START COUNTRY FLAGS ----->
  470.                 <div class="col-12 pt-3 pb-1 px-3 text-center">
  471.                  
  472.                   <!-- Start Country Flag -->
  473.                   <div data-toggle="tooltip" title="England" class="border-0 rounded-0 d-inline-block" style="background-image:url(https://cdn.shopify.com/s/files/1/2494/7352/products/73fb4a5f8967812ef24e0b95a6a3a1b0_530x@2x.jpg?v=1522240301); background-size:contain; background-repeat:no-repeat; height:60px; width:80px; font-size:0px;">England</div>
  474.                   <!-- End Country Flag -->
  475.                  
  476.                   <!-- Start Country Flag -->
  477.                   <div data-toggle="tooltip" title="#" class="border-0 rounded-0 d-inline-block" style="background-image:url(#); background-size:contain; background-repeat:no-repeat; height:60px; width:80px; font-size:0px;">#</div>
  478.                   <!-- End Country Flag -->
  479.                  
  480.                 </div>
  481.                 <!------ END COUNTRY FLAGS ----->
  482.                
  483.                 <!------ START ORIENTATION/GENDER FLAGS ----->
  484.                 <div class="col-12 pb-3 px-3 text-center">
  485.                  
  486.                   <!-- Start Lesbian Flag -->
  487.                   <div data-toggle="tooltip" title="Lesbian" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#E65524,#E65524 20%,#FE9855 20%,#FE9855 40%,#FFD4B8 40%,#FFD4B8 60%,#E17684 60%,#E17684 80%,#C93B5F 80%);line-height:60px;width:80px; font-size:0px;">Lesbian</div>
  488.                   <!-- End Lesbian Flag -->
  489.                  
  490.                   <!-- Start Gay Flag -->
  491.                   <div data-toggle="tooltip" title="Gay" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#23918B,#23918B 20%,#5AC6D3 20%,#5AC6D3 40%,#CFEDF8 40%,#CFEDF8 60%,#71B4DA 60%,#71B4DA 80%,#1E5D89 80%);line-height:60px;width:80px; font-size:0px;">Gay</div>
  492.                   <!-- End Gay Flag -->
  493.                  
  494.                   <!-- Start Bisexual Flag -->
  495.                   <div data-toggle="tooltip" title="Bisexual" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#D70170,#D70170 40%,#AD358A 40%,#AD358A 60%,#432798 60%,#432798);line-height:60px;width:80px; font-size:0px;">Bi</div>
  496.                   <!-- End Bisexual Flag -->
  497.                  
  498.                   <!-- Start Transgender Flag -->
  499.                   <div data-toggle="tooltip" title="Transgender" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#9BBFE1,#9BBFE1 20%,#F5A8BA 20%,#F5A8BA 40%,#FBDCE2 40%,#FBDCE2 60%,#F5A8BA 60%,#F5A8BA 80%,#9BBFE1 80%);line-height:60px;width:80px; font-size:0px;">Trans</div>
  500.                   <!-- End Transgender Flag -->
  501.                  
  502.                   <!-- Start NB Flag -->
  503.                   <div data-toggle="tooltip" title="Non-Binary" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#E1C363,#E1C363 25%,#E1CDF2 25%,#E1CDF2 50%,#9C58D3 50%,#9C58D3 75%,#301C41 75%,#301C41);line-height:60px;width:80px; font-size:0px;">NB</div>
  504.                   <!-- End NB Flag -->
  505.                  
  506.                   <!-- Start Demi-Girl Flag -->
  507.                   <div data-toggle="tooltip" title="Demi-Girl" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#AA8C96,#AA8C96 14%,#D9BBC5 14%,#D9BBC5 28%,#FEAEC9 28%,#FEAEC9 42%,#FFE6F1 42%,#FFE6F1 56%, #FEAEC9 56%,#FEAEC9 70%, #D9BBC5 70%,#D9BBC5 84%,#AA8C96 84%);line-height:60px;width:80px; font-size:0px;">Demigirl</div>
  508.                   <!-- End Demi-Girl Flag -->
  509.                  
  510.                   <!-- Start Demi-Boy Flag -->
  511.                   <div data-toggle="tooltip" title="Demi-Boy" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#889BA2,#889BA2 14%,#B9CBD5 14%,#B9CBD5 28%,#9AD8ED 28%,#9AD8ED 42%,#E1F3FD 42%,#E1F3FD 56%, #9AD8ED 56%,#9AD8ED 70%, #B9CBD5 70%,#B9CBD5 84%,#889BA2 84%);line-height:60px;width:80px; font-size:0px;">Demiboy</div>
  512.                   <!-- End Demi-Boy Flag -->
  513.                  
  514.                   <!-- Start Fluid Flag -->
  515.                   <div data-toggle="tooltip" title="Genderfluid" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#FF74A3,#FF74A3 20%,#FFD5E1 20%,#FFD5E1 40%,#D333C7 40%,#D333C7 60%,#4E2430 60%,#4E2430 80%,#734EB5 80%);line-height:60px;width:80px; font-size:0px;">Fluid</div>
  516.                   <!-- End Fluid Flag -->
  517.                  
  518.                   <!-- Start Ace Flag -->
  519.                   <div data-toggle="tooltip" title="Asexual" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#230023,#230023 25%,#9B799A 25%,#9B799A 50%,#E1BCE1 50%,#E1BCE1 75%,#820083 75%,#820083);line-height:60px;width:80px; font-size:0px;">Ace</div>
  520.                   <!-- End Ace Flag -->
  521.                  
  522.                   <!-- Start Aromantic Flag -->
  523.                   <div data-toggle="tooltip" title="Aromantic" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#31B456,#31B456 20%,#9CCE6D 20%,#9CCE6D 40%,#E3F0D4 40%,#E3F0D4 60%,#A7B498 60%,#A7B498 80%,#323F23 80%);line-height:60px;width:80px; font-size:0px;">Aro</div>
  524.                   <!-- End Aromantic Flag -->
  525.                  
  526.                   <!-- Start Aromantic-Asexual Flag -->
  527.                   <div data-toggle="tooltip" title="Aromantic-Asexual" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#E38C01,#E38C01 20%,#EBB701 20%,#EBB701 40%,#F7DCB1 40%,#F7DCB1 60%,#89A49B 60%,#89A49B 80%,#5C513B 80%);line-height:60px;width:80px; font-size:0px;">AroAce</div>
  528.                   <!-- End Aromantic-Asexual Flag -->
  529.                  
  530.                   <!-- Start Straight Flag -->
  531.                   <div data-toggle="tooltip" title="Straight" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#2D4046,#2D4046 20%,#596C72 20%,#596C72 40%,#879AA0 40%,#879AA0 60%,#B4C7CD 60%,#B4C7CD 80%,#E1F4FA 80%);line-height:60px;width:80px; font-size:0px;">LiveLaughLove</div>
  532.                   <!-- End Straight Flag -->
  533.                  
  534.                 </div>
  535.                 <!------ END ORIENTATION/GENDER FLAGS ----->
  536.                
  537.                 <!------ START ATTRACTION TABLE ----->
  538.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Attraction Table</span><hr class="mt-1 mb-2">
  539.                
  540.                 <div class="col-12 row no-gutters p-3 mb-4">
  541.                   <div class="col-3 p-1 text-center"><p class="display-5 mb-3 text-center"><b>People</b></p><hr class="mt-1 mb-2">
  542.                     <div class="p-3 mb-2">Men</div>
  543.                     <div class="p-3 mb-2">Women</div>
  544.                     <div class="p-3 mb-2">Non-Binary</div>
  545.                     <div class="p-3 mb-2">Masculine</div>
  546.                     <div class="p-3 mb-2">Feminine</div>
  547.                     <div class="p-3 mb-2">Androgynous</div>
  548.                   </div>
  549.                   <div class="col-3 p-1 text-center"><p class="display-5 mb-3 text-center"><b>Aesthetic</b></p><hr class="mt-1 mb-2">
  550.                     <div class="p-3 mb-2"><span class="fas fa-check"></span></div>
  551.                     <div class="p-3 mb-2"><span class="fas fa-check"></span></div>
  552.                     <div class="p-3 mb-2"><span class="fas fa-check"></span></div>
  553.                     <div class="p-3 mb-2"><span class="fas fa-check"></span></div>
  554.                     <div class="p-3 mb-2"><span class="fas fa-check"></span></div>
  555.                     <div class="p-3 mb-2"><span class="fas fa-check"></span></div>
  556.                   </div>
  557.                   <div class="col-3 p-1 text-center"><p class="display-5 mb-3 text-center"><b>Romantic</b></p><hr class="mt-1 mb-2">
  558.                     <div class="p-3 mb-2"><span class="fas fa-question"></span></div>
  559.                     <div class="p-3 mb-2"><span class="fas fa-question"></span></div>
  560.                     <div class="p-3 mb-2"><span class="fas fa-question"></span></div>
  561.                     <div class="p-3 mb-2"><span class="fas fa-question"></span></div>
  562.                     <div class="p-3 mb-2"><span class="fas fa-question"></span></div>
  563.                     <div class="p-3 mb-2"><span class="fas fa-question"></span></div>
  564.                   </div>
  565.                   <div class="col-3 p-1 text-center"><p class="display-5 mb-3 text-center"><b>Sexual</b></p><hr class="mt-1 mb-2">
  566.                     <div class="p-3 mb-2"><span class="fas fa-times"></span></div>
  567.                     <div class="p-3 mb-2"><span class="fas fa-times"></span></div>
  568.                     <div class="p-3 mb-2"><span class="fas fa-times"></span></div>
  569.                     <div class="p-3 mb-2"><span class="fas fa-times"></span></div>
  570.                     <div class="p-3 mb-2"><span class="fas fa-times"></span></div>
  571.                     <div class="p-3 mb-2"><span class="fas fa-times"></span></div>
  572.                   </div>
  573.                 </div>
  574.                 <!------ END ATTRACTION TABLE ----->
  575.                
  576.                
  577.                
  578.               </div><!--End Tab Set-Up-->
  579.             </div><!-- End Tab -->
  580.             <!------------------------------- END TAB 4 -------------------------------->
  581.              
  582.             <!------------------------------- START TAB 5 -------------------------------->
  583.             <div class="tab-pane fade" id="five"><!-- Start Tab-->
  584.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  585.                
  586.                 <!------ START Q&A ----->
  587.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Favourites</span><hr class="mt-1 mb-2">
  588.                 <div class="col-12 row mb-4 p-0 text-center">
  589.                   <div class="col-12 col-lg-6">
  590.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  591.                       <p class="mr-2" style="flex-grow:0;">Snack Food</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  592.                     </div>
  593.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  594.                       <p class="mr-2" style="flex-grow:0;">Meal</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  595.                     </div>
  596.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  597.                       <p class="mr-2" style="flex-grow:0;">Cold Drink</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  598.                     </div>
  599.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  600.                       <p class="mr-2" style="flex-grow:0;">Hot Drink</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  601.                     </div>
  602.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  603.                       <p class="mr-2" style="flex-grow:0;">Animal</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  604.                     </div>
  605.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  606.                       <p class="mr-2" style="flex-grow:0;">Colour</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  607.                     </div>
  608.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  609.                       <p class="mr-2" style="flex-grow:0;">Time Of Day</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  610.                     </div>
  611.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  612.                       <p class="mr-2" style="flex-grow:0;">Season</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  613.                     </div>
  614.                   </div>
  615.                   <div class="col-12 col-lg-6">
  616.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  617.                       <p class="mr-2" style="flex-grow:0;">Holiday</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  618.                     </div>
  619.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  620.                       <p class="mr-2" style="flex-grow:0;">Sport</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  621.                     </div>
  622.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  623.                       <p class="mr-2" style="flex-grow:0;">Song</p><hr style="flex-grow:1;"><span class="ml-2"><a href="#" style="color:#C95203;">#</a></span>
  624.                     </div>
  625.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  626.                       <p class="mr-2" style="flex-grow:0;">Band</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  627.                     </div>
  628.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  629.                       <p class="mr-2" style="flex-grow:0;">Music Genre</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  630.                     </div>
  631.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  632.                       <p class="mr-2" style="flex-grow:0;">Book</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  633.                     </div>
  634.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  635.                       <p class="mr-2" style="flex-grow:0;">Film</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  636.                     </div>
  637.                     <div class="d-flex mt-2" style="flex-direction:row; align-items:center;">
  638.                       <p class="mr-2" style="flex-grow:0;">Book/Film Genre</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  639.                     </div>
  640.                   </div>
  641.                 </div>
  642.                 <!------ END Q&A ----->
  643.                
  644.                 <!------ START TEXT ----->
  645.                 <div class="col-12 row mb-4">
  646.                   <div class="col-12 col-lg-6 mb-4 text-center">
  647.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Likes</span><hr class="mt-1 mb-2">
  648.                     <p>
  649.                       #<br>
  650.                       #<br>
  651.                       #<br>
  652.                     </p>
  653.                   </div>
  654.                   <div class="col-12 col-lg-6 mb-4 text-center">
  655.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Dislikes</span><hr class="mt-1 mb-2">
  656.                     <p>
  657.                       #<br>
  658.                       #<br>
  659.                       #<br>
  660.                     </p>
  661.                   </div>
  662.                 </div>
  663.                 <!------ END TEXT ----->
  664.                
  665.                 <!------ START TEXT ----->
  666.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Pass-Times</span><hr class="mt-1 mb-2">
  667.                 <div class="col-12 row">
  668.                  
  669.                   <div class="col-12">
  670.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  671.                     <p>#</p>
  672.                     <p style="color:#532202;">-</p>
  673.                   </div>
  674.                   <div class="col-12">
  675.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  676.                     <p>#</p>
  677.                     <p style="color:#532202;">-</p>
  678.                   </div>
  679.                   <div class="col-12">
  680.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  681.                     <p>#</p>
  682.                     <p style="color:#532202;">-</p>
  683.                   </div>
  684.                  
  685.                 </div>
  686.                 <!------ END TEXT ----->
  687.                
  688.               </div><!--End Tab Set-Up-->
  689.             </div><!-- End Tab -->
  690.             <!------------------------------- END TAB 5 -------------------------------->
  691.              
  692.             <!------------------------------- START TAB 6 -------------------------------->
  693.             <div class="tab-pane fade" id="six"><!-- Start Tab-->
  694.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  695.                
  696.                 <!------ START TEXT ----->
  697.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Religious Views</span><hr class="mt-1 mb-2">
  698.                 <p>#</p>
  699.                 <p style="color:#532202;">-</p>
  700.                 <!------ END TEXT ----->
  701.                
  702.                 <!------ START TEXT ----->
  703.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Morality</span><hr class="mt-1 mb-2">
  704.                 <p>#</p>
  705.                 <p style="color:#532202;">-</p>
  706.                 <!------ END TEXT ----->
  707.                
  708.                 <!------ START Q&A ----->
  709.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Belief</span><hr class="mt-1 mb-2">
  710.                 <div class="col-12 row mb-4 p-0 text-center">
  711.                   <div class="col-12 col-lg-6">
  712.                    
  713.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Thiest (of Religion of Choice)</span><hr class="mt-1 mb-2">
  714.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  715.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  716.                     </div><p style="color:#532202;">-</p>
  717.                    
  718.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Belief In Afterlife</span><hr class="mt-1 mb-2">
  719.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  720.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  721.                     </div><p style="color:#532202;">-</p>
  722.                    
  723.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Belief In Destiny</span><hr class="mt-1 mb-2">
  724.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  725.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  726.                     </div><p style="color:#532202;">-</p>
  727.                    
  728.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Belief In Ghosts/Spirits</span><hr class="mt-1 mb-2">
  729.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  730.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  731.                     </div><p style="color:#532202;">-</p>
  732.                    
  733.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Belief In Good & Evil</span><hr class="mt-1 mb-2">
  734.                    <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  735.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  736.                     </div><p style="color:#532202;">-</p>
  737.                    
  738.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Belief In Higher Powers</span><hr class="mt-1 mb-2">
  739.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  740.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  741.                     </div><p style="color:#532202;">-</p>
  742.                    
  743.                   </div>
  744.                   <div class="col-12 col-lg-6">
  745.                    
  746.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Belief In Karma</span><hr class="mt-1 mb-2">
  747.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  748.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  749.                     </div><p style="color:#532202;">-</p>
  750.                    
  751.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Belief In Luck</span><hr class="mt-1 mb-2">
  752.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  753.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  754.                     </div><p style="color:#532202;">-</p>
  755.                    
  756.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Belief In Magic</span><hr class="mt-1 mb-2">
  757.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  758.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  759.                     </div><p style="color:#532202;">-</p>
  760.                    
  761.                     <span class="pb-3" style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Belief In Reincarnation</span><hr class="mt-1 mb-2">
  762.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  763.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  764.                     </div><p style="color:#532202;">-</p>
  765.                    
  766.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Belief In Soulmates</span><hr class="mt-1 mb-2">
  767.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  768.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  769.                     </div><p style="color:#532202;">-</p>
  770.                    
  771.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Belief In Superstition</span><hr class="mt-1 mb-2">
  772.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  773.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  774.                     </div><p style="color:#532202;">-</p>
  775.                    
  776.                   </div>
  777.                 </div>
  778.                
  779.               </div><!--End Tab Set-Up-->
  780.             </div><!-- End Tab -->
  781.             <!------------------------------- END TAB 6 -------------------------------->
  782.              
  783.             <!------------------------------- START TAB 7 -------------------------------->
  784.             <div class="tab-pane fade" id="seven"><!-- Start Tab-->
  785.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  786.                
  787.                 <!------ START TEXT ----->
  788.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Story-Name</span><hr class="mt-1 mb-2">
  789.                 <p>#</p>
  790.                 <p style="color:#532202;">-</p>
  791.                 <!------ END TEXT ----->
  792.                
  793.               </div><!--End Tab Set-Up-->
  794.             </div><!-- End Tab -->
  795.             <!------------------------------- END TAB 7 -------------------------------->
  796.              
  797.             <!------------------------------- START TAB 8 -------------------------------->
  798.             <div class="tab-pane fade" id="eight"><!-- Start Tab-->
  799.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  800.                
  801.                 <!------ START TEXT ----->
  802.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Early Childhood</span><hr class="mt-1 mb-2">
  803.                 <p>#</p>
  804.                 <p style="color:#532202;">-</p>
  805.                 <!------ END TEXT ----->
  806.                
  807.                 <!------ START TEXT ----->
  808.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Childhood</span><hr class="mt-1 mb-2">
  809.                 <p>#</p>
  810.                 <p style="color:#532202;">-</p>
  811.                 <!------ END TEXT ----->
  812.                
  813.                 <!------ START TEXT ----->
  814.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Teenagehood</span><hr class="mt-1 mb-2">
  815.                 <p>#</p>
  816.                 <p style="color:#532202;">-</p>
  817.                 <!------ END TEXT ----->
  818.                
  819.                 <!------ START TEXT ----->
  820.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Adulthood</span><hr class="mt-1 mb-2">
  821.                 <p>#</p>
  822.                 <p style="color:#532202;">-</p>
  823.                 <!------ END TEXT ----->
  824.                
  825.               </div><!--End Tab Set-Up-->
  826.             </div><!-- End Tab -->
  827.             <!------------------------------- END TAB 8 -------------------------------->
  828.              
  829.             <!------------------------------- START TAB 9 -------------------------------->
  830.             <div class="tab-pane fade" id="nine"><!-- Start Tab-->
  831.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  832.                
  833.                 <!------ START TEXT ----->
  834.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Overall Vibe</span><hr class="mt-1 mb-2">
  835.                 <p>#</p>
  836.                 <p style="color:#532202;">-</p>
  837.                 <!------ END TEXT ----->
  838.                
  839.                 <!------ START SPLIT-SECTION ----->
  840.                 <span class="ml-2" style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Idiolect</span><hr class="mt-1 mb-2">
  841.                 <div class="col-12 row pb-2">
  842.                   <div class="col-12 col-lg-6 pb-3">
  843.                     <p>#</p>
  844.                   </div>
  845.                   <div class="col-12 col-lg-6 pb-3 text-right">
  846.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Specific Words / Phrases</span><hr class="mt-1 mb-2">
  847.                     <p>#</p>
  848.                     <p>#</p>
  849.                     <p>#</p>
  850.                   </div>
  851.                   <div class="col-12 col-lg-6 pb-3">
  852.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Laugh</span><hr class="mt-1 mb-2">
  853.                     <p>#</p>
  854.                   </div>
  855.                   <div class="col-12 col-lg-6 pb-3 text-right">
  856.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Cry</span><hr class="mt-1 mb-2">
  857.                     <p>#</p>
  858.                   </div>
  859.                   <div class="col-12 col-lg-6 pb-3">
  860.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Posture & Walk</span><hr class="mt-1 mb-2">
  861.                    <p>#</p>
  862.                  </div>
  863.                  <div class="col-12 col-lg-6 pb-3 text-right">
  864.                    <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Habits</span><hr class="mt-1 mb-2">
  865.                     <p>#</p>
  866.                     <p>#</p>
  867.                     <p>#</p>
  868.                   </div>
  869.                 </div>
  870.                 <!------ END SPLIT-SECTION ----->
  871.                
  872.               </div><!--End Tab Set-Up-->
  873.             </div><!-- End Tab -->
  874.             <!------------------------------- END TAB 9 -------------------------------->
  875.            
  876.             <!------------------------------- START TAB 10 -------------------------------->
  877.             <div class="tab-pane fade" id="ten"><!-- Start Tab-->
  878.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  879.                
  880.                 <!------ START Q&A ----->
  881.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Stats</span><hr class="mt-1 mb-2">
  882.                 <div class="col-12 row mb-4 p-0 text-center">
  883.                   <div class="col-12 col-lg-6">
  884.                    
  885.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Book-Smarts</span><hr class="mt-1 mb-2">
  886.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  887.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  888.                     </div><p style="color:#532202;">-</p>
  889.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Street-Smarts</span><hr class="mt-1 mb-2">
  890.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  891.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  892.                     </div><p style="color:#532202;">-</p>
  893.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Charisma</span><hr class="mt-1 mb-2">
  894.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  895.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  896.                     </div><p style="color:#532202;">-</p>
  897.                    
  898.                   </div>
  899.                   <div class="col-12 col-lg-6">
  900.                    
  901.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Strength</span><hr class="mt-1 mb-2">
  902.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  903.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  904.                     </div><p style="color:#532202;">-</p>
  905.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Stamina</span><hr class="mt-1 mb-2">
  906.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  907.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  908.                     </div><p style="color:#532202;">-</p>
  909.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Speed</span><hr class="mt-1 mb-2">
  910.                     <div class="progress" style="background-color:#532202; border:#000000 4px solid; border-radius:0px;">
  911.                       <div class="progress-bar" style="width:50%; color:#FFFFFF; background-color:#C95203; border:none; border-radius:0px;">50%<br></div>
  912.                     </div><p style="color:#532202;">-</p>
  913.                    
  914.                   </div>
  915.                 </div>
  916.                 <!------ END Q&A ----->
  917.                
  918.                 <!------ START TEXT ----->
  919.                 <span class="pt-3" style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Overview</span><hr class="mt-1 mb-2">
  920.                 <p>#</p>
  921.                 <p style="color:#532202;">-</p>
  922.                 <!------ END TEXT ----->
  923.                
  924.                 <!------ START TEXT ----->
  925.                 <div class="col-12 row mb-4">
  926.                   <div class="col-12 col-lg-6 mb-4 text-left">
  927.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Strengths/Skills</span><hr class="mt-1 mb-2">
  928.                    
  929.                     <div class="col-12 row">
  930.                       <div class="col-12 text-left">
  931.                         <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  932.                         <p>#</p>
  933.                         <p style="color:#532202;">-</p>
  934.                       </div>
  935.                       <div class="col-12 text-left">
  936.                         <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  937.                         <p>#</p>
  938.                         <p style="color:#532202;">-</p>
  939.                       </div>
  940.                       <div class="col-12 text-left">
  941.                         <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  942.                         <p>#</p>
  943.                         <p style="color:#532202;">-</p>
  944.                       </div>
  945.                     </div>
  946.                    
  947.                   </div>
  948.                   <div class="col-12 col-lg-6 mb-4 text-right">
  949.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Weaknesses</span><hr class="mt-1 mb-2">
  950.                    
  951.                     <div class="col-12 row">
  952.                       <div class="col-12 text-right">
  953.                         <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  954.                         <p>#</p>
  955.                         <p style="color:#532202;">-</p>
  956.                       </div>
  957.                       <div class="col-12 text-right">
  958.                         <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  959.                         <p>#</p>
  960.                         <p style="color:#532202;">-</p>
  961.                       </div>
  962.                       <div class="col-12 text-right">
  963.                         <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  964.                         <p>#</p>
  965.                         <p style="color:#532202;">-</p>
  966.                       </div>
  967.                     </div>
  968.                    
  969.                   </div>
  970.                 </div>
  971.                 <!------ END TEXT ----->
  972.                
  973.                 <!------ START TEXT ----->
  974.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Past Education / Employment</span><hr class="mt-1 mb-2">
  975.                 <ul class="pb-3">
  976.                   <li>#</li>
  977.                   <li>#</li>
  978.                   <li>#</li>
  979.                 </ul>
  980.                 <!------ END TEXT ----->
  981.                
  982.               </div><!--End Tab Set-Up-->
  983.             </div><!-- End Tab -->
  984.             <!------------------------------- END TAB 10 -------------------------------->
  985.            
  986.             <!------------------------------- START TAB 11 -------------------------------->
  987.             <div class="tab-pane fade" id="eleven"><!-- Start Tab-->
  988.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  989.                
  990.                 <!------ START TRIVIA ----->
  991.                 <div class="col-12 row mb-2 pb-3 p-0 text-center">
  992.                   <div class="col-12 col-lg-6">
  993.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  994.                       <p class="mr-2" style="flex-grow:0;">Species</p><hr style="flex-grow:1;"><span class="ml-2"><a href="#" style="color:#C95203;">#</a></span>
  995.                     </div>
  996.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  997.                       <p class="mr-2" style="flex-grow:0;">Age</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  998.                     </div>
  999.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  1000.                       <p class="mr-2" style="flex-grow:0;">Blood-Type</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  1001.                     </div>
  1002.                   </div>
  1003.                   <div class="col-12 col-lg-6">
  1004.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  1005.                       <p class="mr-2" style="flex-grow:0;">Body-Type</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  1006.                     </div>
  1007.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  1008.                       <p class="mr-2" style="flex-grow:0;">Height</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  1009.                     </div>
  1010.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  1011.                       <p class="mr-2" style="flex-grow:0;">Weight</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  1012.                     </div>
  1013.                   </div>
  1014.                 </div>
  1015.                 <!------ END TRIVIA ----->
  1016.                
  1017.                 <!------ START TEXT ----->
  1018.                 <div class="col-12 row mb-4">
  1019.                   <div class="col-12 col-lg-6 mb-4 text-center">
  1020.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Diagnosed Conditions</span><hr class="mt-1 mb-2">
  1021.                     <p>
  1022.                       #<br>
  1023.                       #<br>
  1024.                       #<br>
  1025.                     </p>
  1026.                   </div>
  1027.                   <div class="col-12 col-lg-6 mb-4 text-center">
  1028.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Suspected Conditions</span><hr class="mt-1 mb-2">
  1029.                     <p>
  1030.                       #<br>
  1031.                       #<br>
  1032.                       #<br>
  1033.                     </p>
  1034.                   </div>
  1035.                 </div>
  1036.                 <!------ END TEXT ----->
  1037.                
  1038.                 <!------ START TEXT ----->
  1039.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Notable Medical Events</span><hr class="mt-1 mb-2">
  1040.                 <ul class="pb-3">
  1041.                   <li>#</li>
  1042.                 </ul>
  1043.                 <!------ END TEXT ----->
  1044.                
  1045.               </div><!--End Tab Set-Up-->
  1046.             </div><!-- End Tab -->
  1047.             <!------------------------------- END TAB 11 -------------------------------->
  1048.            
  1049.             <!------------------------------- START TAB 12 -------------------------------->
  1050.             <div class="tab-pane fade" id="twelve"><!-- Start Tab-->
  1051.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  1052.                
  1053.                 <!-- START MATEY -->
  1054.                 <div class="row">
  1055.                   <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
  1056.                     <a href="#" style="font-size:1.2rem; color:#C95203">#</a>
  1057.                     <span class="pull-right" style="font-size:1.2rem; color:#C95203">#</span><hr class="mt-0 mb-2">
  1058.                     <p>#</p>
  1059.                     <p>-</p>
  1060.                     <p>#</p>
  1061.                     <p style="color:#532202;">-</p>
  1062.                   </div>
  1063.                   <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
  1064.                     <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  1065.                       <a data-toggle="tooltip" href="#"><img src="#"></a>
  1066.                     </div>
  1067.                   </div>
  1068.                 </div>
  1069.                 <!-- END MATEY -->
  1070.                
  1071.                 <!-- START MATEY -->
  1072.                 <div class="row">
  1073.                   <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
  1074.                     <a href="#" style="font-size:1.2rem; color:#C95203">#</a>
  1075.                     <span class="pull-right" style="font-size:1.2rem; color:#C95203">#</span><hr class="mt-0 mb-2">
  1076.                     <p>#</p>
  1077.                     <p>-</p>
  1078.                     <p>#</p>
  1079.                     <p style="color:#532202;">-</p>
  1080.                   </div>
  1081.                   <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
  1082.                     <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  1083.                       <a data-toggle="tooltip" href="#"><img src="#"></a>
  1084.                     </div>
  1085.                   </div>
  1086.                 </div>
  1087.                 <!-- END MATEY -->
  1088.                
  1089.                 <!-- START MATEY -->
  1090.                 <div class="row">
  1091.                   <div class="col-12 col-sm-9 col-md-8 col-xl-9 order-2 order-sm-1">
  1092.                     <a href="#" style="font-size:1.2rem; color:#C95203">#</a>
  1093.                     <span class="pull-right" style="font-size:1.2rem; color:#C95203">#</span><hr class="mt-0 mb-2">
  1094.                     <p>#</p>
  1095.                     <p>-</p>
  1096.                     <p>#</p>
  1097.                     <p style="color:#532202;">-</p>
  1098.                   </div>
  1099.                   <div class="col-12 col-sm-3 col-md-4 col-xl-3 mb-2 mb-sm-0 order-1 order-sm-2">
  1100.                     <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  1101.                       <a data-toggle="tooltip" href="#"><img src="#"></a>
  1102.                     </div>
  1103.                   </div>
  1104.                 </div>
  1105.                 <!-- END MATEY -->
  1106.                
  1107.               </div><!--End Tab Set-Up-->
  1108.             </div><!-- End Tab -->
  1109.             <!------------------------------- END TAB 12 -------------------------------->
  1110.            
  1111.             <!------------------------------- START TAB 13 -------------------------------->
  1112.             <div class="tab-pane fade" id="thirteen"><!-- Start Tab-->
  1113.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  1114.                
  1115.                 <!------ START TRIVIA ----->
  1116.                 <div class="col-12 row mb-2 pb-3 p-0 text-center">
  1117.                   <div class="col-12 col-lg-6">
  1118.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  1119.                       <p class="mr-2" style="flex-grow:0;">Created By</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  1120.                     </div>
  1121.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  1122.                       <p class="mr-2" style="flex-grow:0;">Designed By</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  1123.                     </div>
  1124.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  1125.                       <p class="mr-2" style="flex-grow:0;">Assosciated Lore By</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  1126.                     </div>
  1127.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  1128.                       <p class="mr-2" style="flex-grow:0;">Character Arc By</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  1129.                     </div>
  1130.                   </div>
  1131.                   <div class="col-12 col-lg-6">
  1132.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  1133.                       <p class="mr-2" style="flex-grow:0;">Created At</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  1134.                     </div>
  1135.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  1136.                       <p class="mr-2" style="flex-grow:0;">Forename Meaning</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  1137.                     </div>
  1138.                     <div class="d-flex" style="flex-direction:row; align-items:center;">
  1139.                       <p class="mr-2" style="flex-grow:0;">Surename Meaning</p><hr style="flex-grow:1;"><span class="ml-2">#</span>
  1140.                     </div>
  1141.                   </div>
  1142.                 </div>
  1143.                 <!------ END TRIVIA ----->
  1144.                
  1145.                 <!------ START TEXT ----->
  1146.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Canon Trivia</span><hr class="mt-1 mb-2">
  1147.                 <ul class="pb-3">
  1148.                   <li>#</li>
  1149.                 </ul>
  1150.                 <!------ END TEXT ----->
  1151.                
  1152.                 <!------ START TEXT ----->
  1153.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">"Word-Of-God" Trivia</span><hr class="mt-1 mb-2">
  1154.                 <ul class="pb-3">
  1155.                   <li>#</li>
  1156.                 </ul>
  1157.                 <!------ END TEXT ----->
  1158.                
  1159.                 <!------ START TEXT ----->
  1160.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Developmental Trivia</span><hr class="mt-1 mb-2">
  1161.                 <ul class="pb-3">
  1162.                   <li>#</li>
  1163.                 </ul>
  1164.                 <!------ END TEXT ----->
  1165.                
  1166.                 <!------ START TEXT ----->
  1167.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Retcons/Mistakes</span><hr class="mt-1 mb-2">
  1168.                 <ul class="pb-3">
  1169.                   <li>#</li>
  1170.                 </ul>
  1171.                 <!------ END TEXT ----->
  1172.                
  1173.               </div><!--End Tab Set-Up-->
  1174.             </div><!-- End Tab -->
  1175.             <!------------------------------- END TAB 13 -------------------------------->
  1176.            
  1177.             <!------------------------------- START TAB 14 -------------------------------->
  1178.             <div class="tab-pane fade" id="fourteen"><!-- Start Tab-->
  1179.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  1180.                
  1181.                 <!------ START AWARDS ----->
  1182.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Awards Cabinet</span><hr class="mt-1 mb-2">
  1183.                 <div class="col-12">
  1184.                   <div class="row p-3" style="text-align:center;">
  1185.                    
  1186.                     <!-- Award -->
  1187.                     <div class="tooltipster px-3 pb-3" title="【 # 】"><a href="#">
  1188.                     <img src="#" class="tooltipster" width="50" height="50" data-placement="bottom" title="#"></a></div>
  1189.                     <!-- Award -->
  1190.                    
  1191.                   </div>
  1192.                 </div>
  1193.                 <!------ END AWARDS ----->
  1194.                
  1195.                 <!------ START HEADCANONS TABLE ----->
  1196.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Headcanons</span><hr class="mt-1 mb-2">
  1197.                
  1198.                 <div class="col-12 row no-gutters p-3 mb-4">
  1199.                  
  1200.                   <div class="col-12 p-3 mb-3 row" style="background-color:#313338;">
  1201.                     <div class="col-1 p-0 radius-0"><a href="#"><img src="#"></a></div>
  1202.                     <div class="col-10 pl-3 text-left" style="font-size:1rem;">
  1203.                       <p><b>#</b><br>#</p>
  1204.                     </div>
  1205.                     <div class="col-1 text-center"><p>Canon</p></div>
  1206.                   </div>
  1207.                  
  1208.                   <div class="col-12 p-3 mb-3 row" style="background-color:#313338;">
  1209.                     <div class="col-1 p-0 radius-0"><a href="#"><img src="#"></a></div>
  1210.                     <div class="col-10 pl-3 text-left" style="font-size:1rem;">
  1211.                       <p><b>#</b><br>#</p>
  1212.                     </div>
  1213.                     <div class="col-1"><p>Canon</p></div>
  1214.                   </div>
  1215.                  
  1216.                 </div>
  1217.                 <!------ END HEADCANONS TABLE ----->
  1218.                
  1219.                 <!------ START MOODBOARD TABLE ----->
  1220.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Moodboard</span><hr class="mt-1 mb-2">
  1221.                
  1222.                 <!---- START MOODBOARD IMAGES ---->
  1223.                 <div class="col-12 row mx-auto p-0" style="border:#000000 4px solid; height:758px; width:758px;">
  1224.                   <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="#" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  1225.                   <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="#" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  1226.                   <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="#" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  1227.                   <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="#" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  1228.                   <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="#" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  1229.                   <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="#" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  1230.                   <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="#" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  1231.                   <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="#" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  1232.                   <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="#" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  1233.                 </div>
  1234.                 <!---- END MOODBOARD IMAGES ---->
  1235.                
  1236.                 <!--- START MOODBOARD CREDITS -->
  1237.                 <div class="col-12 my-3 py-2 text-center" style="font-size:1.2rem; background-color:#C95203; border:#000000 4px solid;">
  1238.                   <a href="#" data-toggle="tooltip" title="Moodboard Image 1 Source"><span style="color:#FFFFFF;"><i class="fas fa-flame fa-flip-horizontal"></i></span></a>
  1239.                   <a href="#" data-toggle="tooltip" title="Moodboard Image 2 Source"><span style="color:#FFFFFF;"><i class="fas fa-flame fa-flip-horizontal"></i></span></a>
  1240.                   <a href="#" data-toggle="tooltip" title="Moodboard Image 3 Source"><span style="color:#FFFFFF;"><i class="fas fa-flame fa-flip-horizontal"></i></span></a>
  1241.                   <a href="#" data-toggle="tooltip" title="Moodboard Image 4 Source"><span style="color:#FFFFFF;"><i class="fas fa-flame fa-flip-horizontal"></i></span></a>
  1242.                   <a href="#" data-toggle="tooltip" title="Moodboard Image 5 Source"><span style="color:#FFFFFF;"><i class="fas fa-sun fa-flip-horizontal"></i></span></a>
  1243.                   <a href="#" data-toggle="tooltip" title="Moodboard Image 6 Source"><span style="color:#FFFFFF;"><i class="fas fa-flame"></i></span></a>
  1244.                   <a href="#" data-toggle="tooltip" title="Moodboard Image 7 Source"><span style="color:#FFFFFF;"><i class="fas fa-flame"></i></span></a>
  1245.                   <a href="#" data-toggle="tooltip" title="Moodboard Image 8 Source"><span style="color:#FFFFFF;"><i class="fas fa-flame"></i></span></a>
  1246.                   <a href="#" data-toggle="tooltip" title="Moodboard Image 9 Source"><span style="color:#FFFFFF;"><i class="fas fa-flame"></i></span></a>
  1247.                 </div>
  1248.                 <!--- END MOODBOARD CREDITS -->
  1249.                
  1250.                 <!------ END MOODBOARD TABLE ----->
  1251.                
  1252.                 <!------ START TEXT WITH IMAGES ----->
  1253.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Kin-List</span><hr class="mt-1 mb-2">
  1254.                 <div class="col-12 row pb-3">
  1255.                  
  1256.                   <div class="col-12 col-lg-2">
  1257.                     <img src="#" style="height:100px; width:100px;">
  1258.                   </div>
  1259.                   <div class="col-12 col-lg-10">
  1260.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  1261.                     <p>#</p>
  1262.                     <p style="color:#532202;">-</p>
  1263.                   </div>
  1264.                   <div class="col-12 col-lg-2">
  1265.                     <img src="#" style="height:100px; width:100px;">
  1266.                   </div>
  1267.                   <div class="col-12 col-lg-10">
  1268.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  1269.                     <p>#</p>
  1270.                     <p style="color:#532202;">-</p>
  1271.                   </div>
  1272.                   <div class="col-12 col-lg-2">
  1273.                     <img src="#" style="height:100px; width:100px;">
  1274.                   </div>
  1275.                   <div class="col-12 col-lg-10">
  1276.                     <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  1277.                     <p>#</p>
  1278.                     <p style="color:#532202;">-</p>
  1279.                   </div>
  1280.                  
  1281.                 </div>
  1282.                 <!------ END TEXT WITH IMAGES ----->
  1283.                
  1284.                
  1285.                 <!------ START INTERVIEW ----->
  1286.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">Interview</span><hr class="mt-1 mb-2">
  1287.                 <h3><i>#</i></h3>
  1288.                 <p>#</p>
  1289.                 <p style="color:#532202;">-</p>
  1290.                 <h3><i>#</i></h3>
  1291.                 <p>#</p>
  1292.                 <p style="color:#532202;">-</p>
  1293.                 <h3><i>#</i></h3>
  1294.                 <p>#</p>
  1295.                 <p style="color:#532202;">-</p>
  1296.                 <!------ END INTERVIEW ----->
  1297.                
  1298.               </div><!--End Tab Set-Up-->
  1299.             </div><!-- End Tab -->
  1300.             <!------------------------------- END TAB 14 -------------------------------->
  1301.            
  1302.             <!------------------------------- START TAB 15 -------------------------------->
  1303.             <div class="tab-pane fade" id="fifteen"><!-- Start Tab-->
  1304.               <div class="card-body p-3 table-responsive" style="height:680px;"><!--Start Tab Set-Up-->
  1305.                
  1306.                 <!------ START TEXT ----->
  1307.                 <span style="color:#C95203; font-family:'comic sans ms'; font-size:1.4rem;">#</span><hr class="mt-1 mb-2">
  1308.                 <p class="pb-3">#</p>
  1309.                 <!------ END TEXT ----->
  1310.                
  1311.               </div><!--End Tab Set-Up-->
  1312.             </div><!-- End Tab -->
  1313.             <!------------------------------- END TAB 15 -------------------------------->
  1314.            
  1315.           </div>
  1316.         </div>
  1317.         <!------------------------------- END INFO -------------------------------->
  1318.        
  1319.       </div>
  1320.       <!------------------------------- END MIDDLE SECTION -------------------------------->
  1321.      
  1322.       <!------------------------------- START GALLERY-BUTTON -------------------------------->
  1323.       <div class="col-12 py-3 text-center" style="background-color:#C95203; border-top:none; border-left:#000000 8px solid; border-right:#000000 8px solid; border-bottom:#000000 8px solid;">
  1324.         <a href="#" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-flame fa-flip-horizontal"></i> GALLERY <i class="fas fa-flame"></i></li>
  1325.       </div>
  1326.       <!------------------------------- END GALLERY-BUTTON -------------------------------->
  1327.      
  1328.       <!------------------------------- START CREDITS LIST -------------------------------->
  1329.       <div class="col-12 py-2 text-center" style="font-size:1.2rem; background-color:#C95203; border-top:none; border-left:#000000 8px solid; border-right:#000000 8px solid; border-bottom:#000000 8px solid;">
  1330.        
  1331.         <a href="#" data-toggle="tooltip" title="Header Image Source"><span style="color:#FFFFFF;"><i class="fas fa-flame fa-flip-horizontal"></i></span></a>
  1332.         <a href="https://toyhou.se/16006417.overlay" data-toggle="tooltip" title="Header Code Frankensteined From: CuckooHoopoe"><span style="color:#FFFFFF;"><i class="fas fa-flame fa-flip-horizontal"></i></span></a>
  1333.         <a href="https://toyhou.se/20666403.solar-quest4longestcode" data-toggle="tooltip" title="Code By: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-sun"></i></span></a>
  1334.         <a href="https://toyhou.se/16962387.html-pride-flags" data-toggle="tooltip" title="Pride Flags Frankensteined From: VynxCodes"><span style="color:#FFFFFF;"><i class="fas fa-flame"></i></span></a>
  1335.         <a href="https://toyhou.se/15560571.ribbon-repository-upd8-2-14-" data-toggle="tooltip" title="Ribbon Awards From: RadioStorage"><span style="color:#FFFFFF;"><i class="fas fa-flame"></i></span></a>
  1336.        
  1337.       </div>
  1338.       <!------------------------------- END CREDITS LIST -------------------------------->
  1339.      
  1340.      
  1341.     </div>
  1342.   </div>
  1343.   <!------------------------------- END ACTUAL CODE -------------------------------->
  1344.  
  1345. </div> <!-- End Background -->
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!