API tools faq
paste
Advertisement
Rexcaliburr

[TH] Wiki

Rexcaliburr
Apr 13th, 2019
185
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 49.37 KB | None | 0 0
raw download clone embed print report
  1. <!---- BNHA WIKI TEMPLATE by fio ->
  2. ✱ You're free to edit the templates in any way, but credit via link must always be present and visible.
  3. ✱ Do not claim as your own or redistribute my templates or parts of the templates. If someone is interested in using it, please refer them to my account to get it from the original source.
  4. ✱ Vote or comment here https://toyhou.se/~forums/16.htmlcss-graphics/69794
  5.  
  6. ✱ TURN OFF WYSIWYG, do not adress any questions to me if you leave it on. WYSIWYG /will/ mess it up.
  7.  
  8. <!-- Thank you for using my template! -->
  9.  
  10. <!--------------------------------------
  11. You WILL need to be able to understand basics of coding for this template, as there's a fair share of the template that, while it's 'set up', it's just an example. You will most probably will have to delete or add codes in certain sections in order for it to fit your character.
  12. --------------------------------------->
  13.  
  14. <div class="container p-0">
  15. <!------------------------------------------------ START ------------------------------------------------>
  16. <!-- OC name -->
  17. <h1 class="display-4 font-weight-bold">Falchion</h1>
  18. <hr class="mt-0">
  19. <!------------------------------------------------ TABS------------------------------------------------>
  20. <ul class="nav nav-pills justify-content-center row no-gutters text-center">
  21. <li class="nav-item col-lg-2 col-md-3">
  22. <a class="nav-link p-2 active" data-toggle="tab" href="#Overview">Overview</a>
  23. </li>
  24. <li class="nav-item col-lg-2 col-md-3">
  25. <a class="nav-link p-2" data-toggle="tab" href="#Story">Story</a>
  26. </li>
  27. <li class="nav-item col-lg-2 col-md-3">
  28. <a class="nav-link p-2" data-toggle="tab" href="#Relationships">Relationships</a>
  29. </li>
  30. <li class="nav-item col-lg-2 col-md-3">
  31. <!-->
  32. Gallery is a link, not a tab!!
  33. make sure to edit the url for it to work!
  34. the character id is the 7 digit number in a character's url
  35. <!-->
  36. <a class="nav-link p-2" href="/3667950./gallery">Gallery</a>
  37. </li>
  38. </ul>
  39. <!------------------------------------------------ TABS END ------------------------------------------------>
  40. <hr class="bg-primary">
  41. <div class="tab-content mb-2">
  42. <!------------------------------------------------ TAB ONE CONTENT: OVERVIEW ------------------------------------------------>
  43. <div class="tab-pane fade show active" id="Overview">
  44. <!------------------------------------------------ QUOTE ------------------------------------------------>
  45. <div class="card card-primary mb-4 mx-lg-5 mx-md-3">
  46. <div class="card-block">
  47. <p><i>"All of us here, we have a purpose. We may not serve out of some noble sense of duty, but that's okay. As long as we have a purpose and know what it is and it drives us to do our best."</i></p>
  48. <p class="text-right">— <b>Falchion</b></p>
  49. </div>
  50. </div>
  51. <!------------------------------------------------ SIDEBAR ------------------------------------------------>
  52. <div class="pull-right ml-md-3 mb-3 p-0" style="max-width:350px;">
  53. <div class="card">
  54. <div class="card-header card-primary">
  55. <!------------------------------------------------ NAME ------------------------------------------------>
  56. <h3 class="text-center font-weight-bold mb-0">Falchion</h3>
  57. </div>
  58. <div class="tab-content text-center mb-2">
  59. <!------------------------------------------------ OUTFIT 1 IMG ------------------------------------------------>
  60. <div class="tab-pane fade show active" id="uni">
  61. <a href="[LINK]"><img class="card-img-top w-75" src="https://file.toyhou.se/images/7362591_yU4lJIQussYYVz7.png?1524362004"></a>
  62. </div>
  63. </div>
  64. <!------------------------------------------------ SECTION 1: BIO INFO ------------------------------------------------>
  65. <div class="card-header card-primary text-center font-weight-bold p-2">
  66. General Information
  67. </div>
  68. <ul class="list-group list-group-flush">
  69. <li class="list-group-item p-2">
  70. <div class="row w-100 no-gutters">
  71. <div class="col-md-5 font-weight-bold">Real Name</div>
  72. <div class="col-md-7 px-2">Cherry Capelle</div>
  73. </div>
  74. </li>
  75. <li class="list-group-item p-2">
  76. <div class="row w-100 no-gutters">
  77. <div class="col-md-5 font-weight-bold">Organization</div>
  78. <div class="col-md-7 px-2"><i>GIGN</i></div>
  79. </div>
  80. </li>
  81. <li class="list-group-item p-2">
  82. <div class="row w-100 no-gutters">
  83. <div class="col-md-5 font-weight-bold">Position</div>
  84. <div class="col-md-7 px-2">Attacker</div>
  85. </div>
  86. </li>
  87. <li class="list-group-item p-2">
  88. <div class="row w-100 no-gutters">
  89. <div class="col-md-5 font-weight-bold">Birthplace</div>
  90. <div class="col-md-7 px-2">Marseille, France</div>
  91. </div>
  92. </li>
  93. <li class="list-group-item p-2">
  94. <div class="row w-100 no-gutters">
  95. <div class="col-md-5 font-weight-bold">Date of birth</div>
  96. <div class="col-md-7 px-2">February 2</div>
  97. </div>
  98. </li>
  99. <li class="list-group-item p-2">
  100. <div class="row w-100 no-gutters">
  101. <div class="col-md-5 font-weight-bold">Age</div>
  102. <div class="col-md-7 px-2">24</div>
  103. </div>
  104. </li>
  105. <li class="list-group-item p-2">
  106. <div class="row w-100 no-gutters">
  107. <div class="col-md-5 font-weight-bold">Height</div>
  108. <div class="col-md-7 px-2">5'2 (1.58m)</div>
  109. </div>
  110. </li>
  111. <li class="list-group-item p-2">
  112. <div class="row w-100 no-gutters">
  113. <div class="col-md-5 font-weight-bold">116lbs (53kg)</div>
  114. <div class="col-md-7 px-2">Attacker</div>
  115. </div>
  116. </li>
  117. </ul>
  118. <!------------------------------------------------ SECTION 2: PERSONAL ------------------------------------------------>
  119. <div class="card-header card-primary text-center font-weight-bold p-2">
  120. Statistics
  121. </div>
  122. <ul class="list-group list-group-flush">
  123. <li class="list-group-item p-2">
  124. <div class="row w-100 no-gutters">
  125. <div class="col-md-5 font-weight-bold">Armour Rating</div>
  126. <div class="col-md-7 px-2">Light (1)</div>
  127. </div>
  128. </li>
  129. <li class="list-group-item p-2">
  130. <div class="row w-100 no-gutters">
  131. <div class="col-md-5 font-weight-bold">Speed Rating</div>
  132. <div class="col-md-7 px-2">Fast (3)</div>
  133. </div>
  134. </li>
  135. </ul>
  136. </div>
  137. </div>
  138. <hr class="d-md-none border-0">
  139. <!------------------------------------------------ SIDEBAR END ------------------------------------------------>
  140. <!------------------------------------------------ OVERVIEW ------------------------------------------------>
  141. <p><b>Cherry "Falchion" Capelle</b> is an Attacking Operator. She was introduced in Operation Steel Claws, alongside Striker.</p>
  142. <!------------------------------------------------ TABLE OF CONTENTS ------------------------------------------------>
  143. <!-->
  144. Don’t forget to update the table of contents if you add, delete or sections!!!!
  145. <!-->
  146. <div class="card mt-4 p-2" style="max-width:200px;" id="ContentsOverview">
  147. <p class="text-center"><a class="text-center" data-toggle="collapse" href="#contents"><i class="fa fa-bars"></i> Contents <i class="fa fa-caret-down"></i></a></p>
  148. <div class="collapse" id="contents">
  149. <hr class="my-1">
  150. <ol class="pl-4 mb-0">
  151. <li>
  152. <a href="#Biography">Biography</a>
  153. <ul class="pl-3">
  154. <li><a href="#PsychProf">Psychological Profile</a></li>
  155. </ul>
  156. </li>
  157. <li><a href="#Loadout">Loadout</a>
  158. <ul class="pl-3">
  159. <li><a href="#Gadget">Unique Gadget</a></li>
  160. </ul></li>
  161. <li>
  162. <a href="#Quotes">Quotes</a>
  163. </li>
  164. <li><a href="#Trivia">Trivia</a></li>
  165. </ol>
  166. </div>
  167. </div>
  168. <!------------------------------------------------ APPERANCE ------------------------------------------------>
  169. <h1 class="font-weight-normal mt-4" id="Apperance">Apperance <a href="#ContentsOverview"><i class="fa fa-bars"></i></a></h1>
  170. <div class="card border-bottom-0 border-right-0 border-left-0 mb-3"></div>
  171. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>
  172. <p>Curabitur tortor. Pellentesque nibh. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. <b>Curabitur tortor</b>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
  173. <!------------------------------------------------ REFERENCES ------------------------------------------------>
  174. <h2 class="font-weight-normal mt-4 mb-3" id="Gallery">Gallery</h2>
  175. <p class="text-center">
  176. <img class="img-thumbnail m-1" style="height:220px;" src="https://file.toyhou.se/images/7363249_2S9dFyNBl5VP8Ep.png">
  177. <img class="img-thumbnail m-1" style="height:220px;" src="https://file.toyhou.se/images/7363259_Vr7oOaHgLnLtinv.png">
  178. <img class="img-thumbnail m-1" style="height:220px;" src="https://file.toyhou.se/images/7363308_8AAhBxGr7LT6MVc.png">
  179. <img class="img-thumbnail m-1" style="height:220px;" src="https://file.toyhou.se/images/7363343_1mFeEzKJvCUrJSg.png">
  180. </p>
  181. <!------------------------------------------------ PERSONALITY ------------------------------------------------>
  182. <h1 class="font-weight-normal mt-4" id="Personality">Personality <a href="#ContentsOverview"><i class="fa fa-bars"></i></a></h1>
  183. <div class="card border-bottom-0 border-right-0 border-left-0 mb-3"></div>
  184. <!-->
  185. Image codes are scattered around, but they can be moved, added or deleted without causing any issues.
  186. Change float-left to float-right [or vise versa] if you want the image to be in the right side of the page.
  187. They’re all set up with a link, please consider linking the image or the artist!!
  188. <!-->
  189. <a href="[LINK]"><img class="img-thumbnail float-left m-3" width="250px" src="https://file.toyhou.se/images/7364220_pT2Vp6Iu3l94Wz1.png"></a>
  190. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. </p>
  191. <p>Sed dignissim lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. </p>
  192. <!------------------------------------------------ QUIRKS ------------------------------------------------>
  193. <h1 class="font-weight-normal mt-4" id="Quirk">Quirk <a href="#ContentsOverview"><i class="fa fa-bars"></i></a></h1>
  194. <div class="card border-bottom-0 border-right-0 border-left-0 mb-3"></div>
  195. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. <i>Lorem</i> Sed nisi. Nulla quis <i>Lorem</i> sem at <b>libero.</b> nibh elementum imperdiet. <b>Sed</b> Duis sagittis ipsum. <b>Nulla</b> Praesent mauris. Fusce <b>sem</b> nec tellus sed augue semper porta. <i>imperdiet.</i> Mauris <b>Fusce</b> massa. Vestibulum lacinia arcu eget <i>Praesent</i> nulla. Class aptent taciti sociosqu <i>elementum</i> ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. <i>litora</i> Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. <b>Aenean</b> Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis <b>sem.</b> vel, suscipit quis, luctu.</p>
  196. <!------------------------------------------------ MOVES ------------------------------------------------>
  197. <h2 class="font-weight-normal mt-4 mb-3" id="Moves">Moves</h2>
  198. <!-->
  199. This is a pre-set up example list, it’s not meant to perfectly encompass everyone’s character. Please google HTML lists if you do not know how to make them.
  200. <!-->
  201. <ul>
  202. <li><strong>Praesent libero:</strong> Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</li>
  203. <li>
  204. <strong>Mauris massa:</strong> Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.
  205. <ul>
  206. <li><strong>Proin ut ligula:</strong> vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.</li>
  207. </ul>
  208. </li>
  209. <li>
  210. <strong>Sed dignissim lacinia nunc:</strong> Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>.
  211. </li>
  212. </ul>
  213. <a href=""><img class="img-thumbnail float-right m-3" width="250px" src="https://file.toyhou.se/images/7364217_hesPm7divPp4t0Y.png"></a>
  214. <p><strong>Class aptent taciti</strong>: sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p>
  215. <p><strong>Integer euismod lacus</strong>: luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. <i>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis</i>. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet.</p>
  216. <p><strong>Nulla facilisi</strong>: <i>Proin quam</i>. Integer lacinia sollicitudin massa. <i>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</i>. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. </p>
  217. <!------------------------------------------------ STAT BARS ------------------------------------------------>
  218. <div class="card bg-faded mt-4 p-0 mx-auto" style="max-width:500px;">
  219. <div class="card-block p-3">
  220. <div class="row no-gutters">
  221. <!-->
  222. Change the percentage to edit the length of the progress bar.
  223. The BNHA wiki uses a scale from 1-5, so I would stick with 20%, 40%, 60% 80% or 100%.
  224. 1/5 is E, 2/5 is D, 3/5 is C, 4/5 is B, 5/5 is A
  225. <!-->
  226. <div class="col-md-3 text-md-right text-center pr-md-0">
  227. Power
  228. </div>
  229. <div class="col-md-7 px-2">
  230. <div class="progress">
  231. <!-- POWER PROGRESS BAR -->
  232. <div class="progress-bar progress-bar-striped" style="width: 20%;"></div>
  233. </div>
  234. </div>
  235. <div class="col-md-2 text-md-left text-center pl-md-0">
  236. <!-- POWER GRADE -->
  237. 1/5 <b>E</b>
  238. </div>
  239. </div>
  240. <div class="row no-gutters">
  241. <div class="col-md-3 text-md-right text-center pr-md-0">
  242. Speed
  243. </div>
  244. <div class="col-md-7 px-2">
  245. <div class="progress">
  246. <!-- SPEED PROGRESS BAR -->
  247. <div class="progress-bar progress-bar-striped" style="width: 40%;"></div>
  248. </div>
  249. </div>
  250. <div class="col-md-2 text-md-left text-center pl-md-0">
  251. <!-- SPEED GRADE -->
  252. 2/5 <b>D</b>
  253. </div>
  254. </div>
  255. <div class="row no-gutters">
  256. <div class="col-md-3 text-md-right text-center pr-md-0">
  257. Technique
  258. </div>
  259. <div class="col-md-7 px-2">
  260. <div class="progress">
  261. <!-- TECHNIQUE PROGRESS BAR -->
  262. <div class="progress-bar progress-bar-striped" style="width: 60%;"></div>
  263. </div>
  264. </div>
  265. <div class="col-md-2 text-md-left text-center pl-md-0">
  266. <!-- TECHNIQUE GRADE -->
  267. 3/5 <b>C</b>
  268. </div>
  269. </div>
  270. <div class="row no-gutters">
  271. <div class="col-md-3 text-md-right text-center pr-md-0">
  272. Intelligence
  273. </div>
  274. <div class="col-md-7 px-2">
  275. <div class="progress">
  276. <!-- INTELLIGENCE PROGRESS BAR -->
  277. <div class="progress-bar progress-bar-striped" style="width: 80%;"></div>
  278. </div>
  279. </div>
  280. <div class="col-md-2 text-md-left text-center pl-md-0">
  281. <!-- INTELLIGENCE GRADE -->
  282. 4/5 <b>B</b>
  283. </div>
  284. </div>
  285. <div class="row no-gutters">
  286. <div class="col-md-3 text-md-right text-center pr-md-0">
  287. Cooperativeness
  288. </div>
  289. <div class="col-md-7 px-2">
  290. <div class="progress">
  291. <!-- COOPERATIVENESS PROGRESS BAR -->
  292. <div class="progress-bar progress-bar-striped" style="width: 100%;"></div>
  293. </div>
  294. </div>
  295. <div class="col-md-2 text-md-left text-center pl-md-0">
  296. <!-- COOPERATIVENESS GRADE -->
  297. 5/5 <b>A</b>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. <!------------------------------------------------ EQUIPMENT ------------------------------------------------>
  303. <h1 class="font-weight-normal mt-4" id="Equipment">Equipment <a href="#ContentsOverview"><i class="fa fa-bars"></i></a></h1>
  304. <div class="card border-bottom-0 border-right-0 border-left-0 mb-3"></div>
  305. <ul>
  306. <li>
  307. <b>Curabitur sit amet</b>: mauris morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.
  308. <li><b>Dolor sit amet</b>: consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</li>
  309. <li><b>Duis sagittis ipsum</b>: Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</li>
  310. </li>
  311. </ul>
  312. <!------------------------------------------------ BATTLES ------------------------------------------------>
  313. <h1 class="font-weight-normal mt-4" id="Battles">Battles <a href="#ContentsOverview"><i class="fa fa-bars"></i></a></h1>
  314. <div class="card border-bottom-0 border-right-0 border-left-0 mb-3"></div>
  315. <div class="card mx-lg-5 mx-md-3">
  316. <div class="card-block table-responsive p-3" style="height: 200px;">
  317. <p>
  318. <b>Curabitur tortor</b>
  319. <ul>
  320. <li>In scelerisque sem at dolor: Win</li>
  321. </ul>
  322. <b>Pellentesque nibh</b>
  323. <ul>
  324. <li>Katsuki Bakugo vs. Izuku Midoriya: Win</li>
  325. </ul>
  326. <b>Aenean quam</b>
  327. <ul>
  328. <li>Sed convallis tristique sem: Win</li>
  329. <li>Proin ut ligula vel nunc egestas porttitor: Win</li>
  330. </ul>
  331. <b>Maecenas mattis</b>
  332. <ul>
  333. <li>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa: Lose</li>
  334. <li>Fusce ac turpis quis ligula lacinia aliquet: Win</li>
  335. <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit: Lose</li>
  336. </ul>
  337. </p>
  338. </div>
  339. </div>
  340. <!------------------------------------------------ TRIVIA ------------------------------------------------>
  341. <h1 class="font-weight-normal mt-4" id="Trivia">Trivia <a href="#ContentsOverview"><i class="fa fa-bars"></i></a></h1>
  342. <div class="card border-bottom-0 border-right-0 border-left-0 mb-3"></div>
  343. <ul>
  344. <li>Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. <i>Cras metus</i>. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula.</li>
  345. <a href=""><img class="img-thumbnail float-right m-3" width="250px" src="https://file.toyhou.se/images/7364214_1zxxwKlT9HRRrcs.png"></a>
  346. <li>
  347. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo.
  348. <ul>
  349. <li>Sed aliquet risus a tortor.</li>
  350. <li>Integer id quam.</li>
  351. <li>Morbi mi.</li>
  352. <li>Proin sodales libero eget ante.</li>
  353. <li>Nulla quam.</li>
  354. </ul>
  355. </li>
  356. <li>
  357. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue.
  358. <ul>
  359. <li> Aenean laoreet.</li>
  360. </ul>
  361. </li>
  362. <li> <i>Morbi in ipsum sit amet pede facilisis laoreet</i>. Nulla ut felis in purus aliquam imperdiet. </li>
  363. </ul>
  364. <!------------------------------------------------ TAB ONE CONTENT END ------------------------------------------------>
  365. </div>
  366. <div class="tab-pane fade" id="Story">
  367. <!------------------------------------------------ TAB TWO CONTENT: STORY ------------------------------------------------>
  368. <!------------------------------------------------ TABLE OF CONTENTS ------------------------------------------------>
  369. <!-->
  370. This is, once again, pre-setup purely as an example. You will more probably have to edit it.
  371. Add id’s to the titles and add # links to the table of contents. Look at the code that’s already set up or google it if you’re not sure how to work it out.
  372. <!-->
  373. <div class="card mb-4 mx-lg-5 mx-md-3 text-center">
  374. <div class="card-block">
  375. <p class="mb-2" id="ContentsStory"><b>Table of Contents</b></p>
  376. <p class="mb-2"><a href="#A"><b>Section A</b></a></p>
  377. <p><a href="#one">Event One</a> • <a href="#two">Event Two</a></p>
  378. <p class="mb-2"><a href="#B"><b>Section B</b></a></p>
  379. <p><a href="#three">Event Three</a> • <a href="#four">Event Four</a> • <a href="#five">Event Five</a> • <a href="#six">Event Six</a> • <a href="#seven">Event Seven</a> • <a href="#eight">Event Eight</a></p>
  380. <p class="mb-2"><a href="#C"><b>Section C</b></a></p>
  381. <p><a href="#nine">Event Nine</a> • <a href="#ten">Event Ten</a> • <a href="#eleven">Eleven</a> • <a href="#twelve">Event Twelve</a></p>
  382. </div>
  383. </div>
  384. <!------------------------------------------------ SECTION A ------------------------------------------------>
  385. <h1 class="font-weight-normal mt-4" id="A">Section A <a href="#ContentsStory"><i class="fa fa-bars"></i></a></h1>
  386. <div class="card border-bottom-0 border-right-0 border-left-0 mb-3"></div>
  387. <h2 class="font-weight-normal mt-4 mb-3" id="one">Event One</h2>
  388. <p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci.</p>
  389. <a href=""><img class="img-thumbnail float-left m-3" width="250px" src="https://file.toyhou.se/images/7364183_EDgJ0RWsbxM4eCp.png"></a>
  390. <p>Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Praesent mauris. Fusce nec tellus sed augue semper porta. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Mauris massa. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. <b>Mauris massa</b>. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.</p>
  391. <h2 class="font-weight-normal mt-4 mb-3" id="two">Event Two</h2>
  392. <p>Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. <i>Pellentesque nibh</i>. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue.</p>
  393. <p>Nulla facilisi. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. </p>
  394. <!------------------------------------------------ SECTION B ------------------------------------------------>
  395. <h1 class="font-weight-normal mt-4" id="B">Section B <a href="#ContentsStory"><i class="fa fa-bars"></i></a></h1>
  396. <div class="card border-bottom-0 border-right-0 border-left-0 mb-3"></div>
  397. <h2 class="font-weight-normal mt-4 mb-3" id="three">Event Three</h2>
  398. <p>Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. <i>Sed non quam</i>. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet.</p>
  399. <h2 class="font-weight-normal mt-4 mb-3" id="four">Event Four</h2>
  400. <p><a href=""><img class="img-thumbnail float-right m-3" width="250px" src="https://file.toyhou.se/images/7363448_kX7ZW177IT66uHN.png?1524415623"></a><b>Nulla ut felis in purus aliquam imperdiet</b>. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <b>Pellentesque nibh</b>.</p>
  401. <h2 class="font-weight-normal mt-4 mb-3" id="five">Event Five</h2>
  402. <p>Vestibulum sapien. Proin quam. <b>Nam nec ante</b>. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. <i>Nam nec ante</i>. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. <b>Curabitur sodales ligula in libero</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
  403. <h2 class="font-weight-normal mt-4 mb-3" id="six">Event Six</h2>
  404. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
  405. <p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Praesent mauris. Fusce nec tellus sed augue semper porta. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Mauris massa. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>
  406. <h2 class="font-weight-normal mt-4 mb-3" id="seven">Event Seven</h2>
  407. <p>Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. <b>Mauris massa</b>. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Curabitur sodales ligula in libero</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
  408. <h2 class="font-weight-normal mt-4 mb-3" id="eight">Event Eight</h2>
  409. <p>Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. <i>Pellentesque nibh</i>. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. </p>
  410. <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. </p>
  411. <!------------------------------------------------ SECTION C ------------------------------------------------>
  412. <h1 class="font-weight-normal mt-4" id="C">Section C <a href="#ContentsStory"><i class="fa fa-bars"></i></a></h1>
  413. <div class="card border-bottom-0 border-right-0 border-left-0 mb-3"></div>
  414. <a href=""><img class="img-thumbnail float-left m-3" width="250px" src="https://file.toyhou.se/images/7363259_Vr7oOaHgLnLtinv.png?1524415623"></a>
  415. <h2 class="font-weight-normal mt-4 mb-3" id="nine">Event Nine</h2>
  416. <p><i>Sed non quam</i>. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. <b>Nulla ut felis in purus aliquam imperdiet</b>. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. </p>
  417. <h2 class="font-weight-normal mt-4 mb-3" id="ten">Event Ten</h2>
  418. <p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <b>Pellentesque nibh</b>. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. </p>
  419. <p>Vestibulum sapien. Proin quam. <b>Nam nec ante</b>. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. </p>
  420. <h2 class="font-weight-normal mt-4 mb-3" id="eleven">Event Eleven</h2>
  421. <p><a href=""><img class="img-thumbnail float-right m-3" width="250px" src="https://file.toyhou.se/images/7364152_ek5o9seyHPOmdyW.png"></a>Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. </p>
  422. <h2 class="font-weight-normal mt-4 mb-3" id="twelve">Event Twelve</h2>
  423. <p>Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. <i>Nam nec ante</i>. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. </p>
  424. <!------------------------------------------------ TAB TWO CONTENT END ------------------------------------------------>
  425. </div>
  426. <div class="tab-pane fade" id="Relationships">
  427. <!------------------------------------------------ TAB THREE CONTENT: RELATIONSHIPS ------------------------------------------------>
  428. <div class="card mb-4 mx-lg-5 mx-md-3 text-center">
  429. <div class="card-block">
  430. <p class="mb-2" id="ContentsRelationships"><b>Table of Contents</b></p>
  431. <p class="mb-2"><a href="#I"><b>Section I</b></a></p>
  432. <p><a href="#first">First Person</a> • <a href="#second">Second Person</a> • <a href="#third">Third Person</a></p>
  433. <p class="mb-2"><a href="#II"><b>Section II</b></a></p>
  434. <p><a href="#fourth">Fourth Person</a> • <a href="#fifth">Fifth Person</a> • <a href="#sixth">Sixth Person</a> • <a href="#seventh">Seventh Person</a> • <a href="#eighth">Eighth Person</a></p>
  435. <p class="mb-2"><a href="#III"><b>Section III</b></a></p>
  436. <p><a href="#nineth">Nineth Person</a> • <a href="#tenth">Tenth Person</a>
  437. </div>
  438. </div>
  439. <!------------------------------------------------ SECTION I ------------------------------------------------>
  440. <h1 class="font-weight-normal mt-4" id="I">Section I <a href="#ContentsRelationships"><i class="fa fa-bars"></i></a></h1>
  441. <div class="card border-bottom-0 border-right-0 border-left-0 mb-3"></div>
  442. <h2 class="font-weight-normal mt-4 mb-3" id="first">First Person</h2>
  443. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. </p>
  444. <h2 class="font-weight-normal mt-4 mb-3" id="second">Second Person</h2>
  445. <a href=""><img class="img-thumbnail float-right m-3" width="250px" src="https://file.toyhou.se/images/7364147_bE0TTfGc4FS2wSw.png"></a>
  446. <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. </p>
  447. <h2 class="font-weight-normal mt-4 mb-3" id="third">Third Person</h2>
  448. <p>Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. <b>Curabitur sodales ligula in libero</b>. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Quisque volutpat condimentum velit. <i>Sed dignissim lacinia nunc</i>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. <b>Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh</b>. Nunc feugiat mi a tellus consequat imperdiet. </p>
  449. <!------------------------------------------------ SECTION II ------------------------------------------------>
  450. <h1 class="font-weight-normal mt-4" id="II">Section II <a href="#ContentsRelationships"><i class="fa fa-bars"></i></a></h1>
  451. <div class="card border-bottom-0 border-right-0 border-left-0 mb-3"></div>
  452. <h2 class="font-weight-normal mt-4 mb-3" id="fourth">Fourth Person</h2>
  453. <p>Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. <b>Nunc feugiat mi a tellus consequat imperdiet</b>. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. <i>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis</i>. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. </p>
  454. <a href=""><img class="img-thumbnail float-left m-3" width="250px" src="https://file.toyhou.se/images/7364152_ek5o9seyHPOmdyW.png"></a>
  455. <h2 class="font-weight-normal mt-4 mb-3" id="fifth">Fifth Person</h2>
  456. <p>Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. <b>Sed non quam</b>. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. <i>Proin quam</i>. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. </p>
  457. <h2 class="font-weight-normal mt-4 mb-3" id="sixth">Sixth Person</h2>
  458. <p>Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. <b>Cras metus</b>. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. <b>Morbi mi</b>. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. <b>Aenean lectus elit, fermentum non, convallis id, sagittis at, neque</b>. Sed cursus ante dapibus diam. </p>
  459. <h2 class="font-weight-normal mt-4 mb-3" id="seventh">Seventh Person</h2>
  460. <a href=""><img class="img-thumbnail float-right m-3" width="250px" src="https://file.toyhou.se/images/7364183_EDgJ0RWsbxM4eCp.png"></a>
  461. <p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. <i>Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula</i>. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. </p>
  462. <h2 class="font-weight-normal mt-4 mb-3" id="eighth">Eighth Person</h2>
  463. <p>In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. <b>Curabitur sodales ligula in libero</b>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. <b>Pellentesque nibh</b>. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit.</p>
  464. <!------------------------------------------------ SECTION III ------------------------------------------------>
  465. <h1 class="font-weight-normal mt-4" id="III">Section III <a href="#ContentsRelationships"><i class="fa fa-bars"></i></a></h1>
  466. <div class="card border-bottom-0 border-right-0 border-left-0 mb-3"></div>
  467. <a href=""><img class="img-thumbnail float-left m-3" width="250px" src="https://file.toyhou.se/images/7364220_pT2Vp6Iu3l94Wz1.png"></a>
  468. <h2 class="font-weight-normal mt-4 mb-3" id="nineth">Nineth Person</h2>
  469. <p>Nulla facilisi. Ut fringilla. <i>Duis sagittis ipsum</i>. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. <b>Nam nec ante</b>. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. </p>
  470. <h2 class="font-weight-normal mt-4 mb-3" id="tenth">Tenth Person</h2>
  471. <p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. <b>Ut fringilla</b>. Praesent blandit dolor.</p>
  472. <!------------------------------------------------ TAB THREE CONTENT END ------------------------------------------------>
  473. </div>
  474. </div>
  475. <hr class="mt-4">
  476. <!------------------------------------------------ NAVIGATION & CREDIT ------------------------------------------------>
  477. <div class="card card-inverse text-center">
  478. <div class="card-block p-2">
  479. <small><a class="text-muted" href="/[CHARACTER CODE]/ownership">Ownership</a> | <a class="text-muted" href="/[USER]">Designer</a> | <span class="text-muted">Value: $$$</span> | <a class="text-muted" href="/fio">Code Credit</a></small>
  480. </div>
  481. </div>
  482. </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!