API tools faq
paste
Advertisement
vermilly

directory

vermilly
Aug 28th, 2023 (edited)
1,058
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 16.37 KB | None | 0 0
raw download clone embed print report
  1. <!-- 21 || FOLDER CARDS by icecreampizzeria (BOOTSTRAP)
  2.    CUSTOM COLORS VER can be found here: https://pastebin.com/z8YncUR8
  3.  
  4.    the cards will automatically be centered if they're less than three in a row.
  5.  
  6. <!-- //////////////////// WHOLE THING //////////////////// -->
  7. <div class="container p-0 text-center">
  8.     <div class="row no-gutters justify-content-center">
  9.      
  10.         <!-- //////////////////// NOTCE CARD //////////////////// -->
  11.         <div class="col-lg-12 d-flex">
  12.             <div class="m-2 card bg-faded text-center p-0 flex-fill">
  13.                
  14.                 <!-- //////////////////// FOLDER NAME //////////////////// -->
  15.  
  16.                
  17.                 <!-- //////////////////// GENRE / SUBTITLE //////////////////// -->
  18.                 <i class="mx-3" style="font-size: 1rem;">WELCOME TO MY HUMBLE ABODE!</i>
  19.                 <i class="mb-2 mx-3" style="font-size: 0.8rem;">last directory update: nov 2023</i>
  20.                 <p class="mb-2 mx-3" style="font-size: 0.8rem;">Hello! This is where you can navigate my characters. Also, <u>gift art</u> is OK for any character! Just keep it PG-13!</p>
  21.                
  22.             </div>
  23.         </div>
  24.         <!-- //////////////////// NOTCE FOLDER CARD //////////////////// -->    
  25.    
  26.    <!-- //////////////////// FOLDER CARD //////////////////// -->
  27.         <div class="col-lg-3 d-flex">
  28.             <div class="m-2 card bg-faded text-center p-0 flex-fill">
  29.            
  30.                 <!-- //////////////////// IMAGE //////////////////// -->
  31.                 <div class="card p-1 m-2">
  32.                     <div style="
  33.                    background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/53011405_7AV4tSzaYSQWSgH.png?1692081471)
  34.                       top no-repeat;
  35.                    background-size: cover;
  36.                    min-height: 130px;"></div>
  37.                 </div>
  38.                
  39.                 <!-- //////////////////// FOLDER NAME - change 'fa-star' into any of the icons available on https://fontawesome.com/  //////////////////// -->
  40.                 <p class="mb-1 mx-2" style="font-size: 1rem;">
  41.                     NORMAL CHARACTERS
  42.                 </p>
  43.                
  44.                 <!-- //////////////////// GENRE / SUBTITLE //////////////////// -->
  45.                 <i class="mb-2" style="font-size: 0.8rem;">
  46.                
  47.                 <p class="mb-2 mx-3" style="font-size: 0.8rem;">Standalone characters! May belong to a miscellaneous world.</p>
  48.  
  49.                 <!-- //////////////////// BADGES  //////////////////// -->
  50.                 <div class="mb-2 mx-2 row justify-content-center">
  51.                     <span class="badge badge-pill bg-warning m-1"><i class="fas fa-palette fa-sm"></i> 9/10 REFERENCES COMPLETE</span>
  52.                     <span class="badge badge-pill bg-success m-1"><i class="fas fa-book fa-sm"></i> 10/10 FULL BIOS COMPLETE</span>
  53.                     <span class="badge badge-pill bg-primary m-1"><i class="fas fa-star fa-sm"></i> SONA IN HERE!</span>
  54.                 </div>
  55.                 <!-- //////////////////// END BADGES //////////////////// -->
  56.                
  57.                 <!-- //////////////////// FOLDER LINK  //////////////////// -->
  58.                 <a href="https://toyhou.se/xuxu/characters/folder:2078636" class="h-100 w-100 stretched-link btn btn-outline-secondary border-0" style="position: absolute; mix-blend-mode: overlay;"></a>
  59.                
  60.             </div>
  61.         </div>
  62.         <!-- //////////////////// END FOLDER CARD //////////////////// -->
  63.        
  64.    
  65.    
  66.         <!-- //////////////////// FOLDER CARD //////////////////// -->
  67.         <div class="col-lg-3 d-flex">
  68.             <div class="m-2 card bg-faded text-center p-0 flex-fill">
  69.            
  70.                 <!-- //////////////////// IMAGE  //////////////////// -->
  71.                 <div class="card p-1 m-2">
  72.                     <div style="
  73.                    background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/71567149_JK06fqnaG7uoGK2.png)
  74.                        center no-repeat;
  75.                    background-size: cover;
  76.                    min-height: 130px;"></div>
  77.                 </div>
  78.                
  79.                 <!-- //////////////////// FOLDER NAME //////////////////// -->
  80.                 <p class="mb-1 mx-2" style="font-size: 1rem;">
  81.                     STAINED FEATHERS
  82.                 </p>
  83.                
  84.                 <!-- //////////////////// GENRE / SUBTITLE //////////////////// -->
  85.                 <i class="mb-2 mx-3" style="font-size: 0.8rem;">
  86.              
  87.                  
  88.                 </i>
  89.               <p class="mb-2 mx-3" style="font-size: 0.8rem;">Story of a spy and a criminal falling in love!</p>
  90.  
  91.                
  92.                 <!-- //////////////////// BADGES //////////////////// -->
  93.                 <div class="mb-2 mx-2 row justify-content-center">
  94.                     <span class="badge badge-pill bg-warning m-1"><i class="fas fa-palette fa-sm"></i> 6/7 REFERENCES COMPLETE</span>
  95.                     <span class="badge badge-pill bg-success m-1"><i class="fas fa-book fa-sm"></i> 7/7 BASIC BIOS COMPLETE</span>
  96.                     <span class="badge badge-pill bg-warning m-1"><i class="fas fa-book fa-sm"></i> 2/7 FULL BIOS COMPLETE</span>
  97.  
  98.                 </div>
  99.                 <!-- //////////////////// END BADGES //////////////////// -->
  100.                
  101.                 <!-- /////////// FOLDER LINK ///////// -->
  102.                 <a href="https://toyhou.se/xuxu/characters/folder:4750310" class="h-100 w-100 stretched-link btn btn-outline-secondary border-0" style="position: absolute; mix-blend-mode: overlay;"></a>
  103.                
  104.             </div>
  105.         </div>
  106.         <!-- //////////////////// END FOLDER CARD //////////////////// -->
  107.        
  108.    
  109.           <!-- //////////////////// FOLDER CARD //////////////////// -->
  110.         <div class="col-lg-3 d-flex">
  111.             <div class="m-2 card bg-faded text-center p-0 flex-fill">
  112.            
  113.                 <!-- //////////////////// IMAGE  //////////////////// -->
  114.                 <div class="card p-1 m-2">
  115.                     <div style="
  116.                    background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/32686246_VdtXSST51ycszYz.png)
  117.                        top no-repeat;
  118.                    background-size: cover;
  119.                    min-height: 130px;"></div>
  120.                 </div>
  121.                
  122.                 <!-- //////////////////// FOLDER NAME  -->
  123.                 <p class="mb-1 mx-2" style="font-size: 1rem;">
  124.                     FIRE CHARADE
  125.                 </p>
  126.                
  127.                 <!-- //////////////////// GENRE / SUBTITLE //////////////////// -->
  128.                 <i class="mb-2" style="font-size: 0.8rem;">
  129.                
  130.                 </i>
  131.                 <p class="mb-2 mx-3" style="font-size: 0.8rem;">The shenanigans of demons, exorcists, and unlucky humans.</p>
  132.  
  133.                
  134.                 <!-- //////////////////// BADGES  //////////////////// -->
  135.                 <div class="mb-2 mx-2 row justify-content-center">
  136.                     <span class="badge badge-pill bg-warning m-1"><i class="fas fa-palette fa-sm"></i> 3/8 REFERENCES COMPLETE</span>
  137.                     <span class="badge badge-pill bg-success m-1"><i class="fas fa-book fa-sm"></i> 8/8 BASIC BIOS COMPLETE</span>
  138.                     <span class="badge badge-pill bg-warning m-1"><i class="fas fa-book fa-sm"></i> 0/8 FULL BIOS COMPLETE</span>
  139.                 </div>
  140.                 <!-- //////////////////// END BADGES //////////////////// -->
  141.                
  142.                 <!-- //////////////////// FOLDER LINK //////////////////// -->
  143.                 <a href="https://toyhou.se/xuxu/characters/folder:4750314" class="h-100 w-100 stretched-link btn btn-outline-secondary border-0" style="position: absolute; mix-blend-mode: overlay;"></a>
  144.                
  145.             </div>
  146.         </div>
  147.         <!-- //////////////////// END FOLDER CARD //////////////////// -->
  148.        
  149.   <!-- //////////////////// FOLDER CARD //////////////////// -->
  150.         <div class="col-lg-3 d-flex">
  151.             <div class="m-2 card bg-faded text-center p-0 flex-fill">
  152.            
  153.                 <!-- //////////////////// IMAGE //////////////////// -->
  154.                 <div class="card p-1 m-2">
  155.                     <div style="
  156.                    background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/55004603_VZb4xPfgezH3zzX.png)
  157.                        center no-repeat;
  158.                    background-size: cover;
  159.                    min-height: 130px;"></div>
  160.                 </div>
  161.                
  162.                 <!-- //////////////////// FOLDER NAME   //////////////////// -->
  163.                 <p class="mb-1 mx-2" style="font-size: 1rem;">
  164.                     ARTHERIUM
  165.                 </p>
  166.                
  167.                 <!-- //////////////////// GENRE / SUBTITLE //////////////////// -->
  168.                 <i class="mb-2" style="font-size: 0.8rem;">
  169.                
  170.                
  171.                 </i>
  172.                  <p class="mb-2 mx-3" style="font-size: 0.8rem;">Characters that live in the Artherium world!</p>
  173.  
  174.                
  175.                 <!-- //////////////////// BADGES  //////////////////// -->
  176.                 <div class="mb-2 mx-2 row justify-content-center">
  177.                     <span class="badge badge-pill bg-warning m-1"><i class="fas fa-palette fa-sm"></i> 2/7 REFERENCES COMPLETE</span>
  178.                     <span class="badge badge-pill bg-warning m-1"><i class="fas fa-book fa-sm"></i> 6/7 FULL BIOS COMPLETE</span>
  179.                     <span class="badge badge-pill bg-primary m-1"> <i class="fas fa-star fa-sm"></i> SONA IN HERE!</span>
  180.                 </div>
  181.                 <!-- //////////////////// END BADGES //////////////////// -->
  182.                
  183.                 <!-- //////////////////// FOLDER LINK //////////////////// -->
  184.                 <a href="https://toyhou.se/xuxu/characters/folder:4750315" class="h-100 w-100 stretched-link btn btn-outline-secondary border-0" style="position: absolute; mix-blend-mode: overlay;"></a>
  185.                
  186.             </div>
  187.         </div>
  188.         <!-- //////////////////// END FOLDER CARD //////////////////// -->
  189.                
  190.          
  191.         <!-- //////////////////// FOLDER CARD //////////////////// -->
  192.         <div class="col-lg-3 d-flex">
  193.             <div class="m-2 card bg-faded text-center p-0 flex-fill">
  194.            
  195.                 <!-- //////////////////// IMAGE  //////////////////// -->
  196.                 <div class="card p-1 m-2">
  197.                     <div style="
  198.                    background: url(https://i.pinimg.com/564x/c7/22/f5/c722f5dcc3c9ca7cbefd9445d26cbe31.jpg)
  199.                        center no-repeat;
  200.                    background-size: cover;
  201.                    min-height: 130px;"></div>
  202.                 </div>
  203.                
  204.                 <!-- //////////////////// FOLDER NAME   //////////////////// -->
  205.                 <p class="mb-1 mx-2" style="font-size: 1rem;">
  206.                     OTA
  207.                 </p>
  208.                
  209.                 <!-- //////////////////// GENRE / SUBTITLE //////////////////// -->
  210.                 <p class="mb-2 mx-3" style="font-size: 0.8rem;">Adopts & characters up for offers! </p>
  211.  
  212.   <!-- //////////////////// BADGES //////////////////// -->
  213.                <div class="mb-2 mx-2 row justify-content-center">
  214.                <span class="badge badge-pill bg-danger m-1">come here you</span>
  215.  
  216.                </div>
  217.                <!-- //////////////////// END BADGES //////////////////// -->
  218.                
  219.                <!-- //////////////////// FOLDER LINK //////////////////// -->
  220.                <a href="https://toyhou.se/xuxu/characters/folder:4085969" class="h-100 w-100 stretched-link btn btn-outline-secondary border-0" style="position: absolute; mix-blend-mode: overlay;"></a>
  221.                
  222.             </div>
  223.         </div>
  224.         <!-- //////////////////// END FOLDER CARD //////////////////// -->
  225.        
  226.         <!-- //////////////////// FOLDER CARD //////////////////// -->
  227.         <div class="col-lg-3 d-flex">
  228.             <div class="m-2 card bg-faded text-center p-0 flex-fill">
  229.            
  230.                 <!-- //////////////////// IMAGE //////////////////// -->
  231.                 <div class="card p-1 m-2">
  232.                     <div style="
  233.                    background: url(https://i.pinimg.com/736x/88/8e/ba/888ebad0b18c47546ac0e0512df602ad.jpg)
  234.                        center no-repeat;
  235.                    background-size: cover;
  236.                    min-height: 130px;"></div>
  237.                 </div>
  238.                
  239.                 <!-- //////////////////// FOLDER NAME //////////////////// -->
  240.                 <p class="mb-1 mx-2" style="font-size: 1rem;">
  241.                     MISC
  242.                 </p>
  243.                
  244.                 <!-- //////////////////// GENRE / SUBTITLE //////////////////// -->
  245.                 <p class="mb-2 mx-3" style="font-size: 0.8rem;">Miscellaneous non-OC profiles!</p>
  246.                
  247.                 <!-- //////////////////// BADGES                 //////////////////// -->
  248.                 <div class="mb-2 mx-2 row justify-content-center">
  249.                     <span class="badge badge-pill bg-danger m-1">PRIVATE</span>
  250.                 </div>
  251.                 <!-- //////////////////// END BADGES //////////////////// -->
  252.                
  253.                 <!-- //////////////////// FOLDER LINK  //////////////////// -->
  254.                 <a href="https://toyhou.se/xuxu/characters/folder:4750296" class="h-100 w-100 stretched-link btn btn-outline-secondary border-0" style="position: absolute; mix-blend-mode: overlay;"></a>
  255.                
  256.             </div>
  257.         </div>
  258.         <!-- //////////////////// END FOLDER CARD //////////////////// -->        
  259.        
  260.         <!-- //////////////////// FOLDER CARD //////////////////// -->
  261.         <div class="col-lg-3 d-flex">
  262.             <div class="m-2 card bg-faded text-center p-0 flex-fill">
  263.            
  264.                 <!-- //////////////////// IMAGE //////////////////// -->
  265.                 <div class="card p-1 m-2">
  266.                     <div style="
  267.                    background: url(https://i.pinimg.com/564x/49/c7/42/49c7425bac8c4767519cd839e8448cad.jpg)
  268.                        center no-repeat;
  269.                    background-size: cover;
  270.                    min-height: 130px;"></div>
  271.                 </div>
  272.                
  273.                 <!-- //////////////////// FOLDER NAME //////////////////// -->
  274.                 <p class="mb-1 mx-2" style="font-size: 1rem;">
  275.                     MISC 2
  276.                 </p>
  277.                
  278.                 <!-- //////////////////// GENRE / SUBTITLE //////////////////// -->
  279.                 <p class="mb-2 mx-3" style="font-size: 0.8rem;">Old OCs that precede this account.</p>
  280.                
  281.                 <!-- //////////////////// BADGES
  282.                    - more bootstrap bg colors can be found here: https://getbootstrap.com/docs/4.0/utilities/colors/#background-color
  283.                    - replace bg-primary with bg-warning, bg-success, etc.
  284.                    - there's one line for every badge. Feel free to add/remove by copy pasting/deleting a line! //////////////////// -->
  285.                 <div class="mb-2 mx-2 row justify-content-center">
  286.                     <span class="badge badge-pill bg-danger m-1">PRIVATE</span>
  287.                 </div>
  288.                 <!-- //////////////////// END BADGES //////////////////// -->
  289.                
  290.                 <!-- //////////////////// FOLDER LINK //////////////////// -->
  291.                 <a href="https://toyhou.se/xuxu/characters/folder:4750317" class="h-100 w-100 stretched-link btn btn-outline-secondary border-0" style="position: absolute; mix-blend-mode: overlay;"></a>
  292.                
  293.             </div>
  294.         </div>
  295.         <!-- //////////////////// END FOLDER CARD //////////////////// -->                
  296.        
  297.        
  298.        
  299.         <!-- //////////////////// add more folder cards ABOVE this line! //////////////////// -->
  300.     </div>
  301.    
  302.     <!-- //////////////////// CREDITS - feel free to move it but please don't remove it! <3 //////////////////// -->
  303.     <small><a href="https://toyhou.se/icecreampizzeria" data-toggle="tooltip"  data-placement="bottom"  title="code by icecreampizzeria"><i class="fas fa-code"></i></a></small>
  304. </div>
  305. <!-- //////////////////// END WHOLE THING //////////////////// -->
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!