junijwi

MHU Wiki Template

Jun 1st, 2020
270
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.42 KB | None | 0 0
  1. <!------------
  2. ⏻ - WIKIA V2 by watergems
  3. do not remove credit/claim
  4. color: #C37C36
  5. links: manual href; copy+paste below
  6. <a href="/" color:#C37C36">link</a>
  7. ------------>
  8. <div class="container" style="max-width: 1200px; align-content: center;">
  9. <!------ INFOBOX ------>
  10. <div class="col-md-4 float-md-right p-0 mb-3 ml-md-3">
  11. <div class="card bg-faded" style="border:1px solid #C37C36;border-radius:.25rem;">
  12. <!-- CHARACTER NAME -->
  13.  
  14. <h2 class="card-header card-inverse text-center text-white" style="background:#C37C36;border-radius:.25rem 0;">Character Name</h2>
  15. <!-- IMAGE // if you have one image, remove this section -->
  16.  
  17. <ul class="nav d-flex flex-row p-1 mx-auto list-unstyled">
  18. <li class="nav-item"><a class="nav-link btn mx-1 text-white" data-toggle="tab" href="#casual" style="background:#C37C36;">casual</a></li>
  19. <li class="nav-item"><a class="nav-link btn mx-1 text-white" data-toggle="tab" href="#hero" style="background:#C37C36;">hero</a></li>
  20. </ul>
  21. <div class="tab-content text-center">
  22. <div class="tab-pane fade width-auto active show" id="casual" style="background-image:url(''); background-repeat: no-repeat; background-size: contain; background-position: center; height: 600px; width: 100%;"><p></p></div>
  23. <div class="tab-pane fade width-auto" id="hero" style="background-image:url(''); background-repeat: no-repeat; background-size: contain; background-position: center; height: 600px; width: 100%;"><p></p></div>
  24. </div>
  25. <!-- IMAGE // if you have one image, remove the comment lines around the next line
  26. <img src="http://placehold.it/800x1200" class="mx-auto mt-2 mx-2" />
  27. -->
  28. <!-- SUBHEADING 1 -->
  29.  
  30. <h5 class="text-white text-center py-2 mt-0 mb-2" style="background:#C37C36;">General Info</h5>
  31. <!-- FIELDS 1 // copy+paste 5/7 rows as needed -->
  32. <div class="container" style="max-width: 90%;">
  33. <div class="row mb-4 mt-2">
  34. <div class="col-5 pl-4 font-weight-bold">Name</div>
  35. <div class="col-7 pr-4">Lorem ipsum</div>
  36. <div class="col-5 pl-4 font-weight-bold">Birthday</div>
  37. <div class="col-7 pr-4">Lorem ipsum</div>
  38. <div class="col-5 pl-4 font-weight-bold">Age</div>
  39. <div class="col-7 pr-4">Lorem ipsum</div>
  40. <div class="col-5 pl-4 font-weight-bold">Gender</div>
  41. <div class="col-7 pr-4">Lorem ipsum</div>
  42. <div class="col-5 pl-4 font-weight-bold">Height</div>
  43. <div class="col-7 pr-4">Lorem ipsum</div>
  44. <div class="col-5 pl-4 font-weight-bold">Sexuality</div>
  45. <div class="col-7 pr-4">Lorem ipsum</div>
  46. <div class="col-5 pl-4 font-weight-bold">Nationality</div>
  47. <div class="col-7 pr-4">Lorem ipsum</div>
  48. <div class="col-5 pl-4 font-weight-bold">Blood Type</div>
  49. <div class="col-7 pr-4">Lorem ipsum</div>
  50. </div>
  51. </div>
  52. <!-- SUBHEADING 2 -->
  53.  
  54. <h5 class="text-white text-center py-2 mt-0 mb-2" style="background:#C37C36;">Hero Info</h5>
  55. <!-- FIELDS 1 // copy+paste 5/7 rows as needed -->
  56. <div class="container" style="max-width: 90%;">
  57. <div class="row mb-4 mt-2">
  58. <div class="col-5 pl-4 font-weight-bold">Hero Name</div>
  59. <div class="col-7 pr-4">Lorem ipsum</div>
  60. <div class="col-5 pl-4 font-weight-bold">Quirk Name</div>
  61. <div class="col-7 pr-4">Lorem ipsum</div>
  62. <div class="col-5 pl-4 font-weight-bold">Course Focus</div>
  63. <div class="col-7 pr-4">Lorem ipsum</div>
  64. </div>
  65. </div>
  66. <!-- SUBHEADING 3 -->
  67.  
  68. <h5 class="text-white text-center py-2 mt-0 mb-2" style="background:#C37C36;">Dorm Info</h5>
  69. <!-- FIELDS 1 // copy+paste 5/7 rows as needed -->
  70. <div class="container" style="max-width: 90%;">
  71. <div class="row mb-4 mt-2">
  72. <div class="col-5 pl-4 font-weight-bold">Dorm Number</div>
  73. <div class="col-7 pr-4">Lorem ipsum</div>
  74. <div class="col-5 pl-4 font-weight-bold">Roommates</div>
  75. <div class="col-7 pr-4">Lorem ipsum</div>
  76. </div>
  77. </div>
  78. <!-- SUBHEADING 4 -->
  79.  
  80. <h5 class="text-white text-center py-2 mt-0 mb-2" style="background:#C37C36;">Family</h5>
  81. <!-- FIELDS 1 // copy+paste 5/7 rows as needed -->
  82. <div class="container" style="max-width: 90%;">
  83. <div class="row mb-4 mt-2">
  84. <div class="col-5 pl-4 font-weight-bold">Mother</div>
  85. <div class="col-7 pr-4">Lorem ipsum</div>
  86. <div class="col-5 pl-4 font-weight-bold">Father</div>
  87. <div class="col-7 pr-4">Lorem ipsum</div>
  88. </div>
  89. <!------ END INFOBOX ------>
  90. </div>
  91. </div>
  92. </div>
  93. <!------ QUOTE ------>
  94. <div class="row mb-3">
  95. <div class="col-md-10 offset-md-1">
  96. <div class="card p-2 bg-faded card-outline-default"><span class="text-center mb-2"><i class="fa-lg fas fa-quote-left float-left" style="color:#C37C36;"></i><i class="fa-lg fas fa-quote-right float-right" style="color:#C37C36;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;</span>
  97. <div class="text-right text-muted">― Source</div>
  98. </div>
  99. </div>
  100. </div>
  101. <!------ INTRODUCTION ------>
  102.  
  103. <p><strong>Lorem ipsum</strong> dolor sit amet, consectetur adipiscing elit.</p>
  104. <!------ TABLE OF CONTENTS // credit to @lowkeywicked for toggle base code ------>
  105. <!-- SUBSECTIONS // copy+paste <ol> section when needed -->
  106. <div class="row mb-3">
  107. <a id="toc"></a>
  108. <div class="col-md-5 mb-2">
  109. <div class="card bg-faded card-outline-default">
  110.  
  111. <h6 class="p-2 mb-0 mt-2 text-center">Contents</h6>
  112.  
  113. <ol class="p-2 pt-0 pl-4 rounded-bottom mb-2 ml-2 mr-2">
  114. <li><a href="#herostats" style="color:#C37C36;">Hero Stats</a></li>
  115. <li><a href="#personality" style="color:#C37C36;">Personality</a></li>
  116. <li><a href="#history" style="color:#C37C36;">History</a></li>
  117. <li><a href="#abilities" style="color:#C37C36;">Abilities</a></li>
  118. <li><a href="#relationships" style="color:#C37C36;">Relationships</a></li>
  119. <li><a href="#trivia" style="color:#C37C36;">Trivia</a></li>
  120. </ol>
  121. </div>
  122. </div>
  123. </div>
  124.  
  125. <p>
  126. <!------ HERO STATS ------>
  127. </a>
  128. </p>
  129. <div class="profile-fields-title mt-2">
  130. <a id="herostats"></a>
  131.  
  132. <h2>Hero Stats <a href="#toc"><i style="font-size:.75em;color:#C37C36;" class="fas fa-bars"></i></a></h2>
  133. </div>
  134. <div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;">
  135. <br>
  136. </div>
  137.  
  138. <p><strong>Hero Name</strong>: Hero Name</p>
  139.  
  140. <p><strong>Quirk</strong>: Quirk</p>
  141.  
  142. <p>Basic Desc of the Quirk.</p>
  143.  
  144. <p><strong>Limitations:</strong></p>
  145.  
  146. <ul>
  147. <li>Limit</li>
  148. <li>Limit</li>
  149. </ul>
  150.  
  151. <p><strong>Primary Course Focus</strong>: Focus</p>
  152.  
  153. <!------ PERSONALITY ------>
  154. <div class="profile-fields-title mt-2">
  155. <a id="personality"></a>
  156.  
  157. <h2>Personality <a href="#toc"><i style="font-size:.75em;color:#C37C36;" class="fas fa-bars"></i></a></h2>
  158. </div>
  159. <div class="card bg-faded my-1 border-top-0" style="height:1px;">
  160. <br>
  161. </div>
  162.  
  163. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  164.  
  165. <!------ HISTORY ------>
  166. <div class="profile-fields-title mt-2">
  167. <a id="history"></a>
  168.  
  169. <h2>History <a href="#toc"><i style="font-size:.75em;color:#C37C36;" class="fas fa-bars"></i></a></h2>
  170. </div>
  171. <div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;">
  172. <br>
  173. </div>
  174.  
  175. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  176.  
  177. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec convallis ac augue nec pretium. Aenean porta porttitor sem, at consequat dolor pretium sit amet. Nulla iaculis turpis et pulvinar vestibulum. Phasellus vitae risus non enim volutpat convallis et non elit. Aenean consequat eu mauris in vulputate. Proin congue lacus mauris, eget molestie ante sollicitudin vitae. Ut vestibulum, urna suscipit iaculis semper, felis purus rhoncus tellus, efficitur ultricies neque turpis vel lectus. Morbi non urna vitae lorem bibendum sodales.</p>
  178.  
  179. <!------ RELATIONSHIPS ------>
  180. <div class="profile-fields-title mt-2">
  181. <a id="relationships"></a>
  182.  
  183. <h2>Relationships <a href="#toc"><i style="font-size:.75em;color:#C37C36;" class="fas fa-bars"></i></a></h2>
  184. </div>
  185. <div class="card bg-faded mt-1 mb-2 border-top-0" style="height:1px;">
  186. <br>
  187. </div>
  188. <div class="row no-gutters">
  189. <!--------------------------- CHARACTER LINK -------------------------------------->
  190. <div class="col-12 mb-2"><img src="https://orig00.deviantart.net/44c2/f/2018/060/a/0/toyhouse_2_by_junijwi-dc4ncnw.png" class="rounded float-left mr-2 fr-fil fr-dib" alt="toyhouse_2_by_junijwi-dc4ncnw.png" height="120" width="120">
  191.  
  192. <h4 class="mb-1">
  193. <br><a href="/" id="" style="color:#C37C36;">Full Name</a>
  194. <a href="#toc"><i style="font-size:.75em;color:#C37C36;" class="fas fa-bars"></i></a></h4>
  195.  
  196. <p>[ <strong>Relationship</strong> ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.</p>
  197. </div>
  198. <!--------------------------- CHARACTER LINK -------------------------------------->
  199. <div class="col-12 mb-2"><img src="https://orig00.deviantart.net/44c2/f/2018/060/a/0/toyhouse_2_by_junijwi-dc4ncnw.png" class="rounded float-left mr-2 fr-fil fr-dib" alt="toyhouse_2_by_junijwi-dc4ncnw.png" height="120" width="120">
  200.  
  201. <h4 class="mb-1">
  202. <br><a href="/" id="" style="color:#C37C36;">Full Name</a>
  203. <a href="#toc"><i style="font-size:.75em;color:#C37C36;" class="fas fa-bars"></i></a></h4>
  204.  
  205. <p>[ <strong>Relationship</strong> ] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet massa blandit, fermentum enim a, scelerisque velit. Integer interdum urna ac dui sollicitudin sollicitudin. In feugiat posuere nulla, eget lobortis ante.</p>
  206. </div>
  207. </div>
  208. <!------ TRIVIA ------>
  209. <div class="profile-fields-title mt-3">
  210. <a id="trivia"></a>
  211.  
  212. <h2>Trivia <a href="#toc"><i style="font-size:.75em;color:#C37C36;" class="fas fa-bars"></i></a></h2>
  213. </div>
  214. <div class="card bg-faded my-1 border-top-0" style="height:1px;">
  215. <br>
  216. </div>
  217.  
  218. <h3>Likes</h3>
  219.  
  220. <ul style="list-style-type: disc;">
  221. <li>stuff</li>
  222. <li>they</li>
  223. <li>like</li>
  224. </ul>
  225.  
  226. <h3>Dislikes</h3>
  227.  
  228. <ul style="list-style-type: disc;">
  229. <li>stuff</li>
  230. <li>they</li>
  231. <li>dont like</li>
  232. </ul>
  233. <!------ !! DO NOT DELETE CREDIT !! ------>
  234. <div class="float-right card bg-faded card-outline-default ml-1"><a class="d-inline-flex" href="http://toyhou.se/watergems" style="padding:10px 10px 9px;text-decoration:none;color:#C37C36;" title="Layout by watergems"><i class="far fa-code"></i></a></div>
  235. </div>
Advertisement
Add Comment
Please, Sign In to add comment