API tools faq
paste
PandoraLights

New sploon

PandoraLights
Oct 23rd, 2022 (edited)
1,108
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 53.05 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.        THIS CODE USES CUSTOM COLORS!!! If you want to change them here they are:
  4.        
  5.        
  6.        BORDERS + ICONS + ETC   =   #9B32E9
  7.        
  8.        MAIN BACKGROUND         =   #000
  9.        
  10.        TEXT                    =   #fff
  11.        
  12.        
  13.        To change these colors, use CTRL+F (PC) / Command+F (Mac) and type in the hex code of the above colors to find every instance of them. Then, replace them with your desired color's hex code.
  14. -->
  15.  
  16.  
  17.   <!--BORDER-->
  18.  
  19. <div class="container mx-auto p-2" style="max-width:1200px; border:5px ridge #9B32E9; color: #fff; background: #000; height:500p;">
  20.  
  21.  
  22.  
  23.   <!--HEADER IMAGE - You can replace the link with whatever header image you like!-->
  24.  
  25.    <div class="card border-0 p-1" style="background:url(
  26.          https://img.gamewith.jp/img/04bdfda1bb9974bd6552d4bba6422daa.png
  27.  ); height:250px; background-size:cover; background-position:center; width:100%; border-radius:10px;">
  28.  
  29.  
  30.  
  31.   <!--PROFILE IMAGE - MAKE SURE IT IS SQUARE. Automatically crops to 300x300 pixels.-->
  32.  
  33.    <div class="row-no-gutters">
  34.      <div class="col justify-content-left p-2">
  35.      
  36.      <div class="card" style="background:url(https://ih1.redbubble.net/image.970251758.1883/st,small,507x507-pad,600x600,f8f8f8.jpg); background-size: cover; border: 3px solid #9B32E9; width: 300px; height: 300px;"></div>
  37.      
  38.      </div>
  39.    </div>
  40.  
  41.  
  42.  
  43.   <!--HEADER IMAGE CREDIT - Do NOT remove this. Replace the link with the credit for the header image.-->
  44.      <a href="
  45.         HEADER CREDIT LINK
  46.     "
  47.     class="d-block text-white" target="_BLANK" style="position:absolute; bottom:3px; right:5px;">
  48.   <!--ADJUST THE COLOR OF THE ICON BELOW IF IT DOES NOT SHOW UP ON YOUR IMAGE - White: #fff; Black: #000; Recommended: use custom color-->
  49.        <i class="fal fa-camera m-1 tooltipster" style="font-size:15px; color:#fff;" title="Image Credit"></i>
  50.      </a>
  51.    </div>
  52.    <br>
  53.    <div class="col-lg-auto justify-content-center">
  54.      <hr class="flex-fill" style="background:#9B32E9; margin-left:300px;">
  55.       <i class="fa-duotone fa-squid float-right" style="font-size:30px; color:#9B32E9;"></i>
  56.    </div>
  57.    <br>
  58.  
  59.  
  60.  
  61.   <!--LEFT BAR INFORMATION-->
  62.    <div class="row">
  63.      <div class="col-sm-4 justify-content-center">
  64.        <div class="card-block pt-2 float-left" style="width:300px;">
  65.        
  66.         <p class="text-right" style="font-family: courier new;font-size:18px">
  67.         <i class="fa-solid fa-chevrons-right float-left m-1 tooltipster" style="color: #9B32E9"></i>
  68.        
  69.           NAME
  70.        
  71.         </p>
  72.        
  73.            <div class="card" style="border: 1px dashed #9B32E9; background:#000; margin: 1em 0; padding: 0;"></div>
  74.        
  75.         <p class="text-right" style="font-family: courier new;font-size:18px">
  76.         <i class="fa-solid fa-chevrons-right float-left m-1 tooltipster" style="color: #9B32E9"></i>
  77.        
  78.           SPECIES
  79.        
  80.         </p>
  81.        
  82.            <div class="card" style="border: 1px dashed #9B32E9; background:#000; margin: 1em 0; padding: 0;"></div>
  83.        
  84.         <p class="text-right" style="font-family: courier new;font-size:18px">
  85.         <i class="fa-solid fa-chevrons-right float-left m-1 tooltipster" style="color: #9B32E9"></i>
  86.        
  87.           GENDER/PRONOUNS
  88.        
  89.         </p>
  90.        
  91.            <div class="card" style="border: 1px dashed #9B32E9; background:#000; margin: 1em 0; padding: 0;"></div>
  92.        
  93.         <p class="text-right" style="font-family: courier new;font-size:18px">
  94.         <i class="fa-solid fa-chevrons-right float-left m-1 tooltipster" style="color: #9B32E9"></i>
  95.        
  96.           ORIENTATION
  97.        
  98.         </p>
  99.        
  100.            <div class="card" style="border: 1px dashed #9B32E9; background:#000; margin: 1em 0; padding: 0;"></div>
  101.        
  102.         <p class="text-right" style="font-family: courier new;font-size:18px">
  103.         <i class="fa-solid fa-chevrons-right float-left m-1 tooltipster" style="color: #9B32E9"></i>
  104.        
  105.           BIRTHDAY
  106.        
  107.         </p>
  108.        
  109.            <div class="card" style="border: 1px dashed #9B32E9; background:#000; margin: 1em 0; padding: 0;"></div>
  110.        
  111.         <!--NOTE - Legion is specific to Prism OCs. For something more universal, replace this with "species" and change "gem" to "dna", or "occupation" and replace "gem" with "briefcase".-->
  112.         <p class="text-right" style="font-family: courier new;font-size:18px">
  113.         <i class="fa-solid fa-chevrons-right float-left m-1 tooltipster" style="color: #9B32E9"></i>
  114.        
  115.           HEIGHT
  116.        
  117.         </p>
  118.        
  119.            <div class="card" style="border: 1px dashed #9B32E9; background:#000; margin: 1em 0; padding: 0;"></div>
  120.        
  121.         <p class="text-right" style="font-family: courier new;font-size:18px">
  122.        
  123.        <i class="fa-solid fa-chevrons-right float-left m-1 tooltipster" style="color: #9B32E9"></i>
  124.        
  125.           OCCUPATION
  126.        
  127.         </p>
  128.        
  129.            <div class="card" style="border: 1px dashed #9B32E9; background:#000; margin: 1em 0; padding: 0;"></div>
  130.                
  131.         <p class="text-right" style="-">
  132.        
  133.         <a href="
  134.        
  135.          SONG LINK
  136.        
  137.        " target="_BLANK"><i class="fal fa-compact-disc fa-spin float-left m-1 tooltipster" style="color: #9B32E9"></i></a>
  138.        
  139.           THEME - ARTIST
  140.        
  141.         </p>
  142.        </div>
  143.      </div>
  144.  
  145.  
  146.      <div class="col-sm-8 justify-content-center">
  147.        <div class="card-block pt-2">
  148.  
  149. <ul class="nav nav-tabs card-header-tabs row mb-1">
  150.   <li class="col-md-3"><a class="btn bg-faded btn-block btn-outline-secondary active" data-toggle="tab" style="border: 1px solid #9B32E9;background-color:#9B32E9;color:#EFEEE9; border-radius: 0rem;font-family: courier new;font-size:18px" href="#tab1">OVERVIEW</a></li>
  151.  
  152.   <li class="col-md-3"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" style="border: 1px solid #9B32E9;background-color:#9B32E9;color:#EFEEE9; border-radius: 0rem;font-family: courier new;font-size:18px" href="#tab2">LOGS</a></li>
  153.  
  154.   <li class="col-md-3"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" style="border: 1px solid #9B32E9;background-color:#9B32E9;color:#EFEEE9; border-radius: 0rem;font-family: courier new;font-size:18px" href="#tab3">GEAR</a></li>
  155.  
  156.   <li class="col-md-3"><a class="btn bg-faded btn-block btn-outline-secondary" data-toggle="tab" style="border: 1px solid #9B32E9;background-color:#9B32E9;color:#EFEEE9; border-radius: 0rem;font-family: courier new;font-size:18px" href="#tab4">RELATIONS</a></li>
  157. </ul>
  158. <br>    
  159. <div class="containerp-2" style="height: 370px;border: 2px solid #9B32E9;">
  160. <div class="tab-content">
  161.  
  162.               <div class="tab-pane fade active show" id="tab1">
  163.  
  164.              
  165. <div class="containerp-2" style="height: 370px;overflow: auto;border: 2px solid #9B32E9;">
  166.    
  167.                    <div class="row no-gutters" style="background-color: #9B32E9; text-shadow: 2px 1px 0px #752415; font-family: courier new;">
  168.                         <div class="col-6 p-1"><h2><u>P</u>ersonality</h2></div>
  169.                         <div class="col-6 p-1"><i class="fa-sharp fa-solid fa-minus pull-right"></i></div>
  170.                     </div>
  171.                    
  172.                     <div class="row no-gutters">
  173.  
  174.  
  175.  
  176. <div class="row no-gutters">
  177.   <div class="col-6 row no-gutters">
  178.     <div class="col-12 p-1">
  179.       <div class="p-3" style="height: 300px;overflow: auto;">
  180.        
  181.               <p>Write some silly explanation of their personality here, it'll scroll so dw about how much you write.</p>
  182.      
  183.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed erat accumsan, consectetur ipsum eu, eleifend eros. Nulla eu neque id urna dictum iaculis. Nunc nec nisi sed elit aliquam pulvinar sed sed velit.</p>
  184.      
  185.       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed erat accumsan, consectetur ipsum eu, eleifend eros. Nulla eu neque id urna dictum iaculis. Nunc nec nisi sed elit aliquam pulvinar sed sed velit.</p>
  186.        
  187.       </div>
  188.     </div>
  189.   </div>
  190.   <div class="col-6 row no-gutters">
  191.     <div class="col-12 p-1">
  192.       <div class="p-3" style="height: 300px;overflow: auto;">
  193.        
  194.                <!--BAR ONE-->
  195.         <div class="row no-gutters">
  196.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  197.                 <p>Friendly</p>
  198.             </div>
  199.             <div class="col px-1 pb-1"></div>
  200.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  201.                 <p>Rude</p>
  202.             </div>
  203.         </div>
  204.                                     <div class="d-flex col-lg col-6 px-2">
  205.                                         <div class="progress rounded-0 border-0 my-auto flex-fill d-flex flex-row" style="height: 3px; overflow: visible;">
  206.                                            
  207.                                             <div class="progress-bar bg-transparent" style="width: 50%;"></div>
  208.                                            
  209.                                         <div style="background: #9B32E9; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 15px; height: 13px; margin-top: -5px; margin-bottom: -5px; margin-left: -5px;"></div>
  210.                                         </div>
  211.                                     </div>
  212.         <br>
  213.  
  214.  
  215.   <!--BAR TWO-->
  216.         <div class="row no-gutters">
  217.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  218.                 <p>Laid Back</p>
  219.             </div>
  220.             <div class="col px-1 pb-1"></div>
  221.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  222.                 <p>Serious</p>
  223.             </div>
  224.         </div>
  225.                                     <div class="d-flex col-lg col-6 px-2">
  226.                                         <div class="progress rounded-0 border-0 my-auto flex-fill d-flex flex-row" style="height: 3px; overflow: visible;">
  227.                                            
  228.                                             <div class="progress-bar bg-transparent" style="width: 50%;"></div>
  229.                                            
  230.                                         <div style="background: #9B32E9; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 15px; height: 13px; margin-top: -5px; margin-bottom: -5px; margin-left: -5px;"></div>
  231.                                         </div>
  232.                                     </div>
  233.         <br>
  234.  
  235.  
  236.   <!--BAR THREE-->
  237.         <div class="row no-gutters">
  238.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  239.                 <p>Patient</p>
  240.             </div>
  241.             <div class="col px-1 pb-1"></div>
  242.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  243.                 <p>Impulsive</p>
  244.             </div>
  245.         </div>
  246.                                     <div class="d-flex col-lg col-6 px-2">
  247.                                         <div class="progress rounded-0 border-0 my-auto flex-fill d-flex flex-row" style="height: 3px; overflow: visible;">
  248.                                            
  249.                                             <div class="progress-bar bg-transparent" style="width: 50%;"></div>
  250.                                            
  251.                                         <div style="background: #9B32E9; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 15px; height: 13px; margin-top: -5px; margin-bottom: -5px; margin-left: -5px;"></div>
  252.                                         </div>
  253.                                     </div>
  254.         <br>
  255.  
  256.  
  257.   <!--BAR FOUR-->
  258.         <div class="row no-gutters">
  259.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  260.                 <p>Emotional</p>
  261.             </div>
  262.             <div class="col px-1 pb-1"></div>
  263.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  264.                 <p>Stoic</p>
  265.             </div>
  266.         </div>
  267.                                     <div class="d-flex col-lg col-6 px-2">
  268.                                         <div class="progress rounded-0 border-0 my-auto flex-fill d-flex flex-row" style="height: 3px; overflow: visible;">
  269.                                            
  270.                                             <div class="progress-bar bg-transparent" style="width: 50%;"></div>
  271.                                            
  272.                                         <div style="background: #9B32E9; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 15px; height: 13px; margin-top: -5px; margin-bottom: -5px; margin-left: -5px;"></div>
  273.                                         </div>
  274.                                     </div>
  275.         <br>
  276.  
  277.  
  278.   <!--BAR FIVE-->
  279.         <div class="row no-gutters">
  280.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  281.                 <p>Charming</p>
  282.             </div>
  283.             <div class="col px-1 pb-1"></div>
  284.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  285.                 <p>Awkward</p>
  286.             </div>
  287.         </div>
  288.                                     <div class="d-flex col-lg col-6 px-2">
  289.                                         <div class="progress rounded-0 border-0 my-auto flex-fill d-flex flex-row" style="height: 3px; overflow: visible;">
  290.                                            
  291.                                             <div class="progress-bar bg-transparent" style="width: 50%;"></div>
  292.                                            
  293.                                         <div style="background: #9B32E9; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 15px; height: 13px; margin-top: -5px; margin-bottom: -5px; margin-left: -5px;"></div>
  294.                                         </div>
  295.                                     </div>
  296.        
  297.       </div>
  298.     </div>
  299.   </div>
  300. </div>
  301.  
  302. </div>
  303.                                  <div class="row no-gutters" style="background-color: #9B32E9; text-shadow: 2px 1px 0px #752415; font-family: courier new;">
  304.                         <div class="col-6 p-1"><h2><u>P</u>references</h2></div>
  305.                         <div class="col-6 p-1"><i class="fa-sharp fa-solid fa-minus pull-right"></i></div>
  306.                     </div>              
  307.                             <!-- //////////////////// LIKES / DISLIKES //////////////////// -->
  308.                             <div class="row no-gutters mt-3">
  309.                                
  310.                                 <!-- //////////////////// LIKES //////////////////// -->
  311.                                 <div class="col-lg mb-3">
  312.                                    
  313.                                     <!-- //////////////////// HEADER //////////////////// -->
  314.                                     <p class="display-4 mb-2 d-flex p-2" style="font-family: 'courier new', monospace; font-size: 1.6rem;">
  315.                                         <i class="fal fa-heart fa-sm my-auto mr-3" style="color: #9B32E9"></i>
  316.                                         <span style="color: #9B32E9;">L</span>IKES
  317.                                     </p>
  318.                                     <!-- //////////////////// END HEADER //////////////////// -->
  319.                                    
  320.                                     <ul class="mb-0" style="list-style-type: square">
  321.                                         <li>content</li>
  322.                                         <li>content</li>
  323.                                         <li>content</li>
  324.                                         <li>content</li>
  325.                                         <li>content</li>
  326.                                        
  327.                                         <!-- //////////////////// ADD MORE LIKES ABOVE THIS LINE //////////////////// -->
  328.                                     </ul>
  329.                                 </div>
  330.                                 <!-- //////////////////// END LIKES //////////////////// -->
  331.                                
  332.                                 <!-- //////////////////// DISLIKES //////////////////// -->
  333.                                 <div class="col-lg mb-3">
  334.                                    
  335.                                     <!-- //////////////////// HEADER //////////////////// -->
  336.                                     <p class="display-4 mb-2 d-flex p-2" style="font-family: 'courier new', monospace; font-size: 1.6rem;">
  337.                                         <i class="fal fa-skull fa-sm my-auto mr-3" style="color: #9B32E9"></i>
  338.                                         <span style="color: #9B32E9;">D</span>ISLIKES
  339.                                     </p>
  340.                                     <!-- //////////////////// END HEADER //////////////////// -->
  341.                                    
  342.                                     <ul class="mb-0" style="list-style-type: square">
  343.                                         <li>content</li>
  344.                                         <li>content</li>
  345.                                         <li>content</li>
  346.                                         <li>content</li>
  347.                                         <li>content</li>
  348.                                        
  349.                                         <!-- //////////////////// ADD MORE DISLIKES ABOVE THIS LINE //////////////////// -->
  350.                                     </ul>
  351.                                 </div>
  352.                                 <!-- //////////////////// END DISLIKES //////////////////// -->
  353.                                
  354.                             </div>
  355.                             <!-- //////////////////// END LIKES / DISLIKES //////////////////// -->
  356.                            
  357.                            
  358.                         <div class="row no-gutters" style="background-color: #9B32E9; text-shadow: 2px 1px 0px #752415; font-family: courier new;">
  359.                         <div class="col-6 p-1"><h2><u>M</u>oodboard</h2></div>
  360.                         <div class="col-6 p-1"><i class="fa-sharp fa-solid fa-minus pull-right"></i></div>
  361.                     </div>
  362.                        
  363. <br>
  364. <!-- //////////////////// MOODBOARD - It's best if you don't add more pictures since it'll mess up the layout //////////////////// -->
  365.                            
  366.                             <div class="row no-gutters mb-3 justify-content-center">
  367.                                
  368.                                 <!-- //////////////////// HEX 1 //////////////////// -->
  369.                                 <div class="col-lg-3 col-6 mr-n3 d-flex">
  370.                                     <div class="ml-auto" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 145px; height: 130px;
  371.                                        
  372.                                        background: url(https://www.pngfind.com/pngs/m/562-5624843_marie-splatoon-meme-mlg-memexd-xd-ayyy-marie.png) center;
  373.                                        background-size: cover;">
  374.                                     </div>
  375.                                 </div>
  376.                                 <!-- //////////////////// END HEX 1 //////////////////// -->
  377.                                
  378.                                
  379.                                 <!-- //////////////////// HEX 2 //////////////////// -->
  380.                                 <div class="col-lg-3 col-6 ml-n3 mr-lg-n3 mb-lg-0 d-flex" style="margin-bottom: -62px;">
  381.                                     <div class="mr-auto" style="margin-top: 67px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 145px; height: 130px;
  382.                                        
  383.                                        background: url(https://www.pngfind.com/pngs/m/562-5624843_marie-splatoon-meme-mlg-memexd-xd-ayyy-marie.png) center;
  384.                                        background-size: cover;">
  385.                                     </div>
  386.                                 </div>
  387.                                 <!-- //////////////////// END HEX 2 //////////////////// -->
  388.                                
  389.                                 <i style="margin-top:85px;" class="fa-solid fa-star"></i>
  390.                                
  391.                                 <!-- //////////////////// HEX 3 //////////////////// -->
  392.                                 <div class="col-lg-3 col-6 mr-n3 ml-lg-n3 d-flex">
  393.                                     <div class="ml-auto" style="clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 145px; height: 130px;
  394.                                        
  395.                                        background: url(https://www.pngfind.com/pngs/m/562-5624843_marie-splatoon-meme-mlg-memexd-xd-ayyy-marie.png) center;
  396.                                        background-size: cover;">
  397.                                     </div>
  398.                                 </div>
  399.                                 <!-- //////////////////// END HEX 3 //////////////////// -->
  400.                                
  401.                                
  402.                                 <!-- //////////////////// HEX 4 //////////////////// -->
  403.                                 <div class="col-lg-3 col-6 ml-n3 d-flex">
  404.                                     <div class="mr-auto" style="margin-top: 67px; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 145px; height: 130px;
  405.                                        
  406.                                        background: url(https://www.pngfind.com/pngs/m/562-5624843_marie-splatoon-meme-mlg-memexd-xd-ayyy-marie.png) center;
  407.                                        background-size: cover;">
  408.                                    
  409.                                     </div>
  410.                                 </div>
  411.                                 <!-- //////////////////// END HEX 4 //////////////////// -->
  412.                                
  413.                             </div>
  414.                             <!-- //////////////////// END MOODBOARD //////////////////// -->
  415.                            
  416.  
  417.                </div>
  418.              
  419.               </div>
  420.              
  421.               <div class="tab-pane fade show" id="tab2">
  422. <!-- Alterna log lookin backstory section -->
  423. <div class="containerp-2" style="height: 370px;overflow: auto;border: 2px solid #9B32E9;">
  424.    
  425.                    <div class="row no-gutters" style="background-color: #9B32E9; text-shadow: 2px 1px 0px #752415; font-family: courier new;">
  426.                         <div class="col-6 p-1"><h2><u>H</u>eader</h2></div>
  427.                         <div class="col-6 p-1"><i class="fa-sharp fa-solid fa-minus pull-right"></i></div>
  428.                     </div>
  429.                    
  430.  
  431.                             <p class="p-2" style="font-family: courier new;">
  432.                             Meant to give the vibes of those alterna logs, write up backstory stuff here :p
  433.                             </p>
  434.  
  435.                             <p class="p-2" style="font-family: courier new;">
  436.                             Lorem ipsum eprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit.
  437.                             </p>
  438.  
  439.  
  440.                    <div class="row no-gutters" style="background-color: #9B32E9; text-shadow: 2px 1px 0px #752415; font-family: courier new;">
  441.                         <div class="col-6 p-1"><u>A</u>nother <u>H</u>eader</div>
  442.                         <div class="col-6 p-1"><i class="fa-sharp fa-solid fa-minus pull-right"></i></div>
  443.                     </div>
  444.                                                
  445.                             <p class="p-2" style="font-family: courier new;">
  446.                             This'll scroll so feel free to add as much as you want
  447.                             </p>
  448.              
  449.                             <p class="p-2" style="font-family: courier new;">
  450.                             Also for some reason the longer the header title the smaller the text gets I have no idea why I can't seem to fix it. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  451.                             </p>
  452.  
  453.               </div>
  454.               </div>
  455.              
  456.               <div class="tab-pane fade show" id="tab3">
  457.              
  458. <!-- GEAR AND STATS -->
  459.  
  460. <div class="containerp-2" style="height: 370px;overflow: auto;border: 2px solid #9B32E9;">
  461. <div class="tab-content">
  462. <div class="cointainer p-3">
  463.    
  464. <div class="col-lg-auto justify-content-center p-1">
  465.            <i class="fa-duotone fa-clothes-hanger" style="font-size:30px; color:#9B32E9;"></i>
  466.            
  467.            <hr class="flex-fill" style="background:#9B32E9; margin-left: 10px;">
  468.    </div>
  469.    
  470.                <div class="row no-gutters">
  471.                   <!-- PICTURE 1 -->
  472.                   <div class="col-3 p-1">
  473.                       <a class="btn bg-faded btn-block btn-outline-secondary p-1" style="border: 1px solid #9B32E9;background-color:#9B32E9;color:#EFEEE9; border-radius: 0rem;font-size:20px;color: white;font-family: courier new;">Weapon</a>
  474.                      
  475.                 <div style="
  476.                background-image: url(https://i.pinimg.com/736x/b6/b3/3f/b6b33f513a2baab6ea89ce440eaf91d9--meme-.jpg);
  477.                background-size: cover;
  478.                background-repeat: no-repeat;
  479.                background-color: #7E7E7E;
  480.                background-position: center; border:4px; border-style: solid; border-color: #9B32E9; min-height: 160px;"></div>
  481.  
  482.                      <p class="text-center p-1">
  483.         <!--ABILITIES-->
  484.          <!--MAIN--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=45 height=45 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  485.          <!--MAIN--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=45 height=45 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  486.        </p>
  487.                   </div>
  488.                   <!-- PICTURE 2 -->
  489.                   <div class="col-3 p-1">
  490.                       <a class="btn bg-faded btn-block btn-outline-secondary p-1" style="border: 1px solid #9B32E9;background-color:#9B32E9;color:#EFEEE9; border-radius: 0rem;font-size:20px;color: white;font-family: courier new;">Head</a>
  491.                 <div style="
  492.                background-image: url(https://i.kym-cdn.com/entries/icons/original/000/018/859/Woomy_Banner.jpg);
  493.                background-size: cover;
  494.                background-repeat: no-repeat;
  495.                background-color: #7E7E7E;
  496.                background-position: center; border:4px; border-style: solid; border-color: #9B32E9; min-height: 160px;"></div>
  497.                
  498.                      <p class="text-center p-1">
  499.         <!--ABILITIES-->
  500.          <!--MAIN--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=45 height=45 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  501.          <!--SUB--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=32 height=32 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  502.          <!--SUB--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=32 height=32 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  503.          <!--SUB--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=32 height=32 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  504.        </p>
  505.                   </div>
  506.                   <!-- PICTURE 3 -->
  507.                   <div class="col-3 p-1">
  508.                       <a class="btn bg-faded btn-block btn-outline-secondary p-1" style="border: 1px solid #9B32E9;background-color:#9B32E9;color:#EFEEE9; border-radius: 0rem;font-size:20px;color: white;font-family: courier new;">Clothes</a>
  509.                 <div style="
  510.                background-image: url(https://pbs.twimg.com/profile_images/1362464817123106818/_yEvSnD6_400x400.jpg);
  511.                background-size: cover;
  512.                background-repeat: no-repeat;
  513.                background-color: #7E7E7E;
  514.                background-position: center; border:4px; border-style: solid; border-color: #9B32E9; min-height: 160px;"></div>  
  515.                
  516.                      <p class="text-center p-1">
  517.         <!--ABILITIES-->
  518.          <!--MAIN--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=45 height=45 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  519.          <!--SUB--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=32 height=32 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  520.          <!--SUB--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=32 height=32 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  521.          <!--SUB--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=32 height=32 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  522.        </p>
  523.                   </div>
  524.                   <!-- PICTURE 4 -->
  525.                   <div class="col-3 p-1">
  526.                       <a class="btn bg-faded btn-block btn-outline-secondary p-1" style="border: 1px solid #9B32E9;background-color:#9B32E9;color:#EFEEE9; border-radius: 0rem;font-size:20px;color: white;font-family: courier new;">Shoes</a>
  527.                 <div style="
  528.                background-image: url(https://bang-phinf.pstatic.net/a/324eja/0_7h7Ud018bng16hap6ew7ah0x_xt15v4.jpg?type=w660);
  529.                background-size: cover;
  530.                background-repeat: no-repeat;
  531.                background-color: #7E7E7E;
  532.                background-position: center; border:4px; border-style: solid; border-color: #9B32E9; min-height: 160px;"></div>
  533.                
  534.                      <p class="text-center p-1">
  535.         <!--ABILITIES-->
  536.          <!--MAIN--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=45 height=45 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  537.          <!--SUB--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=32 height=32 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  538.          <!--SUB--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=32 height=32 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  539.          <!--SUB--><img src="https://file.toyhou.se/images/13608513_aSN3dSQOb9GLKwR.png" width=32 height=32 style="border:4px; border-style: solid; border-color: #9B32E9; border-radius:50%">
  540.        </p>
  541.                   </div>
  542.                </div>
  543.                
  544.                <div class="col-lg-auto justify-content-center p-1">
  545.            <i class="fa-solid fa-chart-simple" style="font-size:30px; color: #9B32E9;"></i>
  546.            
  547.            <hr class="flex-fill" style="background:#9B32E9; margin-left: 10px;">
  548.    </div>
  549.  
  550. <!-- Stats -->
  551.  
  552.         <div class="row no-gutters">
  553.         <div class="col-5 p-2">
  554.                                  <!-- combat circle -->
  555.                   <div class="container d-flex justify-content-center p-0" style="position: relative; width: 18rem; height: 18rem;">
  556.                     <div style="position: absolute; z-index: 999; width: 18rem; height: 18rem; top: .75rem;font-family: courier new;">
  557.                       <h5 class="text-center text-uppercase mb-0">Attack</h5>
  558.                     </div>
  559.                     <div style="position: absolute; z-index: 999; width: 18rem; height: 18rem; transform: rotate(60deg);font-family: courier new;">
  560.                       <h5 class="text-center text-uppercase mb-0" style="transform: rotate(-60deg); padding-left: 1rem;">Defense</h5>
  561.                     </div>
  562.                     <div style="position: absolute; z-index: 999; width: 18rem; height: 18rem; transform: rotate(120deg);font-family: courier new;">
  563.                       <h5 class="text-center text-uppercase mb-0" style="transform: rotate(-120deg); padding-left: 1rem;">Run</h5>
  564.                     </div>
  565.                     <div style="position: absolute; z-index: 999; width: 18rem; height: 18rem; transform: rotate(180deg); margin-top: -.75rem;font-family: courier new;">
  566.                       <h5 class="text-center text-uppercase mb-0" style="transform: rotate(-180deg);">swim</h5>
  567.                     </div>
  568.                     <div style="position: absolute; z-index: 999; width: 18rem; height: 18rem; transform: rotate(240deg);font-family: courier new;">
  569.                       <h5 class="text-center text-uppercase mb-0" style="transform: rotate(-240deg); padding-right: 1rem;">range</h5>
  570.                     </div>
  571.                     <div style="position: absolute; z-index: 999; width: 18rem; height: 18rem; transform: rotate(300deg);font-family: courier new;">
  572.                       <h5 class="text-center text-uppercase mb-0" style="transform: rotate(-300deg); padding-right: 1rem;">Support</h5>
  573.                     </div>                    
  574.                     <!-- clip path USE THIS PLS SAVE YOURSELF A HEADACHE https://www.cssportal.com/css-clip-path-generator/-->
  575.                     <div class="container mx-auto" style="background: #9B32E9; opacity: .25; position: absolute; width: 14.3rem; height: 14.3rem; z-index: 99; top: 1.85rem;
  576.                    -webkit-clip-path: polygon(50% 0%, 94% 25%, 94% 74%, 49% 97%, 6% 73%, 6% 25%);
  577.                    clip-path: polygon(50% 0%, 94% 25%, 94% 74%, 49% 97%, 6% 73%, 6% 25%);"></div>
  578.                    
  579.                     <!-- the circle -->
  580.                     <div class="card my-auto mx-auto rounded-circle p-3">
  581.                       <div class="card rounded-circle p-3">
  582.                         <div class="card rounded-circle p-3">
  583.                           <div class="card rounded-circle p-3">
  584.                             <div class="card rounded-circle p-3">
  585.                               <div class="card rounded-circle p-3">
  586.                                 <div class="card rounded-circle" style="width: 1.5rem; height: 1.5rem;"></div>
  587.                               </div>
  588.                             </div>
  589.                           </div>
  590.                         </div>
  591.                       </div>
  592.                     </div>
  593.                   </div>
  594.                  
  595.                   <!-- End Combat circle -->
  596.             </div>
  597.             <div class="col-1 p-2"></div>
  598.             <div class="col-6 p-2">
  599.            
  600.                           <!-- Progress bars, change the percentage to change how much is filled -->
  601.              
  602.  
  603.                <!--BAR ONE-->
  604.         <div class="row no-gutters">
  605.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  606.                 <p>Ink Turf</p>
  607.             </div>
  608.             <div class="col px-1 pb-1"></div>
  609.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  610.                 <p>Splat Bad Guys</p>
  611.             </div>
  612.         </div>
  613.                                     <div class="d-flex col-lg col-6 px-2">
  614.                                         <div class="progress rounded-0 border-0 my-auto flex-fill d-flex flex-row" style="height: 3px; overflow: visible;">
  615.                                            
  616.                                             <div class="progress-bar bg-transparent" style="width: 50%;"></div>
  617.                                            
  618.                                         <div style="background: #9B32E9; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 15px; height: 13px; margin-top: -5px; margin-bottom: -5px; margin-left: -5px;"></div>
  619.                                         </div>
  620.                                     </div>
  621.         <br>
  622.  
  623.  
  624.   <!--BAR TWO-->
  625.         <div class="row no-gutters">
  626.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  627.                 <p>Ranged</p>
  628.             </div>
  629.             <div class="col px-1 pb-1"></div>
  630.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  631.                 <p>Up Close</p>
  632.             </div>
  633.         </div>
  634.                                     <div class="d-flex col-lg col-6 px-2">
  635.                                         <div class="progress rounded-0 border-0 my-auto flex-fill d-flex flex-row" style="height: 3px; overflow: visible;">
  636.                                            
  637.                                             <div class="progress-bar bg-transparent" style="width: 50%;"></div>
  638.                                            
  639.                                         <div style="background: #9B32E9; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 15px; height: 13px; margin-top: -5px; margin-bottom: -5px; margin-left: -5px;"></div>
  640.                                         </div>
  641.                                     </div>
  642.         <br>
  643.  
  644.  
  645.   <!--BAR THREE-->
  646.         <div class="row no-gutters">
  647.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  648.                 <p>Team Player</p>
  649.             </div>
  650.             <div class="col px-1 pb-1"></div>
  651.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  652.                 <p>Loner</p>
  653.             </div>
  654.         </div>
  655.                                     <div class="d-flex col-lg col-6 px-2">
  656.                                         <div class="progress rounded-0 border-0 my-auto flex-fill d-flex flex-row" style="height: 3px; overflow: visible;">
  657.                                            
  658.                                             <div class="progress-bar bg-transparent" style="width: 50%;"></div>
  659.                                            
  660.                                         <div style="background: #9B32E9; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 15px; height: 13px; margin-top: -5px; margin-bottom: -5px; margin-left: -5px;"></div>
  661.                                         </div>
  662.                                     </div>
  663.         <br>
  664.  
  665.  
  666.   <!--BAR FOUR-->
  667.         <div class="row no-gutters">
  668.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  669.                 <p>Casual</p>
  670.             </div>
  671.             <div class="col px-1 pb-1"></div>
  672.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  673.                 <p>Competative</p>
  674.             </div>
  675.         </div>
  676.                                     <div class="d-flex col-lg col-6 px-2">
  677.                                         <div class="progress rounded-0 border-0 my-auto flex-fill d-flex flex-row" style="height: 3px; overflow: visible;">
  678.                                            
  679.                                             <div class="progress-bar bg-transparent" style="width: 50%;"></div>
  680.                                            
  681.                                         <div style="background: #9B32E9; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 15px; height: 13px; margin-top: -5px; margin-bottom: -5px; margin-left: -5px;"></div>
  682.                                         </div>
  683.                                     </div>
  684.         <br>
  685.  
  686.  
  687.   <!--BAR FIVE-->
  688.         <div class="row no-gutters">
  689.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  690.                 <p>Freshness</p>
  691.             </div>
  692.             <div class="col px-1 pb-1"></div>
  693.             <div class="col-auto" style="margin-bottom:5px; font-family:courier new; font-size: 18px;">
  694.                 <i class="fa-solid fa-star"></i>
  695.             </div>
  696.         </div>
  697.                                     <div class="d-flex col-lg col-6 px-2">
  698.                                         <div class="progress rounded-0 border-0 my-auto flex-fill d-flex flex-row" style="height: 3px; overflow: visible;">
  699.                                            
  700.                                             <div class="progress-bar bg-transparent" style="width: 50%;"></div>
  701.                                            
  702.                                         <div style="background: #9B32E9; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 15px; height: 13px; margin-top: -5px; margin-bottom: -5px; margin-left: -5px;"></div>
  703.                                         </div>
  704.                                     </div>
  705.            
  706.             </div>
  707.  
  708.             <hr class="flex-fill" style="background:#9B32E9; width: 60%;">
  709.            
  710.             <p style="font-size: 15px;font-family: courier new;">A lil description of them in action, how they fight, defend, etc</p>
  711.            
  712.                   </div>  
  713. </div>
  714.       </div>
  715.     </div>
  716.  
  717. <!-- END GEAR AND STATS -->
  718.              
  719.               </div>
  720.              
  721.               <div class="tab-pane fade show" id="tab4">
  722.              
  723.                    <div class="containerp-2" style="height: 370px;overflow: auto;border: 2px solid #9B32E9;">
  724. <div class="tab-content">
  725. <div class="cointainer p-3">
  726.            
  727.             <div class="justify-content-center">
  728.             <div class="card bg-faded"></div>
  729.             </div>
  730.            
  731.             <div class="accordion" id="expand">
  732.                
  733.                
  734.                 <!--
  735.                ==========================
  736.                
  737.                    Friend One
  738.                
  739.                ==========================
  740.                -->
  741.                 <div class="mb-2">
  742.                     <!-- ACCORDION TAB HEADER -->
  743.                     <div class="card border-2 border-bottom-0 p-2 px-4" style="font-size: 18px; background-color: black; border: 2px solid #9B32E9;">
  744.                         <a data-toggle="collapse" data-target="#one" aria-expanded="true">
  745.                             <div class="row no-gutters">
  746.  
  747.       <div class="col-auto p-1">
  748.          <div class="card" style="background:url(https://ih1.redbubble.net/image.826142181.8491/st,small,507x507-pad,600x600,f8f8f8.jpg); background-size: cover; border-radius: 50%; border: 3px solid #9B32E9; width: 65px; height: 65px;"></div>
  749.       </div>
  750.       <div class="col p-1">
  751.          <div class="p-3" style="color: white;font-family:courier new;font-size:20px">Name</div>
  752.       </div>
  753.       <div class="col-auto p-1 text-right">
  754.          <div class="p-3" style="color: white;font-family:courier new;font-size:20px">Online <i class="fa-solid fa-circle" style="color: #1CEA00"></i></div>
  755.       </div>
  756.    </div>
  757.  
  758.                         </a>
  759.                     </div>
  760.                    
  761.                     <!-- MAIN ACCORDION CONTENT -->
  762.                     <div id="one" class="collapse show mb-2" data-parent="#expand">
  763.                     <div  class="p-2" style="height: 150px; overflow: auto;">
  764.                        
  765.                        
  766.                                            <div class="row no-gutters">
  767.                         <div class="col-9 p-1"><i class="fa-solid fa-star"></i></div>
  768.                        
  769.                         <div class="col-3 p-1">
  770.                             <a class="btn bg-faded btn-block btn-outline-secondary p-1" style="border: 1px solid #9B32E9;background-color:#9B32E9;color:#EFEEE9; border-radius: 0rem;font-weight:400;font-size:15px;letter-spacing:0.5px;font-family:courier new;" href="LINKTOPROFILE">Profile</a
  771.                            ></div>
  772.                     </div>
  773.                         <hr class="flex-fill" style="background:#9B32E9;">
  774.                         <p style="font-family: courier new;">This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
  775.                        
  776.                     </div>
  777.                     </div>
  778.                 </div>
  779.                
  780.                 <!--
  781.                ==========================
  782.                
  783.                     Friend Two
  784.                
  785.                ==========================
  786.                -->
  787.                 <div class="mb-2">
  788.                     <!-- ACCORDION TAB HEADER -->
  789.                     <div class="card border-2 border-bottom-0 p-2 px-4" style="font-size: 18px; background-color: black; border: 2px solid #9B32E9;">
  790.                         <a data-toggle="collapse" data-target="#two" aria-expanded="true">
  791.                             <div class="row no-gutters">
  792.  
  793.       <div class="col-auto p-1">
  794.          <div class="card" style="background:url(https://ih1.redbubble.net/image.970251758.1883/st,small,507x507-pad,600x600,f8f8f8.jpg); background-size: cover; border-radius: 50%; border: 3px solid #9B32E9; width: 65px; height: 65px;"></div>
  795.       </div>
  796.       <div class="col p-1">
  797.          <div class="p-3" style="color: white;font-family:courier new;font-size:20px">Name</div>
  798.       </div>
  799.       <div class="col-auto p-1 text-right">
  800.          <div class="p-3" style="color: white;font-family:courier new;font-size:20px">Online <i class="fa-solid fa-circle" style="color: #1CEA00"></i></div>
  801.       </div>
  802.    </div>
  803.                            
  804.                         </a>
  805.                     </div>
  806.                    
  807.                     <!-- MAIN ACCORDION CONTENT -->
  808.                     <div id="two" class="collapse mb-2" data-parent="#expand">
  809.                     <div  class="p-2" style="height: 150px; overflow: auto;">
  810.                        
  811.                        
  812.                                            <div class="row no-gutters">
  813.                         <div class="col-9 p-1"><i class="fa-solid fa-star"></i></div>
  814.                        
  815.                         <div class="col-3 p-1">
  816.                             <a class="btn bg-faded btn-block btn-outline-secondary p-1" style="border: 1px solid #9B32E9;background-color:#9B32E9;color:#EFEEE9; border-radius: 0rem;font-weight:400;font-size:15px;letter-spacing:0.5px;font-family:courier new;" href="LINKTOPROFILE">Profile</a
  817.                            ></div>
  818.                     </div>
  819.                         <hr class="flex-fill" style="background:#9B32E9;">
  820.                         <p style="font-family: courier new;">This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
  821.                        
  822.                     </div>
  823.                     </div>
  824.                 </div>
  825.  
  826.                 <!--
  827.                ==========================
  828.                
  829.                       Friend Three
  830.                
  831.                ==========================
  832.                -->
  833.                 <div class="mb-2">
  834.                     <!-- ACCORDION TAB HEADER -->
  835.                     <div class="card border-2 border-bottom-0 p-2 px-4" style="font-size: 18px; background-color: black; border: 2px solid #9B32E9;">
  836.                         <a data-toggle="collapse" data-target="#three" aria-expanded="true">
  837.                             <div class="row no-gutters">
  838.  
  839.       <div class="col-auto p-1">
  840.          <div class="card" style="background:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-JioWDn59tJzSwD4e93WNKvr1df-p1VCIutm2yPj2Ifpqr6fRid-JUpxxTSBxujVFsDI&usqp=CAU); background-size: cover; border-radius: 50%; border: 3px solid #9B32E9; width: 65px; height: 65px;"></div>
  841.       </div>
  842.       <div class="col p-1">
  843.          <div class="p-3" style="color: white;font-family:courier new;font-size:20px">Name</div>
  844.       </div>
  845.       <div class="col-auto p-1 text-right">
  846.          <div class="p-3" style="color: white;font-family:courier new;font-size:20px">Offline <i class="fa-solid fa-circle" style="color: white"></i></div>
  847.       </div>
  848.    </div>
  849.  
  850.                         </a>
  851.                     </div>
  852.                    
  853.                     <!-- MAIN ACCORDION CONTENT -->
  854.                     <div id="three" class="collapse mb-2" data-parent="#expand">
  855.                     <div  class="p-2" style="height: 150px; overflow: auto;">
  856.                        
  857.                        
  858.                                            <div class="row no-gutters">
  859.                         <div class="col-9 p-1"><i class="fa-solid fa-star"></i></div>
  860.                        
  861.                         <div class="col-3 p-1">
  862.                             <a class="btn bg-faded btn-block btn-outline-secondary p-1" style="border: 1px solid #9B32E9;background-color:#9B32E9;color:#EFEEE9; border-radius: 0rem;font-weight:400;font-size:15px;letter-spacing:0.5px;font-family:courier new;" href="LINKTOPROFILE">Profile</a
  863.                            ></div>
  864.                     </div>
  865.                         <hr class="flex-fill" style="background:#9B32E9;">
  866.                         <p style="font-family: courier new;">This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
  867.                        
  868.                     </div>
  869.                     </div>
  870.                 </div>
  871.                
  872.                 <!--
  873.                ==========================
  874.                
  875.                       Friend Four
  876.                
  877.                ==========================
  878.                -->
  879.                 <div>
  880.                     <!-- ACCORDION TAB HEADER -->
  881.                     <div class="card border-2 border-bottom-0 p-2 px-4" style="font-size: 18px; background-color: black; border: 2px solid #9B32E9;">
  882.                         <a data-toggle="collapse" data-target="#four" aria-expanded="true">
  883.                             <div class="row no-gutters">
  884.  
  885.       <div class="col-auto p-1">
  886.          <div class="card" style="background:url(https://i.imgflip.com/4z2we8.jpg); background-size: cover; border-radius: 50%; border: 3px solid #9B32E9; width: 65px; height: 65px;"></div>
  887.       </div>
  888.       <div class="col p-1">
  889.          <div class="p-3" style="color: white;font-family:courier new;font-size:20px">Name</div>
  890.       </div>
  891.       <div class="col-auto p-1 text-right">
  892.          <div class="p-3" style="color: white;font-family:courier new;font-size:20px">Offline <i class="fa-solid fa-circle" style="color: white"></i></div>
  893.       </div>
  894.    </div>
  895.    
  896.                         </a>
  897.                     </div>
  898.                    
  899.                     <!-- MAIN ACCORDION CONTENT -->
  900.                     <div id="four" class="collapse mb-2" data-parent="#expand">
  901.                     <div  class="p-2" style="height: 150px; overflow: auto;">
  902.                        
  903.                        
  904.                                            <div class="row no-gutters">
  905.                         <div class="col-9 p-1"><i class="fa-solid fa-star"></i></div>
  906.                        
  907.                         <div class="col-3 p-1">
  908.                             <a class="btn bg-faded btn-block btn-outline-secondary p-1" style="border: 1px solid #9B32E9;background-color:#9B32E9;color:#EFEEE9; border-radius: 0rem;font-weight:400;font-size:15px;letter-spacing:0.5px;font-family:courier new;" href="LINKTOPROFILE">Profile</a
  909.                            ></div>
  910.                     </div>
  911.                         <hr class="flex-fill" style="background:#9B32E9;">
  912.                         <p style="font-family: courier new;">This box will scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
  913.                        
  914.                     </div>
  915.                     </div>
  916.                 </div>
  917.                 <!-- Add more friends above here -->
  918.                
  919.             </div>
  920.        
  921.  
  922.       </div>
  923.     </div>
  924.     </div>
  925.              
  926.               </div>
  927.  
  928.         </div>
  929.         </div>
  930.  
  931.  
  932.        </div>
  933.        </div>
  934. </div>
  935. </div>
  936.  
  937. <!--CREDIT - DO NOT REMOVE-->
  938.      <p class="text-center">
  939.        <a href="/GLITCH-DXCTOR" style="color: #9B32E9" class="tooltipster" title="Code by GLITCH-DXCTOR, Edited by PandoraLights"
  940.       ><i class="fal fa-syringe"></i>
  941.        </a>
  942.        </p>
Advertisement
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!