API tools faq
paste
lowkeywicked

Freebie Directory Banner

lowkeywicked
Oct 15th, 2019 (edited)
7,313
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.32 KB | None | 0 0
raw download clone embed print report
  1. <!---------- default highlight color is #999 -- use find & replace to quick swap out color ----->
  2. <!---------- container ---------- do not use this HTML with premium css layouts ---------------->
  3. <div class="card border-0 container-fluid p-0 rounded-0" style="z-index: 100; margin-top: -30px; margin-bottom: -110px;">
  4.  
  5. <!---- set background pattern here ---------------->
  6. <div style="background-image:url('PATTERN_URL');"
  7. class="px-lg-4 px-md-2 px-1 pt-5 pb-4 mb-2">
  8.  
  9. <div class="container-fluid px-0" style="max-width: 1450px;">
  10. <div class="row">
  11.  
  12. <!-------- start block ----------------------->
  13. <div class="col-lg-4 col-md-6 mb-4">
  14. <!---- set background color & font color here ------>
  15. <div style="background-color:rgba(255,255,255,.9); color: #222; box-shadow: 0px 0px 10px rgba(0,0,0,.3); font-size: 10.5pt;">
  16.  
  17. <!----- banner image--- will scale and crop with screen size -- focus in the CENTER of the image --->
  18. <div style="background-image:url(https://file.toyhou.se/images/15630166_uyelXGuGudwufC3.png);
  19. height: 250px; background-size:cover; background-position:center;"></div>
  20.  
  21. <div class="card-block">
  22. <!---- set folder link & name here ---------->
  23. <a href="#FOLDER LINK"
  24. style="background: #999; color: #fff; letter-spacing: 1px; font-size: 1.2em;" class="d-block text-center text-uppercase p-1 mb-2">
  25. Folder Name</a>
  26.  
  27. <!----- write folder description here ----------->
  28. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. </p>
  29.  
  30. <!----- adjective labels -- for genre & other descriptive labels ------->
  31. <p class="text-center">
  32. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  33. Adjective </span>
  34. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  35. Adjective </span>
  36. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  37. Adjective </span>
  38. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  39. Adjective </span>
  40. </p>
  41. </div></div>
  42. </div> <!---- end block ----->
  43.  
  44. <!-------- start block ----------------------->
  45. <div class="col-lg-4 col-md-6 mb-4">
  46. <!---- set background color & font color here ------>
  47. <div style="background-color:rgba(255,255,255,.9); color: #222; box-shadow: 0px 0px 10px rgba(0,0,0,.3); font-size: 10.5pt;">
  48.  
  49. <!----- banner image--- will scale and crop with screen size -- focus in the CENTER of the image --->
  50. <div style="background-image:url(https://file.toyhou.se/images/12855001_FEavIRcSsNzzkmY.png);
  51. height: 250px; background-size:cover; background-position:center;"></div>
  52.  
  53. <div class="card-block">
  54. <!---- set folder link & name here ---------->
  55. <a href="#FOLDER LINK"
  56. style="background: #999; color: #fff; letter-spacing: 1px; font-size: 1.2em;" class="d-block text-center text-uppercase p-1 mb-2">
  57. Folder Name</a>
  58.  
  59. <!----- write folder description here ----------->
  60. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. </p>
  61.  
  62. <!----- adjective labels -- for genre & other descriptive labels ------->
  63. <p class="text-center">
  64. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  65. Adjective </span>
  66. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  67. Adjective </span>
  68. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  69. Adjective </span>
  70. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  71. Adjective </span>
  72. </p>
  73. </div></div>
  74. </div> <!---- end block ----->
  75.  
  76. <!-------- start block ----------------------->
  77. <div class="col-lg-4 col-md-6 mb-4">
  78. <!---- set background color & font color here ------>
  79. <div style="background-color:rgba(255,255,255,.9); color: #222; box-shadow: 0px 0px 10px rgba(0,0,0,.3); font-size: 10.5pt;">
  80.  
  81. <!----- banner image--- will scale and crop with screen size -- focus in the CENTER of the image --->
  82. <div style="background-image:url(https://file.toyhou.se/images/13555871_pX58jG5AKXX6cP1.png);
  83. height: 250px; background-size:cover; background-position:center;"></div>
  84.  
  85. <div class="card-block">
  86. <!---- set folder link & name here ---------->
  87. <a href="#FOLDER LINK"
  88. style="background: #999; color: #fff; letter-spacing: 1px; font-size: 1.2em;" class="d-block text-center text-uppercase p-1 mb-2">
  89. Folder Name</a>
  90.  
  91. <!----- write folder description here ----------->
  92. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. </p>
  93.  
  94. <!----- adjective labels -- for genre & other descriptive labels ------->
  95. <p class="text-center">
  96. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  97. Adjective </span>
  98. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  99. Adjective </span>
  100. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  101. Adjective </span>
  102. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  103. Adjective </span>
  104. </p>
  105. </div></div>
  106. </div> <!---- end block ----->
  107.  
  108. <!-------- start block ----------------------->
  109. <div class="col-lg-4 col-md-6 mb-4">
  110. <!---- set background color & font color here ------>
  111. <div style="background-color:rgba(255,255,255,.9); color: #222; box-shadow: 0px 0px 10px rgba(0,0,0,.3); font-size: 10.5pt;">
  112.  
  113. <!----- banner image--- will scale and crop with screen size -- focus in the CENTER of the image --->
  114. <div style="background-image:url(https://file.toyhou.se/images/12877134_psIxD7SEjfCblNH.png);
  115. height: 250px; background-size:cover; background-position:center;"></div>
  116.  
  117. <div class="card-block">
  118. <!---- set folder link & name here ---------->
  119. <a href="#FOLDER LINK"
  120. style="background: #999; color: #fff; letter-spacing: 1px; font-size: 1.2em;" class="d-block text-center text-uppercase p-1 mb-2">
  121. Folder Name</a>
  122.  
  123. <!----- write folder description here ----------->
  124. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. </p>
  125.  
  126. <!----- adjective labels -- for genre & other descriptive labels ------->
  127. <p class="text-center">
  128. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  129. Adjective </span>
  130. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  131. Adjective </span>
  132. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  133. Adjective </span>
  134. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  135. Adjective </span>
  136. </p>
  137. </div></div>
  138. </div> <!---- end block ----->
  139.  
  140. <!-------- start block ----------------------->
  141. <div class="col-lg-4 col-md-6 mb-4">
  142. <!---- set background color & font color here ------>
  143. <div style="background-color:rgba(255,255,255,.9); color: #222; box-shadow: 0px 0px 10px rgba(0,0,0,.3); font-size: 10.5pt;">
  144.  
  145. <!----- banner image--- will scale and crop with screen size -- focus in the CENTER of the image --->
  146. <div style="background-image:url(https://file.toyhou.se/images/12877142_ew2cdEkqcg0C2Yl.png);
  147. height: 250px; background-size:cover; background-position:center;"></div>
  148.  
  149. <div class="card-block">
  150. <!---- set folder link & name here ---------->
  151. <a href="#FOLDER LINK"
  152. style="background: #999; color: #fff; letter-spacing: 1px; font-size: 1.2em;" class="d-block text-center text-uppercase p-1 mb-2">
  153. Folder Name</a>
  154.  
  155. <!----- write folder description here ----------->
  156. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. </p>
  157.  
  158. <!----- adjective labels -- for genre & other descriptive labels ------->
  159. <p class="text-center">
  160. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  161. Adjective </span>
  162. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  163. Adjective </span>
  164. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  165. Adjective </span>
  166. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  167. Adjective </span>
  168. </p>
  169. </div></div>
  170. </div> <!---- end block ----->
  171.  
  172. <!-------- start block ----------------------->
  173. <div class="col-lg-4 col-md-6 mb-4">
  174. <!---- set background color & font color here ------>
  175. <div style="background-color:rgba(255,255,255,.9); color: #222; box-shadow: 0px 0px 10px rgba(0,0,0,.3); font-size: 10.5pt;">
  176.  
  177. <!----- banner image--- will scale and crop with screen size -- focus in the CENTER of the image --->
  178. <div style="background-image:url(https://file.toyhou.se/images/15630138_cO26m82Iq9sIrWM.png);
  179. height: 250px; background-size:cover; background-position:center;"></div>
  180.  
  181. <div class="card-block">
  182. <!---- set folder link & name here ---------->
  183. <a href="#FOLDER LINK"
  184. style="background: #999; color: #fff; letter-spacing: 1px; font-size: 1.2em;" class="d-block text-center text-uppercase p-1 mb-2">
  185. Folder Name</a>
  186.  
  187. <!----- write folder description here ----------->
  188. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum. Fusce quis velit vel sem pellentesque iaculis congue non lorem. Aliquam vulputate lacus consequat, volutpat ex ut, blandit lacus. Sed egestas risus ut gravida blandit. In vitae nisi eu mi suscipit semper in eget justo. Sed feugiat dictum posuere. Suspendisse et accumsan leo. Phasellus mollis placerat libero, non euismod diam sodales eget. Pellentesque commodo, dolor nec tempor maximus, risus risus lobortis eros, vitae mollis felis odio vel nulla. Etiam sed libero laoreet ipsum lacinia sagittis eu non lectus. </p>
  189.  
  190. <!----- adjective labels -- for genre & other descriptive labels ------->
  191. <p class="text-center">
  192. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  193. Adjective </span>
  194. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  195. Adjective </span>
  196. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  197. Adjective </span>
  198. <span style="background: #999; letter-spacing: .5px; font-size: .9em;" class="badge">
  199. Adjective </span>
  200. </p>
  201. </div></div>
  202. </div> <!---- end block ----->
  203.  
  204. </div>
  205. </div>
  206. </div>
  207.  
  208. <p class="mt-2 small text-right">HTML by @Pinky</p>
  209. </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!