API tools faq
paste
Advertisement
SparklyLightus

Folder Header

SparklyLightus
Jun 13th, 2021 (edited)
1,225
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 14.08 KB | None | 0 0
raw download clone embed print report
  1. <div class="row no-gutters">
  2.     <!-- STORIES -->
  3.     <div class="col-lg-6"> <div class="m-1 p-0 card border-0 bg-faded">
  4.         <!-- HEADER -->
  5.         <h1 class="m-2 text-center font-weight-light"><a href="LINK-TO-STORY-HUB-IF-U-HAVE-IT">
  6.             <i class="fas fa-star fa-sm"></i> Stories <i class="fas fa-star fa-sm"></i>
  7.         </a></h1>
  8.         <hr class="m-0">
  9.         <!-- CONTAINER -->
  10.         <div style="height:350px; overflow:auto;">
  11.             <!-- STORY -->
  12.             <div class="m-1 card border-0">
  13.                 <a class="p-1 btn btn-primary text-white" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="S1 S2 S3 S4 S5 S6 S7 S8 S9 S10">
  14.                 Toggle descriptions</a>
  15.             </div>
  16.             <!-- STORY -->
  17.             <div class="m-1 p-2 card border-0">
  18.                 <h4 class="m-0 font-weight-light text-secondary">
  19.                     <a href="TAG" class="p-1 px-2 btn btn-outline-secondary"> <i class="fas fa-tag"></i> Tag</a>
  20.                     Name</h4>
  21.                 <div class="collapse multi-collapse" id="S1">
  22.                     <hr class="m-0 mt-1">
  23.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate feugiat dolor ut varius. Vivamus auctor felis blandit enim laoreet venenatis. Vestibulum nisl elit, ultricies et bibendum vitae, rhoncus sit amet diam.</p>
  24.                 </div>
  25.             </div>
  26.             <!-- STORY -->
  27.             <div class="m-1 p-2 card border-0">
  28.                 <h4 class="m-0 font-weight-light text-secondary">
  29.                     <a href="TAG" class="p-1 px-2 btn btn-outline-secondary"> <i class="fas fa-tag"></i> Tag</a>
  30.                     Name</h4>
  31.                 <div class="collapse multi-collapse" id="S2">
  32.                     <hr class="m-0 mt-1">
  33.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate feugiat dolor ut varius. Vivamus auctor felis blandit enim laoreet venenatis. Vestibulum nisl elit, ultricies et bibendum vitae, rhoncus sit amet diam.</p>
  34.                 </div>
  35.             </div>
  36.             <!-- STORY -->
  37.             <div class="m-1 p-2 card border-0">
  38.                 <h4 class="m-0 font-weight-light text-secondary">
  39.                     <a href="TAG" class="p-1 px-2 btn btn-outline-secondary"> <i class="fas fa-tag"></i> Tag</a>
  40.                     Name</h4>
  41.                 <div class="collapse multi-collapse" id="S3">
  42.                     <hr class="m-0 mt-1">
  43.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate feugiat dolor ut varius. Vivamus auctor felis blandit enim laoreet venenatis. Vestibulum nisl elit, ultricies et bibendum vitae, rhoncus sit amet diam.</p>
  44.                 </div>
  45.             </div>
  46.             <!-- STORY -->
  47.             <div class="m-1 p-2 card border-0">
  48.                 <h4 class="m-0 font-weight-light text-secondary">
  49.                     <a href="TAG" class="p-1 px-2 btn btn-outline-secondary"> <i class="fas fa-tag"></i> Tag</a>
  50.                     Name</h4>
  51.                 <div class="collapse multi-collapse" id="S4">
  52.                     <hr class="m-0 mt-1">
  53.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate feugiat dolor ut varius. Vivamus auctor felis blandit enim laoreet venenatis. Vestibulum nisl elit, ultricies et bibendum vitae, rhoncus sit amet diam.</p>
  54.                 </div>
  55.             </div>
  56.             <!-- STORY -->
  57.             <div class="m-1 p-2 card border-0">
  58.                 <h4 class="m-0 font-weight-light text-secondary">
  59.                     <a href="TAG" class="p-1 px-2 btn btn-outline-secondary"> <i class="fas fa-tag"></i> Tag</a>
  60.                     Name</h4>
  61.                 <div class="collapse multi-collapse" id="S5">
  62.                     <hr class="m-0 mt-1">
  63.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate feugiat dolor ut varius. Vivamus auctor felis blandit enim laoreet venenatis. Vestibulum nisl elit, ultricies et bibendum vitae, rhoncus sit amet diam.</p>
  64.                 </div>
  65.             </div>
  66.             <!-- STORY -->
  67.             <div class="m-1 p-2 card border-0">
  68.                 <h4 class="m-0 font-weight-light text-secondary">
  69.                     <a href="TAG" class="p-1 px-2 btn btn-outline-secondary"> <i class="fas fa-tag"></i> Tag</a>
  70.                     Name</h4>
  71.                 <div class="collapse multi-collapse" id="S6">
  72.                     <hr class="m-0 mt-1">
  73.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate feugiat dolor ut varius. Vivamus auctor felis blandit enim laoreet venenatis. Vestibulum nisl elit, ultricies et bibendum vitae, rhoncus sit amet diam.</p>
  74.                 </div>
  75.             </div>
  76.             <!-- STORY -->
  77.             <div class="m-1 p-2 card border-0">
  78.                 <h4 class="m-0 font-weight-light text-secondary">
  79.                     <a href="TAG" class="p-1 px-2 btn btn-outline-secondary"> <i class="fas fa-tag"></i> Tag</a>
  80.                     Name</h4>
  81.                 <div class="collapse multi-collapse" id="S7">
  82.                     <hr class="m-0 mt-1">
  83.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate feugiat dolor ut varius. Vivamus auctor felis blandit enim laoreet venenatis. Vestibulum nisl elit, ultricies et bibendum vitae, rhoncus sit amet diam.</p>
  84.                 </div>
  85.             </div>
  86.             <!-- STORY -->
  87.             <div class="m-1 p-2 card border-0">
  88.                 <h4 class="m-0 font-weight-light text-secondary">
  89.                     <a href="TAG" class="p-1 px-2 btn btn-outline-secondary"> <i class="fas fa-tag"></i> Tag</a>
  90.                     Name</h4>
  91.                 <div class="collapse multi-collapse" id="S8">
  92.                     <hr class="m-0 mt-1">
  93.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate feugiat dolor ut varius. Vivamus auctor felis blandit enim laoreet venenatis. Vestibulum nisl elit, ultricies et bibendum vitae, rhoncus sit amet diam.</p>
  94.                 </div>
  95.             </div>
  96.             <!-- STORY -->
  97.             <div class="m-1 p-2 card border-0">
  98.                 <h4 class="m-0 font-weight-light text-secondary">
  99.                     <a href="TAG" class="p-1 px-2 btn btn-outline-secondary"> <i class="fas fa-tag"></i> Tag</a>
  100.                     Name</h4>
  101.                 <div class="collapse multi-collapse" id="S9">
  102.                     <hr class="m-0 mt-1">
  103.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate feugiat dolor ut varius. Vivamus auctor felis blandit enim laoreet venenatis. Vestibulum nisl elit, ultricies et bibendum vitae, rhoncus sit amet diam.</p>
  104.                 </div>
  105.             </div>
  106.             <!-- STORY -->
  107.             <div class="m-1 p-2 card border-0">
  108.                 <h4 class="m-0 font-weight-light text-secondary">
  109.                     <a href="TAG" class="p-1 px-2 btn btn-outline-secondary"> <i class="fas fa-tag"></i> Tag</a>
  110.                     Name</h4>
  111.                 <div class="collapse multi-collapse" id="S10">
  112.                     <hr class="m-0 mt-1">
  113.                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vulputate feugiat dolor ut varius. Vivamus auctor felis blandit enim laoreet venenatis. Vestibulum nisl elit, ultricies et bibendum vitae, rhoncus sit amet diam.</p>
  114.                 </div>
  115.             </div>
  116.         </div>
  117.     </div> </div>
  118.     <!-- TAGS + BUTTONS -->
  119.     <div class="col-lg-6">
  120.         <!-- FOLDER BUTTONS -->
  121.         <!-- change the icons, available at fontawesome.com to customize each folder! -->
  122.         <div class="row no-gutters">
  123.             <!-- FOLDER -->
  124.             <div class="p-1 col-sm col-4">
  125.                 <a href="LINK" class="btn btn-default w-100">
  126.                     <i class="fas fa-heart fa-lg"></i><br> Folder Name </a>
  127.             </div>
  128.             <!-- FOLDER -->
  129.             <div class="p-1 col-sm col-4">
  130.                 <a href="LINK" class="btn btn-default w-100">
  131.                     <i class="fas fa-heart fa-lg"></i><br> Folder Name </a>
  132.             </div>
  133.             <!-- FOLDER -->
  134.             <div class="p-1 col-sm col-4">
  135.                 <a href="LINK" class="btn btn-default w-100">
  136.                     <i class="fas fa-heart fa-lg"></i><br> Folder Name </a>
  137.             </div>
  138.             <!-- FOLDER -->
  139.             <div class="p-1 col-sm col-4">
  140.                 <a href="LINK" class="btn btn-default w-100">
  141.                     <i class="fas fa-heart fa-lg"></i><br> Folder Name </a>
  142.             </div>
  143.             <!-- FOLDER -->
  144.             <div class="p-1 col-sm col-4">
  145.                 <a href="LINK" class="btn btn-default w-100">
  146.                     <i class="fas fa-heart fa-lg"></i><br> Folder Name </a>
  147.             </div>
  148.             <!-- FOLDER -->
  149.             <div class="p-1 col-sm col-4">
  150.                 <a href="LINK" class="btn btn-default w-100">
  151.                     <i class="fas fa-heart fa-lg"></i><br> Folder Name </a>
  152.             </div>
  153.             <!-- FOLDER -->
  154.             <div class="p-1 col-sm col-4">
  155.                 <a href="LINK" class="btn btn-default w-100">
  156.                     <i class="fas fa-heart fa-lg"></i><br> Folder Name </a>
  157.             </div>
  158.             <!-- FOLDER -->
  159.             <div class="p-1 col-sm col-4">
  160.                 <a href="LINK" class="btn btn-default w-100">
  161.                     <i class="fas fa-heart fa-lg"></i><br> Folder Name </a>
  162.             </div>
  163.         </div>
  164.         <!-- TAGS -->
  165.         <div class="m-1 p-0 card border-0 bg-faded">
  166.             <!-- HEADER -->
  167.             <h1 class="text-center font-weight-light m-2"><a href="/[your-username]/characters">
  168.                 <i class="fas fa-star fa-sm"></i> Filters <i class="fas fa-star fa-sm"></i>
  169.             </a></h1>
  170.             <hr class="m-0">
  171.             <!-- CONTAINER -->
  172.             <div style="height:226px; overflow:auto;">
  173.                 <!-- FILTER 1 -->
  174.                 <div class="m-2">
  175.                     <h3 class="m-2 text-primary">By [filter1]:</h3>
  176.                    
  177.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  178.                         <i class="fas fa-tag"></i> Tag</a>
  179.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  180.                         <i class="fas fa-tag"></i> Tag</a>
  181.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  182.                         <i class="fas fa-tag"></i> Tag</a>
  183.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  184.                         <i class="fas fa-tag"></i> Tag</a>
  185.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  186.                         <i class="fas fa-tag"></i> Tag</a>
  187.                 </div>
  188.                 <!-- FILTER 2 -->
  189.                 <div class="m-2">
  190.                     <h3 class="m-2 text-primary">By [filter2]:</h3>
  191.                    
  192.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  193.                         <i class="fas fa-tag"></i> Tag</a>
  194.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  195.                         <i class="fas fa-tag"></i> Tag</a>
  196.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  197.                         <i class="fas fa-tag"></i> Tag</a>
  198.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  199.                         <i class="fas fa-tag"></i> Tag</a>
  200.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  201.                         <i class="fas fa-tag"></i> Tag</a>
  202.                 </div>
  203.                 <!-- FILTER 3 -->
  204.                 <div class="m-2">
  205.                     <h3 class="m-2 text-primary">By [filter3]:</h3>
  206.                    
  207.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  208.                         <i class="fas fa-tag"></i> Tag</a>
  209.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  210.                         <i class="fas fa-tag"></i> Tag</a>
  211.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  212.                         <i class="fas fa-tag"></i> Tag</a>
  213.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  214.                         <i class="fas fa-tag"></i> Tag</a>
  215.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  216.                         <i class="fas fa-tag"></i> Tag</a>
  217.                 </div>
  218.                 <!-- FILTER 4 -->
  219.                 <div class="m-2">
  220.                     <h3 class="m-2 text-primary">By [filter4]:</h3>
  221.                    
  222.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  223.                         <i class="fas fa-tag"></i> Tag</a>
  224.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  225.                         <i class="fas fa-tag"></i> Tag</a>
  226.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  227.                         <i class="fas fa-tag"></i> Tag</a>
  228.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  229.                         <i class="fas fa-tag"></i> Tag</a>
  230.                     <a href="TAGLINK" class="mb-1 p-1 px-2 btn btn-outline-secondary">
  231.                         <i class="fas fa-tag"></i> Tag</a>
  232.                 </div>
  233.             </div>
  234.         </div>
  235.     </div>
  236.     <!-- CREDIT, DON'T MOVE -->
  237.     <div class="col-12 text-center p-1">
  238.         <a data-toggle="tooltip" title="Profile by SparklyCodes" href="/SparklyCodes"><i class="far fa-code"></i></a>
  239.     </div>
  240. </div>
  241.  
  242. <!-- BACK TO TOP BUTTON -->
  243. <a href="#top" class="m-1 p-1 fixed-bottom btn btn-default border-0" style="left: 0; left: inherit; font-size: 15px; z-index: 100;">
  244.     BACK TO TOP </a>
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!