API tools faq
paste
Advertisement
CrispinAsheYA

Directory Code 1 (Bootstrap)

CrispinAsheYA
Mar 28th, 2023 (edited)
623
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.21 KB | Source Code | 0 0
raw download clone embed print report
  1. <!------------------------------- START ACTUAL CODE -------------------------------->
  2. <div class="col-10 p-0 mx-auto border-0 rounded-0" style="font-size:1rem; font-family:'comic sans ms';">
  3.  
  4.   <!------------------------------- START HEADING -------------------------------->
  5.   <div class="col-12 p-0" style="border:#000000 8px solid; border-bottom:none;">
  6.     <div class="card rounded-0" style="background:url(https://media1.giphy.com/media/UNHplVba2fweBfkLHv/giphy.gif?cid=ecf05e47q2wr6r1f9epb05bexc8rtx2ylzro651v8yapacb2&rid=giphy.gif&ct=g); background-position:center; background-size:cover; border:none;"><p class="justify-content-center display-4 m-1 p-3" style="color:#FFFFFF; background:rgba(0,0,0,0.7);">Directory</p></div>
  7.   </div>
  8.   <!------------------------------- END HEADING -------------------------------->
  9.  
  10.   <div class="col-12 row no-gutters p-0 m-0" style="border:#000000 4px solid; border-bottom:none;">
  11.    
  12.     <!------------------------------- START LEFT & RIGHT BUTTONS -------------------------------->
  13.     <div class="col-12 col-lg-6 card p-0 m-0 rounded-0" style="border:#000000 4px solid;">
  14.      
  15.       <div class="btn p-0 m-0 rounded-0" style="border-bottom:#000000 4px solid;">
  16.         <a class="btn btn-block btn-primary border-0 rounded-0" href="#">Commissions</a>
  17.       </div>
  18.      
  19.       <div class="btn p-0 m-0 rounded-0" style="border-top:#000000 4px solid; border-bottom:#000000 4px solid;">
  20.         <a class="btn btn-block btn-primary border-0 rounded-0" href="#">Tag-Directory</a>
  21.       </div>
  22.      
  23.       <div class="btn p-0 m-0 rounded-0" style="border-top:#000000 4px solid;">
  24.         <a class="btn btn-block btn-primary border-0 rounded-0" href="#">To-Do-List</a>
  25.       </div>
  26.    
  27.     </div>
  28.    
  29.     <div class="col-12 col-lg-6 card p-0 m-0 rounded-0" style="border:#000000 4px solid;">
  30.      
  31.       <div class="btn p-0 m-0 rounded-0" style="border-bottom:#000000 4px solid;">
  32.         <a class="btn btn-block btn-primary border-0 rounded-0" href="#">Alternate-Universes</a>
  33.       </div>
  34.      
  35.       <div class="btn p-0 m-0 rounded-0" style="border-top:#000000 4px solid; border-bottom:#000000 4px solid;">
  36.         <a class="btn btn-block btn-primary border-0 rounded-0" href="#">Bonus-Content</a>
  37.       </div>
  38.      
  39.       <div class="btn p-0 m-0 rounded-0" style="border-top:#000000 4px solid;">
  40.         <a class="btn btn-block btn-primary border-0 rounded-0" href="#">World-Building</a>
  41.       </div>
  42.      
  43.     </div>
  44.     <!------------------------------- END LEFT & RIGHT BUTTONS -------------------------------->
  45.    
  46.     <!------------------------------- START FOLDERS -------------------------------->
  47.     <div class="col-12 bg-dark row p-0 m-0 text-center" style="border:none;">
  48.      
  49.       <!------------------------------- START ROW 1 -------------------------------->
  50.      
  51.       <!----- Start Folder ------>
  52.       <div class="col-12 col-lg-3 bg-dark py-2 m-0 rounded-0 text-center" style="border:#000000 4px solid;">
  53.         <a class="col-12 btn btn-primary m-0 py-3 rounded-0" href="#" style="border:#000000 4px solid;">
  54.           <i class="fas fa-feather-pointed" style="color:#FFFFFF; font-size:5rem;">
  55.         </a>
  56.         <div class="col-12 m-0 py-1" style="color:#FFFFFF; font-size:1.4rem;"><div class="border-0 rounded-0">Title</div></div>
  57.         <div class="col-12 m-0 py-1" style="color:#FFFFFF; font-size:1rem;"><div class="border-0 rounded-0">Short Description</div></div>
  58.         <div class="col-12 m-0 py-1">
  59.           <div class="btn btn-danger rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  60.           <div class="btn btn-warning rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  61.           <div class="btn btn-warning rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  62.         </div>
  63.       </div>
  64.       <!----- End Folder ------>
  65.      
  66.       <!----- Start Folder ------>
  67.       <div class="col-12 col-lg-3 bg-dark py-2 m-0 rounded-0 text-center" style="border:#000000 4px solid;">
  68.         <a class="col-12 btn btn-primary m-0 py-3 rounded-0" href="#" style="border:#000000 4px solid;">
  69.           <i class="fas fa-feather-pointed" style="color:#FFFFFF; font-size:5rem;">
  70.         </a>
  71.         <div class="col-12 m-0 py-1" style="color:#FFFFFF; font-size:1.4rem;"><div class="border-0 rounded-0">Title</div></div>
  72.         <div class="col-12 m-0 py-1" style="color:#FFFFFF; font-size:1rem;"><div class="border-0 rounded-0">Short Description</div></div>
  73.         <div class="col-12 m-0 py-1">
  74.           <div class="btn btn-danger rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  75.           <div class="btn btn-warning rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  76.           <div class="btn btn-warning rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  77.         </div>
  78.       </div>
  79.       <!----- End Folder ------>
  80.      
  81.       <!----- Start Folder ------>
  82.       <div class="col-12 col-lg-3 bg-dark py-2 m-0 rounded-0 text-center" style="border:#000000 4px solid;">
  83.         <a class="col-12 btn btn-primary m-0 py-3 rounded-0" href="#" style="border:#000000 4px solid;">
  84.           <i class="fas fa-feather-pointed" style="color:#FFFFFF; font-size:5rem;">
  85.         </a>
  86.         <div class="col-12 m-0 py-1" style="color:#FFFFFF; font-size:1.4rem;"><div class="border-0 rounded-0">Title</div></div>
  87.         <div class="col-12 m-0 py-1" style="color:#FFFFFF; font-size:1rem;"><div class="border-0 rounded-0">Short Description</div></div>
  88.         <div class="col-12 m-0 py-1">
  89.           <div class="btn btn-danger rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  90.           <div class="btn btn-warning rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  91.           <div class="btn btn-warning rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  92.         </div>
  93.       </div>
  94.       <!----- End Folder ------>
  95.      
  96.       <!----- Start Folder ------>
  97.       <div class="col-12 col-lg-3 bg-dark py-2 m-0 rounded-0 text-center" style="border:#000000 4px solid;">
  98.         <a class="col-12 btn btn-primary m-0 py-3 rounded-0" href="#" style="border:#000000 4px solid;">
  99.           <i class="fas fa-feather-pointed" style="color:#FFFFFF; font-size:5rem;">
  100.         </a>
  101.         <div class="col-12 m-0 py-1" style="color:#FFFFFF; font-size:1.4rem;"><div class="border-0 rounded-0">Title</div></div>
  102.         <div class="col-12 m-0 py-1" style="color:#FFFFFF; font-size:1rem;"><div class="border-0 rounded-0">Short Description</div></div>
  103.         <div class="col-12 m-0 py-1">
  104.           <div class="btn btn-danger rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  105.           <div class="btn btn-warning rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  106.           <div class="btn btn-warning rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  107.         </div>
  108.       </div>
  109.       <!----- End Folder ------>
  110.      
  111.       <!------------------------------- END ROW 1 -------------------------------->
  112.      
  113.       <!------------------------------- START ROW 2 -------------------------------->
  114.        <!-- To get 2 per row (such as the above), you must write "col-lg-6" in the row below. -->
  115.        <!-- 3 per row would be col-lg-4, 4 per row is col-lg-3, etc. -->
  116.        
  117.       <!----- Start Folder ------>
  118.       <div class="col-12 col-lg-6 bg-dark py-2 m-0 rounded-0 text-center" style="border:#000000 4px solid;">
  119.         <a class="col-12 btn btn-primary m-0 py-3 rounded-0" href="#" style="border:#000000 4px solid;">
  120.           <i class="fas fa-feather-pointed" style="color:#FFFFFF; font-size:5rem;">
  121.         </a>
  122.         <div class="col-12 m-0 py-1" style="color:#FFFFFF; font-size:1.4rem;"><div class="border-0 rounded-0">Title</div></div>
  123.         <div class="col-12 m-0 py-1" style="color:#FFFFFF; font-size:1rem;"><div class="border-0 rounded-0">Short Description</div></div>
  124.         <div class="col-12 m-0 py-1">
  125.           <div class="btn btn-danger rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  126.           <div class="btn btn-warning rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  127.           <div class="btn btn-warning rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  128.         </div>
  129.       </div>
  130.       <!----- End Folder ------>
  131.      
  132.       <!----- Start Folder ------>
  133.       <div class="col-12 col-lg-6 bg-dark py-2 m-0 rounded-0 text-center" style="border:#000000 4px solid;">
  134.         <a class="col-12 btn btn-primary m-0 py-3 rounded-0" href="#" style="border:#000000 4px solid;">
  135.           <i class="fas fa-feather-pointed" style="color:#FFFFFF; font-size:5rem;">
  136.         </a>
  137.         <div class="col-12 m-0 py-1" style="color:#FFFFFF; font-size:1.4rem;"><div class="border-0 rounded-0">Title</div></div>
  138.         <div class="col-12 m-0 py-1" style="color:#FFFFFF; font-size:1rem;"><div class="border-0 rounded-0">Short Description</div></div>
  139.         <div class="col-12 m-0 py-1">
  140.           <div class="btn btn-danger rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  141.           <div class="btn btn-warning rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  142.           <div class="btn btn-warning rounded-0" style="color:#FFFFFF; border:#000000 2px solid;">Tag</div>
  143.         </div>
  144.       </div>
  145.       <!----- End Folder ------>
  146.      
  147.       <!------------------------------- START ROW 2 -------------------------------->
  148.      
  149.     </div>
  150.     <!------------------------------- END FOLDERS -------------------------------->
  151.    
  152.   </div>
  153.  
  154.   <!------------------------------- START BOTTOM BUTTONS -------------------------------->
  155.   <div class="col-12 row p-0 m-0 rounded-0" style="border:#000000 4px solid;">
  156.    
  157.     <div class="col-12 col-lg-6 btn p-0 m-0 rounded-0" style="border-left:#000000 4px solid; border-right:#000000 4px solid;">
  158.       <a class="btn btn-block btn-primary border-0 rounded-0" href="#">All-Characters</a>
  159.     </div>
  160.      
  161.     <div class="col-12 col-lg-6 btn p-0 m-0 rounded-0" style="border-left:#000000 4px solid; border-right:#000000 4px solid;">
  162.       <a class="btn btn-block btn-primary border-0 rounded-0" href="#">Unsorted</a>
  163.     </div>
  164.    
  165.   </div>
  166.   <!------------------------------- END BOTTOM BUTTONS -------------------------------->
  167.  
  168.   <!------------------------------- START CODE CREDS -------------------------------->
  169.   <div class="col-12 btn btn-primary py-2 text-center" style="font-size:1.2rem; border:#000000 8px solid; border-top:#000000 4px solid;">
  170.     <a href="https://toyhou.se/16006417.overlay" data-toggle="tooltip" title="Header Code Frankensteined From: CuckooHoopoe"><span style="color:#FFFFFF;"><i class="fas fa-feather-pointed fa-flip-horizontal"></i></span></a>
  171.     <a href="#" data-toggle="tooltip" title="Code By: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-egg"></i></span></a>
  172.     <a href="https://giphy.com/gifs/background-visuals-particles-UNHplVba2fweBfkLHv" data-toggle="tooltip" title="Header Image Source"><span style="color:#FFFFFF;"><i class="fas fa-feather-pointed"></i></span></a>
  173.   </div>
  174.   <!------------------------------- END CODE CREDS -------------------------------->
  175.  
  176. </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!