API tools faq
paste
Advertisement
rosiuel

20. SPLATTACK [html]

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