API tools faq
paste
lowkeywicked

Freebie Group 01 Theme

lowkeywicked
Oct 30th, 2019 (edited)
3,484
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.31 KB | None | 0 0
raw download clone embed print report
  1. <!------
  2. -------- DO NOT USE WYSIWYG WITH THIS LAYOUT. USE CODE EDITOR
  3. -------- DON'T USE THE "CODE SOURCE" BUTTON, TURN OFF WYSIWGY COMPLETELY
  4. -------- i see you thinking "oh it will be fine-" NO, TURN IT OFF !!
  5. -------->
  6.  
  7.  
  8. <div class="container-fluid px-0" style="max-width: 1150px;">
  9. <div class="row">
  10. <div class="col-md-7 mb-4">
  11. <!---- welcome box -------------------------->
  12. <div class="card border-0 bg-faded" style="box-shadow: 0px 0px 12px rgba(0,0,0,.3);">
  13. <div class="card-header bg-primary px-4 py-2 border-0">
  14. <h1 class="display-3 text-white mb-0" style="letter-spacing:1px;">
  15. <i class="fal fa-star fa-fw" />
  16. Welcome</h1>
  17. </div>
  18. <div class="p-2">
  19. <div class="card border-0 px-3 pt-3 pb-1" style="height: 380px; overflow:auto;">
  20. <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. </p>
  21. <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. 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>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26.  
  27. <div class="col-md-5 mb-4">
  28. <div class="bg-faded rounded h-100 modal-open" style="box-shadow: 0px 0px 12px rgba(0,0,0,.3);">
  29. <!------ FOCAL IMAGE --- will scale & crop with screen -- focus in top & center of image ----------->
  30. <div style="background-image: url(https://file.toyhou.se/images/12877134_psIxD7SEjfCblNH.png);
  31. background-size: cover; background-position: top center; min-height: 400px;" class="h-100"></div>
  32. </div>
  33. </div>
  34.  
  35. <div class="col-md-5 mb-4">
  36. <!---- info links box -------------------------->
  37. <div class="card border-0 bg-faded" style="box-shadow: 0px 0px 12px rgba(0,0,0,.3);">
  38. <div class="card-header bg-primary px-4 py-2 border-0">
  39. <h3 class="text-white text-uppercase mb-0" style="font-weight: 300;">
  40. <i class="far fa-exclamation-circle fa-fw" />
  41. Info</h3>
  42. </div>
  43. <div class="p-2">
  44. <div class="card border-0 d-flex px-3 py-1" style="height: 315px; overflow:auto;">
  45. <!----- these links can be whatever you want -- you can add and remove them -- box will scroll when filled -->
  46. <div class="my-auto">
  47. <a href="LINK_HERE" target="_BLANK" class="btn btn-block btn-default mb-2">World & Lore</a>
  48.  
  49. <a href="LINK_HERE" target="_BLANK" class="btn btn-block btn-default mb-2">How to Join</a>
  50.  
  51. <a href="LINK_HERE" target="_BLANK" class="btn btn-block btn-default mb-2">MYO Info</a>
  52.  
  53. <a href="LINK_HERE" target="_BLANK" class="btn btn-block btn-default mb-2">FAQ</a>
  54.  
  55. <a href="LINK_HERE" target="_BLANK" class="btn btn-block btn-default mb-2">Directory</a>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61.  
  62. <div class="col-md-7 mb-4">
  63. <!---- announcements box -------------------------->
  64. <div class="card border-0 bg-faded" style="box-shadow: 0px 0px 12px rgba(0,0,0,.3);">
  65. <div class="card-header bg-primary px-4 py-2 border-0">
  66. <h3 class="text-white text-uppercase mb-0" style="font-weight: 300;">
  67. <i class="far fa-megaphone fa-fw" />
  68. Announcements</h3>
  69. </div>
  70. <div class="p-2">
  71. <div class="card border-0 d-block px-3 pt-3 pb-1" style="height: 315px; overflow:auto;">
  72. <p><b class="mr-2">10/30/19</b> Write some exciting news here...</p>
  73.  
  74. <hr class="mt-0 mb-2">
  75. <p><b class="mr-2">##/##/##</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.</p>
  76.  
  77. <hr class="mt-0 mb-2">
  78. <p><b class="mr-2">##/##/##</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.</p>
  79.  
  80. <hr class="mt-0 mb-2">
  81. <p><b class="mr-2">##/##/##</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.</p>
  82.  
  83. <hr class="mt-0 mb-2">
  84. <p><b class="mr-2">##/##/##</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.</p>
  85.  
  86. <hr class="mt-0 mb-2">
  87. <p><b class="mr-2">##/##/##</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a felis molestie, porttitor est eget, euismod mauris. Integer fermentum est vitae dui pretium fermentum.</p>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92.  
  93. <div class="col-12 mb-4">
  94. <!---- featured box ---- use SQUARE images---------------------->
  95. <div class="card border-0 bg-faded" style="box-shadow: 0px 0px 12px rgba(0,0,0,.3);">
  96. <div class="card-header bg-primary px-4 py-2 border-0">
  97. <h3 class="text-white text-uppercase mb-0" style="font-weight: 300;">
  98. <i class="far fa-heart fa-fw" />
  99. Featured</h3>
  100. </div>
  101. <div class="p-2">
  102. <div class="card border-0 d-block px-3 pt-3 pb-1">
  103. <div class="row justify-content-center text-center">
  104. <!---------- BLOCK ----------------->
  105. <div class="col-lg-3 col-6 mb-4">
  106. <img src="IMG_URL" class="rounded-circle d-block mx-auto mb-3">
  107. <a href="LINK_HERE" target="_BLANK" class="btn btn-default">Link Name</a>
  108. </div>
  109.  
  110. <!---------- BLOCK ----------------->
  111. <div class="col-lg-3 col-6 mb-4">
  112. <img src="IMG_URL" class="rounded-circle d-block mx-auto mb-3">
  113. <a href="LINK_HERE" target="_BLANK" class="btn btn-default">Link Name</a>
  114. </div>
  115.  
  116. <!---------- BLOCK ----------------->
  117. <div class="col-lg-3 col-6 mb-4">
  118. <img src="IMG_URL" class="rounded-circle d-block mx-auto mb-3">
  119. <a href="LINK_HERE" target="_BLANK" class="btn btn-default">Link Name</a>
  120. </div>
  121.  
  122. <!---------- BLOCK ----------------->
  123. <div class="col-lg-3 col-6 mb-4">
  124. <img src="IMG_URL" class="rounded-circle d-block mx-auto mb-3">
  125. <a href="LINK_HERE" target="_BLANK" class="btn btn-default">Link Name</a>
  126. </div>
  127.  
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133.  
  134. <div class="col-md-8 mb-4">
  135. <!---- rules box -------------------------->
  136. <div class="card border-0 bg-faded" style="box-shadow: 0px 0px 12px rgba(0,0,0,.3);">
  137. <div class="card-header bg-primary px-4 py-2 border-0">
  138. <h3 class="text-white text-uppercase mb-0" style="font-weight: 300;">
  139. <i class="far fa-question-circle fa-fw" />
  140. Rules</h3>
  141. </div>
  142. <div class="p-2">
  143. <div class="card border-0 px-3 pt-3 pb-0" style="height: 315px; overflow:auto;">
  144. <ol class="mb-0">
  145. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  146. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  147. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  148. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  149. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  150. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  151. </ol>
  152. </div>
  153.  
  154. </div>
  155. </div>
  156.  
  157. </div>
  158.  
  159. <div class="col-md-4 mb-4">
  160. <!---- mods box -------------------------->
  161. <div class="card border-0 bg-faded" style="box-shadow: 0px 0px 12px rgba(0,0,0,.3);">
  162. <div class="card-header bg-primary px-4 py-2 border-0">
  163. <h3 class="text-white text-uppercase mb-0" style="font-weight: 300;">
  164. <i class="far fa-users fa-fw" />
  165. Mods</h3>
  166. </div>
  167. <div class="p-2">
  168. <div class="card border-0 px-1 pt-1 pb-0" style="height: 315px; overflow:auto;">
  169. <!----- you can add and remove users -- box will scroll when filled ------>
  170. <div class="row no-gutters">
  171. <div class="col-12 p-1 mb-1">
  172. <a href="MOD_LINK" target="_BLANK">
  173. <img src="AVATAR_URL" class="float-left mr-1" style="max-height: 50px"></a>
  174. <p><b>Mod name</b>
  175. <br><span class="small">subtitle</span></p>
  176. </div>
  177.  
  178. <div class="col-12 p-1 bg-faded mb-1">
  179. <a href="MOD_LINK" target="_BLANK">
  180. <img src="AVATAR_URL" class="float-left mr-1" style="max-height: 50px"></a>
  181. <p><b>Mod name</b>
  182. <br><span class="small">subtitle</span></p>
  183. </div>
  184.  
  185. <div class="col-12 p-1 mb-1">
  186. <a href="MOD_LINK" target="_BLANK">
  187. <img src="AVATAR_URL" class="float-left mr-1" style="max-height: 50px"></a>
  188. <p><b>Mod name</b>
  189. <br><span class="small">subtitle</span></p>
  190. </div>
  191.  
  192. <div class="col-12 p-1 bg-faded mb-1">
  193. <a href="MOD_LINK" target="_BLANK">
  194. <img src="AVATAR_URL" class="float-left mr-1" style="max-height: 50px"></a>
  195. <p><b>Mod name</b>
  196. <br><span class="small">subtitle</span></p>
  197. </div>
  198.  
  199. <div class="col-12 p-1 mb-1">
  200. <a href="MOD_LINK" target="_BLANK">
  201. <img src="AVATAR_URL" class="float-left mr-1" style="max-height: 50px"></a>
  202. <p><b>Mod name</b>
  203. <br><span class="small">subtitle</span></p>
  204. </div>
  205.  
  206. </div>
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. <p class="text-right small">HTML by @Pinky</p>
  213. </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!