API tools faq
paste
lowkeywicked

Freebie Directory Inline

lowkeywicked
Oct 5th, 2019 (edited)
7,985
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.09 KB | None | 0 0
raw download clone embed print report
  1. <!---- container --- DO NOT USE THIS HTML WITH CUSTOM CSS -------------->
  2. <div class="card border-0 container-fluid p-0 rounded-0" style="z-index: 100; margin-top: -30px; margin-bottom: -110px;">
  3.  
  4. <!---- set background pattern here ---------------->
  5. <div style="background-image:url('PATTERN URL');"
  6. class="rounded px-lg-4 px-md-2 px-1 pt-4 mb-2">
  7.  
  8. <div class="container-fluid px-0" style="max-width: 1450px;">
  9. <div class="row">
  10.  
  11. <!-------- start block ----------------------->
  12. <div class="col-md-6 mb-4">
  13. <!---- set background color & font color here ------>
  14. <div style="background-color:rgba(255,255,255,.9); color: #222;"
  15. class="rounded card-block text-justify h-100">
  16.  
  17. <!---- set folder link & name here ---------->
  18. <a href="FOLDER_LINK"
  19. style="background: #d8607b; color: #fff; letter-spacing: 1px; font-size: 1.5em;" class="rounded d-block text-center text-uppercase p-2 mb-2">
  20. Folder Name</a>
  21.  
  22. <!----- optional focal image -- will auto resize ------>
  23. <img src="IMG_URL" class="rounded d-block mx-auto mb-2" style="max-height: 250px;">
  24.  
  25. <!----- write folder description here ----------->
  26. <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>
  27.  
  28. <!----- adjective labels -- for genre & other descriptive labels ------->
  29. <p class="text-center">
  30. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  31. Adjective </span>
  32. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  33. Adjective </span>
  34. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  35. Adjective </span>
  36. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  37. Adjective </span>
  38. </p>
  39. </div>
  40. </div> <!---- end block ----->
  41.  
  42. <!-------- start block ----------------------->
  43. <div class="col-md-6 mb-4">
  44. <!---- set background color & font color here ------>
  45. <div style="background-color:rgba(255,255,255,.9); color: #222;"
  46. class="rounded card-block text-justify h-100">
  47.  
  48. <!---- set folder link & name here ---------->
  49. <a href="FOLDER_LINK"
  50. style="background: #d8607b; color: #fff; letter-spacing: 1px; font-size: 1.5em;" class="rounded d-block text-center text-uppercase p-2 mb-2">
  51. Folder Name</a>
  52.  
  53. <!----- optional focal image -- will auto resize ------>
  54. <img src="IMG_URL" class="rounded d-block mx-auto mb-2" style="max-height: 250px;">
  55.  
  56. <!----- write folder description here ----------->
  57. <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>
  58.  
  59. <!----- adjective labels -- for genre & other descriptive labels ------->
  60. <p class="text-center">
  61. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  62. Adjective </span>
  63. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  64. Adjective </span>
  65. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  66. Adjective </span>
  67. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  68. Adjective </span>
  69. </p>
  70. </div>
  71. </div> <!---- end block ----->
  72.  
  73. <!-------- start block ----------------------->
  74. <div class="col-md-6 mb-4">
  75. <!---- set background color & font color here ------>
  76. <div style="background-color:rgba(255,255,255,.9); color: #222;"
  77. class="rounded card-block text-justify h-100">
  78.  
  79. <!---- set folder link & name here ---------->
  80. <a href="FOLDER_LINK"
  81. style="background: #d8607b; color: #fff; letter-spacing: 1px; font-size: 1.5em;" class="rounded d-block text-center text-uppercase p-2 mb-2">
  82. Folder Name</a>
  83.  
  84. <!----- optional focal image -- will auto resize ------>
  85. <img src="IMG_URL" class="rounded d-block mx-auto mb-2" style="max-height: 250px;">
  86.  
  87. <!----- write folder description here ----------->
  88. <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>
  89.  
  90. <!----- adjective labels -- for genre & other descriptive labels ------->
  91. <p class="text-center">
  92. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  93. Adjective </span>
  94. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  95. Adjective </span>
  96. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  97. Adjective </span>
  98. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  99. Adjective </span>
  100. </p>
  101. </div>
  102. </div> <!---- end block ----->
  103.  
  104. <!-------- start block ----------------------->
  105. <div class="col-md-6 mb-4">
  106. <!---- set background color & font color here ------>
  107. <div style="background-color:rgba(255,255,255,.9); color: #222;"
  108. class="rounded card-block text-justify h-100">
  109.  
  110. <!---- set folder link & name here ---------->
  111. <a href="FOLDER_LINK"
  112. style="background: #d8607b; color: #fff; letter-spacing: 1px; font-size: 1.5em;" class="rounded d-block text-center text-uppercase p-2 mb-2">
  113. Folder Name</a>
  114.  
  115. <!----- optional focal image -- will auto resize ------>
  116. <img src="IMG_URL" class="rounded d-block mx-auto mb-2" style="max-height: 250px;">
  117.  
  118. <!----- write folder description here ----------->
  119. <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>
  120.  
  121. <!----- adjective labels -- for genre & other descriptive labels ------->
  122. <p class="text-center">
  123. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  124. Adjective </span>
  125. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  126. Adjective </span>
  127. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  128. Adjective </span>
  129. <span style="background: #d8607b; letter-spacing: .5px; font-size: .9em;" class="badge">
  130. Adjective </span>
  131. </p>
  132. </div>
  133. </div> <!---- end block ----->
  134.  
  135. </div>
  136. </div>
  137. </div>
  138.  
  139. <p class="text-right small">HTML by @Pinky</p>
  140. </div>
Advertisement
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!