Advertisement
Guest User

06. Directory

a guest
Dec 9th, 2022
1,076
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.44 KB | None | 0 0
  1. <!------------------------------------------------
  2. 06. Directory
  3.  
  4. Code by dashyowo on Toyhouse.
  5. Make sure to read my Terms of Service before using!
  6. Thank you for using and have fun!
  7. ------------------------------------------------->
  8.  
  9. <!------------------------------------------------
  10. DIRECTORY
  11.  
  12. To delete the white background, delete the whole "WHITE BACKGROUND" section!
  13. Copy and paste links inside: href="LINK GOES HERE"
  14. ------------------------------------------------->
  15.  
  16. <!--- START --->
  17.  
  18. <!--- WHITE BACKGROUND --->
  19. <div style="position:absolute; top:0; bottom:0; left:0; width:100%; z-index:-1; background-image:url(https://i.imgur.com/mG6fe76.png); background-attachment: fixed">
  20. </div>
  21. <!------------->
  22.  
  23. <div class="container mx-auto" style="font-family:Century Gothic; color:#000; width:1000px">
  24. <div class="row">
  25.  
  26. <!--- FIRST SECTION --->
  27. <div class="col">
  28. <a href="" class="justify-content-center">
  29. <img src="https://i.imgur.com/qKow0aN.png" style="width:150px; height:150px; object-fit:cover"/>
  30. </a>
  31. <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#EAE4F2; color:#000">
  32. Folder name
  33. </a>
  34. <hr class="my-2" style="border-color:#DFDFDE"/>
  35. <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#F6F3F9">
  36. <p>
  37. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  38. </p>
  39. </div>
  40. </div>
  41. <!------------->
  42.  
  43. <!--- SECOND SECTION --->
  44. <div class="col">
  45. <a href="" class=" justify-content-center">
  46. <img src="https://i.imgur.com/hh8xjKP.png" style="width:150px; height:150px; object-fit:cover"/>
  47. </a>
  48. <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#FAF1F5; color:#000">
  49. Folder name
  50. </a>
  51. <hr class="my-2" style="border-color:#DFDFDE"/>
  52. <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#FAF1F5">
  53. <p>
  54. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  55. </p>
  56. </div>
  57. </div>
  58. <!------------->
  59.  
  60. <!--- THIRD SECTION --->
  61. <div class="col">
  62. <a href="" class=" justify-content-center">
  63. <img src="https://i.imgur.com/qYfrlzj.png" style="width:150px; height:150px"/>
  64. </a>
  65. <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#EAE4F2; color:#000">
  66. Folder name
  67. </a>
  68. <hr class="my-2" style="border-color:#DFDFDE"/>
  69. <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#F6F3F9">
  70. <p>
  71. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  72. </p>
  73. </div>
  74. </div>
  75. <!------------->
  76.  
  77. <!--- FOURTH SECTION --->
  78. <div class="col">
  79. <a href="" class=" justify-content-center">
  80. <img src="https://i.imgur.com/7rOKDdt.png" style="width:150px; height:150px; object-fit:cover"/>
  81. </a>
  82. <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#F4DFEB; color:#000">
  83. Folder name
  84. </a>
  85. <hr class="my-2" style="border-color:#DFDFDE"/>
  86. <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#FAF1F5">
  87. <p>
  88. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  89. </p>
  90. </div>
  91. </div>
  92. <!------------->
  93.  
  94. <!--- FIFTH SECTION SECTION --->
  95. <div class="col">
  96. <a href="" class=" justify-content-center">
  97. <img src="https://i.imgur.com/Z03qjaM.png" style="width:150px; height:150px"/>
  98. </a>
  99. <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#EAE4F2; color:#000">
  100. Folder name
  101. </a>
  102. <hr class="my-2" style="border-color:#DFDFDE"/>
  103. <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#F6F3F9">
  104. <p>
  105. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  106. </p>
  107. </div>
  108. </div>
  109. <!------------->
  110.  
  111. <!--- SIXTH SECTION --->
  112. <div class="col">
  113. <a href="" class=" justify-content-center">
  114. <img src="https://i.imgur.com/3iOgTnk.png" style="width:150px; height:150px; object-fit:cover"/>
  115. </a>
  116. <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#F4DFEB; color:#000">
  117. Folder name
  118. </a>
  119. <hr class="my-2" style="border-color:#DFDFDE"/>
  120. <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#FAF1F5">
  121. <p>
  122. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  123. </p>
  124. </div>
  125. </div>
  126. <!------------->
  127.  
  128. </div>
  129. <div class="row mt-5">
  130.  
  131. <!--- SEVENTH SECTION --->
  132. <div class="col">
  133. <a href="" class=" justify-content-center">
  134. <img src="https://i.imgur.com/GP4IqLK.png" style="width:150px; height:150px; object-fit:cover"/>
  135. </a>
  136. <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#F4DFEB; color:#000">
  137. Folder name
  138. </a>
  139. <hr class="my-2" style="border-color:#DFDFDE"/>
  140. <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#FAF1F5">
  141. <p>
  142. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  143. </p>
  144. </div>
  145. </div>
  146. <!------------->
  147.  
  148. <!--- EIGHTH SECTION --->
  149. <div class="col">
  150. <a href="" class=" justify-content-center">
  151. <img src="https://i.imgur.com/GaQBAYA.png" style="width:150px; height:150px"/>
  152. </a>
  153. <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#EAE4F2; color:#000">
  154. Folder name
  155. </a>
  156. <hr class="my-2" style="border-color:#DFDFDE"/>
  157. <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#F6F3F9">
  158. <p>
  159. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  160. </p>
  161. </div>
  162. </div>
  163. <!------------->
  164.  
  165. <!--- NINTH SECTION --->
  166. <div class="col">
  167. <a href="" class=" justify-content-center">
  168. <img src="https://i.imgur.com/xWCjQlW.png" style="width:150px; height:150px; object-fit:cover"/>
  169. </a>
  170. <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#F4DFEB; color:#000">
  171. Folder name
  172. </a>
  173. <hr class="my-2" style="border-color:#DFDFDE"/>
  174. <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#FAF1F5">
  175. <p>
  176. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  177. </p>
  178. </div>
  179. </div>
  180. <!------------->
  181.  
  182. <!--- TENTH SECTION --->
  183. <div class="col">
  184. <a href="" class=" justify-content-center">
  185. <img src="https://i.imgur.com/5brtRSt.png" style="width:150px; height:150px; object-fit:cover"/>
  186. </a>
  187. <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#EAE4F2; color:#000">
  188. Folder name
  189. </a>
  190. <hr class="my-2" style="border-color:#DFDFDE"/>
  191. <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#F6F3F9">
  192. <p>
  193. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  194. </p>
  195. </div>
  196. </div>
  197. <!------------->
  198.  
  199. <!--- ELEVENTH SECTION --->
  200. <div class="col">
  201. <a href="" class=" justify-content-center">
  202. <img src="https://i.imgur.com/TLdghyz.png" style="width:150px; height:150px"/>
  203. </a>
  204. <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#F4DFEB; color:#000">
  205. Folder name
  206. </a>
  207. <hr class="my-2" style="border-color:#DFDFDE"/>
  208. <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#FAF1F5">
  209. <p>
  210. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  211. </p>
  212. </div>
  213. </div>
  214. <!------------->
  215.  
  216. <!--- TWELFTH SECTION --->
  217. <div class="col">
  218. <a href="" class=" justify-content-center">
  219. <img src="https://i.imgur.com/4kFqRS0.png" style="width:150px; height:150px"/>
  220. </a>
  221. <a class="btn btn-outline d-block rounded-0 border-0 p-1 mt-1 text-center text-uppercase" href="" style="font-size:1.2em; font-weight:bold; background-color:#EAE4F2; color:#000">
  222. Folder name
  223. </a>
  224. <hr class="my-2" style="border-color:#DFDFDE"/>
  225. <div class="card d-block border-0 mt-1 p-1" style="font-size:.85em; background-color:#F6F3F9">
  226. <p>
  227. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.
  228. </p>
  229. </div>
  230. </div>
  231. <!------------->
  232.  
  233. </div>
  234. </div>
  235.  
  236. <!------------->
  237.  
  238. <!--- CREDIT (DO NOT DELETE) --->
  239. <div class="bg-white p-1 px-2 rounded fixed-bottom m-2" style="right:0; left:inherit">
  240. <a href="https://toyhou.se/19182655.06-directory" style="color:#EEB5D0"><i class="fas fa-code fa-xs fa-fw tooltipster" title="CODE BY dashyowo"></i></a>
  241. </div>
  242. <!------------->
  243.  
  244. <!--- END --->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement