API tools faq
paste
Advertisement
ElithianFox

Simple World HTML

ElithianFox
Oct 10th, 2019
10,989
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.71 KB | None | 0 0
raw download clone embed print report
  1. <!----------------
  2.  
  3. ***SIMPLE WORLD LAYOUT***
  4.  
  5. Code and layout by https://toyhou.se/Elithian
  6. Please read my TOS before using: https://toyhou.se/~bulletins/96449.rules-tos
  7.  
  8. This layout was made with TH world in mind, but you can also use this for user pages and character profiles. Edit to your heart's content, add and remove sections, change the colours, etc.
  9.  
  10.  
  11.  
  12. ***CODE RESOURCES AND TIPS***
  13. FULL WIDTH
  14. To use this code without the 1200px max width, remove the following from the first line of code:
  15. style="max-width:1200px"
  16.  
  17. USEFUL COLOURS
  18. To change any of these colours, press ctrl+F or cmd+F, enter the old colour code, press "all" in the search bar, and enter the new colour code.
  19.  
  20. Big title colours
  21. BG: #789f8d
  22. Text: #ffffff
  23.  
  24. Small title colours
  25. Background: #adcebe
  26. Text: #ffffff
  27.  
  28. Link colours
  29. Active BG: #dce9e3
  30. Active text: #6b8c7c
  31. Inactive BG: #c8c8c8
  32. Inactive text: #7a7a7a
  33.  
  34. TOP LINKS
  35. Suggested links:
  36. - World guide with a link to all articles
  37. - Beginner's guide (where to find info)
  38. - Characters
  39. - Forums
  40. - Rules
  41. - Species sheets
  42. - Off-site links
  43. - Admins and artists
  44.  
  45. ARTICLE LINKS
  46. Links that lead somewhere have a different colour than links that don't have an article yet. That way you can show planned articles.
  47.  
  48. Active link
  49. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  50.  
  51. Inactive link
  52. <div class="col-md-6 p-1"><span class="btn btn-block border-0 p-3 rounded-0" style="background-color:#c8c8c8;color:#7a7a7a">Inactive link</span></div>
  53.  
  54.  
  55.  
  56.  
  57. Feel free to remove this section if you don't need this info.
  58. ---------------->
  59. <div class="mx-auto" style="max-width:1200px">
  60. <div style="background:url();background-color:#77abbd;background-position:bottom;background-attachment:fixed;background-size:cover" class="rounded text-center row no-gutters mb-1 mx-auto">
  61. <div class="col-md-3 col-1 w-100"></div>
  62.  
  63. <div class="col-md-6 col-10 w-100">
  64. <div class="py-5 px-md-3 mb-3 mt-3 w-100 mx-auto" style="font-size:3.2rem;font-weight:200;letter-spacing:2px;color:rgba(255, 255, 255, 0.9);">
  65.  
  66. <div class="p-4 mb-3" style="background-color:rgba(100, 135, 145, 0.75);border-radius:5px">
  67. <hr class="mb-0" style="width:75%;border-color:rgba(255, 255, 255, 0.9)">
  68. World name
  69. <hr class="mt-0" style="width:75%;border-color:rgba(255, 255, 255, 0.9)">
  70. </div>
  71.  
  72. <div class="p-2" style="background-color:rgba(255, 255, 255, 0.85);border-radius:25px">
  73. <div class="d-flex justify-content-around" style="font-size:1.5rem">
  74. <span></span>
  75. <span><a data-toggle="tooltip" title="Homepage" href="" style="color:rgba(105, 150, 130, 0.95)"><i class="fal fa-home"></i></a></span>
  76. <span></span>
  77. <span><a data-toggle="tooltip" title="Table of Contents" href="" style="color:rgba(105, 150, 130, 0.95)"><i class="fal fa-list-alt"></i></a></span>
  78. <span></span>
  79. <span><a data-toggle="tooltip" title="Introduction" href="" style="color:rgba(105, 150, 130, 0.95)"><i class="fal fa-info-circle"></i></a></span>
  80. <span></span>
  81. <span><a data-toggle="tooltip" title="Feedback & Discussion" href="" style="color:rgba(105, 150, 130, 0.95)"><i class="fal fa-comment"></i></a></span>
  82. <span></span>
  83. <span><a data-toggle="tooltip" title="Header background credit" href="" style="color:rgba(105, 150, 130, 0.95)"><i class="fal fa-camera-alt"></i></a></span>
  84. <span></span>
  85. </div>
  86. </div>
  87.  
  88. </div>
  89. </div>
  90.  
  91. <div class="col-md-3 col-1 w-100"></div>
  92. </div>
  93.  
  94.  
  95. <div class="row no-gutters">
  96. <!----------------
  97.  
  98. TOP LINKS
  99.  
  100. ---------------->
  101. <div class="col-md-1"></div>
  102. <div class="col-md-10 row no-gutters">
  103. <div class="col-md-3 col-6 p-1"><a class="btn btn-block border-0 p-3" href="" style="background-color:#accebe;color:rgb(255,255,255)">Link</a></div>
  104. <div class="col-md-3 col-6 p-1"><a class="btn btn-block border-0 p-3" href="" style="background-color:#accebe;color:rgb(255,255,255)">Link</a></div>
  105. <div class="col-md-3 col-6 p-1"><a class="btn btn-block border-0 p-3" href="" style="background-color:#accebe;color:rgb(255,255,255)">Link</a></div>
  106. <div class="col-md-3 col-6 p-1"><a class="btn btn-block border-0 p-3" href="" style="background-color:#accebe;color:rgb(255,255,255)">Link</a></div>
  107. </div>
  108. <div class="col-md-1"></div>
  109.  
  110. <!----------------
  111.  
  112. ABOUT THE WORLD
  113.  
  114. ---------------->
  115. <div class="col-md-1"></div>
  116. <div class="col-md-10 p-1">
  117. <div class="p-3 text-center" style="background-color:#789f8d;color:rgb(255, 255, 255);font-size:2rem;font-weight:200;letter-spacing:2px;border-top-left-radius:40px;border-top-right-radius:40px">About the World</div>
  118. <div class="bg-faded p-3">
  119. <div class="p-1 mt-1 mx-auto text-center" style="font-size:0.8rem;font-weight:100">Setting | Genre | Species | Open/closed world | Other short details</div>
  120.  
  121. <hr style="width:25%">
  122. <div class="px-md-3" style="font-weight:300">
  123. <p align="justify">This is an introduction text.<br><br></p>
  124.  
  125. <p align="justify">text</p>
  126.  
  127. <p align="justify">text</p>
  128.  
  129. <p align="justify">text</p>
  130.  
  131. <hr style="width:75%">
  132.  
  133. </div>
  134. </div>
  135. <div class="p-3" style="background-color:#789f8d;border-bottom-left-radius:40px;border-bottom-right-radius:40px;height:20px"></div>
  136. </div>
  137. <div class="col-md-1"></div>
  138.  
  139.  
  140. <!----------------
  141.  
  142. ARTICLE LINKS
  143.  
  144. ---------------->
  145. <div class="col-md-1"></div>
  146. <div class="col-md-10 row no-gutters">
  147. <div class="row no-gutters col-12 p-1">
  148. <div class="col-12 row no-gutters p-3 text-center" style="background-color:#789f8d;color:rgb(255, 255, 255);font-size:2rem;font-weight:200;letter-spacing:2px;border-top-left-radius:40px;border-top-right-radius:40px">
  149. <div class="col-12">World Info</div>
  150. <div class="col-md-4"></div>
  151. <div class="col-md-4 text-center" style="font-size:0.6rem"><a class="btn" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" style="background-color:#accebe;color:rgb(255,255,255);font-size:0.6rem">Expand/collapse all categories</a></div>
  152. <div class="col-md-4"></div>
  153. </div>
  154. </div>
  155.  
  156. <div class="col-12 p-1"><a class="btn btn-block border-0 p-3" href="" style="background-color:#accebe;color:rgb(255,255,255)">Guide to the World</a></div>
  157.  
  158. <div class="col-6 p-1"><a class="btn btn-block border-0 p-3" href="#introduction" data-toggle="collapse" style="background-color:#accebe;color:rgb(255,255,255)">Introduction</a></div>
  159. <div class="col-6 p-1"><a class="btn btn-block border-0 p-3" href="#species" data-toggle="collapse" style="background-color:#accebe;color:rgb(255,255,255)">Species</a></div>
  160.  
  161. <div class="col-6">
  162. <div id="introduction" class="collapse multi-collapse">
  163. <div class="text-center row no-gutters mb-3">
  164. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  165. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  166. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  167. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  168. </div>
  169. </div>
  170. </div>
  171. <div class="col-6">
  172. <div id="species" class="collapse multi-collapse">
  173. <div class="text-center row no-gutters mb-3">
  174. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  175. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  176. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  177. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  178. </div>
  179. </div>
  180. </div>
  181.  
  182. </div>
  183. <div class="col-md-1"></div>
  184.  
  185. <div class="col-md-1"></div>
  186. <div class="col-md-10 row no-gutters">
  187.  
  188. <div class="col-6 p-1"><a class="btn btn-block border-0 p-3" href="#magic" data-toggle="collapse" style="background-color:#accebe;color:rgb(255,255,255)">Magic</a></div>
  189. <div class="col-6 p-1"><a class="btn btn-block border-0 p-3" href="#factions" data-toggle="collapse" style="background-color:#accebe;color:rgb(255,255,255)">Factions</a></div>
  190.  
  191. <div class="col-6">
  192. <div id="magic" class="collapse multi-collapse">
  193. <div class="text-center row no-gutters mb-3">
  194. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  195. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  196. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  197. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  198. </div>
  199. </div>
  200. </div>
  201. <div class="col-6">
  202. <div id="factions" class="collapse multi-collapse">
  203. <div class="text-center row no-gutters mb-3">
  204. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  205. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  206. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  207. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  208. </div>
  209. </div>
  210. </div>
  211.  
  212. </div>
  213. <div class="col-md-1"></div>
  214.  
  215. <div class="col-md-1"></div>
  216. <div class="col-md-10 row no-gutters">
  217.  
  218. <div class="col-6 p-1"><a class="btn btn-block border-0 p-3" href="#locations" data-toggle="collapse" style="background-color:#accebe;color:rgb(255,255,255)">Locations</a></div>
  219. <div class="col-6 p-1"><a class="btn btn-block border-0 p-3" href="#culture" data-toggle="collapse" style="background-color:#accebe;color:rgb(255,255,255)">Culture</a></div>
  220.  
  221. <div class="col-6">
  222. <div id="locations" class="collapse multi-collapse">
  223. <div class="text-center row no-gutters mb-3">
  224. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  225. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  226. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  227. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  228. </div>
  229. </div>
  230. </div>
  231. <div class="col-6">
  232. <div id="culture" class="collapse multi-collapse">
  233. <div class="text-center row no-gutters mb-3">
  234. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  235. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  236. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  237. <div class="col-md-6 p-1"><a class="btn btn-block border-0 p-3 rounded-0" href="" style="background-color:#dce9e3;color:#6b8c7c">Link</a></div>
  238. </div>
  239. </div>
  240. </div>
  241.  
  242. <div class="col-12 p-1">
  243. <div class="p-3" style="background-color:#789f8d;border-bottom-left-radius:40px;border-bottom-right-radius:40px;height:20px"></div>
  244. </div>
  245. </div>
  246. <div class="col-md-1"></div>
  247.  
  248.  
  249. <!----------------
  250.  
  251. WORLD MAP
  252.  
  253. ---------------->
  254. <div class="col-md-1"></div>
  255. <div class="col-md-10 p-1">
  256. <div class="p-3 text-center" style="background-color:#789f8d;color:rgb(255, 255, 255);font-size:2rem;font-weight:200;letter-spacing:2px;border-top-left-radius:40px;border-top-right-radius:40px">The World Map</div>
  257. <div>
  258. <img src="">
  259. </div>
  260. <div class="p-3" style="background-color:#789f8d;border-bottom-left-radius:40px;border-bottom-right-radius:40px;height:20px"></div>
  261. </div>
  262. <div class="col-md-1"></div>
  263.  
  264.  
  265.  
  266. </div>
  267.  
  268. <!---------
  269.  
  270. CREDITS
  271.  
  272. !Please do not remove!
  273.  
  274. ----------->
  275. <div class="col-md-12 p-1">
  276. <div class="p-1 text-right"><a data-toggle="tooltip" class="text-muted" title="Coding by ElithianFox" href="https://toyhou.se/Elithian"><i class="far fa-dna"></i></a></div>
  277. </div>
  278. </div>
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!