API tools faq
paste
lowkeywicked

Freebie - Flat World HTML

lowkeywicked
Jan 8th, 2021
4,144
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.17 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid px-0">
  2. <div class="row">
  3. <div class="col-md-5 mb-4 push-md-7">
  4. <div class="bg-faded h-100 modal-open">
  5. <!------ FOCAL IMAGE --- will scale & crop with screen -- focus in top & center of image ----------->
  6. <div style="background-image: url(https://file.toyhou.se/images/12877134_psIxD7SEjfCblNH.png);"
  7. class="focal h-100"></div>
  8. </div>
  9. </div>
  10.  
  11. <div class="col-md-7 mb-4 pull-md-5">
  12. <!---- welcome box -------------------------->
  13. <div class="card border-0">
  14. <div class="card-header px-0 py-2 border-0" style="background:none;">
  15. <h1 class="display-3 text-primary mb-0">
  16. <i class="fal fa-star fa-fw" />
  17. Welcome</h1>
  18. </div>
  19. <div class="p-2 bg-faded">
  20. <div class="card border-0 p-3 h-380">
  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. 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>
  22. <p>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>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27.  
  28. <div class="col-md-5 mb-4">
  29. <!---- info links box -------------------------->
  30. <div class="card border-0">
  31. <div class="card-header px-0 py-2 border-0" style="background:none;">
  32. <h3 class="text-primary text-uppercase mb-0">
  33. <i class="far fa-exclamation-circle fa-fw" />
  34. Info</h3>
  35. </div>
  36. <div class="p-2 bg-faded">
  37. <div class="card border-0 d-flex px-3 pt-2 h-315">
  38. <!----- these links can be whatever you want -- you can add and remove them -- box will scroll when filled -->
  39. <div class="my-auto">
  40. <a href="LINK_HERE" target="_BLANK" class="btn btn-block btn-outline-default mb-2">World & Lore</a>
  41.  
  42. <a href="LINK_HERE" target="_BLANK" class="btn btn-block btn-outline-default mb-2">How to Join</a>
  43.  
  44. <a href="LINK_HERE" target="_BLANK" class="btn btn-block btn-outline-default mb-2">MYO Info</a>
  45.  
  46. <a href="LINK_HERE" target="_BLANK" class="btn btn-block btn-outline-default mb-2">FAQ</a>
  47.  
  48. <a href="LINK_HERE" target="_BLANK" class="btn btn-block btn-outline-default mb-2">Directory</a>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54.  
  55. <div class="col-md-7 mb-4">
  56. <!---- announcements box -------------------------->
  57. <div class="card border-0">
  58. <div class="card-header px-0 py-2 border-0" style="background:none;">
  59. <h3 class="text-primary text-uppercase mb-0">
  60. <i class="far fa-megaphone fa-fw" />
  61. Announcements</h3>
  62. </div>
  63. <div class="p-2 bg-faded">
  64. <div class="card border-0 d-block px-3 pt-3 pb-1 h-315">
  65. <p><b class="mr-2">10/30/19</b> Write some exciting news here...</p>
  66.  
  67. <hr class="mt-0 mb-2">
  68. <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>
  69.  
  70. <hr class="mt-0 mb-2">
  71. <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>
  72.  
  73. <hr class="mt-0 mb-2">
  74. <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>
  75.  
  76. <hr class="mt-0 mb-2">
  77. <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>
  78.  
  79. <hr class="mt-0 mb-2">
  80. <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>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86. <!----------------- row of extra boxes -------------------------->
  87. <div class="row">
  88. <div class="col-md-6 mb-4">
  89. <!---- misc box 1 -------------------------->
  90. <div class="card border-0">
  91. <div class="card-header px-0 py-2 border-0" style="background:none;">
  92. <h3 class="text-primary text-uppercase mb-0">
  93. <i class="far fa-sun fa-fw" />
  94. Misc</h3>
  95. </div>
  96. <div class="p-2 bg-faded">
  97. <div class="card border-0 p-3 h-380">
  98. <P>This is an extra row of empty boxes for whatever you want. They will scroll when filled on desktop and grow with content on mobile. Just delete the row if you don't wanna use them.</P>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103.  
  104. <div class="col-md-6 mb-4">
  105. <!---- misc box 2 -------------------------->
  106. <div class="card border-0">
  107. <div class="card-header px-0 py-2 border-0" style="background:none;">
  108. <h3 class="text-primary text-uppercase mb-0">
  109. <i class="far fa-moon fa-fw" />
  110. Misc</h3>
  111. </div>
  112. <div class="p-2 bg-faded">
  113. <div class="card border-0 p-3 h-380">
  114. <P>This is an extra row of empty boxes for whatever you want. They will scroll when filled on desktop and grow with content on mobile. Just delete the row if you don't wanna use them.</P>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </div> <!---------------- end row ----------------------->
  120.  
  121. <div class="row">
  122. <div class="col-12 mb-4">
  123. <!---- featured box ---- use SQUARE images---------------------->
  124. <div class="card border-0">
  125. <div class="card-header px-0 py-2 border-0" style="background:none;">
  126. <h3 class="text-primary text-uppercase mb-0">
  127. <i class="far fa-heart fa-fw" />
  128. Featured</h3>
  129. </div>
  130. <div class="p-2 bg-faded">
  131. <div class="card border-0 d-block px-3 pt-3 pb-0">
  132. <div class="row justify-content-center text-center">
  133. <!---------- BLOCK ----------------->
  134. <div class="col-lg-3 col-6 mb-3">
  135. <img src="IMG_URL" class="rounded-circle d-block mx-auto mb-3">
  136. <a href="LINK_HERE" target="_BLANK" class="btn btn-default">Link Name</a>
  137. </div>
  138.  
  139. <!---------- BLOCK ----------------->
  140. <div class="col-lg-3 col-6 mb-3">
  141. <img src="IMG_URL" class="rounded-circle d-block mx-auto mb-3">
  142. <a href="LINK_HERE" target="_BLANK" class="btn btn-default">Link Name</a>
  143. </div>
  144.  
  145. <!---------- BLOCK ----------------->
  146. <div class="col-lg-3 col-6 mb-3">
  147. <img src="IMG_URL" class="rounded-circle d-block mx-auto mb-3">
  148. <a href="LINK_HERE" target="_BLANK" class="btn btn-default">Link Name</a>
  149. </div>
  150.  
  151. <!---------- BLOCK ----------------->
  152. <div class="col-lg-3 col-6 mb-3">
  153. <img src="IMG_URL" class="rounded-circle d-block mx-auto mb-3">
  154. <a href="LINK_HERE" target="_BLANK" class="btn btn-default">Link Name</a>
  155. </div>
  156.  
  157. </div>
  158. </div>
  159. </div>
  160. </div>
  161. </div>
  162.  
  163. <div class="col-md-8 mb-4">
  164. <!---- rules box -------------------------->
  165. <div class="card border-0">
  166. <div class="card-header px-0 py-2 border-0" style="background:none;">
  167. <h3 class="text-primary text-uppercase mb-0">
  168. <i class="far fa-question-circle fa-fw" />
  169. Rules</h3>
  170. </div>
  171. <div class="p-2 bg-faded">
  172. <div class="card border-0 px-3 pt-3 pb-1 h-315">
  173. <ol class="mb-0">
  174. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  175. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  176. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  177. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  178. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  179. <li class="mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  180. </ol>
  181. </div>
  182.  
  183. </div>
  184. </div>
  185. </div>
  186.  
  187. <div class="col-md-4 mb-4">
  188. <!---- mods box -------------------------->
  189. <div class="card border-0">
  190. <div class="card-header px-0 py-2 border-0" style="background:none;">
  191. <h3 class="text-primary text-uppercase mb-0">
  192. <i class="far fa-users fa-fw" />
  193. Mods</h3>
  194. </div>
  195. <div class="p-2 bg-faded">
  196. <div class="card border-0 px-1 pt-1 pb-0 h-315">
  197. <!----- you can add and remove users -- box will scroll when filled ------>
  198. <div class="row no-gutters">
  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 class="col-12 p-1 bg-faded mb-1">
  207. <a href="MOD_LINK" target="_BLANK">
  208. <img src="AVATAR_URL" class="float-left mr-1" style="max-height: 50px"></a>
  209. <p><b>Mod name</b>
  210. <br><span class="small">subtitle</span></p>
  211. </div>
  212.  
  213. <div class="col-12 p-1 mb-1">
  214. <a href="MOD_LINK" target="_BLANK">
  215. <img src="AVATAR_URL" class="float-left mr-1" style="max-height: 50px"></a>
  216. <p><b>Mod name</b>
  217. <br><span class="small">subtitle</span></p>
  218. </div>
  219.  
  220. <div class="col-12 p-1 bg-faded mb-1">
  221. <a href="MOD_LINK" target="_BLANK">
  222. <img src="AVATAR_URL" class="float-left mr-1" style="max-height: 50px"></a>
  223. <p><b>Mod name</b>
  224. <br><span class="small">subtitle</span></p>
  225. </div>
  226.  
  227. <div class="col-12 p-1 mb-1">
  228. <a href="MOD_LINK" target="_BLANK">
  229. <img src="AVATAR_URL" class="float-left mr-1" style="max-height: 50px"></a>
  230. <p><b>Mod name</b>
  231. <br><span class="small">subtitle</span></p>
  232. </div>
  233.  
  234. </div>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. </div>
  240. </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!