API tools faq
paste
SparklyLightus

Closet Alt

SparklyLightus
Jan 23rd, 2021 (edited)
365
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.66 KB | None | 0 0
raw download clone embed print report
  1. <div class="m-3 p-2 card rounded-0 border-0 bg-dark">
  2.     <div id="carousel" class="m-0 row carousel slide" data-ride="carousel">
  3.         <!-- INDICATOR -->
  4.         <div class="my-2 p-0 col-auto">
  5.             <div class="align-items-center" style="opacity: 1; width: 25px; height: 100%;">
  6.                 <a class="m-0" data-slide="prev" data-target="#carousel" role="button"><i class="fas fa-chevron-left fa-2x"></i></a>
  7.             </div>
  8.         </div>
  9.         <!-- CONTENT -->
  10.         <div class="p-0 col carousel-inner">
  11.             <!-- OUTFIT -->
  12.             <div class="carousel-item active" data-interval="100000">
  13.                 <div class="m-0 row">
  14.                     <!-- IMAGE -->
  15.                     <div class="p-0 col-lg-4 align-items-center">
  16.                         <img class="mx-auto" src="//via.placeholder.com/700x1000" style="max-width: 100%; max-height: 500px;">
  17.                     </div> <!-- end img -->
  18.                     <!-- TEXT -->
  19.                     <div class="p-0 pl-lg-2 col-lg-8" style="height: 500px; overflow: auto;">
  20.                         <!-- ------------- GENERAL DESCRIPTION -->
  21.                         <div class="p-2 card rounded-0 border-0">
  22.                             <h1 class="m-0 text-primary display-4" style="border-bottom: 1px solid;">NAME1</h1>
  23.                             <p>Describe the the character, or anything you want here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies fermentum ipsum eget placerat. Donec non tortor tincidunt, pellentesque justo a, consectetur felis. Integer vitae nisi nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultrices mollis massa cursus bibendum.</p>
  24.                             <p>Donec quis ultricies justo, nec dictum velit. Suspendisse blandit lacus orci, facilisis pharetra ipsum euismod non. Pellentesque fringilla vulputate lectus, vitae mollis justo consectetur et. Proin non viverra justo. Nulla turpis nisl, facilisis lobortis iaculis sed, volutpat non elit. Nam rutrum risus eros, sit amet sollicitudin nulla tincidunt ac. Duis magna velit, congue vitae ante eget, euismod dignissim elit. Nullam eu sapien nisl. Vestibulum maximus, eros vulputate vestibulum sagittis, libero est euismod lorem, at fermentum felis massa ac augue. </p>
  25.                         </div>
  26.                         <!-- ------------- ITEMS -->
  27.                         <!-- BOX -->
  28.                         <div class="p-2 card rounded-0 border-0 bg-faded">
  29.                             <h1 class="m-0 text-secondary">ITEM</h1>
  30.                             <p>Describe item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie ex velit, imperdiet rutrum quam sagittis non.</p>
  31.                         </div>
  32.                         <!-- BOX -->
  33.                         <div class="p-2 card rounded-0 border-0">
  34.                             <h1 class="m-0 text-secondary">ITEM</h1>
  35.                             <p>Describe item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie ex velit, imperdiet rutrum quam sagittis non.</p>
  36.                         </div>
  37.                         <!-- BOX -->
  38.                         <div class="p-2 card rounded-0 border-0 bg-faded">
  39.                             <h1 class="m-0 text-secondary">ITEM</h1>
  40.                             <p>Describe item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie ex velit, imperdiet rutrum quam sagittis non.</p>
  41.                         </div>
  42.                     </div> <!-- end text column -->
  43.                 </div>
  44.             </div>
  45.             <!-- OUTFIT -->
  46.             <div class="carousel-item" data-interval="100000">
  47.                 <div class="m-0 row">
  48.                     <!-- IMAGE -->
  49.                     <div class="p-0 col-lg-4 align-items-center">
  50.                         <img class="mx-auto" src="//via.placeholder.com/700x1000" style="max-width: 100%; max-height: 500px;">
  51.                     </div> <!-- end img -->
  52.                     <!-- TEXT -->
  53.                     <div class="p-0 pl-lg-2 col-lg-8" style="height: 500px; overflow: auto;">
  54.                         <!-- ------------- GENERAL DESCRIPTION -->
  55.                         <div class="p-2 card rounded-0 border-0">
  56.                             <h1 class="m-0 text-primary display-4" style="border-bottom: 1px solid;">NAME2</h1>
  57.                             <p>Describe the the character, or anything you want here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies fermentum ipsum eget placerat. Donec non tortor tincidunt, pellentesque justo a, consectetur felis. Integer vitae nisi nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultrices mollis massa cursus bibendum.</p>
  58.                             <p>Donec quis ultricies justo, nec dictum velit. Suspendisse blandit lacus orci, facilisis pharetra ipsum euismod non. Pellentesque fringilla vulputate lectus, vitae mollis justo consectetur et. Proin non viverra justo. Nulla turpis nisl, facilisis lobortis iaculis sed, volutpat non elit. Nam rutrum risus eros, sit amet sollicitudin nulla tincidunt ac. Duis magna velit, congue vitae ante eget, euismod dignissim elit. Nullam eu sapien nisl. Vestibulum maximus, eros vulputate vestibulum sagittis, libero est euismod lorem, at fermentum felis massa ac augue. </p>
  59.                         </div>
  60.                         <!-- ------------- ITEMS -->
  61.                         <!-- BOX -->
  62.                         <div class="p-2 card rounded-0 border-0 bg-faded">
  63.                             <h1 class="m-0 text-secondary">ITEM</h1>
  64.                             <p>Describe item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie ex velit, imperdiet rutrum quam sagittis non.</p>
  65.                         </div>
  66.                         <!-- BOX -->
  67.                         <div class="p-2 card rounded-0 border-0">
  68.                             <h1 class="m-0 text-secondary">ITEM</h1>
  69.                             <p>Describe item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie ex velit, imperdiet rutrum quam sagittis non.</p>
  70.                         </div>
  71.                         <!-- BOX -->
  72.                         <div class="p-2 card rounded-0 border-0 bg-faded">
  73.                             <h1 class="m-0 text-secondary">ITEM</h1>
  74.                             <p>Describe item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie ex velit, imperdiet rutrum quam sagittis non.</p>
  75.                         </div>
  76.                     </div> <!-- end text column -->
  77.                 </div>
  78.             </div>
  79.             <!-- OUTFIT -->
  80.             <div class="carousel-item" data-interval="100000">
  81.                 <div class="m-0 row">
  82.                     <!-- IMAGE -->
  83.                     <div class="p-0 col-lg-4 align-items-center">
  84.                         <img class="mx-auto" src="//via.placeholder.com/700x1000" style="max-width: 100%; max-height: 500px;">
  85.                     </div> <!-- end img -->
  86.                     <!-- TEXT -->
  87.                     <div class="p-0 pl-lg-2 col-lg-8" style="height: 500px; overflow: auto;">
  88.                         <!-- ------------- GENERAL DESCRIPTION -->
  89.                         <div class="p-2 card rounded-0 border-0">
  90.                             <h1 class="m-0 text-primary display-4" style="border-bottom: 1px solid;">NAME3</h1>
  91.                             <p>Describe the the character, or anything you want here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies fermentum ipsum eget placerat. Donec non tortor tincidunt, pellentesque justo a, consectetur felis. Integer vitae nisi nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultrices mollis massa cursus bibendum.</p>
  92.                             <p>Donec quis ultricies justo, nec dictum velit. Suspendisse blandit lacus orci, facilisis pharetra ipsum euismod non. Pellentesque fringilla vulputate lectus, vitae mollis justo consectetur et. Proin non viverra justo. Nulla turpis nisl, facilisis lobortis iaculis sed, volutpat non elit. Nam rutrum risus eros, sit amet sollicitudin nulla tincidunt ac. Duis magna velit, congue vitae ante eget, euismod dignissim elit. Nullam eu sapien nisl. Vestibulum maximus, eros vulputate vestibulum sagittis, libero est euismod lorem, at fermentum felis massa ac augue. </p>
  93.                         </div>
  94.                         <!-- ------------- ITEMS -->
  95.                         <!-- BOX -->
  96.                         <div class="p-2 card rounded-0 border-0 bg-faded">
  97.                             <h1 class="m-0 text-secondary">ITEM</h1>
  98.                             <p>Describe item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie ex velit, imperdiet rutrum quam sagittis non.</p>
  99.                         </div>
  100.                         <!-- BOX -->
  101.                         <div class="p-2 card rounded-0 border-0">
  102.                             <h1 class="m-0 text-secondary">ITEM</h1>
  103.                             <p>Describe item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie ex velit, imperdiet rutrum quam sagittis non.</p>
  104.                         </div>
  105.                         <!-- BOX -->
  106.                         <div class="p-2 card rounded-0 border-0 bg-faded">
  107.                             <h1 class="m-0 text-secondary">ITEM</h1>
  108.                             <p>Describe item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie ex velit, imperdiet rutrum quam sagittis non.</p>
  109.                         </div>
  110.                     </div> <!-- end text column -->
  111.                 </div>
  112.             </div>
  113.             <!-- OUTFIT -->
  114.             <div class="carousel-item" data-interval="100000">
  115.                 <div class="m-0 row">
  116.                     <!-- IMAGE -->
  117.                     <div class="p-0 col-lg-4 align-items-center">
  118.                         <img class="mx-auto" src="//via.placeholder.com/700x1000" style="max-width: 100%; max-height: 500px;">
  119.                     </div> <!-- end img -->
  120.                     <!-- TEXT -->
  121.                     <div class="p-0 pl-lg-2 col-lg-8" style="height: 500px; overflow: auto;">
  122.                         <!-- ------------- GENERAL DESCRIPTION -->
  123.                         <div class="p-2 card rounded-0 border-0">
  124.                             <h1 class="m-0 text-primary display-4" style="border-bottom: 1px solid;">NAME4</h1>
  125.                             <p>Describe the the character, or anything you want here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies fermentum ipsum eget placerat. Donec non tortor tincidunt, pellentesque justo a, consectetur felis. Integer vitae nisi nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed ultrices mollis massa cursus bibendum.</p>
  126.                             <p>Donec quis ultricies justo, nec dictum velit. Suspendisse blandit lacus orci, facilisis pharetra ipsum euismod non. Pellentesque fringilla vulputate lectus, vitae mollis justo consectetur et. Proin non viverra justo. Nulla turpis nisl, facilisis lobortis iaculis sed, volutpat non elit. Nam rutrum risus eros, sit amet sollicitudin nulla tincidunt ac. Duis magna velit, congue vitae ante eget, euismod dignissim elit. Nullam eu sapien nisl. Vestibulum maximus, eros vulputate vestibulum sagittis, libero est euismod lorem, at fermentum felis massa ac augue. </p>
  127.                         </div>
  128.                         <!-- ------------- ITEMS -->
  129.                         <!-- BOX -->
  130.                         <div class="p-2 card rounded-0 border-0 bg-faded">
  131.                             <h1 class="m-0 text-secondary">ITEM</h1>
  132.                             <p>Describe item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie ex velit, imperdiet rutrum quam sagittis non.</p>
  133.                         </div>
  134.                         <!-- BOX -->
  135.                         <div class="p-2 card rounded-0 border-0">
  136.                             <h1 class="m-0 text-secondary">ITEM</h1>
  137.                             <p>Describe item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie ex velit, imperdiet rutrum quam sagittis non.</p>
  138.                         </div>
  139.                         <!-- BOX -->
  140.                         <div class="p-2 card rounded-0 border-0 bg-faded">
  141.                             <h1 class="m-0 text-secondary">ITEM</h1>
  142.                             <p>Describe item. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie ex velit, imperdiet rutrum quam sagittis non.</p>
  143.                         </div>
  144.                     </div> <!-- end text column -->
  145.                 </div>
  146.             </div>
  147.             <!-- add more outfits above here - copy/paste an outfit from above (except the one that has 'active' on the class) -->
  148.         </div>
  149.         <!-- INDICATOR -->
  150.         <div class="my-2 p-0 col-auto">
  151.             <div class="pl-2 align-items-center" style="opacity: 1; width: 25px; height: 100%;">
  152.                 <a class="m-0" data-slide="next" data-target="#carousel" role="button"><i class="fas fa-chevron-right fa-2x"></i></a>
  153.             </div>
  154.         </div>
  155.     </div>
  156.     <!-- CREDIT -->
  157.     <div class="mt-2 p-1 bg-faded justify-content-between">
  158.         <h6 class="m-0 text-secondary">
  159.             Art by @/user, @/user |
  160.             Designed by @/user
  161.         </h6>
  162.         <a data-toggle="tooltip" title="Code by SparklyCodes" href="/SparklyCodes"><i class="fal fa-code"></i></a>
  163.     </div>
  164. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!