API tools faq
paste
PandoraLights

Sploon

PandoraLights
Mar 4th, 2022
1,237
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 51.03 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.          
  3.    【F2U】 01.Operator ++
  4.    
  5.      // Code by Leporidactic
  6.      // Arknights © Hypergryph/Yostar
  7.  
  8.      ////////////////// Rules ///////////////////
  9.      
  10.      Do not redistribute this template
  11.      Please keep the credit somewhere visible
  12.      Feel free to change everything else to your liking
  13.      // Thank you for using this template. //
  14.      
  15.      // Notes //
  16.      // Long as ever, try to be careful about the divs,
  17.      // can get messy when you accidentally delete one
  18.      // Please let me know if there are any bugs
  19.      // Don't be afraid to ask for help!
  20.      
  21. -->
  22.  
  23. <!---- MAIN BACKGROUND ---->
  24. <div class="container-fluid mx-auto my-md-4 no-gutters bg-dark" style="height:600px;width:1000px;
  25.    background-image:url(https://pbs.twimg.com/media/ErpLBFrXYAE4LJ0.png);
  26.    background-size:cover;
  27.    background-position:center;">
  28.    
  29.     <!---- MAIN IMAGES ---->
  30.     <!---- faction logo should be square ---->
  31.     <!---- for best quality for character image, resolution should be least 600px * 1000px ---->
  32.    
  33.     <div class="container-fluid p-0" style="height:600px;width:1000px;overflow:hidden;">
  34.         <img src="https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png" style="height:250px;width:auto;position:absolute;left:0px;top:10px;opacity:.7;">
  35.         <div class="text-center my-auto" style="height:600px;width:1000px;
  36.        background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  37.        background-size:contain;
  38.        background-repeat:no-repeat;
  39.        position:absolute;left:0px;
  40.        ">
  41.         </div>
  42.        
  43.         <!---- NAVIGATION BAR ---->
  44.         <!---- it's possible to add more ---->
  45.         <div class="row no-gutters" style="position:absolute;top:5px;">
  46.             <div class="col-6">
  47.                 <ul class="nav nav-pills nav-justified pt-2 mx-2 mb-0">
  48.                 <!---- CREDIT ---- DO NOT DELETE ------>
  49.                 <li class="nav-item mr-1">
  50.                 <a class="border-0 nav-link text-white" style="background-color:rgba(0,0,0,.8);border-radius:0em;box-shadow:0 0 5px rgba(0,0,0,.6);" class="tooltipster" title="code by Leporidactic" href="https://toyhou.se/14421915">
  51.                     <i class="fal fa-chevron-left"></i>
  52.                 </a></li>
  53.                
  54.                 <!---- TAB ONE ---->
  55.                 <!---- has wider button ---->
  56.                 <li class="nav-item mr-1">
  57.                 <a class="border-0 nav-link text-white" style="background-color:rgba(0,0,0,.8);border-radius:0em;width:150px;box-shadow:0 0 5px rgba(0,0,0,.6);" data-toggle="tab" href="#ONE">
  58.                     <i class="fas fa-house"></i>
  59.                 </a></li>
  60.                
  61.                 <!---- TAB TWO ---->
  62.                 <!---- has narrower button, if you would like to add more tabs, it's recommended to
  63.                ------ copy and paste this block ---->
  64.                 <li class="nav-item">
  65.                 <a class="border-0 nav-link text-white" style="background-color:#000;border-radius: 0.0em;width:100px;box-shadow:0 0 5px rgba(0,0,0,.6);" data-toggle="tab" href="#TWO">
  66.                     <i class="fas fa-diagram-project"></i>
  67.                 </a></li>
  68.                
  69.                 <!---- TAB THREE ---->
  70.                 <li class="nav-item">
  71.                 <a class="border-0 nav-link text-white" style="background-color:rgba(0,0,0,.8);border-radius:0em;width:100px;box-shadow:0 0 5px rgba(0,0,0,.6);" data-toggle="tab" href="#THREE">
  72.                     <i class="fas fa-clothes-hanger"></i>
  73.                 </a></li>
  74.                
  75.                 </ul>
  76.             </div>
  77.         </div>
  78.        
  79.         <!----- TABS ----->
  80.          <div class="tab-content px-2" style="position:absolute;top:50px;height:600px;width:1000px;">
  81.            
  82.            <!---- ONE -- BASICS & COMBAT -->
  83.             <div class="tab-pane fade in show active" id="ONE">
  84.                 <div class="row no-gutters">
  85.                    
  86.                     <!---- LEFT COLUMN ---->
  87.                     <div class="col-5">
  88.                         <div class="card rounded-0 border-0" style="background:transparent;height:150px;width:480px;position:relative;top:230px;">
  89.                             <div style="color: white;text-shadow: 2px 2px 4px #6a6a6a;">
  90.                                 <!---- RARITY ---->
  91.                                 <!---- delete icons for operators of lower rarities ---->
  92.                                 <div style="font-size:1.2rem;letter-spacing:-2px;">
  93.                                     <i class="fas fa-star"></i>
  94.                                     <i class="fas fa-star"></i>
  95.                                     <i class="fas fa-star"></i>
  96.                                     <i class="fas fa-star"></i>
  97.                                     <i class="fas fa-star"></i>
  98.                                     <i class="fas fa-star"></i>
  99.                                 </div>
  100.                                
  101.                                 <!---- NAME ---->
  102.                                 <h1 class="text-uppercase mb-1" style="font-family:'helvetica';font-size:2.5rem;font-weight:bold;letter-spacing:-2px;">
  103.                                     Operator Name Here
  104.                                 </h1>
  105.                             </div>
  106.                            
  107.                             <!---- CLASS ---->
  108.                             <!---- use square image for class logos ---->
  109.                             <div class="row no-gutters">
  110.                                 <div class="card mr-1" style="height:90px;width:90px;background-color:rgba(0,0,0,.6);">
  111.                                     <img src="https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png" class="mx-auto my-auto" style="max-height:80px;max-width:80px;">
  112.                                 </div>
  113.                                
  114.                                 <!---- range ---->
  115.                                 <div class="text-white text-center">
  116.                                 <div class="card mr-1" style="width:200px;background-color:rgba(0,0,0,.6);">
  117.                                     Melee or Ranged
  118.                                 </div>
  119.  
  120.                                 <!---- tags --->
  121.                                 <div class="card mt-1 justify-content-center" style="height:63px;width:200px;background-color:rgba(0,0,0,.6);overflow-y:auto;overflow-x:hidden">
  122.                                     Tag Tag Tag
  123.                                 </div>
  124.                                 </div>
  125.  
  126.                
  127.  
  128.   <img src="https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png" style="height:140px;width:220;position:absolute;left:23px;top:175px;">
  129.  
  130.     <img src="https://cdn-icons-png.flaticon.com/512/17/17550.png" style="height:50px;width:50;position:absolute;left:125px;top:220px;opacity:0.9;">
  131.  
  132.                                                                 <!--
  133.                → replace [ ElkuSVwNx_o ] with your youtube id (found after https://www.youtube.com/watch?v=)
  134.                → keep the [ ?controls=0 ] at the end for a nicer preformance !!
  135.                -->
  136.                 <iframe class="w-80" frameborder="0"
  137.                
  138.                
  139.                src="https://www.youtube.com/embed/EFU_LIzIfyw?controls=0"
  140.                
  141.                
  142.                style="height:130px; position:absolute; top:180px; left:0;opacity:0.0001;"></iframe>
  143.                             </div>
  144.                         </div>
  145.                     </div>
  146.                    
  147.                     <!---- RIGHT COLUMN ---->
  148.                     <div class="col-6">
  149.                         <div class="card p-2 mr-2 pull-right rounded-0 border-0" style="width:330px;height:560px;background-color:#222;color:#fff;box-shadow:0 0 5px rgba(0,0,0,.6);position:absolute;top:-35px;right:-60px;overflow-x:hidden;overflow-y:auto;">
  150.                        
  151.                         <!---- brief description ---->
  152.                         <p class="p-2 mb-0">A short, one-to-two sentence overview of the Operator.</p>
  153.                         <!---- quote on operator ---->
  154.                         <p class="p-3 mb-2 rounded" style="background-color:rgba(0,0,0,.6);opacity:.8;font-size:.7rem;">
  155.                             <i>"A quote."</i>
  156.                         </p>
  157.                        
  158.                         <!---- divider ---->
  159.                         <hr class="my-1">
  160.                        
  161.                         <!---- class branch ---->
  162.                         <!---- use square image ---->
  163.                         <div class="row mx-auto">
  164.                             <div class="col-6 px-2">
  165.                             <div class="card mx-auto" style="height:80px;width:80px;background-color:transparent;
  166.                                background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  167.                                background-size:cover;
  168.                                background-position:center;
  169.                            "></div>
  170.                             </div>
  171.                             <div class="col-6 px-3">
  172.                                 <p class="mt-2 mb-0" style="opacity:.8;font-size:1rem;">Weapon</p>
  173.                                 <p>Model</p>
  174.                             </div>
  175.                         </div>
  176.                        
  177.                         <!---- branch trait ---->
  178.                         <div class="px-2 pt-1" style="font-family:'helvetica';font-size:1rem;">
  179.                             <span><i class="fa-solid fa-circle-small"></i></span>
  180.                             <b>First Weapon</b>
  181.                         </div>
  182.                         <p class="my-0 px-2" style="opacity:.8">
  183.                          
  184.                             Any lore regarding said weapon.
  185.                            
  186.                         </p>
  187.                        
  188.                         <!---- divider ---->
  189.                         <hr class="my-3">
  190.                        
  191.                         <!---- use square image ---->
  192.                         <div class="row mx-auto">
  193.                             <div class="col-6 px-2">
  194.                             <div class="card mx-auto" style="height:80px;width:80px;background-color:transparent;
  195.                                background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  196.                                background-size:cover;
  197.                                background-position:center;
  198.                            "></div>
  199.                             </div>
  200.                             <div class="col-6 px-3">
  201.                                 <p class="mt-2 mb-0" style="opacity:.8;font-size:1rem;">Weapon</p>
  202.                                 <p>Model</p>
  203.                             </div>
  204.                         </div>
  205.                        
  206.                         <!---- branch trait ---->
  207.                         <div class="px-2 pt-1" style="font-family:'helvetica';font-size:1rem;">
  208.                             <span><i class="fa-solid fa-circle-small"></i></span>
  209.                             <b>Second Weapon</b>
  210.                         </div>
  211.                         <p class="my-0 px-2" style="opacity:.8">
  212.                          
  213.                             Any lore regarding said weapon.
  214.                            
  215.                         </p>
  216.                        
  217.                         <!---- add more talent blocks here ---->
  218.                        
  219.                         <!---- divider ---->
  220.                         <hr class="my-1">
  221.                        
  222.                         <!---- skill icons ---->
  223.                         <div class="px-2 pt-1" style="font-family:'helvetica';font-size:1rem;">
  224.                             <span><i class="fal fa-sword" style="font-size:1rem;"></i></span>
  225.                             <b>Abilities</b>
  226.                         </div>
  227.                         <ul class="nav justify-content-center mt-2">
  228.                           <!---- SKILL ONE ---->
  229.                             <li class="nav-item mx-1">
  230.                                 <a class="nav-link btn border-0" href="#SKONE" data-toggle="tab" style="height:80px;width:80px;background-color:#fff;
  231.                                background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  232.                                background-size:cover;
  233.                                background-position:center;"></a>
  234.                             </li>
  235.                          
  236.                           <!---- SKILL TWO -- replace with EMPTY SLOT if not needed -->
  237.                             <li class="nav-item mx-1">
  238.                                 <a class="nav-link btn border-0" href="#SKTWO" data-toggle="tab" style="height:80px;width:80px;background-color:#fff;
  239.                                background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  240.                                background-size:cover;
  241.                                background-position:center;"></a>
  242.                             </li>
  243.                          
  244.                            <!---- SKILL TWO -- replace with EMPTY SLOT if not needed -->
  245.                             <li class="nav-item mx-1">
  246.                                 <a class="nav-link btn border-0" href="#SKTHREE" data-toggle="tab" style="height:80px;width:80px;background-color:#fff;
  247.                                background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  248.                                background-size:cover;
  249.                                background-position:center;"></a>
  250.                             </li>
  251.                          
  252.                         </ul>
  253.                        
  254.                         <!---- skill descriptions ---->
  255.                         <div class="card my-2 mx-auto rounded-0 border-0 p-1" style="width:260px;background:rgba(0,0,0,.6);">
  256.                             <div class="tab-content">
  257.  
  258.                             <!---- SKILL ONE ---->
  259.                             <!---- example shows auto SP recovery skill ---->
  260.                             <!---- change background color to #ed7b24 for offensive SP recovery ---->
  261.                             <div class="tab-pane show in active p-1" id="SKONE">
  262.                                 <h4 class="justify-content-between">
  263.                                     Skill 1
  264.                                     </span>
  265.                                 </h4>
  266.                                 <p>
  267.                                  
  268.                                   Description. A <span style="color:#42b3f5">highlight</span> looks like this.
  269.                                  
  270.                                 </p>
  271.                                
  272.                                 <!---- if skill range changes, add the card block here ---->
  273.                                
  274.                             </div>
  275.                            
  276.                             <!---- SKILL TWO ---->
  277.                             <!---- example shows offensive SP recovery skill ---->
  278.                             <!---- change background color to #7fc963 for auto SP recovery ---->
  279.                             <div class="tab-pane p-1" id="SKTWO">
  280.                                 <h4 class="justify-content-between">
  281.                                     Skill 2
  282.                                 </h4>
  283.                                 <p>
  284.                                  
  285.                                   Description. A <span style="color:#42b3f5">highlight</span> looks like this.
  286.                                
  287.                                 </p>
  288.                                
  289.                                 <!---- if skill range changes, add the card block here ---->
  290.                                
  291.                             </div>
  292.                            
  293.                                                        <!---- SKILL THREE ---->
  294.                             <!---- example shows offensive SP recovery skill ---->
  295.                             <!---- change background color to #7fc963 for auto SP recovery ---->
  296.                             <div class="tab-pane p-1" id="SKTHREE">
  297.                                 <h4 class="justify-content-between">
  298.                                     Skill 3
  299.                                 </h4>
  300.                                 <p>
  301.                                  
  302.                                   Description. A <span style="color:#42b3f5">highlight</span> looks like this.
  303.                                
  304.                                 </p>
  305.                                
  306.                                 <!---- if skill range changes, add the card block here ---->
  307.                                
  308.                             </div>
  309.                            
  310.                             <!---- copy and paste either block above for 6-star operators ---->
  311.                             <!---- remember to CHANGE id to SKTHREE or something you can recognize! ---->
  312.                            
  313.                         </div>
  314.                         </div>
  315.                        <div class="px-2 pt-1" style="font-family:'helvetica';font-size:1rem;">
  316.                             <span><i class="fal fa-star" style="font-size:1rem;"></i></span>
  317.                             <b>Favourite Maps</b>
  318.                         </div>
  319. <p class="mt-2 mb-2" style="opacity:.8;font-size:1rem;text-align:center;">Regular Battle</p>
  320.                         <!---- use square image ---->
  321.                         <div class="row mx-auto">
  322.                             <div class="col-12 px-2">
  323.                             <div class="card mx-auto" style="height:150px;width:250px;background-color:transparent;
  324.                                background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  325.                                background-size:cover;
  326.                                background-position:center;
  327.                            "></div>
  328.                             </div>
  329.                         </div>
  330.  
  331. <p class="mt-2 mb-2" style="opacity:.8;font-size:1rem;text-align:center;">Ranked Battle</p>
  332.                         <!---- use square image ---->
  333.                         <div class="row mx-auto">
  334.                             <div class="col-12 px-2">
  335.                             <div class="card mx-auto" style="height:150px;width:250px;background-color:transparent;
  336.                                background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  337.                                background-size:cover;
  338.                                background-position:center;
  339.                            "></div>
  340.                             </div>
  341.                         </div>
  342.  
  343. <p class="mt-2 mb-2" style="opacity:.8;font-size:1rem;text-align:center;">League Battle</p>
  344.                         <!---- use square image ---->
  345.                         <div class="row mx-auto">
  346.                             <div class="col-12 px-2">
  347.                             <div class="card mx-auto" style="height:150px;width:250px;background-color:transparent;
  348.                                background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  349.                                background-size:cover;
  350.                                background-position:center;
  351.                            "></div>
  352.                             </div>
  353.                         </div>
  354.  
  355. <p class="mt-2 mb-2" style="opacity:.8;font-size:1rem;text-align:center;">Salmon Run</p>
  356.                         <!---- use square image ---->
  357.                         <div class="row mx-auto">
  358.                             <div class="col-12 px-2">
  359.                             <div class="card mx-auto" style="height:150px;width:250px;background-color:transparent;
  360.                                background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  361.                                background-size:cover;
  362.                                background-position:center;
  363.                            "></div>
  364.                             </div>
  365.                         </div>
  366.  
  367. <!--- end of fave maps --->
  368.                         </div>
  369.                     </div>
  370.                 </div>
  371.             </div>
  372.            
  373.            
  374.             <!---- TWO -- MORE INFO -->
  375.             <div class="tab-pane fade in" id="TWO">
  376.                 <div class="row no-gutters">
  377.                    
  378.                     <!---- RIGHT COLUMN ---->
  379.                     <div class="col-6 order-2">
  380.                         <!----- DO NOT ADD MORE ACCORDION TABS --- goes out of container's range ---->
  381.                         <div class="accordion" id="accordion" style="position:absolute;top:-35px;right:-60px;">
  382.                             <div class="card mr-2 pull-right rounded-0 border-0" style="width:330px;background-color:#f7f7f7;box-shadow:0 0 5px rgba(0,0,0,.6);color:#000;">
  383.                                
  384.                                 <!----- BASIC INFO ---->
  385.                                 <div id="headingOne" style="background-color:#222;">
  386.                                     <h4 class="mb-0 p-2" style="font-size:1rem;">
  387.                                     <a class="text-white border-0 w-100" href="" style="background:transparent;text-decoration:none;display:block;" data-toggle="collapse" data-target="#basic" aria-expanded="true">
  388.                                     <i class="fas fa-circle-info"></i>
  389.                                     Basic Info
  390.                                     </a>
  391.                                     </h4>
  392.                                 </div>
  393.                                 <div id="basic" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
  394.                                     <div class="container p-2 mb-2" style="background:transparent;max-height:300px;overflow:auto;">
  395.                                     <div class="row no-gutters">
  396.                                        
  397.                                         <div class="col-6">[Gender]</div>
  398.                                         <div class="col-6 text-right">content</div>
  399.                                        
  400.                                         <div class="col-6">[Pronouns]</div>
  401.                                         <div class="col-6 text-right">content</div>
  402.                                        
  403.                                         <div class="col-6">[Date of Birth]</div>
  404.                                         <div class="col-6 text-right">content</div>
  405.                                        
  406.                                         <div class="col-6">[Race]</div>
  407.                                         <div class="col-6 text-right">content</div>
  408.                                        
  409.                                         <div class="col-6">[Height]</div>
  410.                                         <div class="col-6 text-right">content</div>
  411.                                        
  412.                                         <div class="col-6">[Status]</div>
  413.                                         <div class="col-6 text-right">content</div>
  414.                                     </div>
  415.                                     </div>
  416.                                 </div>
  417.                                                                 <!---- PROFILE ---->
  418.                                 <div id="headingThree" style="background-color:#222;">
  419.                                     <h4 class="mb-0 p-2" style="font-size:1rem;">
  420.                                     <a class="text-white border-0 w-100" href="" style="background:transparent;text-decoration:none;display:block" data-toggle="collapse" data-target="#profile" aria-expanded="true">
  421.                                     <i class="fas fa-clipboard-user"></i>
  422.                                     Profile
  423.                                     </a>
  424.                                     </h4>
  425.                                 </div>
  426.                                 <div id="profile" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
  427.                                     <div class="container p-2 mb-2" style="background:transparent;max-height:300px;overflow:auto;">
  428.                                         Profile goes here. 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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  429.                                     </div>
  430.                                 </div>
  431.                                
  432.                                 <!---- PHYSICAL EXAMINATION ---->
  433.                                 <div id="headingTwo" style="background-color:#222;">
  434.                                     <h4 class="mb-0 p-2" style="font-size:1rem;">
  435.                                     <a class="text-white border-0 w-100" href="" style="background:transparent;text-decoration:none;display:block" data-toggle="collapse" data-target="#physic" aria-expanded="true">
  436.                                     <i class="fa-solid fa-brain-circuit"></i>
  437.                                     Psychological Examination
  438.                                     </a>
  439.                                     </h4>
  440.                                 </div>
  441.                                 <div id="physic" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
  442.                                     <div class="container p-2 mb-2" style="background:transparent;max-height:300px;overflow:auto;">
  443.                     <!-- Traits Sliders -->
  444.                     <!-- Trait 1 -->
  445.                     <div class="row no-gutters align-items-center">
  446.                       <div class="col">
  447.                         <span>
  448.                         Talkative
  449.                         </span>
  450.                       </div>
  451.                       <div class="col text-right">
  452.                         <span>
  453.                         Silent
  454.                         </span>
  455.                       </div>
  456.                       <div class="col-12">
  457.                         <div class="progress" style="background:#757575;">
  458.                           <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%; background:none; border-right:7px solid #131313; height:7px;"></div>
  459.                         </div>
  460.                       </div>
  461.                     </div>
  462.                     <!-- Trait 2 -->
  463.                     <div class="row no-gutters align-items-center">
  464.                       <div class="col">
  465.                         <span>
  466.                         Daring
  467.                         </span>
  468.                       </div>
  469.                       <div class="col text-right">
  470.                         <span>
  471.                         Cautious
  472.                         </span>
  473.                       </div>
  474.                       <div class="col-12">
  475.                         <div class="progress" style="background:#757575;">
  476.                           <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%; background:none; border-right:7px solid #131313; height:7px;"></div>
  477.                         </div>
  478.                       </div>
  479.                     </div>
  480.                     <!-- Trait 3 -->
  481.                     <div class="row no-gutters align-items-center">
  482.                       <div class="col">
  483.                         <span>
  484.                         Polite
  485.                         </span>
  486.                       </div>
  487.                       <div class="col text-right">
  488.                         <span>
  489.                         Rude
  490.                         </span>
  491.                       </div>
  492.                       <div class="col-12">
  493.                         <div class="progress" style="background:#757575;">
  494.                           <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%; background:none; border-right:7px solid #131313; height:7px;"></div>
  495.                         </div>
  496.                       </div>
  497.                     </div>
  498.                     <!-- Trait 4 -->
  499.                     <div class="row no-gutters align-items-center">
  500.                       <div class="col">
  501.                         <span>
  502.                         Honest
  503.                         </span>
  504.                       </div>
  505.                       <div class="col text-right">
  506.                         <span>
  507.                         Dishonest
  508.                         </span>
  509.                       </div>
  510.                       <div class="col-12">
  511.                         <div class="progress" style="background:#757575;">
  512.                           <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%; background:none; border-right:7px solid #131313; height:7px;"></div>
  513.                         </div>
  514.                       </div>
  515.                     </div>
  516.                     <!-- Trait 5 -->
  517.                     <div class="row no-gutters align-items-center">
  518.                       <div class="col">
  519.                         <span>
  520.                         Reliable
  521.                         </span>
  522.                       </div>
  523.                       <div class="col text-right">
  524.                         <span>
  525.                         Irregular
  526.                         </span>
  527.                       </div>
  528.                       <div class="col-12">
  529.                         <div class="progress" style="background:#757575;">
  530.                           <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%; background:none; border-right:7px solid #131313; height:7px;"></div>
  531.                         </div>
  532.                       </div>
  533.                     </div>
  534.                                     </div>
  535.                                 </div>
  536.                                
  537.  
  538.                                 <!---- CLINICAL ANALYSIS ---->
  539.                                 <div id="headingFour" style="background-color:#222;">
  540.                                     <h4 class="mb-0 p-2" style="font-size:1rem;">
  541.                                     <a class="text-white border-0 w-100" href="" style="background:transparent;text-decoration:none;display:block;" data-toggle="collapse" data-target="#analysis" aria-expanded="true">
  542.                                     <i class="fas fa-heartbeat"></i>
  543.                                     Physical Analysis
  544.                                     </a>
  545.                                     </h4>
  546.                                 </div>
  547.                                 <div id="analysis" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
  548.                                   <!---- overview ---->
  549.                                     <div class="container p-2 mb-2" style="background:transparent;max-height:300px;overflow:auto;">
  550.                                   <!---- cell originium assimilation % --->
  551.                                     <p class="p-1 my-0 rounded text-white justify-content-between" style="background-color:rgba(0,0,0,.6);opacity:.8;">
  552.                                     Physical Stature
  553.                                     <span></span>
  554.                                     </p>
  555.                                    
  556.                                     <p class="my-2">
  557.                                       Detailed comments. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  558.                                     </p>
  559.                                    
  560.                                   <!---- blood crystal % --->
  561.                                     <p class="p-1 my-0 rounded text-white justify-content-between" style="background-color:rgba(0,0,0,.6);opacity:.8;">
  562.                                     Injuries
  563.                                     <span></span>
  564.                                     </p>
  565.                                    
  566.                                     <p class="my-2">Detailed comments. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
  567.                                    
  568.                                   <!---- additional remarks, delete if not needed ---->
  569.                                     <p class="p-2 rounded text-white" style="background-color:rgba(0,0,0,.6);opacity:.8;">
  570.                                         Any additional comments. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  571.                                     </p>
  572.                                   <!---- remark ends ---->
  573.                                     </div>
  574.                                 </div>
  575.                                    
  576.                                    
  577.                                 <!---- Scrolls ---->
  578.                                 <div id="headingFive" style="background-color:#222;">
  579.                                     <h4 class="mb-0 p-2" style="font-size:1rem;">
  580.                                     <a class="text-white border-0 w-100" href="" style="background:transparent;text-decoration:none;display:block;" data-toggle="collapse" data-target="#Scrolls" aria-expanded="true">
  581.                                     <i class="fa-solid fa-scroll-old"></i>
  582.                                     Sunken Scrolls
  583.                                     </a>
  584.                                     </h4>
  585.                                 </div>
  586.                                 <div id="Scrolls" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
  587.                                   <div class="container p-2 mb-2" style="background:transparent;max-height:300px;overflow:auto;">
  588.                                    
  589.                                   <!----- file block ---->
  590.                                     <p class="p-1 my-1 rounded text-white justify-content-between" style="background-color:rgba(0,0,0,.6);opacity:.8;">
  591.                                     Scrolls File 1
  592.                                     </p>
  593.                                     <p>Scrolls goes here. 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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  594.                                   <!--- line break --->
  595.                                     <br>
  596.                                   <!--- file block ends ---->
  597.                                  
  598.                                   <!----- file block ---->
  599.                                     <p class="p-1 my-1 rounded text-white justify-content-between" style="background-color:rgba(0,0,0,.6);opacity:.8;">
  600.                                     Scrolls File 2
  601.                                     </p>
  602.                                     <p>Scrolls goes here. 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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  603.                                     <br>
  604.                                   <!--- file block ends ---->
  605.                                    
  606.                                   <!--- file block ---->
  607.                                     <p class="p-1 my-1 rounded text-white justify-content-between" style="background-color:rgba(0,0,0,.6);opacity:.8;">
  608.                                     Scrolls File 3
  609.                                     </p>
  610.                                     <p>Scrolls goes here. 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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  611.                                     <br>
  612.                                   <!--- file block ends ---->
  613.                                    
  614.                                   <!---- add more here ---->
  615.                                    
  616.                                   </div>
  617.                                 </div>
  618.                                
  619.                                                                 <!---- warcrimes ---->
  620.                                 <div id="headingFive" style="background-color:#222;">
  621.                                     <h4 class="mb-0 p-2" style="font-size:1rem;">
  622.                                     <a class="text-white border-0 w-100" href="" style="background:transparent;text-decoration:none;display:block;" data-toggle="collapse" data-target="#warcrimes" aria-expanded="true">
  623.                                     <i class="fa-solid fa-crosshairs"></i>
  624.                                     Warcrimes
  625.                                     </a>
  626.                                     </h4>
  627.                                 </div>
  628.                                 <div id="warcrimes" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
  629.                                   <div class="container p-2 mb-2" style="background:transparent;max-height:300px;overflow:auto;">
  630.  
  631.  <ul>
  632.      
  633.      <li>Warcrimes let's go</li>
  634.      
  635.  </ul>
  636.                                    
  637.                                   </div>
  638.                                 </div>
  639.                                
  640.                                 </div>
  641.                             </div>
  642.                         </div>
  643.                        
  644.                         <!---- LEFT COLUMN ---- relationship info ---->
  645.                         <div class="col-5 order-1">
  646.                         <div class="card rounded-0 border-0" style="background:transparent;height:160px;width:480px;position:relative;top:360px;">
  647.                                 <p class="text-uppercase" style="background-color:transparent;font-weight:bold;color:#fff;text-shadow:0 0 5px #000;">
  648.                                     <span><i class="fas fa-users"></i></span>
  649.                                     Connections</p>
  650.                                
  651.                                 <div class="card rounded-0 border-0 p-2 text-white" style="background-color:#222;box-shadow:0 0 5px rgba(0,0,0,.6);height:160px;overflow-y:auto;overflow-x:hidden;">
  652.                                   <ul class="nav justify-content-between mt-2">
  653.                                     <!---- CHARACTER ONE ---->
  654.                                     <li class="nav-item mx-1">
  655.                                       <a class="nav-link btn border-0" href="#CHARONE" data-toggle="tab" style="height:80px;width:80px;background-color:#000;
  656.                                        background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  657.                                        background-size:cover;
  658.                                        background-position:center;"></a>
  659.                                     </li>
  660.                                    
  661.                                     <!---- CHARACTER TWO ---->
  662.                                     <li class="nav-item mx-1">
  663.                                       <a class="nav-link btn border-0" href="#CHARTWO" data-toggle="tab" style="height:80px;width:80px;background-color:#000;
  664.                                        background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  665.                                        background-size:cover;
  666.                                        background-position:center;"></a>
  667.                                     </li>
  668.                                    
  669.                                     <!---- CHARACTER THREE ---->
  670.                                     <li class="nav-item mx-1">
  671.                                       <a class="nav-link btn border-0" href="#CHARTHREE" data-toggle="tab" style="height:80px;width:80px;background-color:#000;
  672.                                        background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  673.                                        background-size:cover;
  674.                                        background-position:center;"></a>
  675.                                     </li>
  676.                                    
  677.                                     <!---- CHARACTER FOUR ---->
  678.                                     <li class="nav-item mx-1">
  679.                                       <a class="nav-link btn border-0" href="#CHARFOUR" data-toggle="tab" style="height:80px;width:80px;background-color:#000;
  680.                                        background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  681.                                        background-size:cover;
  682.                                        background-position:center;"></a>
  683.                                     </li>
  684.                                    
  685.                                   </ul>
  686.                                  
  687.                                   <!---- add another row of characters here ---->
  688.                                  
  689.                                   <!---- details ---->
  690.                                   <div class="tab-content">
  691.                                       <!---- info block ---->
  692.                                       <div class="tab-pane fade in show active" id="CHARONE">
  693.                                         <div class="container p-2">
  694.                                           <!--- link to character TH profile --->
  695.                                           <a href="link character" class="text-uppercase" style="text-decoration:none;color:#999;"><b>Name</b></a>
  696.                                           <br>
  697.                                           Write about the characters' relationship. 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.
  698.                                         </div>
  699.                                       </div>
  700.                                       <!---- info block ends ---->
  701.                                      
  702.                                       <div class="tab-pane fade in" id="CHARTWO">
  703.                                         <div class="container p-2">
  704.                                           <a href="link character" class="text-uppercase" style="text-decoration:none;color:#999;"><b>Name</b></a>
  705.                                           <br>
  706.                                           Write about the characters' relationship. 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.
  707.                                         </div>
  708.                                       </div>
  709.                                      
  710.                                       <div class="tab-pane fade in" id="CHARTHREE">
  711.                                         <div class="container p-2">
  712.                                           <a href="link character" class="text-uppercase" style="text-decoration:none;color:#999;"><b>Name</b></a>
  713.                                           <br>
  714.                                           Write about the characters' relationship. 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.
  715.                                         </div>
  716.                                       </div>
  717.                                      
  718.                                       <div class="tab-pane fade in" id="CHARFOUR">
  719.                                         <div class="container p-2">
  720.                                           <a href="link character" class="text-uppercase" style="text-decoration:none;color:#999;"><b>Name</b></a>
  721.                                           <br>
  722.                                           Write about the characters' relationship. 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.
  723.                                         </div>
  724.                                       </div>
  725.                                       <!---- add additional blocks here ---->
  726.                                      
  727.                                   </div>
  728.                                 </div>
  729.                     </div>
  730.                     </div>
  731.                 </div>
  732.             </div>
  733.            
  734.             <!---- THREE -- SKINS -->
  735.             <div class="tab-pane fade in" id="THREE">
  736.                 <div class="card mt-2 border-0 p-2" style="width:950px;height:520px;background-color:#131313;">
  737.                     <ul class="nav nav-pills pt-2 mb-0">
  738.                         <!---- do not exceed 8 in total ---->
  739.                         <li class="nav-item mx-1">
  740.                             <a href="#SKINONE" class="btn btn-link" style="background-color:#000;color:#fff;text-decoration:none;" data-toggle="tab">Form Name</a>
  741.                         </li>
  742.                         <li class="nav-item mx-1">
  743.                             <a href="#SKINTWO" class="btn btn-link" style="background-color:#000;color:#fff;text-decoration:none;" data-toggle="tab">Skin Name</a>
  744.                         </li>
  745.  
  746.                         <!---- add more here ---->
  747.                     </ul>
  748.                    
  749.                     <div class="tab-content">
  750.                         <!---- default (elite I/II) ---->
  751.                         <div class="tab-pane fade in active show" id="SKINONE">
  752.                         <div class="row no-gutters">
  753.                             <div class="col-8">
  754.                             <div class="card border-0" style="height:500px;
  755.                            background-color:transparent;
  756.                            background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  757.                            background-size:contain;
  758.                            background-position:top center;
  759.                            background-repeat:no-repeat;">
  760.                             </div>
  761.                             </div>
  762.                            
  763.                             <div class="col-3 mx-auto mt-2">
  764.                                 <div class="card border-0 rounded-0 p-1" style="box-shadow:0 0 5px;max-height:400px;overflow:auto;background-color:#f7f7f7;color:#000;">
  765.                                     <h1 class="text-uppercase display-4 text-center" style="color:#000;">
  766.                                       Default
  767.                                     </h1>
  768.                                     <p class="text-uppercase display-4 text-center mx-1 mb-1" style="background-color:rgba(0,0,0,.8);color:#fff;font-size:.8rem;letter-spacing:5px;font-weight:bold;">
  769.                                       Outfit
  770.                                     </p>
  771.                                     <p class="p-2">Description for the outfit. 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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  772.                                 </div>
  773.                                
  774.                             </div>
  775.                         </div>
  776.                         </div>
  777.                         <!---- default end ---->
  778.                        
  779.                         <!---- custom skin ---->
  780.                         <div class="tab-pane fade in" id="SKINTWO">
  781.                         <div class="row no-gutters">
  782.                             <div class="col-8">
  783.                             <div class="card border-0" style="height:500px;
  784.                            background-color:transparent;
  785.                            background-image:url(https://cdn.discordapp.com/attachments/791860616443854849/949299425682026566/latest.png);
  786.                            background-size:contain;
  787.                            background-position:top center;
  788.                            background-repeat:no-repeat;">
  789.                             </div>
  790.                             </div>
  791.                            
  792.                             <div class="col-3 mx-auto mt-2">
  793.                                 <div class="card border-0 rounded-0 p-1" style="box-shadow:0 0 5px;max-height:400px;overflow:auto;background-color:#f7f7f7;color:#000;">
  794.                                   <!---- decrease font-size and letter-spacing in style if text go out of bound ---->
  795.                                     <h1 class="text-uppercase display-4 text-center" style="color:#000;">Brand Name</h1>
  796.                                     <p class="text-uppercase display-4 text-center mx-1 mb-1" style="background-color:rgba(0,0,0,.8);color:#fff;font-size:.8rem;letter-spacing:5px;font-weight:bold;">
  797.                                     subttitle
  798.                                     </p>
  799.                                     <p class="p-2">Description for the outfit. 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. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
  800.                                 </div>
  801.                                
  802.                             </div>
  803.                         </div>
  804.                         </div>
  805.                         <!---- custom skin end ---->
  806.                        
  807.                         <!---- add more blocks here ---->
  808.                        
  809.                     </div>
  810.                 </div>
  811.             </div>
  812.         </div>
  813.     </div>
  814. </div>
  815.  
  816.  
  817.  
  818.  
  819.  
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!