API tools faq
paste
Advertisement
SparklyLightus

Splatoon

SparklyLightus
Jan 26th, 2021 (edited)
816
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 17.76 KB | None | 0 0
raw download clone embed print report
  1. <div class="m-2 p-0 card rounded-0">
  2.    
  3. <!-- HEADER -->
  4. <div class="p-1 pl-3 card-header text-right" style="background: #848484 url('https://cdn.discordapp.com/attachments/579088492152487946/800916228034002965/constellations_small.png'); border-radius: 0px; min-height: 150px;">
  5.     <div style="margin-top: 95px;">
  6.         <!-- NAME -->
  7.         <h1 class="m-0 display-3">Name • X<span style="font-size: x-large;">lvl</span></h1>
  8.     </div>
  9. </div>
  10. <!-- BODY -->
  11. <div class="m-0 row">
  12.     <!-- LEFT - IMAGE -->
  13.     <div class="p-0 col-lg-5 justify-content-center">
  14.         <!-- FOCUS ON TOP CENTER - change 'cover' to a specific number if you want a set size in all screen widths - any image size will work -->
  15.         <div style="background: url('//via.placeholder.com/600') top center; background-size: cover; background-repeat: no-repeat; height: 507px; width: 100%;"></div>
  16.     </div>
  17.     <!-- RIGHT - INFORMATION -->
  18.     <div class="p-0 col-lg-7">
  19.         <!-- NAVIGATION -->
  20.         <ul class="mx-2 nav nav-pills" style="position: absolute; right: 0px;">
  21.             <li class="nav-item"><a data-toggle="tab" style="border-radius: 0px 0px 0px 25px;" class="nav-link active" href="#one">
  22.                 <i class="fas fa-user"></i> </a></li>
  23.             <li class="nav-item"><a data-toggle="tab" style="border-radius: 0px;" class="nav-link" href="#two">
  24.                 <i class="fas fa-user-chart"></i> </a></li>
  25.             <li class="nav-item"><a data-toggle="tab" style="border-radius: 0px 0px 25px 0px;" class="nav-link" href="#three">
  26.                 <i class="fas fa-users"></i> </a></li>
  27.         </ul>
  28.         <!-- NAV CONTENT -->
  29.         <div class="tab-content" style="margin-top: 47px;">
  30.            
  31.         <!-- ---------------------- ONE -->
  32.         <div class="px-3 pb-3 tab-pane fade show active" id="one">
  33.             <!-- OVERVIEW BOX -->
  34.             <div class="p-1 card rounded-0 border-0 bg-faded">
  35.                 <!-- BASICS -->
  36.                 <p class="m-1 text-uppercase text-center text-secondary">
  37.                     species • pronouns • age
  38.                 </p>
  39.                 <hr class="m-0">
  40.                 <!-- PARAGRAPHS -->
  41.                 <div class="p-2 text-justify" style="height: 368px; overflow: auto;">
  42.                     <p style="text-indent:20px;">Introduce character here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur dignissim orci nec accumsan. Nam rhoncus porta luctus. Vestibulum quis malesuada lectus. Sed eu vestibulum nulla. Etiam fringilla varius nunc, eget posuere tortor pretium quis. Pellentesque sed luctus erat, eget ornare nulla. Sed fermentum massa eget sodales auctor. Suspendisse potenti. Vivamus ut enim sit amet urna dapibus blandit ac ut augue. Etiam ut quam eu lorem congue tempor ut eu urna. </p>
  43.                     <p style="text-indent:20px;">Integer convallis interdum augue, eu tempus nibh pharetra quis. Donec semper massa quis dui interdum luctus. Quisque at lectus dolor. Suspendisse tristique non sem at consectetur. Aenean egestas mauris sit amet sagittis vulputate. Sed diam enim, pretium vitae tempus sit amet, accumsan non mauris. Vivamus volutpat odio sed hendrerit auctor. Maecenas dictum mi non lectus ullamcorper imperdiet.</p>
  44.                     <p style="text-indent:20px;"> Phasellus vitae egestas metus. Praesent ac sapien iaculis mi gravida placerat. Suspendisse euismod quis dui vel imperdiet. In eu lectus rhoncus, hendrerit magna eget, mattis odio. Donec luctus leo sit amet odio maximus lacinia gravida sit amet sapien. Nam et lacinia purus, vitae varius justo.</p>
  45.                 </div>
  46.                 <!-- FAVES -->
  47.                 <div class="m-0 row text-right">
  48.                     <!-- STAGE -->
  49.                     <div class="p-2 col-md">
  50.                         <span class="pull-left font-weight-bold text-secondary">FAVORITE STAGE</span>
  51.                         content
  52.                     </div>
  53.                     <!-- TRACK -->
  54.                     <div class="p-2 col-md">
  55.                         <span class="pull-left font-weight-bold text-secondary">FAVORITE TRACK</span>
  56.                         content
  57.                     </div>
  58.                 </div>
  59.             </div>
  60.         </div> <!-- end one -->
  61.         <!-- ---------------------- TWO -->
  62.         <div class="px-2 pb-2 tab-pane fade" id="two">
  63.             <!-- RANKS -->
  64.             <div class="m-1 p-0">
  65.                 <h1 class=" ml-1 mb-0">Ranks</h1>
  66.                 <div class="m-1 row text-right bg-faded">
  67.                     <!-- SPLAT ZONES -->
  68.                     <div class="p-2 col-md-6">
  69.                         <p><span class="pull-left font-weight-bold text-secondary">SPLAT ZONES</span>
  70.                         B+</p>
  71.                     </div>
  72.                     <!-- SPLAT ZONES -->
  73.                     <div class="p-2 col-md-6">
  74.                         <p><span class="pull-left font-weight-bold text-secondary">TOWER CONTROL</span>
  75.                         A</p>
  76.                     </div>
  77.                     <!-- SPLAT ZONES -->
  78.                     <div class="p-2 col-md-6">
  79.                         <p><span class="pull-left font-weight-bold text-secondary">RAINMAKER</span>
  80.                         X</p>
  81.                     </div>
  82.                     <!-- SPLAT ZONES -->
  83.                     <div class="p-2 col-md-6">
  84.                         <p><span class="pull-left font-weight-bold text-secondary">CLAM BLITZ</span>
  85.                         C-</p>
  86.                     </div>
  87.                 </div>
  88.             </div>
  89.             <!-- BOTTOM ROW -->
  90.             <div class="m-1 row">
  91.                 <!-- LEFT -->
  92.                 <div class="p-1 col-lg-6">
  93.                     <!-- PRO FRESH ONAL -->
  94.                     <div class="p-2 bg-faded text-right">
  95.                         <p><span class="pull-left font-weight-bold text-secondary">PRO<em>FRESH</em>ONAL</span>
  96.                         40</p>
  97.                     </div>
  98.                     <!-- WEAPONS -->
  99.                     <h1 class="m-0 mb-1">Main Weapons</h1>
  100.                     <div class="p-0 bg-faded" style="height: 266px; overflow: auto;">
  101.                         <!-- WEAPON ONE -->
  102.                         <h4 class="m-1 text-center text-secondary">WEAPON NAME</h4>
  103.                         <div class="m-0 justify-content-center">
  104.                             <!-- MAIN IMAGE -->
  105.                             <img src="//via.placeholder.com/200" style="height: 100px;">
  106.                             <!-- // -->
  107.                             <div class="ml-4">
  108.                                 <div data-toggle="tooltip" title="Sub Weapon">
  109.                                     <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 50px; width: 50px;"></div>
  110.                                 <div class="mt-1" data-toggle="tooltip" title="Special Weapon">
  111.                                     <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 50px; width: 50px;"></div>
  112.                             </div>
  113.                         </div>
  114.                         <!-- WEAPON TWO -->
  115.                         <h4 class="m-1 text-center text-secondary">WEAPON NAME</h4>
  116.                         <div class="m-0 justify-content-center">
  117.                             <!-- MAIN IMAGE -->
  118.                             <img src="//via.placeholder.com/200" style="height: 100px;">
  119.                             <!-- // -->
  120.                             <div class="ml-4 mb-1">
  121.                                 <div data-toggle="tooltip" title="Sub Weapon">
  122.                                     <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 50px; width: 50px;"></div>
  123.                                 <div class="mt-1" data-toggle="tooltip" title="Special Weapon">
  124.                                     <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 50px; width: 50px;"></div>
  125.                             </div>
  126.                         </div>
  127.                     </div>
  128.                 </div> <!-- end left -->
  129.                 <!-- RIGHT -->
  130.                 <div class="p-1 col-lg-6">
  131.                     <h1 class="m-0 mb-1">Gear</h1>
  132.                     <div class="m-0 p-1 bg-faded" style="height: 304px; overflow: auto;">
  133.                         <!-- HEADGEAR -->
  134.                         <div class="m-1 row justify-content-center">
  135.                             <!-- MAIN IMAGE -->
  136.                             <img class="m-0 p-1 col-auto img-thumbnail rounded-circle" src="//via.placeholder.com/200" style="height: 110px; width: 110px;">
  137.                            
  138.                             <div class="m-0 p-0 col-auto">
  139.                                 <h4 class="m-1 text-secondary">HEADGEAR</h4><br>
  140.                                 <div class="align-items-end">
  141.                                     <span data-toggle="tooltip" title="Main Ability">
  142.                                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 50px; width: 50px;"></span>
  143.                                    
  144.                                     <span data-toggle="tooltip" title="Sub Ability">
  145.                                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 30px; width: 30px;"></span>
  146.                                     <span data-toggle="tooltip" title="Sub Ability">
  147.                                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 30px; width: 30px;"></span>
  148.                                     <span data-toggle="tooltip" title="Sub Ability">
  149.                                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 30px; width: 30px;"></span>
  150.                                 </div>
  151.                             </div>
  152.                         </div> <!-- end headgear -->
  153.                         <!-- CLOTHING -->
  154.                         <div class="m-1 row justify-content-center">
  155.                             <!-- MAIN IMAGE -->
  156.                             <img class="m-0 p-1 col-auto img-thumbnail rounded-circle" src="//via.placeholder.com/200" style="height: 110px; width: 110px;">
  157.                            
  158.                             <div class="m-0 p-0 col-auto">
  159.                                 <h4 class="m-1 text-secondary">CLOTHING</h4><br>
  160.                                 <div class="align-items-end">
  161.                                     <span data-toggle="tooltip" title="Main Ability">
  162.                                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 50px; width: 50px;"></span>
  163.                                    
  164.                                     <span data-toggle="tooltip" title="Sub Ability">
  165.                                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 30px; width: 30px;"></span>
  166.                                     <span data-toggle="tooltip" title="Sub Ability">
  167.                                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 30px; width: 30px;"></span>
  168.                                     <span data-toggle="tooltip" title="Sub Ability">
  169.                                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 30px; width: 30px;"></span>
  170.                                 </div>
  171.                             </div>
  172.                         </div> <!-- end clothing -->
  173.                         <!-- SHOE -->
  174.                         <div class="m-1 row justify-content-center">
  175.                             <!-- MAIN IMAGE -->
  176.                             <img class="m-0 p-1 col-auto img-thumbnail rounded-circle" src="//via.placeholder.com/200" style="height: 110px; width: 110px;">
  177.                            
  178.                             <div class="m-0 p-0 col-auto">
  179.                                 <h4 class="m-1 text-secondary">SHOE</h4><br>
  180.                                 <div class="align-items-end">
  181.                                     <span data-toggle="tooltip" title="Main Ability">
  182.                                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 50px; width: 50px;"></span>
  183.                                    
  184.                                     <span data-toggle="tooltip" title="Sub Ability">
  185.                                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 30px; width: 30px;"></span>
  186.                                     <span data-toggle="tooltip" title="Sub Ability">
  187.                                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 30px; width: 30px;"></span>
  188.                                     <span data-toggle="tooltip" title="Sub Ability">
  189.                                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 30px; width: 30px;"></span>
  190.                                 </div>
  191.                             </div>
  192.                         </div> <!-- end shoe -->
  193.                     </div>
  194.                 </div> <!-- end right -->
  195.             </div>
  196.         </div> <!-- end two -->
  197.         <!-- ---------------------- THREE -->
  198.         <div class="px-3 pb-3 tab-pane fade" id="three">
  199.             <h1 class=" ml-1 mb-0">Teamname</h1>
  200.             <!-- BOX -->
  201.             <div class="p-2 card rounded-0 border-0 bg-faded" style="height: 419px; overflow: auto;">
  202.                 <!-- The first image is the character, second is their weapon. -->
  203.                
  204.                 <!-- PERSON -->
  205.                 <div>
  206.                     <!-- IMAGES -->
  207.                     <div class="p-1 justify-content-center align-items-end float-left">
  208.                         <img class="img-thumbnail rounded-circle" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
  209.                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 70px; width: 70px;">
  210.                     </div>
  211.                     <!-- TEXT -->
  212.                     <h1 class="m-1 display-4 text-secondary">
  213.                         Name • X<span style="font-size: x-large;">lvl</span></h1>
  214.                    
  215.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique mauris in malesuada luctus. Integer porta lobortis turpis, vel sollicitudin tellus faucibus in. Suspendisse posuere odio in ipsum rhoncus vestibulum. Proin vel metus pharetra, pretium sapien eu, aliquam purus. Sed leo nunc, placerat vel sapien non, pulvinar eleifend elit. Suspendisse maximus urna at ultrices pellentesque. Aenean eget rhoncus neque, id interdum risus. Nunc urna arcu, varius eleifend ornare quis, dapibus tempor velit. Cras quis ullamcorper neque. </p>
  216.                 </div>
  217.                 <hr class="m-1">
  218.                 <!-- PERSON -->
  219.                 <div>
  220.                     <!-- IMAGES -->
  221.                     <div class="p-1 justify-content-center align-items-end float-left">
  222.                         <img class="img-thumbnail rounded-circle" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
  223.                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 70px; width: 70px;">
  224.                     </div>
  225.                     <!-- TEXT -->
  226.                     <h1 class="m-1 display-4 text-secondary">
  227.                         Name • X<span style="font-size: x-large;">lvl</span></h1>
  228.                    
  229.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique mauris in malesuada luctus. Integer porta lobortis turpis, vel sollicitudin tellus faucibus in. Suspendisse posuere odio in ipsum rhoncus vestibulum. Proin vel metus pharetra, pretium sapien eu, aliquam purus. Sed leo nunc, placerat vel sapien non, pulvinar eleifend elit. Suspendisse maximus urna at ultrices pellentesque. Aenean eget rhoncus neque, id interdum risus. Nunc urna arcu, varius eleifend ornare quis, dapibus tempor velit. Cras quis ullamcorper neque. </p>
  230.                 </div>
  231.                 <hr class="m-1">
  232.                 <!-- PERSON -->
  233.                 <div>
  234.                     <!-- IMAGES -->
  235.                     <div class="p-1 justify-content-center align-items-end float-left">
  236.                         <img class="img-thumbnail rounded-circle" src="//via.placeholder.com/200" style="height: 150px; width: 150px;">
  237.                         <img class="rounded-circle" src="//via.placeholder.com/200" style="height: 70px; width: 70px;">
  238.                     </div>
  239.                     <!-- TEXT -->
  240.                     <h1 class="m-1 display-4 text-secondary">
  241.                         Name • X<span style="font-size: x-large;">lvl</span></h1>
  242.                    
  243.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique mauris in malesuada luctus. Integer porta lobortis turpis, vel sollicitudin tellus faucibus in. Suspendisse posuere odio in ipsum rhoncus vestibulum. Proin vel metus pharetra, pretium sapien eu, aliquam purus. Sed leo nunc, placerat vel sapien non, pulvinar eleifend elit. Suspendisse maximus urna at ultrices pellentesque. Aenean eget rhoncus neque, id interdum risus. Nunc urna arcu, varius eleifend ornare quis, dapibus tempor velit. Cras quis ullamcorper neque. </p>
  244.                 </div>
  245.             </div>
  246.         </div>
  247.            
  248.         </div><!-- end nav content -->
  249.     </div>
  250. </div>
  251. <!-- CREDIT -->
  252. <div class="p-0 text-center">
  253.     <hr class="m-0">
  254.     <a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="fal fa-code"></i></a>
  255.     <a data-toggle="tooltip" title="Layout by RavioliRobott" href="/RavioliRobott"><i class="fal fa-paint-brush"></i></a>
  256. </div>
  257.  
  258. </div>
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!