API tools faq
paste
Advertisement
Guest User

06. Directory

a guest
Dec 9th, 2022
1,101
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.44 KB | None | 0 0
raw download clone embed print report
  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
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!