API tools faq
paste
Advertisement
rosiuel

20. SPLATTACK [html]

rosiuel
Mar 19th, 2023 (edited)
990
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 49.55 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.    [ SPLATTACK ]
  4.    
  5.    turn OFF WYSIWYG
  6.    turn ON code editor
  7.    
  8.    do NOT remove credit
  9.    
  10.    RESOURCES :
  11.    - free live code editor : https://th.circlejourney.net/
  12.    - coding help forum     : https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
  13.    - how to edit icons     : https://toyhou.se/3536712.
  14.    - coding resources      : https://toyhou.se/Elithian/characters/folder:881832
  15.  
  16.    COLORS :
  17.    - background
  18.        - top        : #0c1069
  19.        - bottom     : #995e00
  20.    
  21.    - content background
  22.        - lighter    : #242424
  23.        - darker     : #1a1a1a
  24.        - point card : #dde34b
  25.    
  26.    - accents
  27.        - primary    : #eded3d
  28.        - secondary  : #5c35de
  29.        - grizzco    : #fd5132
  30.    
  31.    - fonts
  32.        - body       : #ccc
  33.        - meta       : #4bfc2e
  34.    
  35.    use ctrl+f to quickly change colors
  36.  
  37. -->
  38.  
  39. <!--
  40.  
  41. background
  42.  
  43. - if you want the top info and gallery to be visible, change [z-index: 1] to [z-index: -1]
  44. - if you dont want the background at all, delete this little section
  45.  
  46. -->
  47. <div style="z-index: -1; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(180deg, #0c1069 0%, #995e00 100%);"></div>
  48. <!-- end background -->
  49.  
  50. <!-- credit // DO NOT REMOVE -->
  51. <div class="p-1" style="position: fixed; bottom: 0; right: 0; z-index: 999; background: #5c35de;">
  52.     <a href="https://toyhou.se/20689418.20-splattack" target="_blank" class="p-2 text-white tooltipster" title="code by venus">
  53.         <i class="fa-solid fa-bookmark"></i>
  54.     </a>
  55. </div>
  56.  
  57. <!-- start content -->
  58. <div class="container mx-auto p-0 splatscroll" style="max-width: 800px; color: #ccc; font-family: 'Arial Black'; z-index: 10; line-height: 1.2rem;">
  59.     <div class="row no-gutters">
  60.        
  61.         <!-- left side -->
  62.         <div class="col-lg-4 mb-3 mb-lg-0">
  63.             <div class="flex-column h-100">
  64.                
  65.                 <!-- image
  66.                
  67.                - replace url with your own
  68.                - if you dont want the background image, delete the first url
  69.                
  70.                -->
  71.                 <div
  72.                    class="h-100 align-items-center justify-content-center"
  73.                    style="background: url(
  74.                    
  75.                    https://images.alphacoders.com/111/1112260.jpg
  76.                    
  77.                    ) center no-repeat; background-size: cover; border-radius: 20px; box-shadow: 0 0 10px #000; min-height: 200px;"
  78.                >
  79.                     <!-- image inside
  80.                    
  81.                    - replace url with your own
  82.                    - if you dont want this, delete it
  83.                    
  84.                    -->
  85.                     <img
  86.                        src="
  87.                            https://cdn.discordapp.com/attachments/700436369570267229/1085873555255861340/latest.png
  88.                        "
  89.                    />
  90.                     <!-- end image inside -->
  91.                 </div>
  92.                 <!-- end image -->
  93.             </div>
  94.         </div>
  95.         <!-- end left side -->
  96.  
  97.         <!-- right side -->
  98.         <div class="col ml-lg-4 ml-0 my-auto">
  99.             <!-- splashtag
  100.                
  101.                - use this website: https://seymourschlong.github.io/splashtags/
  102.                
  103.                -->
  104.             <img
  105.                src="
  106.                
  107.                https://cdn.discordapp.com/attachments/700436369570267229/1086882448538865694/splashtag2.png
  108.                
  109.                "
  110.                class="h-100 w-100"
  111.                style="border-radius: 10px; box-shadow: 0 0 10px #000;"
  112.            />
  113.             <!-- end splashtag -->
  114.  
  115.             <!-- currency & level -->
  116.             <div class="row no-gutters my-3 p-3" style="background: #1a1a1a; font-size: 1rem; border-radius: 10px; box-shadow: 0 0 10px #000;">
  117.  
  118.                 <!-- sea snails -->
  119.                 <div class="col-lg-auto col-6 row no-gutters">
  120.                     <div class="col-auto mr-1">
  121.                         <!-- icon -->
  122.                         <img
  123.                            src="
  124.                            https://cdn.wikimg.net/en/splatoonwiki/images/9/98/S3_Icon_Super_Sea_Snail.png
  125.                            "
  126.                            style="height: 25px;"
  127.                        />
  128.                     </div>
  129.                     <div class="col my-auto">
  130.                         999
  131.                     </div>
  132.                 </div>
  133.  
  134.                 <!-- cash -->
  135.                 <div class="col-lg-auto col-6 mx-lg-3 row no-gutters">
  136.                     <div class="col-auto mr-1">
  137.                         <!-- icon -->
  138.                         <img
  139.                            src="
  140.                            https://cdn.wikimg.net/en/splatoonwiki/images/1/1e/S3_Icon_Cash.png?20220922182217
  141.                            "
  142.                            style="height: 25px;"
  143.                        />
  144.                     </div>
  145.                     <div class="col my-auto">
  146.                         9,999,999
  147.                     </div>
  148.                 </div>
  149.  
  150.                 <!-- level -->
  151.                 <div class="col-lg row no-gutters mt-3 mt-lg-0">
  152.                     <div class="col-auto" style="color: #4bfc2e;">
  153.                         Level
  154.                     </div>
  155.                     <div class="col-auto mx-2">
  156.                         99
  157.                     </div>
  158.                     <div class="col my-auto">
  159.                         <div class="progress" style="background: #242424; border-radius: 0;">
  160.                             <!-- change percentage to fill bar -->
  161.                             <div class="progress-bar" style="background: #4bfc2e; width: 50%;"></div>
  162.                         </div>
  163.                     </div>
  164.                 </div>
  165.  
  166.             </div>
  167.             <!-- end currency & level -->
  168.  
  169.             <!-- bottom box -->
  170.             <div class="py-3" style="background: #1a1a1a; border-radius: 30px; box-shadow: 0 0 10px #000;">
  171.  
  172.                 <!-- nav -->
  173.                 <ul class="col-12 nav nav-pills justify-content-between splatnav px-3">
  174.                     <li class="nav-item">
  175.                         <a href="#intro" class="nav-link active btn p-3 align-items-center" data-toggle="tab" style="border-radius: 50%; background: #242424; color: #ccc;">
  176.                             <i class="fa-solid fa-user fa-fw"></i>
  177.                         </a>
  178.                     </li>
  179.  
  180.                     <li class="nav-item">
  181.                         <a href="#info" class="nav-link btn p-3 align-items-center" data-toggle="tab" style="border-radius: 50%; background: #242424; color: #ccc;">
  182.                             <i class="fa-solid fa-book-open fa-fw"></i>
  183.                         </a>
  184.                     </li>
  185.  
  186.                     <li class="nav-item">
  187.                         <a href="#gear" class="nav-link btn p-3 align-items-center" data-toggle="tab" style="border-radius: 50%; background: #242424; color: #ccc;">
  188.                             <i class="fa-solid fa-shirt fa-fw"></i>
  189.                         </a>
  190.                     </li>
  191.  
  192.                     <li class="nav-item">
  193.                         <a href="#battle" class="nav-link btn p-3 align-items-center" data-toggle="tab" style="border-radius: 50%; background: #242424; color: #ccc;">
  194.                             <i class="fa-solid fa-swords fa-fw"></i>
  195.                         </a>
  196.                     </li>
  197.  
  198.                     <li class="nav-item">
  199.                         <a href="#friends" class="nav-link btn p-3 align-items-center" data-toggle="tab" style="border-radius: 50%; background: #242424; color: #ccc;">
  200.                             <i class="fa-solid fa-users fa-fw"></i>
  201.                         </a>
  202.                     </li>
  203.                 </ul>
  204.                 <!-- end nav -->
  205.  
  206.                 <!-- content -->
  207.                 <div class="tab-content splattab my-3 p-lg-3 p-1" style="background: #242424; overflow: auto; height: 300px; border: 5px solid #242424;">
  208.  
  209.                     <!-- intro page -->
  210.                     <div id="intro" class="tab-pane fade h-100 active show">
  211.                         <div class="h-100 flex-column">
  212.  
  213.                             <!-- item -->
  214.                             <div class="row no-gutters my-auto" style="background: #1a1a1a; border-radius: 20px;">
  215.                                 <div class="col-auto p-2" style="background: #eded3d; color: #1a1a1a; border-radius: 25px; border: 5px solid #242424;">
  216.                                     Name
  217.                                 </div>
  218.                                 <div class="col p-2 my-auto">
  219.                                     Content
  220.                                 </div>
  221.                             </div>
  222.                             <!-- end item -->
  223.  
  224.                             <!-- item -->
  225.                             <div class="row no-gutters my-auto" style="background: #1a1a1a; border-radius: 20px;">
  226.                                 <div class="col-auto p-2" style="background: #eded3d; color: #1a1a1a; border-radius: 25px; border: 5px solid #242424;">
  227.                                     Age
  228.                                 </div>
  229.                                 <div class="col p-2 my-auto">
  230.                                     Content
  231.                                 </div>
  232.                             </div>
  233.                             <!-- end item -->
  234.  
  235.                             <!-- item -->
  236.                             <div class="row no-gutters my-auto" style="background: #1a1a1a; border-radius: 20px;">
  237.                                 <div class="col-auto p-2" style="background: #eded3d; color: #1a1a1a; border-radius: 25px; border: 5px solid #242424;">
  238.                                     Gender
  239.                                 </div>
  240.                                 <div class="col p-2 my-auto">
  241.                                     Content
  242.                                     <span class="faded small">
  243.                                         pro/nouns
  244.                                     </span>
  245.                                 </div>
  246.                             </div>
  247.                             <!-- end item -->
  248.  
  249.                             <!-- item -->
  250.                             <div class="row no-gutters my-auto" style="background: #1a1a1a; border-radius: 20px;">
  251.                                 <div class="col-auto p-2" style="background: #eded3d; color: #1a1a1a; border-radius: 25px; border: 5px solid #242424;">
  252.                                     Species
  253.                                 </div>
  254.                                 <div class="col p-2 my-auto">
  255.                                     Content
  256.                                 </div>
  257.                             </div>
  258.                             <!-- end item -->
  259.  
  260.                             <!-- item -->
  261.                             <div class="row no-gutters my-auto" style="background: #1a1a1a; border-radius: 20px;">
  262.                                 <div class="col-auto p-2" style="background: #eded3d; color: #1a1a1a; border-radius: 25px; border: 5px solid #242424;">
  263.                                     Occupation
  264.                                 </div>
  265.                                 <div class="col p-2 my-auto">
  266.                                     Content
  267.                                 </div>
  268.                             </div>
  269.                             <!-- end item -->
  270.  
  271.                             <!-- add more above here -->
  272.                         </div>
  273.                     </div>
  274.                     <!-- end intro page -->
  275.  
  276.                     <!-- info page -->
  277.                     <div id="info" class="tab-pane fade">
  278.                         <div class="row no-gutters">
  279.                             <!-- likes & dislikes header -->
  280.                             <div class="p-1 col-auto ml-2 mb-n3" style="background: #eded3d; transform: rotate(-2deg); z-index: 1;">
  281.                                 <div class="h-100 w-100 py-1 px-2" style="border: 2px solid #1a1a1a; color: #1a1a1a;">
  282.                                     Likes & Dislikes
  283.                                </div>
  284.                            </div>
  285.                            <div class="col-12"></div>
  286.  
  287.                            <!-- likes -->
  288.                            <div class="col p-3 mr-3" style="background: #1a1a1a; border-radius: 20px;">
  289.                                 <p class="m-0">
  290.                                     <i class="fa-solid fa-check" style="color: #5c35de;"></i>
  291.                                     Item
  292.                                 </p>
  293.  
  294.                                 <p class="m-0">
  295.                                     <i class="fa-solid fa-check" style="color: #5c35de;"></i>
  296.                                     Item
  297.                                 </p>
  298.                                 <p class="m-0">
  299.                                     <i class="fa-solid fa-check" style="color: #5c35de;"></i>
  300.                                     Item
  301.                                 </p>
  302.                                 <p class="m-0">
  303.                                     <i class="fa-solid fa-check" style="color: #5c35de;"></i>
  304.                                     Item
  305.                                 </p>
  306.  
  307.                                 <!-- add more above here -->
  308.                             </div>
  309.                             <!-- end likes -->
  310.  
  311.                             <!-- dislikes -->
  312.                             <div class="col p-3" style="background: #1a1a1a; border-radius: 20px;">
  313.                                 <p class="m-0">
  314.                                     <i class="fa-solid fa-times" style="color: #5c35de;"></i>
  315.                                     Item
  316.                                 </p>
  317.  
  318.                                 <p class="m-0">
  319.                                     <i class="fa-solid fa-times" style="color: #5c35de;"></i>
  320.                                     Item
  321.                                 </p>
  322.                                 <p class="m-0">
  323.                                     <i class="fa-solid fa-times" style="color: #5c35de;"></i>
  324.                                     Item
  325.                                 </p>
  326.                                 <p class="m-0">
  327.                                     <i class="fa-solid fa-times" style="color: #5c35de;"></i>
  328.                                     Item
  329.                                 </p>
  330.  
  331.                                 <!-- add more above here -->
  332.                             </div>
  333.                             <!-- end dislikes -->
  334.  
  335.                             <!-- divider -->
  336.                             <div class="col-12">
  337.                                 <hr class="my-2" style="opacity: 0;" />
  338.                             </div>
  339.  
  340.                             <!-- background header -->
  341.                             <div class="p-1 col-auto ml-2 mb-n3" style="background: #eded3d; transform: rotate(-2deg); z-index: 1;">
  342.                                 <div class="h-100 w-100 py-1 px-2" style="border: 2px solid #1a1a1a; color: #1a1a1a;">
  343.                                     Background
  344.                                 </div>
  345.                             </div>
  346.  
  347.                             <!-- background content -->
  348.                             <div class="col-12 p-3 text-justify" style="background: #1a1a1a; border-radius: 20px;">
  349.                                 <p>
  350.                                     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
  351.                                     velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
  352.                                 </p>
  353.                             </div>
  354.                             <!-- end background content -->
  355.                         </div>
  356.                     </div>
  357.                     <!-- end info page -->
  358.  
  359.                     <!-- gear page -->
  360.                     <div id="gear" class="tab-pane fade h-100">
  361.                         <div class="h-100 flex-column">
  362.  
  363.                             <!-- weapons -->
  364.                             <div class="p-20 h-100 mb-2 splatweapon" style="background: #1a1a1a; border-radius: 20px;">
  365.                                 <div class="flex-row w-100 h-100 justify-content-between" style="overflow-x: auto;">
  366.                                     <!-- weapons
  367.                                    
  368.                                    - adding more than 4 images will make it scroll, HOWEVER i dont recomend you do this if youre using the html only version, cuz the scrollbar can be too fat for some browsers
  369.                                    - use images from the official wiki, since theyre perfect squares
  370.                                        - link to wiki: https://splatoonwiki.org/wiki/Main_Page
  371.                                    - replace urls with your own
  372.                                    
  373.                                    -->
  374.  
  375.                                     <!-- weapon 1 // main weapon -->
  376.                                     <img
  377.                                        src="
  378.                                        https://cdn.wikimg.net/en/splatoonwiki/images/thumb/e/ed/S3_Weapon_Main_.52_Gal.png/256px-S3_Weapon_Main_.52_Gal.png
  379.                                    "
  380.                                        class="w-25"
  381.                                        style="filter: drop-shadow(0 0 5px #5c35de);"
  382.                                    />
  383.  
  384.                                     <!-- weapon 2 -->
  385.                                     <img
  386.                                        src="
  387.                                        https://cdn.wikimg.net/en/splatoonwiki/images/thumb/1/10/S3_Weapon_Main_E-liter_4K.png/256px-S3_Weapon_Main_E-liter_4K.png
  388.                                    "
  389.                                        class="w-25"
  390.                                    />
  391.  
  392.                                     <!-- weapon 3 -->
  393.                                     <img
  394.                                        src="
  395.                                        https://cdn.wikimg.net/en/splatoonwiki/images/thumb/4/49/S3_Weapon_Main_Tri-Stringer.png/256px-S3_Weapon_Main_Tri-Stringer.png
  396.                                    "
  397.                                        class="w-25"
  398.                                    />
  399.  
  400.                                     <!-- weapon 4 -->
  401.                                     <img
  402.                                        src="
  403.                                        https://cdn.wikimg.net/en/splatoonwiki/images/thumb/d/d1/S3_Weapon_Main_Hydra_Splatling.png/256px-S3_Weapon_Main_Hydra_Splatling.png
  404.                                    "
  405.                                        class="w-25"
  406.                                    />
  407.                                    
  408.                                     <!-- add more above here -->
  409.                                 </div>
  410.                             </div>
  411.                             <!-- end weapons -->
  412.  
  413.                             <!-- gear -->
  414.                             <div class="h-100">
  415.                                 <div class="row no-gutters">
  416.                                    
  417.                                     <!-- all images used from the splatoon wiki // link above -->
  418.  
  419.                                     <!-- hat -->
  420.                                     <div class="col-4 text-center">
  421.                                         <!-- replace url with your own -->
  422.                                         <img
  423.                                            src="
  424.                                        
  425.                                            https://cdn.wikimg.net/en/splatoonwiki/images/a/a2/S3_Gear_Headgear_Knitted_Hat.png
  426.                                        
  427.                                        "
  428.                                            style="height: 140px; width: 140px;"
  429.                                        />
  430.  
  431.                                         <div class="mx-auto card border-0" style="background: #1a1a1a; margin-top: -45px; height: 50px; width: 50px; border-radius: 50%;">
  432.                                             <!-- main gear ability -->
  433.                                             <img
  434.                                                src="
  435.                                            
  436.                                                https://cdn.wikimg.net/en/splatoonwiki/images/0/09/S3_Ability_Comeback.png
  437.                                            
  438.                                            "
  439.                                            />
  440.                                         </div>
  441.                                     </div>
  442.                                     <!-- end hat -->
  443.  
  444.                                     <!-- clothes -->
  445.                                     <div class="col-4 text-center">
  446.                                         <!-- replace url with your own -->
  447.                                         <img
  448.                                            src="
  449.                                        
  450.                                            https://cdn.wikimg.net/en/splatoonwiki/images/3/3d/S3_Gear_Clothing_Berry_BlobMob_Tee.png
  451.                                        
  452.                                        "
  453.                                            style="height: 140px; width: 140px;"
  454.                                        />
  455.  
  456.                                         <div class="mx-auto card border-0" style="background: #1a1a1a; margin-top: -45px; height: 50px; width: 50px; border-radius: 50%;">
  457.                                             <!-- main gear ability -->
  458.                                             <img
  459.                                                src="
  460.                                            
  461.                                                https://cdn.wikimg.net/en/splatoonwiki/images/6/68/S3_Ability_Respawn_Punisher.png
  462.                                            
  463.                                            "
  464.                                            />
  465.                                         </div>
  466.                                     </div>
  467.                                     <!-- end clothes -->
  468.  
  469.                                     <!-- shoes -->
  470.                                     <div class="col-4 text-center">
  471.                                         <!-- replace url with your own -->
  472.                                         <img
  473.                                            src="
  474.                                        
  475.                                            https://cdn.wikimg.net/en/splatoonwiki/images/0/0d/S3_Gear_Shoes_Pink_Dadfoot_Sandals.png
  476.                                        
  477.                                        "
  478.                                            style="height: 140px; width: 140px;"
  479.                                        />
  480.  
  481.                                         <div class="mx-auto card border-0" style="background: #1a1a1a; margin-top: -45px; height: 50px; width: 50px; border-radius: 50%;">
  482.                                             <!-- main gear ability -->
  483.                                             <img
  484.                                                src="
  485.                                            
  486.                                                https://cdn.wikimg.net/en/splatoonwiki/images/0/05/S3_Ability_Drop_Roller.png
  487.                                            
  488.                                            "
  489.                                            />
  490.                                         </div>
  491.                                     </div>
  492.                                     <!-- end shoes -->
  493.                                    
  494.                                 </div>
  495.                             </div>
  496.                         </div>
  497.                     </div>
  498.                     <!-- end gear page -->
  499.  
  500.                     <!-- battle page -->
  501.                     <div id="battle" class="tab-pane fade h-100">
  502.                         <div class="flex-column h-100">
  503.                            
  504.                             <!-- battle ratios -->
  505.                             <div class="row no-gutters h-100">
  506.  
  507.                                 <!-- turf -->
  508.                                 <div class="col-lg my-auto">
  509.                                     <!-- header -->
  510.                                     <div class="row no-gutters">
  511.                                         <div class="col-auto">
  512.                                             <!-- turf icon -->
  513.                                             <img
  514.                                                src="
  515.                                    
  516.                                    https://cdn.wikimg.net/en/splatoonwiki/images/thumb/2/22/Symbol_TWF.svg/768px-Symbol_TWF.svg.png?20160418204138
  517.                                    
  518.                                    "
  519.                                                style="height: 30px;"
  520.                                                class="mr-2"
  521.                                            />
  522.                                         </div>
  523.                                         <div class="col my-auto text-uppercase">
  524.                                             Regular
  525.                                         </div>
  526.                                         <div class="col-12">
  527.                                             <hr class="my-1" style="border-top: 4px dotted #1a1a1a;" />
  528.                                         </div>
  529.                                     </div>
  530.  
  531.                                     <!-- victory / defeat ratio -->
  532.                                     <div class="row no-gutters">
  533.                                         <div class="col text-right text-uppercase" style="font-size: 0.5rem;">
  534.                                             Victory
  535.                                         </div>
  536.  
  537.                                         <!-- victory number -->
  538.                                         <div class="col-auto mx-1" style="font-size: 1rem;">
  539.                                             23
  540.                                         </div>
  541.  
  542.                                         <!-- divider -->
  543.                                         <div class="col-auto mx-1">
  544.                                             <div class="h-100" style="background: #ccc; width: 0.5px;"></div>
  545.                                         </div>
  546.  
  547.                                         <!-- defeat number -->
  548.                                         <div class="col-auto mx-1" style="font-size: 1rem;">
  549.                                             22
  550.                                         </div>
  551.  
  552.                                         <div class="col text-left text-uppercase" style="font-size: 0.5rem;">
  553.                                             Defeat
  554.                                         </div>
  555.                                     </div>
  556.                                     <!-- end v/d -->
  557.                                 </div>
  558.                                 <!-- end turf -->
  559.  
  560.                                 <!-- anarchy -->
  561.                                 <div class="col-lg mx-lg-3 my-auto">
  562.                                     <!-- header -->
  563.                                     <div class="row no-gutters">
  564.                                         <div class="col-auto">
  565.                                             <!-- anarchy icon -->
  566.                                             <img
  567.                                                src="
  568.                                    
  569.                                    https://cdn.wikimg.net/en/splatoonwiki/images/thumb/c/c5/S2_Icon_Ranked_Battle.svg/60px-S2_Icon_Ranked_Battle.svg.png?20221015151548
  570.                                    
  571.                                    "
  572.                                                style="height: 30px;"
  573.                                                class="mr-2"
  574.                                            />
  575.                                         </div>
  576.                                         <div class="col my-auto text-uppercase">
  577.                                             Anarchy
  578.                                         </div>
  579.                                         <div class="col-12">
  580.                                             <hr class="my-1" style="border-top: 4px dotted #1a1a1a;" />
  581.                                         </div>
  582.                                     </div>
  583.  
  584.                                     <!-- victory / defeat ratio -->
  585.                                     <div class="row no-gutters">
  586.                                         <div class="col text-right text-uppercase" style="font-size: 0.5rem;">
  587.                                             Victory
  588.                                         </div>
  589.  
  590.                                         <!-- victory number -->
  591.                                         <div class="col-auto mx-1" style="font-size: 1rem;">
  592.                                             23
  593.                                         </div>
  594.  
  595.                                         <!-- divider -->
  596.                                         <div class="col-auto mx-1">
  597.                                             <div class="h-100" style="background: #ccc; width: 0.5px;"></div>
  598.                                         </div>
  599.  
  600.                                         <!-- defeat number -->
  601.                                         <div class="col-auto mx-1" style="font-size: 1rem;">
  602.                                             22
  603.                                         </div>
  604.  
  605.                                         <div class="col text-left text-uppercase" style="font-size: 0.5rem;">
  606.                                             Defeat
  607.                                         </div>
  608.                                     </div>
  609.                                     <!-- end v/d -->
  610.                                 </div>
  611.                                 <!-- end anarchy -->
  612.  
  613.                                 <!-- x -->
  614.                                 <div class="col-lg my-auto">
  615.                                     <!-- header -->
  616.                                     <div class="row no-gutters">
  617.                                         <div class="col-auto">
  618.                                             <!-- x icon -->
  619.                                             <img
  620.                                                src="
  621.                                    
  622.                                    https://cdn.wikimg.net/en/splatoonwiki/images/thumb/3/3e/S3_Icon_X_Battle.svg/60px-S3_Icon_X_Battle.svg.png?20221207065136
  623.                                    
  624.                                    "
  625.                                                style="height: 30px;"
  626.                                                class="mr-2"
  627.                                            />
  628.                                         </div>
  629.                                         <div class="col my-auto text-uppercase">
  630.                                             X
  631.                                         </div>
  632.                                         <div class="col-12">
  633.                                             <hr class="my-1" style="border-top: 4px dotted #1a1a1a;" />
  634.                                         </div>
  635.                                     </div>
  636.  
  637.                                     <!-- victory / defeat ratio -->
  638.                                     <div class="row no-gutters">
  639.                                         <div class="col text-right text-uppercase" style="font-size: 0.5rem;">
  640.                                             Victory
  641.                                         </div>
  642.  
  643.                                         <!-- victory number -->
  644.                                         <div class="col-auto mx-1" style="font-size: 1rem;">
  645.                                             23
  646.                                         </div>
  647.  
  648.                                         <!-- divider -->
  649.                                         <div class="col-auto mx-1">
  650.                                             <div class="h-100" style="background: #ccc; width: 0.5px;"></div>
  651.                                         </div>
  652.  
  653.                                         <!-- defeat number -->
  654.                                         <div class="col-auto mx-1" style="font-size: 1rem;">
  655.                                             22
  656.                                         </div>
  657.  
  658.                                         <div class="col text-left text-uppercase" style="font-size: 0.5rem;">
  659.                                             Defeat
  660.                                         </div>
  661.                                     </div>
  662.                                     <!-- end v/d -->
  663.                                 </div>
  664.                                 <!-- end x -->
  665.  
  666.                             </div>
  667.                             <!-- end battle ratios -->
  668.  
  669.                             <!-- divider -->
  670.                             <div>
  671.                                 <hr class="my-2" style="border-top: 4px dotted #1a1a1a;" />
  672.                             </div>
  673.                             <!-- end divider -->
  674.  
  675.                             <!-- salmon run -->
  676.                             <div class="row no-gutters">
  677.  
  678.                                 <!-- rank & scales -->
  679.                                 <div class="col mr-3 h-100 flex-column" style="color: #4bfc2e;">
  680.  
  681.                                     <!-- rank -->
  682.                                     <div class="p-2 h-100 mb-2" style="background: #1a1a1a; border-radius: 20px;">
  683.                                         Eggsecutive VP
  684.  
  685.                                         <!-- bar -->
  686.                                         <div class="progress my-1" style="background: #242424; border-radius: 10px;">
  687.                                             <!-- change percentage to fill bar -->
  688.                                             <div class="progress-bar" style="background: #fd5132;
  689.                                            
  690.                                            width: 50%
  691.                                            
  692.                                            ; height: 10px;"></div>
  693.                                         </div>
  694.  
  695.                                         <small>
  696.                                             Average Waves Cleared
  697.                                         </small>
  698.  
  699.                                         <div class="text-right" style="color: #dde34b; font-size: 1.2rem;">
  700.                                             3.0
  701.                                         </div>
  702.                                     </div>
  703.                                     <!-- end rank -->
  704.  
  705.                                     <!-- scales -->
  706.                                     <div class="p-2 h-100" style="background: #1a1a1a; border-radius: 20px;">
  707.                                         <div class="row no-gutters">
  708.                                             <div class="col-12">
  709.                                                 Scales
  710.                                             </div>
  711.  
  712.                                             <!-- bronze scales -->
  713.                                             <div class="col-4 text-center">
  714.                                                 <img
  715.                                                    src="
  716.                                            https://cdn.wikimg.net/en/splatoonwiki/images/thumb/7/77/S3_Icon_Bronze_Fish_Scale.png/36px-S3_Icon_Bronze_Fish_Scale.png
  717.                                            "
  718.                                                    style="height: 30px;"
  719.                                                />
  720.                                                 <p style="color: #dde34b;">
  721.                                                     x99
  722.                                                 </p>
  723.                                             </div>
  724.  
  725.                                             <!-- silver scales -->
  726.                                             <div class="col-4 text-center">
  727.                                                 <img
  728.                                                    src="
  729.                                            https://cdn.wikimg.net/en/splatoonwiki/images/thumb/7/74/S3_Icon_Silver_Fish_Scale.png/36px-S3_Icon_Silver_Fish_Scale.png
  730.                                            "
  731.                                                    style="height: 30px;"
  732.                                                />
  733.                                                 <p style="color: #dde34b;">
  734.                                                     x99
  735.                                                 </p>
  736.                                             </div>
  737.  
  738.                                             <!-- gold scales -->
  739.                                             <div class="col-4 text-center">
  740.                                                 <img
  741.                                                    src="
  742.                                            https://cdn.wikimg.net/en/splatoonwiki/images/thumb/a/a9/S3_Icon_Gold_Fish_Scale.png/36px-S3_Icon_Gold_Fish_Scale.png
  743.                                            "
  744.                                                    style="height: 30px;"
  745.                                                />
  746.                                                 <p style="color: #dde34b;">
  747.                                                     x99
  748.                                                 </p>
  749.                                             </div>
  750.                                         </div>
  751.                                     </div>
  752.                                     <!-- end scales -->
  753.  
  754.                                 </div>
  755.                                 <!-- end rank & scales -->
  756.  
  757.                                 <!-- point card -->
  758.                                 <div class="col-6">
  759.                                     <div style="background: #dde34b; overflow: hidden; border-radius: 10px; color: #1a1a1a;">
  760.                                         <div class="text-center" style="background: #1a1a1a; color: #fd5132;">
  761.                                             Grizzco Point Card
  762.                                         </div>
  763.                                         <div class="p-1">
  764.                                             <!-- current points -->
  765.                                             <div class="px-2 py-1 mb-1" style="background: rgba(0, 0, 0, 0.85); color: #dde34b; border-radius: 10px;">
  766.                                                 <div class="small">Current Points</div>
  767.                                                 <div class="text-right">9,999,999p</div>
  768.                                             </div>
  769.  
  770.                                             <!-- item -->
  771.                                             <div class="justify-content-between">
  772.                                                 <span class="faded">Shifts Worked</span>
  773.                                                 <span>
  774.                                                     999
  775.                                                 </span>
  776.                                             </div>
  777.                                             <!-- end item -->
  778.  
  779.                                             <hr class="my-1 faded" style="border-top: 2px dashed;" />
  780.  
  781.                                             <!-- item -->
  782.                                             <div class="justify-content-between">
  783.                                                 <span class="faded">Golden Eggs Col.</span>
  784.                                                 <span>
  785.                                                     999
  786.                                                 </span>
  787.                                             </div>
  788.                                             <!-- end item -->
  789.  
  790.                                             <hr class="my-1 faded" style="border-top: 2px dashed;" />
  791.  
  792.                                             <!-- item -->
  793.                                             <div class="justify-content-between">
  794.                                                 <span class="faded">Power Eggs Col.</span>
  795.                                                 <span>
  796.                                                     999
  797.                                                 </span>
  798.                                             </div>
  799.                                             <!-- end item -->
  800.  
  801.                                             <hr class="my-1 faded" style="border-top: 2px dashed;" />
  802.  
  803.                                             <!-- item -->
  804.                                             <div class="justify-content-between">
  805.                                                 <span class="faded">K. Salmonids Def.</span>
  806.                                                 <span>
  807.                                                     999
  808.                                                 </span>
  809.                                             </div>
  810.                                             <!-- end item -->
  811.                                         </div>
  812.                                     </div>
  813.                                 </div>
  814.                                 <!-- end point card -->
  815.  
  816.                             </div>
  817.                             <!-- end salmon run -->
  818.                         </div>
  819.                     </div>
  820.                     <!-- end battle page -->
  821.  
  822.                     <!-- friends page -->
  823.                     <div id="friends" class="tab-pane fade">
  824.  
  825.                         <!-- friend 1 -->
  826.                         <div class="row no-gutters p-3" style="background: #1a1a1a; border-radius: 20px;">
  827.                             <div class="col-auto mr-2">
  828.                                 <!-- character image // replace url with your own -->
  829.                                 <img
  830.                                    src="
  831.                                    https://cdn.discordapp.com/attachments/700436369570267229/1085890614899527700/S_Icon_Callie_alt.png
  832.                                "
  833.                                    style="height: 50px; width: 50px; border-radius: 50%; object-fit: cover;"
  834.                                />
  835.                             </div>
  836.                             <div class="col my-auto">
  837.                                 <!-- link -->
  838.                                 <a href="CHAR_URL" style="color: #fff;">
  839.                                     Name Surname
  840.                                 </a>
  841.  
  842.                                 <!-- relationship -->
  843.                                 <span class="faded small">
  844.                                     relationship
  845.                                 </span>
  846.                             </div>
  847.                             <div class="col-12 text-justify">
  848.                                 <!-- divider -->
  849.                                 <hr class="my-2" style="border-top: 4px dotted #242424;" />
  850.  
  851.                                 <p>
  852.                                     <i class="fa-solid fa-quote-left" style="color: #5c35de;"></i>
  853.                                     Character's thoughts on this character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit.
  854.                                     <i class="fa-solid fa-quote-right" style="color: #5c35de;"></i>
  855.                                 </p>
  856.  
  857.                             </div>
  858.                         </div>
  859.                         <!-- end friend 1 -->
  860.  
  861.                         <!-- divider -->
  862.                         <hr class="my-2" style="opacity: 0;" />
  863.  
  864.                         <!-- friend 2 -->
  865.                         <div class="row no-gutters p-3" style="background: #1a1a1a; border-radius: 20px;">
  866.                             <div class="col-auto mr-2">
  867.                                 <!-- character image // replace url with your own -->
  868.                                 <img
  869.                                    src="
  870.                                    https://cdn.discordapp.com/attachments/700436369570267229/1085890614899527700/S_Icon_Callie_alt.png
  871.                                "
  872.                                    style="height: 50px; width: 50px; border-radius: 50%; object-fit: cover;"
  873.                                />
  874.                             </div>
  875.                             <div class="col my-auto">
  876.                                 <!-- link -->
  877.                                 <a href="CHAR_URL" style="color: #fff;">
  878.                                     Name Surname
  879.                                 </a>
  880.  
  881.                                 <!-- relationship -->
  882.                                 <span class="faded small">
  883.                                     relationship
  884.                                 </span>
  885.                             </div>
  886.                             <div class="col-12 text-justify">
  887.                                 <!-- divider -->
  888.                                 <hr class="my-2" style="border-top: 4px dotted #242424;" />
  889.  
  890.                                 <p>
  891.                                     <i class="fa-solid fa-quote-left" style="color: #5c35de;"></i>
  892.                                     Character's thoughts on this character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit.
  893.                                     <i class="fa-solid fa-quote-right" style="color: #5c35de;"></i>
  894.                                 </p>
  895.  
  896.                             </div>
  897.                         </div>
  898.                         <!-- end friend 2 -->
  899.  
  900.                         <!-- divider -->
  901.                         <hr class="my-2" style="opacity: 0;" />
  902.  
  903.                         <!-- friend 3 -->
  904.                         <div class="row no-gutters p-3" style="background: #1a1a1a; border-radius: 20px;">
  905.                             <div class="col-auto mr-2">
  906.                                 <!-- character image // replace url with your own -->
  907.                                 <img
  908.                                    src="
  909.                                    https://cdn.discordapp.com/attachments/700436369570267229/1085890614899527700/S_Icon_Callie_alt.png
  910.                                "
  911.                                    style="height: 50px; width: 50px; border-radius: 50%; object-fit: cover;"
  912.                                />
  913.                             </div>
  914.                             <div class="col my-auto">
  915.                                 <!-- link -->
  916.                                 <a href="CHAR_URL" style="color: #fff;">
  917.                                     Name Surname
  918.                                 </a>
  919.  
  920.                                 <!-- relationship -->
  921.                                 <span class="faded small">
  922.                                     relationship
  923.                                 </span>
  924.                             </div>
  925.                             <div class="col-12 text-justify">
  926.                                 <!-- divider -->
  927.                                 <hr class="my-2" style="border-top: 4px dotted #242424;" />
  928.  
  929.                                 <p>
  930.                                     <i class="fa-solid fa-quote-left" style="color: #5c35de;"></i>
  931.                                     Character's thoughts on this character. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit.
  932.                                     <i class="fa-solid fa-quote-right" style="color: #5c35de;"></i>
  933.                                 </p>
  934.  
  935.                             </div>
  936.                         </div>
  937.                         <!-- end friend 3 -->
  938.  
  939.                         <!-- add more above here // dont forget the dividers! -->
  940.                     </div>
  941.                     <!-- end friends page -->
  942.  
  943.                 </div>
  944.                 <!-- end content-->
  945.  
  946.                 <!-- music player -->
  947.                 <div class="row no-gutters px-3">
  948.                     <!-- button -->
  949.                     <div class="col-auto">
  950.                         <!-- music player
  951.                        
  952.                        - dont remove /embed/
  953.                        - replace [4h1VQ3ozUBs] with the ending code of your desired video
  954.                        
  955.                        -->
  956.                         <iframe src="https://www.youtube.com/embed/4h1VQ3ozUBs?controls=0" style="position: absolute; top: 0; left: 0; opacity: 0.0001;" frameborder="0" class="w-100 h-100"></iframe>
  957.  
  958.                         <!-- icon -->
  959.                         <i class="fa-light fa-play-circle" style="color: #eded3d;"></i>
  960.                     </div>
  961.  
  962.                     <!-- line -->
  963.                     <div class="col mx-3 my-auto">
  964.                         <hr class="my-0" style="border-top: 4px dotted #242424;" />
  965.                     </div>
  966.  
  967.                     <!-- song info -->
  968.                     <div class="col-auto">
  969.                         Song Name - Artist
  970.                     </div>
  971.                 </div>
  972.                 <!-- end music player -->
  973.  
  974.             </div>
  975.         </div>
  976.         <!-- end right side -->
  977.        
  978.     </div>
  979. </div>
  980. <!-- end content -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!