API tools faq
paste
icecreampizzer

TH CODE 16 || TIME MACHINE (Custom Colors)

icecreampizzer
Jun 26th, 2021 (edited)
2,768
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 47.70 KB | None | 0 0
raw download clone embed print report
  1. <!-- 16 || TIME MACHINE by icecreampizzeria (CUSTOM)
  2.    BOOTSTRAP VERSION: https://pastebin.com/qBXcdSQG
  3.    RULES:
  4.        - Don't remove my credit please!
  5.        - Feel free to modify/frankenstein as much as you want!
  6.        - Don't redistribute my codes please!
  7.    
  8.    COLOR GUIDE:
  9.        #FEB206 - accent
  10.        text-white - button links
  11.    
  12.    find (ctrl + f) URLHERE for links, IMGHERE for image addresses
  13.    
  14. -->
  15.  
  16. <!-- //////////////////// WHOLE THING //////////////////// -->
  17. <div class="container p-0" style="max-width:1000px;">
  18.    
  19.     <!-- //////////////////// HEADER ROW //////////////////// -->
  20.     <div class="row no-gutters justify-content-center mb-lg-n5">
  21.        
  22.         <!-- //////////////////// FILLER //////////////////// -->
  23.         <div class="col-lg-7 hidden-md-down"></div>
  24.        
  25.         <!-- //////////////////// TITLE AND SUBTITLE //////////////////// -->
  26.         <div class="col-lg-4 col p-3 text-lg-left text-center">
  27.             <p class="display-2 mb-0" style="font-family: MS Gothic;">
  28.                 <span style="color: #FEB206;">N</span>AME
  29.                 <span style="color: #FEB206;">H</span>ERE</p>
  30.                
  31.             <p class="display-4" style="font-size: 1rem; font-family: MS Gothic;">subtitle</p>
  32.         </div>
  33.         <!-- //////////////////// END TITLE AND SUBTITLE //////////////////// -->
  34.        
  35.     </div>
  36.     <!-- //////////////////// END HEADER ROW //////////////////// -->
  37.    
  38.    
  39.     <!-- //////////////////// CONTENT ROW //////////////////// -->
  40.     <div class="row no-gutters justify-content-center">
  41.        
  42.        
  43.         <!-- //////////////////// CENTER COLUMN (FOCAL IMAGE) //////////////////// -->
  44.         <div class="col-lg-3 push-lg-4">
  45.             <div class="card h-100 border-0" style="
  46.                background: url(IMGHERE) center;
  47.                background-size: cover;
  48.                background-repeat: no-repeat;
  49.                border-radius: 20px 0px;
  50.                min-height: 350px;
  51.                box-shadow: 0 0 0 4px #FEB206;">
  52.                
  53.                 <!-- //////////////////// INNER BORDER //////////////////// -->
  54.                 <div class="flex-fill" style="color: #FEB206; border: 10px double; border-radius: 19px 0px;"></div>
  55.                
  56.             </div>
  57.         </div>
  58.         <!-- //////////////////// END CENTER COLUMN //////////////////// -->
  59.        
  60.        
  61.         <!-- //////////////////// LEFT COLUMN (ABOUT, BIO, RELATIONS) //////////////////// -->
  62.         <div class="col-lg-4 card bg-transparent border-0 pull-lg-3 mt-3">
  63.            
  64.             <!-- //////////////////// NAVIGATION //////////////////// -->
  65.             <ul class="nav ml-auto px-2" style="z-index: 99; margin-bottom: -25px">
  66.                
  67.                 <!-- //////////////////// RELATIONS BUTTON //////////////////// -->
  68.                 <li class="nav-item d-flex" style="
  69.                    background: #FEB206;
  70.                    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  71.                    width: 60px;
  72.                    height: 50px;">
  73.                    
  74.                     <a href="#link" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100" data-toggle="tab">
  75.                         <i class="m-auto fal fa-link fa-lg"></i>
  76.                     </a>
  77.                 </li>
  78.                 <!-- //////////////////// END RELATIONS BUTTON //////////////////// -->
  79.                
  80.                 <!-- //////////////////// BIO BUTTON //////////////////// -->
  81.                 <li class="nav-item bg-faded d-flex" style="
  82.                    background: #FEB206;
  83.                    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  84.                    width: 60px;
  85.                    height: 50px;">
  86.                     <a href="#bio" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100" data-toggle="tab">
  87.                         <i class="m-auto fal fa-book fa-lg"></i>
  88.                     </a>
  89.                 </li>
  90.                 <!-- //////////////////// END BIO BUTTON //////////////////// -->
  91.                
  92.                 <!-- //////////////////// ABOUT BUTTON //////////////////// -->
  93.                 <li class="nav-item bg-faded d-flex" style="
  94.                    background: #FEB206;
  95.                    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  96.                    width: 60px;
  97.                    height: 50px;">
  98.                     <a href="#abt" class="nav-link active btn btn-outline-primary text-white d-flex border-0 w-100" data-toggle="tab">
  99.                        
  100.                         <i class="m-auto fal fa-user fa-lg"></i>
  101.                     </a>
  102.                 </li>
  103.                 <!-- //////////////////// END ABOUT BUTTON //////////////////// -->
  104.                
  105.             </ul>
  106.             <!-- //////////////////// END NAVIGATION //////////////////// -->
  107.            
  108.            
  109.             <!-- //////////////////// TAB CONTENT //////////////////// -->
  110.             <div class="bg-faded p-3 mb-lg-5 mb-2" style="
  111.                clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 10%);
  112.                border-bottom: 7px #FEB206 double;">
  113.                
  114.                 <!-- //////////////////// COLORED HEADER //////////////////// -->
  115.                 <div class="mt-n3 mx-n3" style="border-bottom: 7px #FEB206 double"><div class="py-3" style="background: #FEB206;"></div></div>
  116.                
  117.                 <div class="tab-content">
  118.                    
  119.                     <!-- //////////////////// ABOUT CONTENT //////////////////// -->
  120.                     <div id="abt" class="tab-pane fade show active">
  121.                        
  122.                         <!-- //////////////////// HEADER //////////////////// -->
  123.                         <div class="display-4 d-flex justify-content-between my-3">
  124.                            
  125.                             <i class="fal fa-user fa-sm my-auto" style="color: #FEB206;"></i>
  126.                             <hr class="flex-fill mt-auto mb-1 mx-2" style="background: #FEB206; height: 1px;">
  127.                             <p class="text-right" style="font-family: MS Gothic">
  128.                                 <span style="color: #FEB206;">A</span>BOUT
  129.                             </p>
  130.                            
  131.                         </div>
  132.                         <!-- //////////////////// END HEADER //////////////////// -->
  133.                        
  134.                         <div class="pr-3" style="height: 200px; overflow: auto;">
  135.                            
  136.                             <!-- //////////////////// BASICS //////////////////// -->
  137.                             <div class="row no-gutters">
  138.                                 <div class="col-lg-4 col-5 my-auto text-right" style="color: #FEB206;">NAME</div>
  139.                                 <div class="m-auto text-center" style="color: #FEB206;"><i class="fas fa-user fa-sm"></i></div>
  140.                                 <div class="col-lg-6 col-5 my-auto text-left">
  141.                                     content
  142.                                 </div>
  143.                                
  144.                                 <div class="col-lg-4 col-5 my-auto text-right" style="color: #FEB206;">ALIAS</div>
  145.                                 <div class="m-auto text-center" style="color: #FEB206;"><i class="fas fa-comment-alt fa-sm"></i></div>
  146.                                 <div class="col-lg-6 col-5 my-auto text-left">
  147.                                     content
  148.                                 </div>
  149.                                
  150.                                 <div class="col-lg-4 col-5 my-auto text-right" style="color: #FEB206;">AGE</div>
  151.                                 <div class="m-auto text-center" style="color: #FEB206;"><i class="fas fa-clock fa-sm"></i></div>
  152.                                 <div class="col-lg-6 col-5 my-auto text-left">
  153.                                     content
  154.                                 </div>
  155.                                
  156.                                 <div class="col-lg-4 col-5 my-auto text-right" style="color: #FEB206;">SPECIES</div>
  157.                                 <div class="m-auto text-center" style="color: #FEB206;"><i class="fas fa-dna fa-sm"></i></div>
  158.                                 <div class="col-lg-6 col-5 my-auto text-left">
  159.                                     content
  160.                                 </div>
  161.                                
  162.                                 <div class="col-lg-4 col-5 my-auto text-right" style="color: #FEB206;">GENDER</div>
  163.                                 <div class="m-auto text-center" style="color: #FEB206;"><i class="fas fa-transgender fa-sm"></i></div>
  164.                                 <div class="col-lg-6 col-5 my-auto text-left">
  165.                                     content (prns)
  166.                                 </div>
  167.                                
  168.                                 <div class="col-lg-4 col-5 my-auto text-right" style="color: #FEB206;">ORIENTATION</div>
  169.                                 <div class="m-auto text-center" style="color: #FEB206;"><i class="fas fa-heart fa-sm"></i></div>
  170.                                 <div class="col-lg-6 col-5 my-auto text-left">
  171.                                     content
  172.                                 </div>
  173.                                
  174.                                 <div class="col-lg-4 col-5 my-auto text-right" style="color: #FEB206;">OCCUPATION</div>
  175.                                 <div class="m-auto text-center" style="color: #FEB206;"><i class="fas fa-suitcase fa-sm"></i></div>
  176.                                 <div class="col-lg-6 col-5 my-auto text-left">
  177.                                     content
  178.                                 </div>
  179.                             </div>
  180.                             <!-- //////////////////// END BASICS //////////////////// -->
  181.                            
  182.                             <hr class="w-100" style="background: #FEB206; height: 1px;">
  183.                            
  184.                             <p>Introduce your character here! You can also describe their personality. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a pellentesque arcu. Suspendisse nec mi convallis, mollis ex ac, fringilla diam. In tincidunt neque a ex congue, vel finibus dolor suscipit. Morbi nunc lorem, ultrices vitae iaculis a, molestie ac felis. Mauris hendrerit eros quis cursus fermentum. Praesent metus velit, auctor vel est quis, posuere tempus nunc.</p>
  185.                            
  186.                             <p>Fusce porta non lacus a suscipit. Nulla mi lacus, dictum eu arcu a, suscipit auctor nisi. Phasellus ultricies nunc purus, quis fermentum justo feugiat et. Curabitur gravida magna ut odio interdum, ac placerat diam aliquet. Integer pretium nibh a lectus lacinia, in fringilla nisi malesuada. Maecenas egestas sem est, vitae ultrices nunc blandit et.</p>
  187.                            
  188.                            
  189.                             <!-- //////////////////// ADD MORE PARAGRAPHS ABOVE THIS LINE //////////////////// -->
  190.                         </div>
  191.                     </div>
  192.                     <!-- //////////////////// END ABOUT CONTENT //////////////////// -->
  193.                    
  194.                    
  195.                     <!-- //////////////////// BIO CONTENT //////////////////// -->
  196.                     <div id="bio" class="tab-pane fade">
  197.                        
  198.                         <!-- //////////////////// HEADER //////////////////// -->
  199.                         <div class="display-4 d-flex justify-content-between my-3">
  200.                            
  201.                             <i class="fal fa-book fa-sm my-auto" style="color: #FEB206"></i>
  202.                             <hr class="flex-fill mt-auto mb-1 mx-2" style="height: 1px; background: #FEB206;">
  203.                             <p class="text-right" style="font-family: MS Gothic">
  204.                                 <span style="color: #FEB206;">B</span>IOGRAPHY
  205.                             </p>
  206.                            
  207.                         </div>
  208.                         <!-- //////////////////// END HEADER //////////////////// -->
  209.                        
  210.                         <div class="pr-3" style="height: 200px; overflow: auto;">
  211.                            
  212.                             <p class="text-right" style="color: #FEB206; font-size: 1.1rem;">"Lorem ipsum dolor sit amet, consectetur adipiscing elit."</p>
  213.                            
  214.                             <p>Talk about your character's background here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a pellentesque arcu. Suspendisse nec mi convallis, mollis ex ac, fringilla diam. In tincidunt neque a ex congue, vel finibus dolor suscipit. Morbi nunc lorem, ultrices vitae iaculis a, molestie ac felis. Mauris hendrerit eros quis cursus fermentum. Praesent metus velit, auctor vel est quis, posuere tempus nunc.</p>
  215.                            
  216.                             <p>Fusce porta non lacus a suscipit. Nulla mi lacus, dictum eu arcu a, suscipit auctor nisi. Phasellus ultricies nunc purus, quis fermentum justo feugiat et. Curabitur gravida magna ut odio interdum, ac placerat diam aliquet. Integer pretium nibh a lectus lacinia, in fringilla nisi malesuada. Maecenas egestas sem est, vitae ultrices nunc blandit et.</p>
  217.                            
  218.                            
  219.                             <!-- //////////////////// ADD MORE PARAGRAPHS ABOVE THIS LINE //////////////////// -->
  220.                         </div>
  221.                     </div>
  222.                     <!-- //////////////////// END BIO //////////////////// -->
  223.                    
  224.                    
  225.                     <!-- //////////////////// LINKS CONTENT //////////////////// -->
  226.                     <div id="link" class="tab-pane fade">
  227.                        
  228.                         <!-- //////////////////// HEADER //////////////////// -->
  229.                         <div class="display-4 d-flex justify-content-between my-3">
  230.                            
  231.                             <i class="fal fa-link fa-sm my-auto" style="color: #FEB206;"></i>
  232.                             <hr class="flex-fill mt-auto mb-1 mx-2" style="background: #FEB206; height: 1px;">
  233.                             <p class="text-right" style="font-family: MS Gothic">
  234.                                 <span style="color: #FEB206;">R</span>ELATIONS
  235.                             </p>
  236.                            
  237.                         </div>
  238.                         <!-- //////////////////// END HEADER //////////////////// -->
  239.                        
  240.                         <div style="height: 200px; overflow: auto;">
  241.                            
  242.                             <!-- //////////////////// CHARACTER - copy from this comment to 'END CHARACTER', and paste it inside this section! There's a comment at the end of this section indicating the links area. //////////////////// -->
  243.                             <div class="card bg-transparent border-0 mb-2">
  244.                                
  245.                                 <!-- //////////////////// ICON //////////////////// -->
  246.                                 <div class="mx-auto" style="
  247.                                    background: url(IMGHERE) center;
  248.                                    background-size: cover;
  249.                                    width: 100px;
  250.                                    height: 90px;
  251.                                    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
  252.                                
  253.                                 <!-- //////////////////// NAME AND HEART METER - fas means 'solid', fal means 'light'. You can change fas to fal and vice versa! //////////////////// -->
  254.                                 <span class="mt-1 text-center" style="color: #FEB206;">
  255.                                    
  256.                                     <a href="URLHERE">NAME</a><br>
  257.                                        
  258.                                         <i class="fas fa-heart"></i>
  259.                                         <i class="fas fa-heart"></i>
  260.                                         <i class="fas fa-heart"></i>
  261.                                         <i class="fal fa-heart"></i>
  262.                                         <i class="fal fa-heart"></i>
  263.                                    
  264.                                 </span>
  265.                                
  266.                                 <!-- //////////////////// LINK DESC //////////////////// -->
  267.                                 <p class="text-center mx-2">A quote/description of their relationship goes here! This won't scroll. It can be long or short!</p>
  268.                                
  269.                             </div>
  270.                             <!-- //////////////////// END CHARACTER //////////////////// -->
  271.                            
  272.                             <hr class="mx-2" style="background: #FEB206; height: 1px;">
  273.                            
  274.                             <!-- //////////////////// CHARACTER - copy from this comment to 'END CHARACTER', and paste it inside this section! There's a comment at the end of this section indicating the links area. //////////////////// -->
  275.                             <div class="card bg-transparent border-0 mb-2">
  276.                                
  277.                                 <!-- //////////////////// ICON //////////////////// -->
  278.                                 <div class="mx-auto" style="
  279.                                    background: url(IMGHERE) center;
  280.                                    background-size: cover;
  281.                                    width: 100px;
  282.                                    height: 90px;
  283.                                    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
  284.                                
  285.                                 <!-- //////////////////// NAME AND HEART METER - fas means 'solid', fal means 'light'. You can change fas to fal and vice versa! //////////////////// -->
  286.                                 <span class="mt-1 text-center" style="color: #FEB206;">
  287.                                    
  288.                                     <a href="URLHERE">NAME</a><br>
  289.                                        
  290.                                         <i class="fas fa-heart"></i>
  291.                                         <i class="fas fa-heart"></i>
  292.                                         <i class="fas fa-heart"></i>
  293.                                         <i class="fal fa-heart"></i>
  294.                                         <i class="fal fa-heart"></i>
  295.                                    
  296.                                 </span>
  297.                                
  298.                                 <!-- //////////////////// LINK DESC //////////////////// -->
  299.                                 <p class="text-center mx-2">A quote/description of their relationship goes here! This won't scroll. It can be long or short!</p>
  300.                                
  301.                             </div>
  302.                             <!-- //////////////////// END CHARACTER //////////////////// -->
  303.                            
  304.                             <hr class="mx-2" style="background: #FEB206; height: 1px;">
  305.                            
  306.                             <!-- //////////////////// CHARACTER - copy from this comment to 'END CHARACTER', and paste it inside this section! There's a comment at the end of this section indicating the links area. //////////////////// -->
  307.                             <div class="card bg-transparent border-0 mb-2">
  308.                                
  309.                                 <!-- //////////////////// ICON //////////////////// -->
  310.                                 <div class="mx-auto" style="
  311.                                    background: url(IMGHERE) center;
  312.                                    background-size: cover;
  313.                                    width: 100px;
  314.                                    height: 90px;
  315.                                    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
  316.                                
  317.                                 <!-- //////////////////// NAME AND HEART METER - fas means 'solid', fal means 'light'. You can change fas to fal and vice versa! //////////////////// -->
  318.                                 <span class="mt-1 text-center" style="color: #FEB206;">
  319.                                    
  320.                                     <a href="URLHERE">NAME</a><br>
  321.                                        
  322.                                         <i class="fas fa-heart"></i>
  323.                                         <i class="fas fa-heart"></i>
  324.                                         <i class="fas fa-heart"></i>
  325.                                         <i class="fal fa-heart"></i>
  326.                                         <i class="fal fa-heart"></i>
  327.                                    
  328.                                 </span>
  329.                                
  330.                                 <!-- //////////////////// LINK DESC //////////////////// -->
  331.                                 <p class="text-center mx-2">A quote/description of their relationship goes here! This won't scroll. It can be long or short!</p>
  332.                                
  333.                             </div>
  334.                             <!-- //////////////////// END CHARACTER //////////////////// -->
  335.                            
  336.                             <hr class="mx-2" style="background: #FEB206; height: 1px;">
  337.                            
  338.                            
  339.                             <!-- //////////////////// ADD MORE CHARACTERS ABOVE THIS LINE! //////////////////// -->
  340.                         </div>
  341.                     </div>
  342.                 </div>
  343.             </div>
  344.             <!-- //////////////////// END TAB CONTENT //////////////////// -->
  345.            
  346.         </div>
  347.         <!-- //////////////////// END LEFT COLUMN //////////////////// -->
  348.        
  349.        
  350.         <!-- //////////////////// RIGHT COLUMN (STATS, TRIVIA, MOODBOARD) //////////////////// -->
  351.         <div class="col-lg-4 card bg-transparent border-0 mb-3">
  352.            
  353.             <!-- //////////////////// TAB CONTENT //////////////////// -->
  354.             <div class="bg-faded p-3 mt-lg-5" style="
  355.                clip-path: polygon(0 0, 100% 0, 100% 90%, 85% 100%, 0 100%);
  356.                border-top: 7px #FEB206 double;">
  357.                
  358.                 <div class="tab-content">
  359.                    
  360.                     <!-- //////////////////// STATS CONTENT //////////////////// -->
  361.                     <div id="stat" class="tab-pane fade show active">
  362.                        
  363.                         <div class="pr-3" style="height: 200px; overflow: auto;">
  364.                            
  365.                             <!-- //////////////////// STATS - change width: 50% to any percentage (from 0 to 100%)//////////////////// -->
  366.                             <div class="row no-gutters">
  367.                                 <div class="col-5 text-right">STRENGTH</div>
  368.                                 <div class="m-auto" style="color: #FEB206;"><i class="fas fa-star fa-sm"></i></div>
  369.                                 <div class="col-5 d-flex">
  370.                                     <div class="progress rounded-0 bg-transparent my-auto flex-fill" style="color: #FEB206; height: 10px; border: 1px solid;">
  371.                                         <div class="progress-bar" style="width: 50%; background: #FEB206;"></div>
  372.                                     </div>
  373.                                 </div>
  374.                                
  375.                                 <div class="col-5 text-right">AGILITY</div>
  376.                                 <div class="m-auto" style="color: #FEB206;"><i class="fas fa-star fa-sm"></i></div>
  377.                                 <div class="col-5 d-flex">
  378.                                     <div class="progress rounded-0 bg-transparent my-auto flex-fill" style="color: #FEB206; height: 10px; border: 1px solid;">
  379.                                         <div class="progress-bar" style="width: 50%; background: #FEB206;"></div>
  380.                                     </div>
  381.                                 </div>
  382.                                
  383.                                 <div class="col-5 text-right">CONSTITUTION</div>
  384.                                 <div class="m-auto" style="color: #FEB206;"><i class="fas fa-star fa-sm"></i></div>
  385.                                 <div class="col-5 d-flex">
  386.                                     <div class="progress rounded-0 bg-transparent my-auto flex-fill" style="color: #FEB206; height: 10px; border: 1px solid;">
  387.                                         <div class="progress-bar" style="width: 50%; background: #FEB206;"></div>
  388.                                     </div>
  389.                                 </div>
  390.                                
  391.                                 <div class="col-5 text-right">INTELLIGENCE</div>
  392.                                 <div class="m-auto" style="color: #FEB206;"><i class="fas fa-star fa-sm"></i></div>
  393.                                 <div class="col-5 d-flex">
  394.                                     <div class="progress rounded-0 bg-transparent my-auto flex-fill" style="color: #FEB206; height: 10px; border: 1px solid;">
  395.                                         <div class="progress-bar" style="width: 50%; background: #FEB206;"></div>
  396.                                     </div>
  397.                                 </div>
  398.                                
  399.                                 <div class="col-5 text-right">WISDOM</div>
  400.                                 <div class="m-auto" style="color: #FEB206;"><i class="fas fa-star fa-sm"></i></div>
  401.                                 <div class="col-5 d-flex">
  402.                                     <div class="progress rounded-0 bg-transparent my-auto flex-fill" style="color: #FEB206; height: 10px; border: 1px solid;">
  403.                                         <div class="progress-bar" style="width: 50%; background: #FEB206;"></div>
  404.                                     </div>
  405.                                 </div>
  406.                                
  407.                                 <div class="col-5 text-right">CHARISMA</div>
  408.                                 <div class="m-auto" style="color: #FEB206;"><i class="fas fa-star fa-sm"></i></div>
  409.                                 <div class="col-5 d-flex">
  410.                                     <div class="progress rounded-0 bg-transparent my-auto flex-fill" style="color: #FEB206; height: 10px; border: 1px solid;">
  411.                                         <div class="progress-bar" style="width: 50%; background: #FEB206;"></div>
  412.                                     </div>
  413.                                 </div>
  414.                                
  415.                                 <div class="col-12"><hr style="background: #FEB206; height: 1px;"></div>
  416.                                
  417.                                 <div class="col-5 text-right">EXTRAVERSION</div>
  418.                                 <div class="m-auto" style="color: #FEB206;"><i class="fas fa-star fa-sm"></i></div>
  419.                                 <div class="col-5 d-flex">
  420.                                     <div class="progress rounded-0 bg-transparent my-auto flex-fill" style="color: #FEB206; height: 10px; border: 1px solid;">
  421.                                         <div class="progress-bar" style="width: 50%; background: #FEB206;"></div>
  422.                                     </div>
  423.                                 </div>
  424.                                
  425.                                 <div class="col-5 text-right">EMPATHY</div>
  426.                                 <div class="m-auto" style="color: #FEB206;"><i class="fas fa-star fa-sm"></i></div>
  427.                                 <div class="col-5 d-flex">
  428.                                     <div class="progress rounded-0 bg-transparent my-auto flex-fill" style="color: #FEB206; height: 10px; border: 1px solid;">
  429.                                         <div class="progress-bar" style="width: 50%; background: #FEB206;"></div>
  430.                                     </div>
  431.                                 </div>
  432.                                
  433.                                 <div class="col-5 text-right">HUMOR</div>
  434.                                 <div class="m-auto" style="color: #FEB206;"><i class="fas fa-star fa-sm"></i></div>
  435.                                 <div class="col-5 d-flex">
  436.                                     <div class="progress rounded-0 bg-transparent my-auto flex-fill" style="color: #FEB206; height: 10px; border: 1px solid;">
  437.                                         <div class="progress-bar" style="width: 50%; background: #FEB206;"></div>
  438.                                     </div>
  439.                                 </div>
  440.                                
  441.                                 <div class="col-5 text-right">DISCIPLINE</div>
  442.                                 <div class="m-auto" style="color: #FEB206;"><i class="fas fa-star fa-sm"></i></div>
  443.                                 <div class="col-5 d-flex">
  444.                                     <div class="progress rounded-0 bg-transparent my-auto flex-fill" style="color: #FEB206; height: 10px; border: 1px solid;">
  445.                                         <div class="progress-bar" style="width: 50%; background: #FEB206;"></div>
  446.                                     </div>
  447.                                 </div>
  448.                                
  449.                                 <div class="col-5 text-right">HUMILITY</div>
  450.                                 <div class="m-auto" style="color: #FEB206;"><i class="fas fa-star fa-sm"></i></div>
  451.                                 <div class="col-5 d-flex">
  452.                                     <div class="progress rounded-0 bg-transparent my-auto flex-fill" style="color: #FEB206; height: 10px; border: 1px solid;">
  453.                                         <div class="progress-bar" style="width: 50%; background: #FEB206;"></div>
  454.                                     </div>
  455.                                 </div>
  456.                                
  457.                                 <div class="col-5 text-right">PATIENCE</div>
  458.                                 <div class="m-auto" style="color: #FEB206;"><i class="fas fa-star fa-sm"></i></div>
  459.                                 <div class="col-5 d-flex">
  460.                                     <div class="progress rounded-0 bg-transparent my-auto flex-fill" style="color: #FEB206; height: 10px; border: 1px solid;">
  461.                                         <div class="progress-bar" style="width: 50%; background: #FEB206;"></div>
  462.                                     </div>
  463.                                 </div>
  464.                             </div>
  465.                             <!-- //////////////////// END STATS //////////////////// -->
  466.                            
  467.                         </div>
  468.                        
  469.                         <!-- //////////////////// HEADER //////////////////// -->
  470.                         <div class="display-4 d-flex justify-content-between my-3">
  471.                            
  472.                             <p class="text-right" style="font-family: MS Gothic">
  473.                                 <span style="color: #FEB206;">S</span>TATS
  474.                             </p>
  475.                             <hr class="flex-fill mt-auto mb-1 mx-2" style="background: #FEB206; height: 1px;">
  476.                             <i class="fal fa-chart-bar fa-sm my-auto" style="color: #FEB206;"></i>
  477.                            
  478.                         </div>
  479.                         <!-- //////////////////// END HEADER //////////////////// -->
  480.                        
  481.                     </div>
  482.                     <!-- //////////////////// END STATS CONTENT //////////////////// -->
  483.                    
  484.                    
  485.                     <!-- //////////////////// TRIVIA CONTENT //////////////////// -->
  486.                     <div id="misc" class="tab-pane fade">
  487.                        
  488.                         <div class="pr-3" style="height: 200px; overflow: auto;">
  489.                            
  490.                             <div class="row no-gutters">
  491.                                
  492.                                 <!-- //////////////////// LIKES //////////////////// -->
  493.                                 <ul class="col pr-2" style="list-style-type: none;">
  494.                                     <li><i class="fas fa-heart mr-2" style="color: #FEB206;"></i>likes here.</li>
  495.                                     <li><i class="fas fa-heart mr-2" style="color: #FEB206;"></i>content</li>
  496.                                     <li><i class="fas fa-heart mr-2" style="color: #FEB206;"></i>content</li>
  497.                                     <li><i class="fas fa-heart mr-2" style="color: #FEB206;"></i>content</li>
  498.                                     <li><i class="fas fa-heart mr-2" style="color: #FEB206;"></i>content</li>
  499.                                 </ul>
  500.                                
  501.                                 <!-- //////////////////// DISLIKES //////////////////// -->
  502.                                 <ul class="col" style="list-style-type: none;">
  503.                                     <li><i class="fas fa-skull mr-2" style="color: #FEB206;"></i>dislikes here.</li>
  504.                                     <li><i class="fas fa-skull mr-2" style="color: #FEB206;"></i>content</li>
  505.                                     <li><i class="fas fa-skull mr-2" style="color: #FEB206;"></i>content</li>
  506.                                     <li><i class="fas fa-skull mr-2" style="color: #FEB206;"></i>content</li>
  507.                                     <li><i class="fas fa-skull mr-2" style="color: #FEB206;"></i>content</li>
  508.                                 </ul>
  509.                                
  510.                                 <!-- //////////////////// TRIVIA //////////////////// -->
  511.                                 <ul class="col-12" style="list-style-type: none;">
  512.                                     <li><i class="fas fa-star mr-2" style="color: #FEB206;"></i>trivia here.</li>
  513.                                     <li><i class="fas fa-star mr-2" style="color: #FEB206;"></i>content</li>
  514.                                     <li><i class="fas fa-star mr-2" style="color: #FEB206;"></i>content</li>
  515.                                     <li><i class="fas fa-star mr-2" style="color: #FEB206;"></i>content</li>
  516.                                     <li><i class="fas fa-star mr-2" style="color: #FEB206;"></i>content</li>
  517.                                 </ul>
  518.                            
  519.                             </div>
  520.                            
  521.                         </div>
  522.                        
  523.                         <!-- //////////////////// HEADER //////////////////// -->
  524.                         <div class="display-4 d-flex justify-content-between my-3">
  525.                            
  526.                             <p class="text-right" style="font-family: MS Gothic">
  527.                                 <span style="color: #FEB206;">T</span>RIVIA
  528.                             </p>
  529.                             <hr class="flex-fill mt-auto mb-1 mx-2" style="background: #FEB206; height: 1px;">
  530.                             <i class="fal fa-star fa-sm my-auto" style="color: #FEB206;"></i>
  531.                            
  532.                         </div>
  533.                         <!-- //////////////////// END HEADER //////////////////// -->
  534.                        
  535.                     </div>
  536.                     <!-- //////////////////// END TRIVIA CONTENT //////////////////// -->
  537.                    
  538.                    
  539.                     <!-- //////////////////// MOODBOARD CONTENT //////////////////// -->
  540.                     <div id="mood" class="tab-pane fade">
  541.                        
  542.                         <div style="height: 200px; overflow: auto;">
  543.                            
  544.                             <!-- //////////////////// BOARD START - the arrangement of the hexes are by COLUMN, so the leftmost column has two hexes, the middle has three, and the rightmost column has two. The hexes for each column are also arranged from top to bottom. It's best if you don't remove any of the hexes, it might screw up the appearance. //////////////////// -->
  545.                             <div class="row no-gutters justify-content-center">
  546.                                
  547.                                 <!-- //////////////////// FIRST COLUMN //////////////////// -->
  548.                                 <div class="my-auto" style="margin-right: -13px;">
  549.                                    
  550.                                     <!-- //////////////////// HEX 1 //////////////////// -->
  551.                                     <div class="mb-2" style="
  552.                                        background: url(IMGHERE) center;
  553.                                        background-size: cover;
  554.                                        width: 100px;
  555.                                        height: 90px;
  556.                                        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
  557.                                    
  558.                                     <!-- //////////////////// HEX 2 //////////////////// -->
  559.                                     <div style="
  560.                                        background: url(IMGHERE) center;
  561.                                        background-size: cover;
  562.                                        width: 100px;
  563.                                        height: 90px;
  564.                                        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
  565.                                 </div>
  566.                                
  567.                                 <!-- //////////////////// SECOND COLUMN //////////////////// -->
  568.                                 <div class="mx-n1">
  569.                                    
  570.                                     <!-- //////////////////// HEX 3 //////////////////// -->
  571.                                     <div class="mb-2" style="
  572.                                        background: url(IMGHERE) center;
  573.                                        background-size: cover;
  574.                                        width: 100px;
  575.                                        height: 90px;
  576.                                        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
  577.                                    
  578.                                     <!-- //////////////////// HEX 4 //////////////////// -->
  579.                                     <div class="mb-2" style="
  580.                                        background: url(IMGHERE) center;
  581.                                        background-size: cover;
  582.                                        width: 100px;
  583.                                        height: 90px;
  584.                                        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
  585.                                    
  586.                                     <!-- //////////////////// HEX 5 //////////////////// -->
  587.                                     <div style="
  588.                                        background: url(IMGHERE) center;
  589.                                        background-size: cover;
  590.                                        width: 100px;
  591.                                        height: 90px;
  592.                                        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
  593.                                 </div>
  594.                                
  595.                                 <!-- //////////////////// THIRD COLUMN //////////////////// -->
  596.                                 <div class="my-auto" style="margin-left: -13px;">
  597.                                    
  598.                                     <!-- //////////////////// HEX 6 //////////////////// -->
  599.                                     <div class="mb-2" style="
  600.                                        background: url(IMGHERE) center;
  601.                                        background-size: cover;
  602.                                        width: 100px;
  603.                                        height: 90px;
  604.                                        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
  605.                                    
  606.                                     <!-- //////////////////// HEX 7 //////////////////// -->
  607.                                     <div style="
  608.                                        background: url(IMGHERE) center;
  609.                                        background-size: cover;
  610.                                        width: 100px;
  611.                                        height: 90px;
  612.                                        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);"></div>
  613.                                    
  614.                                 </div>
  615.                             </div>
  616.                             <!-- //////////////////// END BOARD //////////////////// -->
  617.                            
  618.                         </div>
  619.                        
  620.                         <!-- //////////////////// HEADER //////////////////// -->
  621.                         <div class="display-4 d-flex justify-content-between my-3">
  622.                            
  623.                             <p class="text-right" style="font-family: MS Gothic">
  624.                                 <span style="color: #FEB206;">M</span>OODBOARD
  625.                             </p>
  626.                             <hr class="flex-fill mt-auto mb-1 mx-2" style="background: #FEB206; height: 1px;">
  627.                             <i class="fal fa-image fa-sm my-auto" style="color: #FEB206;"></i>
  628.                            
  629.                         </div>
  630.                         <!-- //////////////////// END HEADER //////////////////// -->
  631.                        
  632.                     </div>
  633.                     <!-- //////////////////// END MOODBOARD CONTENT //////////////////// -->
  634.                    
  635.                    
  636.                 </div>
  637.                 <!-- //////////////////// END TAB CONTENT //////////////////// -->
  638.                
  639.                 <!-- //////////////////// COLORED HEADER //////////////////// -->
  640.                
  641.                 <div class="mb-n3 mx-n3" style="border-top: 7px #FEB206 double"><div class="py-3" style="background: #FEB206;"></div></div>
  642.             </div>
  643.             <!-- //////////////////// END TAB CONTENT //////////////////// -->
  644.            
  645.            
  646.             <!-- //////////////////// NAVIGATION //////////////////// -->
  647.             <ul class="nav mr-auto px-2" style="z-index: 99; margin-top: -25px;">
  648.                
  649.                 <!-- //////////////////// STATS BUTTON //////////////////// -->
  650.                 <li class="nav-item d-flex" style="
  651.                    background: #FEB206;
  652.                    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  653.                    width: 60px;
  654.                    height: 50px;">
  655.                     <a href="#stat" class="nav-link active btn btn-outline-primary text-white d-flex border-0 w-100" data-toggle="tab">
  656.                         <i class="m-auto fal fa-chart-bar fa-lg"></i>
  657.                     </a>
  658.                 </li>
  659.                 <!-- //////////////////// END STATS BUTTON //////////////////// -->
  660.                
  661.                 <!-- //////////////////// TRIVIA BUTTON //////////////////// -->
  662.                 <li class="nav-item bg-faded d-flex" style="
  663.                    background: #FEB206;
  664.                    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  665.                    width: 60px;
  666.                    height: 50px;">
  667.                    
  668.                     <a href="#misc" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100" data-toggle="tab">
  669.                         <i class="m-auto fal fa-star fa-lg"></i>
  670.                     </a>
  671.                 </li>
  672.                 <!-- //////////////////// END TRIVIA BUTTON //////////////////// -->
  673.                
  674.                 <!-- //////////////////// MOODBOARD BUTTON //////////////////// -->
  675.                 <li class="nav-item bg-faded d-flex" style="
  676.                    background: #FEB206;
  677.                    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  678.                    width: 60px;
  679.                    height: 50px;">
  680.                     <a href="#mood" class="nav-link btn btn-outline-primary text-white d-flex border-0 w-100" data-toggle="tab">
  681.                         <i class="m-auto fal fa-image fa-lg"></i>
  682.                     </a>
  683.                 </li>
  684.                 <!-- //////////////////// END MOODBOARD BUTTON //////////////////// -->
  685.                
  686.             </ul>
  687.             <!-- //////////////////// END NAVIGATION //////////////////// -->
  688.         </div>
  689.         <!-- //////////////////// END RIGHT COLUMN //////////////////// -->
  690.        
  691.        
  692.     </div>
  693.     <!-- //////////////////// END CONTENT ROW //////////////////// -->
  694.    
  695.    
  696.     <!-- //////////////////// FOOTER ROW //////////////////// -->
  697.     <div class="row no-gutters justify-content-center mt-lg-n5">
  698.        
  699.         <!-- //////////////////// MUSIC PLAYER //////////////////// -->
  700.         <div class="col-lg-4 col p-3 row no-gutters">
  701.             <div class="col-3">
  702.                
  703.                 <!-- //////////////////// YOUTUBE LINK - replace URLHERE with the YT link of your video (specifically, the keysmash found at the end of 'watch?v='). DO NOT remove ?modestbranding=1 //////////////////// -->
  704.                 <iframe src="https://www.youtube-nocookie.com/embed/URLHERE?modestbranding=1" frameborder="0" style="position: absolute; width: 2.1em; height: 1.7em; margin-left: 15px; margin-top: 12px; z-index: 1; opacity: 0;"></iframe>
  705.                
  706.                 <!-- //////////////////// HEX BUTTON //////////////////// -->
  707.                 <div class="card border-0 p-2" style="
  708.                    background: #FEB206;
  709.                    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); height: 50px; width: 60px;">
  710.                     <i class="fal fa-cassette-tape m-auto text-white fa-2x"></i>
  711.                 </div>
  712.                
  713.             </div>
  714.            
  715.             <!-- //////////////////// MUSIC TITLE AND ARTIST //////////////////// -->
  716.             <div class="col text-right">
  717.                 <p class="display-4 mb-0" style="font-size: 1.7rem; font-family: MS Gothic;"><span style="color: #FEB206;">M</span>USIC <span style="color: #FEB206;">T</span>ITLE</p>
  718.                 <p class="display-4" style="font-size: 1rem; font-family: MS Gothic;">artist</p>
  719.             </div>
  720.            
  721.         </div>
  722.         <!-- //////////////////// END MUSIC PLAYER //////////////////// -->
  723.        
  724.        
  725.         <!-- //////////////////// CREDITS - please don't remove! <3 //////////////////// -->
  726.         <div class="col-lg-3 pt-2 text-center">
  727.             <p class="text-secondary mt-lg-5" style="font-size: 0.7rem;">code by <a href="https://toyhou.se/icecreampizzeria">icecreampizzeria</a> <br>
  728.             art by @ user or <a href="URLHERE">user</a> | images from site, @ user or <a href="URLHERE">user</a>
  729.             </p>
  730.         </div>
  731.         <!-- //////////////////// END CREDITS //////////////////// -->
  732.        
  733.         <!-- //////////////////// FILLER - don't remove. //////////////////// -->
  734.         <div class="col-lg-4"></div>
  735.        
  736.     </div>
  737.     <!-- //////////////////// END FOOTER ROW //////////////////// -->
  738.    
  739. </div>
  740. <!-- //////////////////// END WHOLE THING //////////////////// -->
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!