Advertisement
snail-legs

folder layout | garden

Jun 7th, 2021 (edited)
634
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="container" style="max-width: 850px;">
  2.    
  3.   <!-- folder info -->
  4.   <div class="row no-gutters mr-1 ml-1">
  5.     <div class="col-12 pr-2 pl-2">
  6.        
  7.       <!-- folder name -->
  8.       <h1 class="text-right display-4" style="text-decoration: underline; font-weight: bold; font-family: Courier New, monospace;">
  9.         character garden.. <i class="fas fa-shovel"></i>
  10.       </h1>
  11.      
  12.       <!-- folder blurb -->
  13.       <p class="text-right">
  14.         Short blurb describing the folder.
  15.         But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system.
  16.       </p>
  17.      
  18.     </div>
  19.   </div>
  20.  
  21.  
  22.   <!-- characters!  copy-paste the entire row div if you need more -->
  23.   <div class="row no-gutters justify-content-right m-1">
  24.      
  25.     <!-- character 1 -->
  26.     <div class="col-md-4 p-2">
  27.        
  28.       <!-- change the image in background-image: url(#); -->
  29.       <div class="card border-0" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin); background-size: cover; background-position: center; height: 400px;">
  30.          
  31.         <!-- character name -->
  32.         <div class="card-header border-0 bg-faded">
  33.           <h1 class="text-center">
  34.              
  35.             <!-- link to character + character name-->
  36.             <a href="#" class="stretched-link" style="text-decoration: underline; font-weight: bold; font-family: Courier New, monospace;">
  37.             Character Name
  38.             </a>
  39.           </h1>
  40.         </div>
  41.         <div class="h-100"></div>
  42.        
  43.        
  44.         <!-- blurb/quick info and colour palette -->
  45.         <div class="card-footer border-0 bg-faded">
  46.            
  47.           <!-- colour palette -->
  48.           <div class="text-center">
  49.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  50.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  51.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  52.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  53.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  54.           </div>
  55.          
  56.           <!-- quick info / short character blurb -->
  57.           <p class="text-secondary text-center">quick info <i class="fas fa-seedling fa-xs"></i> quick info <i class="fas fa-seedling fa-xs"></i> quick info</p>
  58.         </div>
  59.       </div>
  60.     </div>
  61.    
  62.     <!-- character 2 -->
  63.     <div class="col-md-4 p-2">
  64.        
  65.       <!-- change the image in background-image: url(); -->
  66.       <div class="card border-0" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin); background-size: cover; background-position: center; height: 400px;">
  67.          
  68.         <!-- character name -->
  69.         <div class="card-header border-0 bg-faded">
  70.           <h1 class="text-center">
  71.              
  72.             <!-- link to character + character name -->
  73.             <a href="#" class="stretched-link" style="text-decoration: underline; font-weight: bold; font-family: Courier New, monospace;">
  74.             Character Name
  75.             </a>
  76.           </h1>
  77.         </div>
  78.         <div class="h-100"></div>
  79.        
  80.         <!-- blurb/quick info and colour palette -->
  81.         <div class="card-footer border-0 bg-faded">
  82.            
  83.           <!-- colour palette -->
  84.           <div class="text-center">
  85.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  86.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  87.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  88.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  89.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  90.           </div>
  91.          
  92.           <!-- quick info / short character blurb -->
  93.           <p class="text-secondary text-center">quick info <i class="fas fa-seedling fa-xs"></i> quick info <i class="fas fa-seedling fa-xs"></i> quick info</p>
  94.         </div>
  95.       </div>
  96.     </div>
  97.    
  98.     <!-- character 3 -->
  99.     <div class="col-md-4 p-2">
  100.        
  101.       <!-- change the image in background-image: url(); -->
  102.       <div class="card border-0" style="background-image: url(https://f2.toyhou.se/file/f2-toyhou-se/users/admin); background-size: cover; background-position: right; height: 400px;">
  103.          
  104.         <!-- character name -->
  105.         <div class="card-header border-0 bg-faded">
  106.           <h1 class="text-center">
  107.              
  108.             <!-- link to character + character name -->
  109.             <a href="#" class="stretched-link" style="text-decoration: underline; font-weight: bold; font-family: Courier New, monospace;">
  110.             Character Name
  111.             </a>
  112.           </h1>
  113.         </div>
  114.         <div class="h-100"></div>
  115.        
  116.         <!-- blurb/quick info and colour palette -->
  117.         <div class="card-footer border-0 bg-faded">
  118.            
  119.           <!-- colour palette -->
  120.           <div class="text-center">
  121.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  122.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  123.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  124.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  125.             <i class="fas fa-circle fa-2x" style="color: #808080;"></i>
  126.           </div>
  127.          
  128.           <!-- quick info / short character blurb -->
  129.           <p class="text-secondary text-center">quick info <i class="fas fa-seedling fa-xs"></i> quick info <i class="fas fa-seedling fa-xs"></i> quick info</p>
  130.         </div>
  131.       </div>
  132.     </div>
  133.   </div>
  134.  
  135.   <!-- code credit + tag masterlist -->
  136.   <div class="row no-gutters mr-1 ml-1">
  137.      
  138.     <!-- code credit!  feel free to reformat to your liking if needed -->
  139.     <div class="col-1 pr-2 pl-2 d-flex align-items-end">
  140.       <a href="https://toyhou.se/snail-legs" class="align-bottom"><i class="fas fa-code"></i></a>
  141.     </div>
  142.    
  143.     <!-- tag list -->
  144.     <div class="col-11 pr-2 pl-2">
  145.       <h1 class="text-right" style="text-decoration: underline; font-weight: bold; font-family: Courier New, monospace;">
  146.         tag masterlist.. <i class="fas fa-tag"></i>
  147.       </h1>
  148.      
  149.       <!-- tags -->
  150.       <div class="text-right" style="font-size: 1.25em;">
  151.         <a href="#" class="badge badge-primary">tag1</a>
  152.         <a href="#" class="badge badge-primary">tag2</a>
  153.         <a href="#" class="badge badge-primary">tag3</a>
  154.         <a href="#" class="badge badge-primary">tag4</a>
  155.         <a href="#" class="badge badge-primary">tag5</a>
  156.       </div>
  157.     </div>
  158.   </div>
  159. </div>
Advertisement
Advertisement
Advertisement
RAW Paste Data Copied
Advertisement