API tools faq
paste
Jade-Everstone

Folder/Library Cards (compact)

Jade-Everstone
Mar 21st, 2021 (edited)
311
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.62 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2.  
  3. <!--Rules:
  4.  
  5. You may
  6. -frankenstein with other codes (as long as the creator of said code allows it)
  7. -edit/change as much as you need (example: making character codes into user codes, vice-versa)
  8.  
  9. You may not
  10. -Redistribute, resell, and/or claim its yours
  11. -Remove credit (you're allowed to move & edit it though, just keep it visible)
  12.  
  13. Misc Notes:
  14. -When editing, remember to turn WYSIWYG off! My codes may break otherwise
  15. -Some basic html knowledge is recommended for editing
  16.  
  17. -->
  18.  
  19.  
  20. <div class="container">
  21.    
  22.     <div class="row">
  23.        
  24.         <!--to add more cards, copy & paste a card section-->
  25.        
  26.        
  27.         <!--Card 1-->
  28.        
  29.         <div class="col-md-12 col-lg-6 mt-4">
  30.                    
  31.             <div class="card bg-faded rounded-0 border-0" style="">
  32.                
  33.                
  34.                
  35.                 <!--Header-->
  36.                
  37.                 <a href="#">
  38.                     <h3 class="card-header border-0" style="border-radius:0px">
  39.                         Title <i class='fas fa-pen-alt' style="float:right"></i>
  40.                     </h3>
  41.                 </a>
  42.                
  43.                 <!--end header-->
  44.                
  45.                
  46.                 <div class="row no-gutters">
  47.                    
  48.                     <!--image-->
  49.                    
  50.                     <div class="col-sm-12 col-md-4">
  51.                         <div class="card rounded-0 border-0" style="
  52.                            height:180px;
  53.                            background-image:url(https://images.unsplash.com/photo-1539001450225-ccbfe415549c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80);
  54.                            background-position:center;
  55.                            background-size:600px;
  56.                            background-repeat:no-repeat">
  57.                            
  58.                             <!--image credit-->
  59.                            
  60.                             <a href="https://unsplash.com/photos/OWk9rDaakJ0" class="text-white" style="position:absolute; bottom:3px; left:5px;" data-toggle="tooltip" title="img - blancneige"><i class="fas fa-image"></i> </a>
  61.                            
  62.                         </div>
  63.                     </div>
  64.                    
  65.                     <!--end image-->
  66.                    
  67.                    
  68.                    
  69.                     <!--info-->
  70.                    
  71.                     <div class="col-sm-12 col-md-8">
  72.                         <div class="card-body table-responsive p-3" style="max-height:180px;">
  73.                             <p>Have a lot of info? this box will scroll!</p>
  74.                             <p>Image is hidden on smaller screens</p>
  75.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam suscipit fringilla dapibus. Sed et porta diam.</p>
  76.                         </div>
  77.                     </div>
  78.                    
  79.                     <!--end info-->
  80.                    
  81.                    
  82.                    
  83.                 </div>
  84.                
  85.                
  86.                
  87.                 <!--footer / tag section
  88.                
  89.                if you don't need/want this, delete this section-->
  90.                
  91.                 <div class="card-footer border-0" style="border-radius:0px;text-align:center">
  92.                    
  93.                     <span class="badge badge-pill badge-danger">CW or Rating</span>
  94.                     <span class="badge badge-pill badge-primary">Genre Tag</span>
  95.                     <span class="badge badge-pill badge-primary">Story tag</span>
  96.                     <span class="badge badge-pill badge-primary">TBH these can be whatever you want</span>
  97.                    
  98.                 </div>
  99.                
  100.                 <!--end footer/tag section-->
  101.                
  102.             </div>
  103.            
  104.         </div>
  105.        
  106.         <!--end Card 1-->
  107.        
  108.        
  109.        
  110.         <!--Card 2-->
  111.        
  112.         <div class="col-md-12 col-lg-6 mt-4">
  113.                    
  114.             <div class="card bg-faded rounded-0 border-0" style="">
  115.                
  116.                
  117.                
  118.                 <!--Header-->
  119.                
  120.                 <a href="#">
  121.                     <h3 class="card-header border-0" style="border-radius:0px">
  122.                         Title <i class='fas fa-pen-alt' style="float:right"></i>
  123.                     </h3>
  124.                 </a>
  125.                
  126.                 <!--end header-->
  127.                
  128.                
  129.                 <div class="row no-gutters">
  130.                    
  131.                     <!--image-->
  132.                    
  133.                     <div class="col-sm-12 col-md-4">
  134.                         <div class="card rounded-0 border-0" style="
  135.                            height:180px;
  136.                            background-image:url(https://images.unsplash.com/photo-1539001450225-ccbfe415549c?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80);
  137.                            background-position:center;
  138.                            background-size:600px;
  139.                            background-repeat:no-repeat">
  140.                            
  141.                             <!--image credit-->
  142.                            
  143.                             <a href="https://unsplash.com/photos/OWk9rDaakJ0" class="text-white" style="position:absolute; bottom:3px; left:5px;" data-toggle="tooltip" title="img - blancneige"><i class="fas fa-image"></i> </a>
  144.                            
  145.                         </div>
  146.                     </div>
  147.                    
  148.                     <!--end image-->
  149.                    
  150.                    
  151.                    
  152.                     <!--info-->
  153.                    
  154.                     <div class="col-sm-12 col-md-8">
  155.                         <div class="card-body table-responsive p-3" style="max-height:180px;">
  156.                             <p>Have a lot of info? this box will scroll!</p>
  157.                             <p>Image is hidden on smaller screens</p>
  158.                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam suscipit fringilla dapibus. Sed et porta diam.</p>
  159.                         </div>
  160.                     </div>
  161.                    
  162.                     <!--end info-->
  163.                    
  164.                    
  165.                    
  166.                 </div>
  167.                
  168.                
  169.                
  170.                 <!--footer / tag section
  171.                
  172.                if you don't need/want this, delete this section-->
  173.                
  174.                 <div class="card-footer border-0" style="border-radius:0px;text-align:center">
  175.                    
  176.                     <span class="badge badge-pill badge-danger">CW or Rating</span>
  177.                     <span class="badge badge-pill badge-primary">Genre Tag</span>
  178.                     <span class="badge badge-pill badge-primary">Story tag</span>
  179.                     <span class="badge badge-pill badge-primary">TBH these can be whatever you want</span>
  180.                    
  181.                 </div>
  182.                
  183.                 <!--end footer/tag section-->
  184.                
  185.             </div>
  186.            
  187.         </div>
  188.        
  189.         <!--end Card 2-->
  190.        
  191.     </div>
  192.    
  193.    
  194.     <!--Credit. You may move it, but please do not delete/remove-->
  195.  
  196.     <p style="text-align:right">HTML by <a href="https://toyhou.se/10126066"><i class='fad fa-heart'></i> Jade-Everstone</a></p>
  197.    
  198. </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!