API tools faq
paste
Advertisement
Guest User

Life Stages Extended Code F2U

a guest
Dec 16th, 2022
525
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 244.08 KB | None | 0 0
raw download clone embed print report
  1. <!--feel free to delete this if you don't want a background but then the navbar will look off-->
  2. <div style="position:absolute; top:0; bottom:0; left:0;
  3. background:url(https://images.unsplash.com/photo-1533749047139-189de3cf06d3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80) fixed bottom;
  4. background-size:cover; width:100%; z-index:-1;
  5. opacity:0.5; filter:blur(5px);">
  6. <br>
  7. </div>
  8. <!--CONTENT-->
  9. <div class="container-fluid">
  10. <!-------------------------->
  11. <div class="col-lg-12 p-0">
  12. <!--BUTTONS-->
  13.  
  14. <ul class="nav nav-pills nav-fill row no-gutters text-center">
  15. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show active" data-toggle="pill" href="#child" id="" style="letter-spacing: 2px;">AGE 1-12</a></li>
  16. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age13" id="" style="letter-spacing: 2px;">AGE 13</a></li>
  17. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age14" id="" style="letter-spacing: 2px;">AGE 14</a></li>
  18. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age15" style="letter-spacing: 2px;">AGE 15</a></li>
  19. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age16" style="letter-spacing: 2px;">AGE 16</a></li>
  20. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age17" style="letter-spacing: 2px;">AGE 17</a></li>
  21. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age18" style="letter-spacing: 2px;">AGE 18</a></li>
  22. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age19" style="letter-spacing: 2px;">AGE 19</a></li>
  23. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age20" style="letter-spacing: 2px;">AGE 20</a></li>
  24. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age21" style="letter-spacing: 2px;">AGE 21</a></li>
  25. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age22" style="letter-spacing: 2px;">AGE 22</a></li>
  26. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age23" style="letter-spacing: 2px;">AGE 23</a></li>
  27. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age24" style="letter-spacing: 2px;">AGE 24</a></li>
  28. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age25" style="letter-spacing: 2px;">AGE 25</a></li>
  29. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age26" style="letter-spacing: 2px;">AGE 26</a></li>
  30. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age27" style="letter-spacing: 2px;">AGE 27</a></li>
  31. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age28" style="letter-spacing: 2px;">AGE 28</a></li>
  32. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age29" id="" style="letter-spacing: 2px;">AGE 29</a></li>
  33. <li class="nav-item bg-col-12 m-1"><a class="nav-link btn btn-secondary border-0 text-muted text-uppercase show" data-toggle="pill" href="#age30" id="" style="letter-spacing: 2px;">AGE 30 (current)</a></li>
  34. </ul>
  35. <!--buttons end-->
  36. <!--BOX 1-->
  37. <!--TAB CONTENT-->
  38. <div class="tab-content">
  39. <!--CHILD START--------------------------------------------------------->
  40. <div class="tab-pane fade active show" id="child">
  41. <div class="row no-gutters justify-content-center">
  42. <div class="col-lg-4 p-1">
  43. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  44. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  45. <!--- Timeline --->
  46. <!--EVENT-->
  47. <div class="p-3">
  48. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  49. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  50.  
  51. <h1 class="m-0">(OLDEST) EVENT</h1>
  52. </div>
  53.  
  54. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  55. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  56. </div>
  57. </div>
  58. <!--EVENT end-->
  59. <!--EVENT-->
  60. <div class="p-3">
  61. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  62. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  63.  
  64. <h1 class="m-0">EVENT</h1>
  65. </div>
  66.  
  67. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  68. </div>
  69. </div>
  70. <!--EVENT end-->
  71. <!--EVENT-->
  72. <div class="p-3">
  73. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  74. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  75.  
  76. <h1 class="m-0">(NEWEST) EVENT</h1>
  77. </div>
  78.  
  79. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  80. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  81. </div>
  82. </div>
  83. <!--EVENT end-->
  84. </div>
  85. <!--TIMELINE---------------->
  86. </div>
  87. </div>
  88. <!--BOX-------------------------------------------------------->
  89. <div class="col-lg-8 p-1">
  90. <div class="card border-0 rounded-0 h-100">
  91. <div class="container-fluid bg-faded p-0">
  92. <div class="card p-0 m-1 border-0">
  93. <!--ROW 1-->
  94. <div class="row no-gutters justify-content-center">
  95. <div class="col-lg-9">
  96. <div class="card border-0 rounded-0 p-1 h-100">
  97. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  98. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s life from 1 to 12 years here. Explain how did they get the injuries/scars (if any), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  99. </div>
  100. </div>
  101. </div>
  102. <div class="col-lg-3 p-">
  103. <!--IMAGE-->
  104. <div class="text-center" style="border: 0px solid;">
  105. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  106. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  107. </div>
  108. <!--IMAGE END-->
  109. </div>
  110. <div class="col-lg-6 p-1">
  111. <!--INJURY-->
  112. <div class="p-0">
  113. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  114. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  115. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  116. </div>
  117. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  118.  
  119. <ul class="list-unstyled mb-0" style="text-align:left;">
  120. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> none</li>
  121. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY (feel free to delete this)</li>
  122. </ul>
  123. </div>
  124. </div>
  125. </div>
  126. <!--INJURY end-->
  127. </div>
  128. <div class="col-lg-6 p-1">
  129. <!--LIVING STATUS -->
  130. <div class="p-0">
  131. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  132. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  133. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  134. </div>
  135. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  136. <!--BASIC INFO-->
  137. <!--CONTENT-->
  138.  
  139. <ul class="list-group list-group-flush">
  140. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  141. <!--make sure this is the first item on the list-->
  142. <span class="text-uppercase text-muted">health</span>
  143. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  144. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  145. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>preschooler-student</li>
  146. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  147. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house</li>
  148. </ul>
  149. <!--content end-->
  150. <!--basic info end-->
  151. </div>
  152. </div>
  153. </div>
  154. <!--LIVING STATUS end-->
  155. </div>
  156. <div class="col-lg-6 p-1">
  157. <!--CLOSEST PEOPLE -->
  158. <div class="p-0">
  159. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  160. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  161. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  162. </div>
  163. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  164. <div class="row no-gutters">
  165. <!--PERSON 1 -->
  166. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  167. <!--PERSON 1 END -->
  168. <!--PERSON 2 -->
  169. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  170. <!--PERSON 2 END -->
  171. <!--PERSON 3 -->
  172. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  173. <!--PERSON 3 END -->
  174. <!--PERSON 4 -->
  175. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  176. <!--PERSON 4 END -->
  177. <!--PERSON 5 -->
  178. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  179. <!--PERSON 5 END -->
  180. <!--PERSON 6 -->
  181. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  182. <!--PERSON 6 END -->
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. <!--CLOSEST PEOPLE end-->
  188. </div>
  189. <div class="col-lg-6 p-1">
  190. <!--ENEMIES-->
  191. <div class="p-0">
  192. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  193. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  194. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  195. </div>
  196. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  197. <div class="row no-gutters">
  198. <!--PERSON 1 -->
  199. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  200. <!--PERSON 1 END -->
  201. <!--PERSON 2 -->
  202. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  203. <!--PERSON 2 END -->
  204. <!--PERSON 3 -->
  205. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  206. <!--PERSON 3 END -->
  207. <!--PERSON 4 -->
  208. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  209. <!--PERSON 4 END -->
  210. <!--PERSON 5 -->
  211. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  212. <!--PERSON 5 END -->
  213. <!--PERSON 6 -->
  214. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  215. <!--PERSON 6 END -->
  216. </div>
  217. </div>
  218. </div>
  219. </div>
  220. <!--ENEMIES end-->
  221. </div>
  222. </div>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. </div>
  228. </div>
  229. <!--BOX END-------------------------------------------------------->
  230. <!--CHILD END--------------------------------------------------------->
  231. <!--30 START--------------------------------------------------------->
  232. <div class="tab-pane fade" id="age30">
  233. <div class="row no-gutters justify-content-center">
  234. <div class="col-lg-4 p-1">
  235. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  236. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  237. <!--- Timeline --->
  238. <!--EVENT-->
  239. <div class="p-3">
  240. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  241. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  242.  
  243. <h1 class="m-0">(OLDEST) EVENT</h1>
  244. </div>
  245.  
  246. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  247. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  248. </div>
  249. </div>
  250. <!--EVENT end-->
  251. <!--EVENT-->
  252. <div class="p-3">
  253. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  254. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  255.  
  256. <h1 class="m-0">EVENT</h1>
  257. </div>
  258.  
  259. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  260. </div>
  261. </div>
  262. <!--EVENT end-->
  263. <!--EVENT-->
  264. <div class="p-3">
  265. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  266. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  267.  
  268. <h1 class="m-0">(NEWEST) EVENT</h1>
  269. </div>
  270.  
  271. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  272. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  273. </div>
  274. </div>
  275. <!--EVENT end-->
  276. </div>
  277. <!--TIMELINE---------------->
  278. </div>
  279. </div>
  280. <!--BOX-------------------------------------------------------->
  281. <div class="col-lg-8 p-1">
  282. <div class="card border-0 rounded-0 h-100">
  283. <div class="container-fluid bg-faded p-0">
  284. <div class="card p-0 m-1 border-0">
  285. <!--ROW 1-->
  286. <div class="row no-gutters justify-content-center">
  287. <div class="col-lg-9">
  288. <div class="card border-0 rounded-0 p-1 h-100">
  289. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  290. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  291. </div>
  292. </div>
  293. </div>
  294. <div class="col-lg-3 p-">
  295. <!--IMAGE-->
  296. <div class="text-center" style="border: 0px solid;">
  297. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  298. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  299. </div>
  300. <!--IMAGE END-->
  301. </div>
  302. <div class="col-lg-3 p-1">
  303. <!--INJURY-->
  304. <div class="p-0">
  305. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  306. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  307. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  308. </div>
  309. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  310.  
  311. <ul class="list-unstyled mb-0" style="text-align:left;">
  312. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  313. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  314. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  315. <li>
  316. <hr class="mt-0">
  317. </li>
  318. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  319. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  320. </ul>
  321. </div>
  322. </div>
  323. </div>
  324. <!--INJURY end-->
  325. </div>
  326. <div class="col-lg-3 p-1">
  327. <!--BODY MOD -->
  328. <div class="p-0">
  329. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  330. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  331. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  332. </div>
  333. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  334.  
  335. <ul class="list-unstyled mb-0" style="text-align:left;">
  336. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  337. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  338. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  339. <li>
  340. <hr class="mt-0">
  341. </li>
  342. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  343. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  344. </ul>
  345. </div>
  346. </div>
  347. </div>
  348. <!--BODY MOD end-->
  349. </div>
  350. <div class="col-lg-6 p-1">
  351. <!--LIVING STATUS -->
  352. <div class="p-0">
  353. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  354. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  355. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  356. </div>
  357. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  358. <!--BASIC INFO-->
  359. <!--CONTENT-->
  360.  
  361. <ul class="list-group list-group-flush">
  362. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  363. <!--make sure this is the first item on the list-->
  364. <span class="text-uppercase text-muted">health</span>
  365. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  366. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  367. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  368. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  369. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  370. </ul>
  371. <!--content end-->
  372. <!--basic info end-->
  373. </div>
  374. </div>
  375. </div>
  376. <!--LIVING STATUS end-->
  377. </div>
  378. <div class="col-lg-6 p-1">
  379. <!--CLOSEST PEOPLE -->
  380. <div class="p-0">
  381. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  382. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  383. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  384. </div>
  385. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  386. <div class="row no-gutters">
  387. <!--PERSON 1 -->
  388. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  389. <!--PERSON 1 END -->
  390. <!--PERSON 2 -->
  391. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  392. <!--PERSON 2 END -->
  393. <!--PERSON 3 -->
  394. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  395. <!--PERSON 3 END -->
  396. <!--PERSON 4 -->
  397. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  398. <!--PERSON 4 END -->
  399. <!--PERSON 5 -->
  400. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  401. <!--PERSON 5 END -->
  402. <!--PERSON 6 -->
  403. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  404. <!--PERSON 6 END -->
  405. </div>
  406. </div>
  407. </div>
  408. </div>
  409. <!--CLOSEST PEOPLE end-->
  410. </div>
  411. <div class="col-lg-6 p-1">
  412. <!--ENEMIES -->
  413. <div class="p-0">
  414. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  415. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  416. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  417. </div>
  418. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  419. <div class="row no-gutters">
  420. <!--PERSON 1 -->
  421. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  422. <!--PERSON 1 END -->
  423. <!--PERSON 2 -->
  424. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  425. <!--PERSON 2 END -->
  426. <!--PERSON 3 -->
  427. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  428. <!--PERSON 3 END -->
  429. <!--PERSON 4 -->
  430. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  431. <!--PERSON 4 END -->
  432. <!--PERSON 5 -->
  433. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  434. <!--PERSON 5 END -->
  435. <!--PERSON 6 -->
  436. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  437. <!--PERSON 6 END -->
  438. </div>
  439. </div>
  440. </div>
  441. </div>
  442. <!--ENEMIES end-->
  443. </div>
  444. </div>
  445. </div>
  446. </div>
  447. </div>
  448. </div>
  449. </div>
  450. </div>
  451. <!--BOX END-------------------------------------------------------->
  452. <!--30 END--------------------------------------------------------->
  453. <!--29 START--------------------------------------------------------->
  454. <div class="tab-pane fade" id="age29">
  455. <div class="row no-gutters justify-content-center">
  456. <div class="col-lg-4 p-1">
  457. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  458. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  459. <!--- Timeline --->
  460. <!--EVENT-->
  461. <div class="p-3">
  462. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  463. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  464.  
  465. <h1 class="m-0">(OLDEST) EVENT</h1>
  466. </div>
  467.  
  468. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  469. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  470. </div>
  471. </div>
  472. <!--EVENT end-->
  473. <!--EVENT-->
  474. <div class="p-3">
  475. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  476. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  477.  
  478. <h1 class="m-0">EVENT</h1>
  479. </div>
  480.  
  481. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  482. </div>
  483. </div>
  484. <!--EVENT end-->
  485. <!--EVENT-->
  486. <div class="p-3">
  487. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  488. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  489.  
  490. <h1 class="m-0">(NEWEST) EVENT</h1>
  491. </div>
  492.  
  493. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  494. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  495. </div>
  496. </div>
  497. <!--EVENT end-->
  498. </div>
  499. <!--TIMELINE---------------->
  500. </div>
  501. </div>
  502. <!--BOX-------------------------------------------------------->
  503. <div class="col-lg-8 p-1">
  504. <div class="card border-0 rounded-0 h-100">
  505. <div class="container-fluid bg-faded p-0">
  506. <div class="card p-0 m-1 border-0">
  507. <!--ROW 1-->
  508. <div class="row no-gutters justify-content-center">
  509. <div class="col-lg-9">
  510. <div class="card border-0 rounded-0 p-1 h-100">
  511. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  512. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  513. </div>
  514. </div>
  515. </div>
  516. <div class="col-lg-3 p-">
  517. <!--IMAGE-->
  518. <div class="text-center" style="border: 0px solid;">
  519. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  520. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  521. </div>
  522. <!--IMAGE END-->
  523. </div>
  524. <div class="col-lg-3 p-1">
  525. <!--INJURY-->
  526. <div class="p-0">
  527. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  528. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  529. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  530. </div>
  531. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  532.  
  533. <ul class="list-unstyled mb-0" style="text-align:left;">
  534. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  535. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  536. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  537. <li>
  538. <hr class="mt-0">
  539. </li>
  540. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  541. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  542. </ul>
  543. </div>
  544. </div>
  545. </div>
  546. <!--INJURY end-->
  547. </div>
  548. <div class="col-lg-3 p-1">
  549. <!--BODY MOD -->
  550. <div class="p-0">
  551. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  552. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  553. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  554. </div>
  555. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  556.  
  557. <ul class="list-unstyled mb-0" style="text-align:left;">
  558. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  559. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  560. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  561. <li>
  562. <hr class="mt-0">
  563. </li>
  564. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  565. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  566. </ul>
  567. </div>
  568. </div>
  569. </div>
  570. <!--BODY MOD end-->
  571. </div>
  572. <div class="col-lg-6 p-1">
  573. <!--LIVING STATUS -->
  574. <div class="p-0">
  575. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  576. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  577. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  578. </div>
  579. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  580. <!--BASIC INFO-->
  581. <!--CONTENT-->
  582.  
  583. <ul class="list-group list-group-flush">
  584. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  585. <!--make sure this is the first item on the list-->
  586. <span class="text-uppercase text-muted">health</span>
  587. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  588. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  589. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  590. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  591. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  592. </ul>
  593. <!--content end-->
  594. <!--basic info end-->
  595. </div>
  596. </div>
  597. </div>
  598. <!--LIVING STATUS end-->
  599. </div>
  600. <div class="col-lg-6 p-1">
  601. <!--CLOSEST PEOPLE -->
  602. <div class="p-0">
  603. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  604. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  605. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  606. </div>
  607. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  608. <div class="row no-gutters">
  609. <!--PERSON 1 -->
  610. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  611. <!--PERSON 1 END -->
  612. <!--PERSON 2 -->
  613. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  614. <!--PERSON 2 END -->
  615. <!--PERSON 3 -->
  616. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  617. <!--PERSON 3 END -->
  618. <!--PERSON 4 -->
  619. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  620. <!--PERSON 4 END -->
  621. <!--PERSON 5 -->
  622. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  623. <!--PERSON 5 END -->
  624. <!--PERSON 6 -->
  625. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  626. <!--PERSON 6 END -->
  627. </div>
  628. </div>
  629. </div>
  630. </div>
  631. <!--CLOSEST PEOPLE end-->
  632. </div>
  633. <div class="col-lg-6 p-1">
  634. <!--ENEMIES -->
  635. <div class="p-0">
  636. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  637. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  638. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  639. </div>
  640. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  641. <div class="row no-gutters">
  642. <!--PERSON 1 -->
  643. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  644. <!--PERSON 1 END -->
  645. <!--PERSON 2 -->
  646. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  647. <!--PERSON 2 END -->
  648. <!--PERSON 3 -->
  649. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  650. <!--PERSON 3 END -->
  651. <!--PERSON 4 -->
  652. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  653. <!--PERSON 4 END -->
  654. <!--PERSON 5 -->
  655. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  656. <!--PERSON 5 END -->
  657. <!--PERSON 6 -->
  658. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  659. <!--PERSON 6 END -->
  660. </div>
  661. </div>
  662. </div>
  663. </div>
  664. <!--ENEMIES end-->
  665. </div>
  666. </div>
  667. </div>
  668. </div>
  669. </div>
  670. </div>
  671. </div>
  672. </div>
  673. <!--BOX END-------------------------------------------------------->
  674. <!--29 END--------------------------------------------------------->
  675. <!--28 START--------------------------------------------------------->
  676. <div class="tab-pane fade" id="age28">
  677. <div class="row no-gutters justify-content-center">
  678. <div class="col-lg-4 p-1">
  679. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  680. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  681. <!--- Timeline --->
  682. <!--EVENT-->
  683. <div class="p-3">
  684. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  685. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  686.  
  687. <h1 class="m-0">(OLDEST) EVENT</h1>
  688. </div>
  689.  
  690. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  691. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  692. </div>
  693. </div>
  694. <!--EVENT end-->
  695. <!--EVENT-->
  696. <div class="p-3">
  697. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  698. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  699.  
  700. <h1 class="m-0">EVENT</h1>
  701. </div>
  702.  
  703. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  704. </div>
  705. </div>
  706. <!--EVENT end-->
  707. <!--EVENT-->
  708. <div class="p-3">
  709. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  710. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  711.  
  712. <h1 class="m-0">(NEWEST) EVENT</h1>
  713. </div>
  714.  
  715. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  716. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  717. </div>
  718. </div>
  719. <!--EVENT end-->
  720. </div>
  721. <!--TIMELINE---------------->
  722. </div>
  723. </div>
  724. <!--BOX-------------------------------------------------------->
  725. <div class="col-lg-8 p-1">
  726. <div class="card border-0 rounded-0 h-100">
  727. <div class="container-fluid bg-faded p-0">
  728. <div class="card p-0 m-1 border-0">
  729. <!--ROW 1-->
  730. <div class="row no-gutters justify-content-center">
  731. <div class="col-lg-9">
  732. <div class="card border-0 rounded-0 p-1 h-100">
  733. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  734. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  735. </div>
  736. </div>
  737. </div>
  738. <div class="col-lg-3 p-">
  739. <!--IMAGE-->
  740. <div class="text-center" style="border: 0px solid;">
  741. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  742. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  743. </div>
  744. <!--IMAGE END-->
  745. </div>
  746. <div class="col-lg-3 p-1">
  747. <!--INJURY-->
  748. <div class="p-0">
  749. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  750. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  751. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  752. </div>
  753. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  754.  
  755. <ul class="list-unstyled mb-0" style="text-align:left;">
  756. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  757. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  758. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  759. <li>
  760. <hr class="mt-0">
  761. </li>
  762. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  763. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  764. </ul>
  765. </div>
  766. </div>
  767. </div>
  768. <!--INJURY end-->
  769. </div>
  770. <div class="col-lg-3 p-1">
  771. <!--BODY MOD -->
  772. <div class="p-0">
  773. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  774. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  775. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  776. </div>
  777. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  778.  
  779. <ul class="list-unstyled mb-0" style="text-align:left;">
  780. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  781. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  782. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  783. <li>
  784. <hr class="mt-0">
  785. </li>
  786. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  787. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  788. </ul>
  789. </div>
  790. </div>
  791. </div>
  792. <!--BODY MOD end-->
  793. </div>
  794. <div class="col-lg-6 p-1">
  795. <!--LIVING STATUS -->
  796. <div class="p-0">
  797. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  798. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  799. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  800. </div>
  801. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  802. <!--BASIC INFO-->
  803. <!--CONTENT-->
  804.  
  805. <ul class="list-group list-group-flush">
  806. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  807. <!--make sure this is the first item on the list-->
  808. <span class="text-uppercase text-muted">health</span>
  809. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  810. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  811. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  812. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  813. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  814. </ul>
  815. <!--content end-->
  816. <!--basic info end-->
  817. </div>
  818. </div>
  819. </div>
  820. <!--LIVING STATUS end-->
  821. </div>
  822. <div class="col-lg-6 p-1">
  823. <!--CLOSEST PEOPLE -->
  824. <div class="p-0">
  825. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  826. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  827. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  828. </div>
  829. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  830. <div class="row no-gutters">
  831. <!--PERSON 1 -->
  832. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  833. <!--PERSON 1 END -->
  834. <!--PERSON 2 -->
  835. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  836. <!--PERSON 2 END -->
  837. <!--PERSON 3 -->
  838. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  839. <!--PERSON 3 END -->
  840. <!--PERSON 4 -->
  841. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  842. <!--PERSON 4 END -->
  843. <!--PERSON 5 -->
  844. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  845. <!--PERSON 5 END -->
  846. <!--PERSON 6 -->
  847. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  848. <!--PERSON 6 END -->
  849. </div>
  850. </div>
  851. </div>
  852. </div>
  853. <!--CLOSEST PEOPLE end-->
  854. </div>
  855. <div class="col-lg-6 p-1">
  856. <!--ENEMIES -->
  857. <div class="p-0">
  858. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  859. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  860. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  861. </div>
  862. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  863. <div class="row no-gutters">
  864. <!--PERSON 1 -->
  865. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  866. <!--PERSON 1 END -->
  867. <!--PERSON 2 -->
  868. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  869. <!--PERSON 2 END -->
  870. <!--PERSON 3 -->
  871. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  872. <!--PERSON 3 END -->
  873. <!--PERSON 4 -->
  874. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  875. <!--PERSON 4 END -->
  876. <!--PERSON 5 -->
  877. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  878. <!--PERSON 5 END -->
  879. <!--PERSON 6 -->
  880. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  881. <!--PERSON 6 END -->
  882. </div>
  883. </div>
  884. </div>
  885. </div>
  886. <!--ENEMIES end-->
  887. </div>
  888. </div>
  889. </div>
  890. </div>
  891. </div>
  892. </div>
  893. </div>
  894. </div>
  895. <!--BOX END-------------------------------------------------------->
  896. <!--28 END--------------------------------------------------------->
  897. <!--27 START--------------------------------------------------------->
  898. <div class="tab-pane fade" id="age27">
  899. <div class="row no-gutters justify-content-center">
  900. <div class="col-lg-4 p-1">
  901. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  902. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  903. <!--- Timeline --->
  904. <!--EVENT-->
  905. <div class="p-3">
  906. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  907. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  908.  
  909. <h1 class="m-0">(OLDEST) EVENT</h1>
  910. </div>
  911.  
  912. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  913. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  914. </div>
  915. </div>
  916. <!--EVENT end-->
  917. <!--EVENT-->
  918. <div class="p-3">
  919. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  920. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  921.  
  922. <h1 class="m-0">EVENT</h1>
  923. </div>
  924.  
  925. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  926. </div>
  927. </div>
  928. <!--EVENT end-->
  929. <!--EVENT-->
  930. <div class="p-3">
  931. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  932. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  933.  
  934. <h1 class="m-0">(NEWEST) EVENT</h1>
  935. </div>
  936.  
  937. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  938. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  939. </div>
  940. </div>
  941. <!--EVENT end-->
  942. </div>
  943. <!--TIMELINE---------------->
  944. </div>
  945. </div>
  946. <!--BOX-------------------------------------------------------->
  947. <div class="col-lg-8 p-1">
  948. <div class="card border-0 rounded-0 h-100">
  949. <div class="container-fluid bg-faded p-0">
  950. <div class="card p-0 m-1 border-0">
  951. <!--ROW 1-->
  952. <div class="row no-gutters justify-content-center">
  953. <div class="col-lg-9">
  954. <div class="card border-0 rounded-0 p-1 h-100">
  955. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  956. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  957. </div>
  958. </div>
  959. </div>
  960. <div class="col-lg-3 p-">
  961. <!--IMAGE-->
  962. <div class="text-center" style="border: 0px solid;">
  963. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  964. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  965. </div>
  966. <!--IMAGE END-->
  967. </div>
  968. <div class="col-lg-3 p-1">
  969. <!--INJURY-->
  970. <div class="p-0">
  971. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  972. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  973. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  974. </div>
  975. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  976.  
  977. <ul class="list-unstyled mb-0" style="text-align:left;">
  978. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  979. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  980. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  981. <li>
  982. <hr class="mt-0">
  983. </li>
  984. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  985. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  986. </ul>
  987. </div>
  988. </div>
  989. </div>
  990. <!--INJURY end-->
  991. </div>
  992. <div class="col-lg-3 p-1">
  993. <!--BODY MOD -->
  994. <div class="p-0">
  995. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  996. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  997. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  998. </div>
  999. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  1000.  
  1001. <ul class="list-unstyled mb-0" style="text-align:left;">
  1002. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1003. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1004. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1005. <li>
  1006. <hr class="mt-0">
  1007. </li>
  1008. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  1009. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  1010. </ul>
  1011. </div>
  1012. </div>
  1013. </div>
  1014. <!--BODY MOD end-->
  1015. </div>
  1016. <div class="col-lg-6 p-1">
  1017. <!--LIVING STATUS -->
  1018. <div class="p-0">
  1019. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1020. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1021. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  1022. </div>
  1023. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  1024. <!--BASIC INFO-->
  1025. <!--CONTENT-->
  1026.  
  1027. <ul class="list-group list-group-flush">
  1028. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  1029. <!--make sure this is the first item on the list-->
  1030. <span class="text-uppercase text-muted">health</span>
  1031. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  1032. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  1033. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  1034. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  1035. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  1036. </ul>
  1037. <!--content end-->
  1038. <!--basic info end-->
  1039. </div>
  1040. </div>
  1041. </div>
  1042. <!--LIVING STATUS end-->
  1043. </div>
  1044. <div class="col-lg-6 p-1">
  1045. <!--CLOSEST PEOPLE -->
  1046. <div class="p-0">
  1047. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1048. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1049. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  1050. </div>
  1051. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  1052. <div class="row no-gutters">
  1053. <!--PERSON 1 -->
  1054. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1055. <!--PERSON 1 END -->
  1056. <!--PERSON 2 -->
  1057. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1058. <!--PERSON 2 END -->
  1059. <!--PERSON 3 -->
  1060. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1061. <!--PERSON 3 END -->
  1062. <!--PERSON 4 -->
  1063. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1064. <!--PERSON 4 END -->
  1065. <!--PERSON 5 -->
  1066. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1067. <!--PERSON 5 END -->
  1068. <!--PERSON 6 -->
  1069. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1070. <!--PERSON 6 END -->
  1071. </div>
  1072. </div>
  1073. </div>
  1074. </div>
  1075. <!--CLOSEST PEOPLE end-->
  1076. </div>
  1077. <div class="col-lg-6 p-1">
  1078. <!--ENEMIES -->
  1079. <div class="p-0">
  1080. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1081. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1082. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  1083. </div>
  1084. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  1085. <div class="row no-gutters">
  1086. <!--PERSON 1 -->
  1087. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1088. <!--PERSON 1 END -->
  1089. <!--PERSON 2 -->
  1090. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1091. <!--PERSON 2 END -->
  1092. <!--PERSON 3 -->
  1093. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1094. <!--PERSON 3 END -->
  1095. <!--PERSON 4 -->
  1096. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1097. <!--PERSON 4 END -->
  1098. <!--PERSON 5 -->
  1099. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1100. <!--PERSON 5 END -->
  1101. <!--PERSON 6 -->
  1102. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1103. <!--PERSON 6 END -->
  1104. </div>
  1105. </div>
  1106. </div>
  1107. </div>
  1108. <!--ENEMIES end-->
  1109. </div>
  1110. </div>
  1111. </div>
  1112. </div>
  1113. </div>
  1114. </div>
  1115. </div>
  1116. </div>
  1117. <!--BOX END-------------------------------------------------------->
  1118. <!--27 END--------------------------------------------------------->
  1119. <!--26 START--------------------------------------------------------->
  1120. <div class="tab-pane fade" id="age26">
  1121. <div class="row no-gutters justify-content-center">
  1122. <div class="col-lg-4 p-1">
  1123. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  1124. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  1125. <!--- Timeline --->
  1126. <!--EVENT-->
  1127. <div class="p-3">
  1128. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1129. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1130.  
  1131. <h1 class="m-0">(OLDEST) EVENT</h1>
  1132. </div>
  1133.  
  1134. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  1135. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  1136. </div>
  1137. </div>
  1138. <!--EVENT end-->
  1139. <!--EVENT-->
  1140. <div class="p-3">
  1141. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1142. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1143.  
  1144. <h1 class="m-0">EVENT</h1>
  1145. </div>
  1146.  
  1147. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  1148. </div>
  1149. </div>
  1150. <!--EVENT end-->
  1151. <!--EVENT-->
  1152. <div class="p-3">
  1153. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1154. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1155.  
  1156. <h1 class="m-0">(NEWEST) EVENT</h1>
  1157. </div>
  1158.  
  1159. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  1160. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  1161. </div>
  1162. </div>
  1163. <!--EVENT end-->
  1164. </div>
  1165. <!--TIMELINE---------------->
  1166. </div>
  1167. </div>
  1168. <!--BOX-------------------------------------------------------->
  1169. <div class="col-lg-8 p-1">
  1170. <div class="card border-0 rounded-0 h-100">
  1171. <div class="container-fluid bg-faded p-0">
  1172. <div class="card p-0 m-1 border-0">
  1173. <!--ROW 1-->
  1174. <div class="row no-gutters justify-content-center">
  1175. <div class="col-lg-9">
  1176. <div class="card border-0 rounded-0 p-1 h-100">
  1177. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  1178. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  1179. </div>
  1180. </div>
  1181. </div>
  1182. <div class="col-lg-3 p-">
  1183. <!--IMAGE-->
  1184. <div class="text-center" style="border: 0px solid;">
  1185. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  1186. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  1187. </div>
  1188. <!--IMAGE END-->
  1189. </div>
  1190. <div class="col-lg-3 p-1">
  1191. <!--INJURY-->
  1192. <div class="p-0">
  1193. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1194. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1195. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  1196. </div>
  1197. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  1198.  
  1199. <ul class="list-unstyled mb-0" style="text-align:left;">
  1200. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  1201. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  1202. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  1203. <li>
  1204. <hr class="mt-0">
  1205. </li>
  1206. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  1207. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  1208. </ul>
  1209. </div>
  1210. </div>
  1211. </div>
  1212. <!--INJURY end-->
  1213. </div>
  1214. <div class="col-lg-3 p-1">
  1215. <!--BODY MOD -->
  1216. <div class="p-0">
  1217. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1218. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1219. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  1220. </div>
  1221. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  1222.  
  1223. <ul class="list-unstyled mb-0" style="text-align:left;">
  1224. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1225. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1226. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1227. <li>
  1228. <hr class="mt-0">
  1229. </li>
  1230. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  1231. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  1232. </ul>
  1233. </div>
  1234. </div>
  1235. </div>
  1236. <!--BODY MOD end-->
  1237. </div>
  1238. <div class="col-lg-6 p-1">
  1239. <!--LIVING STATUS -->
  1240. <div class="p-0">
  1241. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1242. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1243. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  1244. </div>
  1245. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  1246. <!--BASIC INFO-->
  1247. <!--CONTENT-->
  1248.  
  1249. <ul class="list-group list-group-flush">
  1250. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  1251. <!--make sure this is the first item on the list-->
  1252. <span class="text-uppercase text-muted">health</span>
  1253. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  1254. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  1255. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  1256. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  1257. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  1258. </ul>
  1259. <!--content end-->
  1260. <!--basic info end-->
  1261. </div>
  1262. </div>
  1263. </div>
  1264. <!--LIVING STATUS end-->
  1265. </div>
  1266. <div class="col-lg-6 p-1">
  1267. <!--CLOSEST PEOPLE -->
  1268. <div class="p-0">
  1269. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1270. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1271. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  1272. </div>
  1273. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  1274. <div class="row no-gutters">
  1275. <!--PERSON 1 -->
  1276. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1277. <!--PERSON 1 END -->
  1278. <!--PERSON 2 -->
  1279. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1280. <!--PERSON 2 END -->
  1281. <!--PERSON 3 -->
  1282. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1283. <!--PERSON 3 END -->
  1284. <!--PERSON 4 -->
  1285. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1286. <!--PERSON 4 END -->
  1287. <!--PERSON 5 -->
  1288. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1289. <!--PERSON 5 END -->
  1290. <!--PERSON 6 -->
  1291. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1292. <!--PERSON 6 END -->
  1293. </div>
  1294. </div>
  1295. </div>
  1296. </div>
  1297. <!--CLOSEST PEOPLE end-->
  1298. </div>
  1299. <div class="col-lg-6 p-1">
  1300. <!--ENEMIES -->
  1301. <div class="p-0">
  1302. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1303. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1304. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  1305. </div>
  1306. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  1307. <div class="row no-gutters">
  1308. <!--PERSON 1 -->
  1309. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1310. <!--PERSON 1 END -->
  1311. <!--PERSON 2 -->
  1312. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1313. <!--PERSON 2 END -->
  1314. <!--PERSON 3 -->
  1315. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1316. <!--PERSON 3 END -->
  1317. <!--PERSON 4 -->
  1318. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1319. <!--PERSON 4 END -->
  1320. <!--PERSON 5 -->
  1321. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1322. <!--PERSON 5 END -->
  1323. <!--PERSON 6 -->
  1324. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1325. <!--PERSON 6 END -->
  1326. </div>
  1327. </div>
  1328. </div>
  1329. </div>
  1330. <!--ENEMIES end-->
  1331. </div>
  1332. </div>
  1333. </div>
  1334. </div>
  1335. </div>
  1336. </div>
  1337. </div>
  1338. </div>
  1339. <!--BOX END-------------------------------------------------------->
  1340. <!--26 END--------------------------------------------------------->
  1341. <!--25 START--------------------------------------------------------->
  1342. <div class="tab-pane fade" id="age25">
  1343. <div class="row no-gutters justify-content-center">
  1344. <div class="col-lg-4 p-1">
  1345. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  1346. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  1347. <!--- Timeline --->
  1348. <!--EVENT-->
  1349. <div class="p-3">
  1350. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1351. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1352.  
  1353. <h1 class="m-0">(OLDEST) EVENT</h1>
  1354. </div>
  1355.  
  1356. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  1357. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  1358. </div>
  1359. </div>
  1360. <!--EVENT end-->
  1361. <!--EVENT-->
  1362. <div class="p-3">
  1363. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1364. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1365.  
  1366. <h1 class="m-0">EVENT</h1>
  1367. </div>
  1368.  
  1369. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  1370. </div>
  1371. </div>
  1372. <!--EVENT end-->
  1373. <!--EVENT-->
  1374. <div class="p-3">
  1375. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1376. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1377.  
  1378. <h1 class="m-0">(NEWEST) EVENT</h1>
  1379. </div>
  1380.  
  1381. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  1382. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  1383. </div>
  1384. </div>
  1385. <!--EVENT end-->
  1386. </div>
  1387. <!--TIMELINE---------------->
  1388. </div>
  1389. </div>
  1390. <!--BOX-------------------------------------------------------->
  1391. <div class="col-lg-8 p-1">
  1392. <div class="card border-0 rounded-0 h-100">
  1393. <div class="container-fluid bg-faded p-0">
  1394. <div class="card p-0 m-1 border-0">
  1395. <!--ROW 1-->
  1396. <div class="row no-gutters justify-content-center">
  1397. <div class="col-lg-9">
  1398. <div class="card border-0 rounded-0 p-1 h-100">
  1399. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  1400. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  1401. </div>
  1402. </div>
  1403. </div>
  1404. <div class="col-lg-3 p-">
  1405. <!--IMAGE-->
  1406. <div class="text-center" style="border: 0px solid;">
  1407. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  1408. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  1409. </div>
  1410. <!--IMAGE END-->
  1411. </div>
  1412. <div class="col-lg-3 p-1">
  1413. <!--INJURY-->
  1414. <div class="p-0">
  1415. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1416. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1417. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  1418. </div>
  1419. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  1420.  
  1421. <ul class="list-unstyled mb-0" style="text-align:left;">
  1422. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  1423. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  1424. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  1425. <li>
  1426. <hr class="mt-0">
  1427. </li>
  1428. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  1429. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  1430. </ul>
  1431. </div>
  1432. </div>
  1433. </div>
  1434. <!--INJURY end-->
  1435. </div>
  1436. <div class="col-lg-3 p-1">
  1437. <!--BODY MOD -->
  1438. <div class="p-0">
  1439. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1440. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1441. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  1442. </div>
  1443. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  1444.  
  1445. <ul class="list-unstyled mb-0" style="text-align:left;">
  1446. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1447. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1448. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1449. <li>
  1450. <hr class="mt-0">
  1451. </li>
  1452. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  1453. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  1454. </ul>
  1455. </div>
  1456. </div>
  1457. </div>
  1458. <!--BODY MOD end-->
  1459. </div>
  1460. <div class="col-lg-6 p-1">
  1461. <!--LIVING STATUS -->
  1462. <div class="p-0">
  1463. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1464. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1465. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  1466. </div>
  1467. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  1468. <!--BASIC INFO-->
  1469. <!--CONTENT-->
  1470.  
  1471. <ul class="list-group list-group-flush">
  1472. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  1473. <!--make sure this is the first item on the list-->
  1474. <span class="text-uppercase text-muted">health</span>
  1475. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  1476. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  1477. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  1478. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  1479. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  1480. </ul>
  1481. <!--content end-->
  1482. <!--basic info end-->
  1483. </div>
  1484. </div>
  1485. </div>
  1486. <!--LIVING STATUS end-->
  1487. </div>
  1488. <div class="col-lg-6 p-1">
  1489. <!--CLOSEST PEOPLE -->
  1490. <div class="p-0">
  1491. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1492. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1493. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  1494. </div>
  1495. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  1496. <div class="row no-gutters">
  1497. <!--PERSON 1 -->
  1498. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1499. <!--PERSON 1 END -->
  1500. <!--PERSON 2 -->
  1501. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1502. <!--PERSON 2 END -->
  1503. <!--PERSON 3 -->
  1504. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1505. <!--PERSON 3 END -->
  1506. <!--PERSON 4 -->
  1507. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1508. <!--PERSON 4 END -->
  1509. <!--PERSON 5 -->
  1510. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1511. <!--PERSON 5 END -->
  1512. <!--PERSON 6 -->
  1513. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1514. <!--PERSON 6 END -->
  1515. </div>
  1516. </div>
  1517. </div>
  1518. </div>
  1519. <!--CLOSEST PEOPLE end-->
  1520. </div>
  1521. <div class="col-lg-6 p-1">
  1522. <!--ENEMIES -->
  1523. <div class="p-0">
  1524. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1525. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1526. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  1527. </div>
  1528. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  1529. <div class="row no-gutters">
  1530. <!--PERSON 1 -->
  1531. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1532. <!--PERSON 1 END -->
  1533. <!--PERSON 2 -->
  1534. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1535. <!--PERSON 2 END -->
  1536. <!--PERSON 3 -->
  1537. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1538. <!--PERSON 3 END -->
  1539. <!--PERSON 4 -->
  1540. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1541. <!--PERSON 4 END -->
  1542. <!--PERSON 5 -->
  1543. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1544. <!--PERSON 5 END -->
  1545. <!--PERSON 6 -->
  1546. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1547. <!--PERSON 6 END -->
  1548. </div>
  1549. </div>
  1550. </div>
  1551. </div>
  1552. <!--ENEMIES end-->
  1553. </div>
  1554. </div>
  1555. </div>
  1556. </div>
  1557. </div>
  1558. </div>
  1559. </div>
  1560. </div>
  1561. <!--BOX END-------------------------------------------------------->
  1562. <!--25 END--------------------------------------------------------->
  1563. <!--24 START--------------------------------------------------------->
  1564. <div class="tab-pane fade" id="age24">
  1565. <div class="row no-gutters justify-content-center">
  1566. <div class="col-lg-4 p-1">
  1567. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  1568. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  1569. <!--- Timeline --->
  1570. <!--EVENT-->
  1571. <div class="p-3">
  1572. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1573. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1574.  
  1575. <h1 class="m-0">(OLDEST) EVENT</h1>
  1576. </div>
  1577.  
  1578. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  1579. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  1580. </div>
  1581. </div>
  1582. <!--EVENT end-->
  1583. <!--EVENT-->
  1584. <div class="p-3">
  1585. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1586. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1587.  
  1588. <h1 class="m-0">EVENT</h1>
  1589. </div>
  1590.  
  1591. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  1592. </div>
  1593. </div>
  1594. <!--EVENT end-->
  1595. <!--EVENT-->
  1596. <div class="p-3">
  1597. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1598. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1599.  
  1600. <h1 class="m-0">(NEWEST) EVENT</h1>
  1601. </div>
  1602.  
  1603. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  1604. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  1605. </div>
  1606. </div>
  1607. <!--EVENT end-->
  1608. </div>
  1609. <!--TIMELINE---------------->
  1610. </div>
  1611. </div>
  1612. <!--BOX-------------------------------------------------------->
  1613. <div class="col-lg-8 p-1">
  1614. <div class="card border-0 rounded-0 h-100">
  1615. <div class="container-fluid bg-faded p-0">
  1616. <div class="card p-0 m-1 border-0">
  1617. <!--ROW 1-->
  1618. <div class="row no-gutters justify-content-center">
  1619. <div class="col-lg-9">
  1620. <div class="card border-0 rounded-0 p-1 h-100">
  1621. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  1622. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  1623. </div>
  1624. </div>
  1625. </div>
  1626. <div class="col-lg-3 p-">
  1627. <!--IMAGE-->
  1628. <div class="text-center" style="border: 0px solid;">
  1629. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  1630. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  1631. </div>
  1632. <!--IMAGE END-->
  1633. </div>
  1634. <div class="col-lg-3 p-1">
  1635. <!--INJURY-->
  1636. <div class="p-0">
  1637. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1638. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1639. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  1640. </div>
  1641. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  1642.  
  1643. <ul class="list-unstyled mb-0" style="text-align:left;">
  1644. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  1645. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  1646. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  1647. <li>
  1648. <hr class="mt-0">
  1649. </li>
  1650. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  1651. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  1652. </ul>
  1653. </div>
  1654. </div>
  1655. </div>
  1656. <!--INJURY end-->
  1657. </div>
  1658. <div class="col-lg-3 p-1">
  1659. <!--BODY MOD -->
  1660. <div class="p-0">
  1661. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1662. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1663. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  1664. </div>
  1665. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  1666.  
  1667. <ul class="list-unstyled mb-0" style="text-align:left;">
  1668. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1669. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1670. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1671. <li>
  1672. <hr class="mt-0">
  1673. </li>
  1674. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  1675. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  1676. </ul>
  1677. </div>
  1678. </div>
  1679. </div>
  1680. <!--BODY MOD end-->
  1681. </div>
  1682. <div class="col-lg-6 p-1">
  1683. <!--LIVING STATUS -->
  1684. <div class="p-0">
  1685. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1686. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1687. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  1688. </div>
  1689. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  1690. <!--BASIC INFO-->
  1691. <!--CONTENT-->
  1692.  
  1693. <ul class="list-group list-group-flush">
  1694. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  1695. <!--make sure this is the first item on the list-->
  1696. <span class="text-uppercase text-muted">health</span>
  1697. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  1698. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  1699. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  1700. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  1701. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  1702. </ul>
  1703. <!--content end-->
  1704. <!--basic info end-->
  1705. </div>
  1706. </div>
  1707. </div>
  1708. <!--LIVING STATUS end-->
  1709. </div>
  1710. <div class="col-lg-6 p-1">
  1711. <!--CLOSEST PEOPLE -->
  1712. <div class="p-0">
  1713. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1714. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1715. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  1716. </div>
  1717. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  1718. <div class="row no-gutters">
  1719. <!--PERSON 1 -->
  1720. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1721. <!--PERSON 1 END -->
  1722. <!--PERSON 2 -->
  1723. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1724. <!--PERSON 2 END -->
  1725. <!--PERSON 3 -->
  1726. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1727. <!--PERSON 3 END -->
  1728. <!--PERSON 4 -->
  1729. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1730. <!--PERSON 4 END -->
  1731. <!--PERSON 5 -->
  1732. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1733. <!--PERSON 5 END -->
  1734. <!--PERSON 6 -->
  1735. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1736. <!--PERSON 6 END -->
  1737. </div>
  1738. </div>
  1739. </div>
  1740. </div>
  1741. <!--CLOSEST PEOPLE end-->
  1742. </div>
  1743. <div class="col-lg-6 p-1">
  1744. <!--ENEMIES -->
  1745. <div class="p-0">
  1746. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1747. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1748. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  1749. </div>
  1750. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  1751. <div class="row no-gutters">
  1752. <!--PERSON 1 -->
  1753. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1754. <!--PERSON 1 END -->
  1755. <!--PERSON 2 -->
  1756. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1757. <!--PERSON 2 END -->
  1758. <!--PERSON 3 -->
  1759. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1760. <!--PERSON 3 END -->
  1761. <!--PERSON 4 -->
  1762. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1763. <!--PERSON 4 END -->
  1764. <!--PERSON 5 -->
  1765. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1766. <!--PERSON 5 END -->
  1767. <!--PERSON 6 -->
  1768. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1769. <!--PERSON 6 END -->
  1770. </div>
  1771. </div>
  1772. </div>
  1773. </div>
  1774. <!--ENEMIES end-->
  1775. </div>
  1776. </div>
  1777. </div>
  1778. </div>
  1779. </div>
  1780. </div>
  1781. </div>
  1782. </div>
  1783. <!--BOX END-------------------------------------------------------->
  1784. <!--24 END--------------------------------------------------------->
  1785. <!--23 START--------------------------------------------------------->
  1786. <div class="tab-pane fade" id="age23">
  1787. <div class="row no-gutters justify-content-center">
  1788. <div class="col-lg-4 p-1">
  1789. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  1790. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  1791. <!--- Timeline --->
  1792. <!--EVENT-->
  1793. <div class="p-3">
  1794. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1795. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1796.  
  1797. <h1 class="m-0">(OLDEST) EVENT</h1>
  1798. </div>
  1799.  
  1800. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  1801. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  1802. </div>
  1803. </div>
  1804. <!--EVENT end-->
  1805. <!--EVENT-->
  1806. <div class="p-3">
  1807. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1808. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1809.  
  1810. <h1 class="m-0">EVENT</h1>
  1811. </div>
  1812.  
  1813. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  1814. </div>
  1815. </div>
  1816. <!--EVENT end-->
  1817. <!--EVENT-->
  1818. <div class="p-3">
  1819. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1820. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1821.  
  1822. <h1 class="m-0">(NEWEST) EVENT</h1>
  1823. </div>
  1824.  
  1825. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  1826. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  1827. </div>
  1828. </div>
  1829. <!--EVENT end-->
  1830. </div>
  1831. <!--TIMELINE---------------->
  1832. </div>
  1833. </div>
  1834. <!--BOX-------------------------------------------------------->
  1835. <div class="col-lg-8 p-1">
  1836. <div class="card border-0 rounded-0 h-100">
  1837. <div class="container-fluid bg-faded p-0">
  1838. <div class="card p-0 m-1 border-0">
  1839. <!--ROW 1-->
  1840. <div class="row no-gutters justify-content-center">
  1841. <div class="col-lg-9">
  1842. <div class="card border-0 rounded-0 p-1 h-100">
  1843. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  1844. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  1845. </div>
  1846. </div>
  1847. </div>
  1848. <div class="col-lg-3 p-">
  1849. <!--IMAGE-->
  1850. <div class="text-center" style="border: 0px solid;">
  1851. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  1852. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  1853. </div>
  1854. <!--IMAGE END-->
  1855. </div>
  1856. <div class="col-lg-3 p-1">
  1857. <!--INJURY-->
  1858. <div class="p-0">
  1859. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1860. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1861. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  1862. </div>
  1863. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  1864.  
  1865. <ul class="list-unstyled mb-0" style="text-align:left;">
  1866. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  1867. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  1868. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  1869. <li>
  1870. <hr class="mt-0">
  1871. </li>
  1872. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  1873. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  1874. </ul>
  1875. </div>
  1876. </div>
  1877. </div>
  1878. <!--INJURY end-->
  1879. </div>
  1880. <div class="col-lg-3 p-1">
  1881. <!--BODY MOD -->
  1882. <div class="p-0">
  1883. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1884. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1885. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  1886. </div>
  1887. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  1888.  
  1889. <ul class="list-unstyled mb-0" style="text-align:left;">
  1890. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1891. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1892. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  1893. <li>
  1894. <hr class="mt-0">
  1895. </li>
  1896. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  1897. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  1898. </ul>
  1899. </div>
  1900. </div>
  1901. </div>
  1902. <!--BODY MOD end-->
  1903. </div>
  1904. <div class="col-lg-6 p-1">
  1905. <!--LIVING STATUS -->
  1906. <div class="p-0">
  1907. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1908. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1909. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  1910. </div>
  1911. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  1912. <!--BASIC INFO-->
  1913. <!--CONTENT-->
  1914.  
  1915. <ul class="list-group list-group-flush">
  1916. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  1917. <!--make sure this is the first item on the list-->
  1918. <span class="text-uppercase text-muted">health</span>
  1919. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  1920. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  1921. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  1922. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  1923. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  1924. </ul>
  1925. <!--content end-->
  1926. <!--basic info end-->
  1927. </div>
  1928. </div>
  1929. </div>
  1930. <!--LIVING STATUS end-->
  1931. </div>
  1932. <div class="col-lg-6 p-1">
  1933. <!--CLOSEST PEOPLE -->
  1934. <div class="p-0">
  1935. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1936. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1937. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  1938. </div>
  1939. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  1940. <div class="row no-gutters">
  1941. <!--PERSON 1 -->
  1942. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1943. <!--PERSON 1 END -->
  1944. <!--PERSON 2 -->
  1945. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1946. <!--PERSON 2 END -->
  1947. <!--PERSON 3 -->
  1948. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1949. <!--PERSON 3 END -->
  1950. <!--PERSON 4 -->
  1951. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1952. <!--PERSON 4 END -->
  1953. <!--PERSON 5 -->
  1954. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1955. <!--PERSON 5 END -->
  1956. <!--PERSON 6 -->
  1957. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1958. <!--PERSON 6 END -->
  1959. </div>
  1960. </div>
  1961. </div>
  1962. </div>
  1963. <!--CLOSEST PEOPLE end-->
  1964. </div>
  1965. <div class="col-lg-6 p-1">
  1966. <!--ENEMIES -->
  1967. <div class="p-0">
  1968. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  1969. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  1970. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  1971. </div>
  1972. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  1973. <div class="row no-gutters">
  1974. <!--PERSON 1 -->
  1975. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1976. <!--PERSON 1 END -->
  1977. <!--PERSON 2 -->
  1978. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1979. <!--PERSON 2 END -->
  1980. <!--PERSON 3 -->
  1981. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1982. <!--PERSON 3 END -->
  1983. <!--PERSON 4 -->
  1984. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1985. <!--PERSON 4 END -->
  1986. <!--PERSON 5 -->
  1987. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1988. <!--PERSON 5 END -->
  1989. <!--PERSON 6 -->
  1990. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  1991. <!--PERSON 6 END -->
  1992. </div>
  1993. </div>
  1994. </div>
  1995. </div>
  1996. <!--ENEMIES end-->
  1997. </div>
  1998. </div>
  1999. </div>
  2000. </div>
  2001. </div>
  2002. </div>
  2003. </div>
  2004. </div>
  2005. <!--BOX END-------------------------------------------------------->
  2006. <!--23 END--------------------------------------------------------->
  2007. <!--22 START--------------------------------------------------------->
  2008. <div class="tab-pane fade" id="age22">
  2009. <div class="row no-gutters justify-content-center">
  2010. <div class="col-lg-4 p-1">
  2011. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  2012. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  2013. <!--- Timeline --->
  2014. <!--EVENT-->
  2015. <div class="p-3">
  2016. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2017. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2018.  
  2019. <h1 class="m-0">(OLDEST) EVENT</h1>
  2020. </div>
  2021.  
  2022. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  2023. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  2024. </div>
  2025. </div>
  2026. <!--EVENT end-->
  2027. <!--EVENT-->
  2028. <div class="p-3">
  2029. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2030. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2031.  
  2032. <h1 class="m-0">EVENT</h1>
  2033. </div>
  2034.  
  2035. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  2036. </div>
  2037. </div>
  2038. <!--EVENT end-->
  2039. <!--EVENT-->
  2040. <div class="p-3">
  2041. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2042. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2043.  
  2044. <h1 class="m-0">(NEWEST) EVENT</h1>
  2045. </div>
  2046.  
  2047. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  2048. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  2049. </div>
  2050. </div>
  2051. <!--EVENT end-->
  2052. </div>
  2053. <!--TIMELINE---------------->
  2054. </div>
  2055. </div>
  2056. <!--BOX-------------------------------------------------------->
  2057. <div class="col-lg-8 p-1">
  2058. <div class="card border-0 rounded-0 h-100">
  2059. <div class="container-fluid bg-faded p-0">
  2060. <div class="card p-0 m-1 border-0">
  2061. <!--ROW 1-->
  2062. <div class="row no-gutters justify-content-center">
  2063. <div class="col-lg-9">
  2064. <div class="card border-0 rounded-0 p-1 h-100">
  2065. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  2066. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  2067. </div>
  2068. </div>
  2069. </div>
  2070. <div class="col-lg-3 p-">
  2071. <!--IMAGE-->
  2072. <div class="text-center" style="border: 0px solid;">
  2073. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  2074. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  2075. </div>
  2076. <!--IMAGE END-->
  2077. </div>
  2078. <div class="col-lg-3 p-1">
  2079. <!--INJURY-->
  2080. <div class="p-0">
  2081. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2082. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2083. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  2084. </div>
  2085. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  2086.  
  2087. <ul class="list-unstyled mb-0" style="text-align:left;">
  2088. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2089. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2090. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2091. <li>
  2092. <hr class="mt-0">
  2093. </li>
  2094. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  2095. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  2096. </ul>
  2097. </div>
  2098. </div>
  2099. </div>
  2100. <!--INJURY end-->
  2101. </div>
  2102. <div class="col-lg-3 p-1">
  2103. <!--BODY MOD -->
  2104. <div class="p-0">
  2105. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2106. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2107. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  2108. </div>
  2109. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  2110.  
  2111. <ul class="list-unstyled mb-0" style="text-align:left;">
  2112. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  2113. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  2114. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  2115. <li>
  2116. <hr class="mt-0">
  2117. </li>
  2118. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  2119. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  2120. </ul>
  2121. </div>
  2122. </div>
  2123. </div>
  2124. <!--BODY MOD end-->
  2125. </div>
  2126. <div class="col-lg-6 p-1">
  2127. <!--LIVING STATUS -->
  2128. <div class="p-0">
  2129. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2130. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2131. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  2132. </div>
  2133. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  2134. <!--BASIC INFO-->
  2135. <!--CONTENT-->
  2136.  
  2137. <ul class="list-group list-group-flush">
  2138. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  2139. <!--make sure this is the first item on the list-->
  2140. <span class="text-uppercase text-muted">health</span>
  2141. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  2142. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  2143. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  2144. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  2145. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  2146. </ul>
  2147. <!--content end-->
  2148. <!--basic info end-->
  2149. </div>
  2150. </div>
  2151. </div>
  2152. <!--LIVING STATUS end-->
  2153. </div>
  2154. <div class="col-lg-6 p-1">
  2155. <!--CLOSEST PEOPLE -->
  2156. <div class="p-0">
  2157. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2158. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2159. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  2160. </div>
  2161. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  2162. <div class="row no-gutters">
  2163. <!--PERSON 1 -->
  2164. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2165. <!--PERSON 1 END -->
  2166. <!--PERSON 2 -->
  2167. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2168. <!--PERSON 2 END -->
  2169. <!--PERSON 3 -->
  2170. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2171. <!--PERSON 3 END -->
  2172. <!--PERSON 4 -->
  2173. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2174. <!--PERSON 4 END -->
  2175. <!--PERSON 5 -->
  2176. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2177. <!--PERSON 5 END -->
  2178. <!--PERSON 6 -->
  2179. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2180. <!--PERSON 6 END -->
  2181. </div>
  2182. </div>
  2183. </div>
  2184. </div>
  2185. <!--CLOSEST PEOPLE end-->
  2186. </div>
  2187. <div class="col-lg-6 p-1">
  2188. <!--ENEMIES -->
  2189. <div class="p-0">
  2190. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2191. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2192. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  2193. </div>
  2194. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  2195. <div class="row no-gutters">
  2196. <!--PERSON 1 -->
  2197. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2198. <!--PERSON 1 END -->
  2199. <!--PERSON 2 -->
  2200. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2201. <!--PERSON 2 END -->
  2202. <!--PERSON 3 -->
  2203. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2204. <!--PERSON 3 END -->
  2205. <!--PERSON 4 -->
  2206. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2207. <!--PERSON 4 END -->
  2208. <!--PERSON 5 -->
  2209. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2210. <!--PERSON 5 END -->
  2211. <!--PERSON 6 -->
  2212. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2213. <!--PERSON 6 END -->
  2214. </div>
  2215. </div>
  2216. </div>
  2217. </div>
  2218. <!--ENEMIES end-->
  2219. </div>
  2220. </div>
  2221. </div>
  2222. </div>
  2223. </div>
  2224. </div>
  2225. </div>
  2226. </div>
  2227. <!--BOX END-------------------------------------------------------->
  2228. <!--22 END--------------------------------------------------------->
  2229. <!--21 START--------------------------------------------------------->
  2230. <div class="tab-pane fade" id="age21">
  2231. <div class="row no-gutters justify-content-center">
  2232. <div class="col-lg-4 p-1">
  2233. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  2234. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  2235. <!--- Timeline --->
  2236. <!--EVENT-->
  2237. <div class="p-3">
  2238. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2239. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2240.  
  2241. <h1 class="m-0">(OLDEST) EVENT</h1>
  2242. </div>
  2243.  
  2244. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  2245. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  2246. </div>
  2247. </div>
  2248. <!--EVENT end-->
  2249. <!--EVENT-->
  2250. <div class="p-3">
  2251. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2252. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2253.  
  2254. <h1 class="m-0">EVENT</h1>
  2255. </div>
  2256.  
  2257. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  2258. </div>
  2259. </div>
  2260. <!--EVENT end-->
  2261. <!--EVENT-->
  2262. <div class="p-3">
  2263. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2264. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2265.  
  2266. <h1 class="m-0">(NEWEST) EVENT</h1>
  2267. </div>
  2268.  
  2269. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  2270. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  2271. </div>
  2272. </div>
  2273. <!--EVENT end-->
  2274. </div>
  2275. <!--TIMELINE---------------->
  2276. </div>
  2277. </div>
  2278. <!--BOX-------------------------------------------------------->
  2279. <div class="col-lg-8 p-1">
  2280. <div class="card border-0 rounded-0 h-100">
  2281. <div class="container-fluid bg-faded p-0">
  2282. <div class="card p-0 m-1 border-0">
  2283. <!--ROW 1-->
  2284. <div class="row no-gutters justify-content-center">
  2285. <div class="col-lg-9">
  2286. <div class="card border-0 rounded-0 p-1 h-100">
  2287. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  2288. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  2289. </div>
  2290. </div>
  2291. </div>
  2292. <div class="col-lg-3 p-">
  2293. <!--IMAGE-->
  2294. <div class="text-center" style="border: 0px solid;">
  2295. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  2296. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  2297. </div>
  2298. <!--IMAGE END-->
  2299. </div>
  2300. <div class="col-lg-3 p-1">
  2301. <!--INJURY-->
  2302. <div class="p-0">
  2303. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2304. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2305. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  2306. </div>
  2307. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  2308.  
  2309. <ul class="list-unstyled mb-0" style="text-align:left;">
  2310. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2311. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2312. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2313. <li>
  2314. <hr class="mt-0">
  2315. </li>
  2316. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  2317. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  2318. </ul>
  2319. </div>
  2320. </div>
  2321. </div>
  2322. <!--INJURY end-->
  2323. </div>
  2324. <div class="col-lg-3 p-1">
  2325. <!--BODY MOD -->
  2326. <div class="p-0">
  2327. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2328. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2329. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  2330. </div>
  2331. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  2332.  
  2333. <ul class="list-unstyled mb-0" style="text-align:left;">
  2334. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  2335. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  2336. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  2337. <li>
  2338. <hr class="mt-0">
  2339. </li>
  2340. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  2341. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  2342. </ul>
  2343. </div>
  2344. </div>
  2345. </div>
  2346. <!--BODY MOD end-->
  2347. </div>
  2348. <div class="col-lg-6 p-1">
  2349. <!--LIVING STATUS -->
  2350. <div class="p-0">
  2351. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2352. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2353. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  2354. </div>
  2355. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  2356. <!--BASIC INFO-->
  2357. <!--CONTENT-->
  2358.  
  2359. <ul class="list-group list-group-flush">
  2360. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  2361. <!--make sure this is the first item on the list-->
  2362. <span class="text-uppercase text-muted">health</span>
  2363. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  2364. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  2365. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  2366. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  2367. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  2368. </ul>
  2369. <!--content end-->
  2370. <!--basic info end-->
  2371. </div>
  2372. </div>
  2373. </div>
  2374. <!--LIVING STATUS end-->
  2375. </div>
  2376. <div class="col-lg-6 p-1">
  2377. <!--CLOSEST PEOPLE -->
  2378. <div class="p-0">
  2379. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2380. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2381. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  2382. </div>
  2383. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  2384. <div class="row no-gutters">
  2385. <!--PERSON 1 -->
  2386. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2387. <!--PERSON 1 END -->
  2388. <!--PERSON 2 -->
  2389. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2390. <!--PERSON 2 END -->
  2391. <!--PERSON 3 -->
  2392. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2393. <!--PERSON 3 END -->
  2394. <!--PERSON 4 -->
  2395. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2396. <!--PERSON 4 END -->
  2397. <!--PERSON 5 -->
  2398. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2399. <!--PERSON 5 END -->
  2400. <!--PERSON 6 -->
  2401. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2402. <!--PERSON 6 END -->
  2403. </div>
  2404. </div>
  2405. </div>
  2406. </div>
  2407. <!--CLOSEST PEOPLE end-->
  2408. </div>
  2409. <div class="col-lg-6 p-1">
  2410. <!--ENEMIES -->
  2411. <div class="p-0">
  2412. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2413. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2414. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  2415. </div>
  2416. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  2417. <div class="row no-gutters">
  2418. <!--PERSON 1 -->
  2419. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2420. <!--PERSON 1 END -->
  2421. <!--PERSON 2 -->
  2422. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2423. <!--PERSON 2 END -->
  2424. <!--PERSON 3 -->
  2425. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2426. <!--PERSON 3 END -->
  2427. <!--PERSON 4 -->
  2428. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2429. <!--PERSON 4 END -->
  2430. <!--PERSON 5 -->
  2431. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2432. <!--PERSON 5 END -->
  2433. <!--PERSON 6 -->
  2434. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2435. <!--PERSON 6 END -->
  2436. </div>
  2437. </div>
  2438. </div>
  2439. </div>
  2440. <!--ENEMIES end-->
  2441. </div>
  2442. </div>
  2443. </div>
  2444. </div>
  2445. </div>
  2446. </div>
  2447. </div>
  2448. </div>
  2449. <!--BOX END-------------------------------------------------------->
  2450. <!--21 END--------------------------------------------------------->
  2451. <!--20 START--------------------------------------------------------->
  2452. <div class="tab-pane fade" id="age20">
  2453. <div class="row no-gutters justify-content-center">
  2454. <div class="col-lg-4 p-1">
  2455. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  2456. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  2457. <!--- Timeline --->
  2458. <!--EVENT-->
  2459. <div class="p-3">
  2460. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2461. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2462.  
  2463. <h1 class="m-0">(OLDEST) EVENT</h1>
  2464. </div>
  2465.  
  2466. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  2467. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  2468. </div>
  2469. </div>
  2470. <!--EVENT end-->
  2471. <!--EVENT-->
  2472. <div class="p-3">
  2473. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2474. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2475.  
  2476. <h1 class="m-0">EVENT</h1>
  2477. </div>
  2478.  
  2479. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  2480. </div>
  2481. </div>
  2482. <!--EVENT end-->
  2483. <!--EVENT-->
  2484. <div class="p-3">
  2485. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2486. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2487.  
  2488. <h1 class="m-0">(NEWEST) EVENT</h1>
  2489. </div>
  2490.  
  2491. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  2492. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  2493. </div>
  2494. </div>
  2495. <!--EVENT end-->
  2496. </div>
  2497. <!--TIMELINE---------------->
  2498. </div>
  2499. </div>
  2500. <!--BOX-------------------------------------------------------->
  2501. <div class="col-lg-8 p-1">
  2502. <div class="card border-0 rounded-0 h-100">
  2503. <div class="container-fluid bg-faded p-0">
  2504. <div class="card p-0 m-1 border-0">
  2505. <!--ROW 1-->
  2506. <div class="row no-gutters justify-content-center">
  2507. <div class="col-lg-9">
  2508. <div class="card border-0 rounded-0 p-1 h-100">
  2509. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  2510. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  2511. </div>
  2512. </div>
  2513. </div>
  2514. <div class="col-lg-3 p-">
  2515. <!--IMAGE-->
  2516. <div class="text-center" style="border: 0px solid;">
  2517. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  2518. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  2519. </div>
  2520. <!--IMAGE END-->
  2521. </div>
  2522. <div class="col-lg-3 p-1">
  2523. <!--INJURY-->
  2524. <div class="p-0">
  2525. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2526. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2527. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  2528. </div>
  2529. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  2530.  
  2531. <ul class="list-unstyled mb-0" style="text-align:left;">
  2532. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2533. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2534. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2535. <li>
  2536. <hr class="mt-0">
  2537. </li>
  2538. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  2539. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  2540. </ul>
  2541. </div>
  2542. </div>
  2543. </div>
  2544. <!--INJURY end-->
  2545. </div>
  2546. <div class="col-lg-3 p-1">
  2547. <!--BODY MOD -->
  2548. <div class="p-0">
  2549. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2550. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2551. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  2552. </div>
  2553. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  2554.  
  2555. <ul class="list-unstyled mb-0" style="text-align:left;">
  2556. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  2557. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  2558. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  2559. <li>
  2560. <hr class="mt-0">
  2561. </li>
  2562. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  2563. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  2564. </ul>
  2565. </div>
  2566. </div>
  2567. </div>
  2568. <!--BODY MOD end-->
  2569. </div>
  2570. <div class="col-lg-6 p-1">
  2571. <!--LIVING STATUS -->
  2572. <div class="p-0">
  2573. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2574. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2575. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  2576. </div>
  2577. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  2578. <!--BASIC INFO-->
  2579. <!--CONTENT-->
  2580.  
  2581. <ul class="list-group list-group-flush">
  2582. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  2583. <!--make sure this is the first item on the list-->
  2584. <span class="text-uppercase text-muted">health</span>
  2585. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  2586. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  2587. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  2588. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  2589. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  2590. </ul>
  2591. <!--content end-->
  2592. <!--basic info end-->
  2593. </div>
  2594. </div>
  2595. </div>
  2596. <!--LIVING STATUS end-->
  2597. </div>
  2598. <div class="col-lg-6 p-1">
  2599. <!--CLOSEST PEOPLE -->
  2600. <div class="p-0">
  2601. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2602. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2603. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  2604. </div>
  2605. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  2606. <div class="row no-gutters">
  2607. <!--PERSON 1 -->
  2608. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2609. <!--PERSON 1 END -->
  2610. <!--PERSON 2 -->
  2611. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2612. <!--PERSON 2 END -->
  2613. <!--PERSON 3 -->
  2614. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2615. <!--PERSON 3 END -->
  2616. <!--PERSON 4 -->
  2617. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2618. <!--PERSON 4 END -->
  2619. <!--PERSON 5 -->
  2620. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2621. <!--PERSON 5 END -->
  2622. <!--PERSON 6 -->
  2623. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2624. <!--PERSON 6 END -->
  2625. </div>
  2626. </div>
  2627. </div>
  2628. </div>
  2629. <!--CLOSEST PEOPLE end-->
  2630. </div>
  2631. <div class="col-lg-6 p-1">
  2632. <!--ENEMIES -->
  2633. <div class="p-0">
  2634. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2635. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2636. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  2637. </div>
  2638. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  2639. <div class="row no-gutters">
  2640. <!--PERSON 1 -->
  2641. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2642. <!--PERSON 1 END -->
  2643. <!--PERSON 2 -->
  2644. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2645. <!--PERSON 2 END -->
  2646. <!--PERSON 3 -->
  2647. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2648. <!--PERSON 3 END -->
  2649. <!--PERSON 4 -->
  2650. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2651. <!--PERSON 4 END -->
  2652. <!--PERSON 5 -->
  2653. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2654. <!--PERSON 5 END -->
  2655. <!--PERSON 6 -->
  2656. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2657. <!--PERSON 6 END -->
  2658. </div>
  2659. </div>
  2660. </div>
  2661. </div>
  2662. <!--ENEMIES end-->
  2663. </div>
  2664. </div>
  2665. </div>
  2666. </div>
  2667. </div>
  2668. </div>
  2669. </div>
  2670. </div>
  2671. <!--BOX END-------------------------------------------------------->
  2672. <!--20 END--------------------------------------------------------->
  2673. <!--19 START--------------------------------------------------------->
  2674. <div class="tab-pane fade" id="age19">
  2675. <div class="row no-gutters justify-content-center">
  2676. <div class="col-lg-4 p-1">
  2677. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  2678. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  2679. <!--- Timeline --->
  2680. <!--EVENT-->
  2681. <div class="p-3">
  2682. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2683. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2684.  
  2685. <h1 class="m-0">(OLDEST) EVENT</h1>
  2686. </div>
  2687.  
  2688. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  2689. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  2690. </div>
  2691. </div>
  2692. <!--EVENT end-->
  2693. <!--EVENT-->
  2694. <div class="p-3">
  2695. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2696. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2697.  
  2698. <h1 class="m-0">EVENT</h1>
  2699. </div>
  2700.  
  2701. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  2702. </div>
  2703. </div>
  2704. <!--EVENT end-->
  2705. <!--EVENT-->
  2706. <div class="p-3">
  2707. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2708. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2709.  
  2710. <h1 class="m-0">(NEWEST) EVENT</h1>
  2711. </div>
  2712.  
  2713. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  2714. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  2715. </div>
  2716. </div>
  2717. <!--EVENT end-->
  2718. </div>
  2719. <!--TIMELINE---------------->
  2720. </div>
  2721. </div>
  2722. <!--BOX-------------------------------------------------------->
  2723. <div class="col-lg-8 p-1">
  2724. <div class="card border-0 rounded-0 h-100">
  2725. <div class="container-fluid bg-faded p-0">
  2726. <div class="card p-0 m-1 border-0">
  2727. <!--ROW 1-->
  2728. <div class="row no-gutters justify-content-center">
  2729. <div class="col-lg-9">
  2730. <div class="card border-0 rounded-0 p-1 h-100">
  2731. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  2732. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  2733. </div>
  2734. </div>
  2735. </div>
  2736. <div class="col-lg-3 p-">
  2737. <!--IMAGE-->
  2738. <div class="text-center" style="border: 0px solid;">
  2739. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  2740. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  2741. </div>
  2742. <!--IMAGE END-->
  2743. </div>
  2744. <div class="col-lg-3 p-1">
  2745. <!--INJURY-->
  2746. <div class="p-0">
  2747. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2748. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2749. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  2750. </div>
  2751. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  2752.  
  2753. <ul class="list-unstyled mb-0" style="text-align:left;">
  2754. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2755. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2756. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2757. <li>
  2758. <hr class="mt-0">
  2759. </li>
  2760. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  2761. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  2762. </ul>
  2763. </div>
  2764. </div>
  2765. </div>
  2766. <!--INJURY end-->
  2767. </div>
  2768. <div class="col-lg-3 p-1">
  2769. <!--BODY MOD -->
  2770. <div class="p-0">
  2771. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2772. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2773. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  2774. </div>
  2775. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  2776.  
  2777. <ul class="list-unstyled mb-0" style="text-align:left;">
  2778. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  2779. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  2780. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  2781. <li>
  2782. <hr class="mt-0">
  2783. </li>
  2784. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  2785. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  2786. </ul>
  2787. </div>
  2788. </div>
  2789. </div>
  2790. <!--BODY MOD end-->
  2791. </div>
  2792. <div class="col-lg-6 p-1">
  2793. <!--LIVING STATUS -->
  2794. <div class="p-0">
  2795. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2796. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2797. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  2798. </div>
  2799. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  2800. <!--BASIC INFO-->
  2801. <!--CONTENT-->
  2802.  
  2803. <ul class="list-group list-group-flush">
  2804. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  2805. <!--make sure this is the first item on the list-->
  2806. <span class="text-uppercase text-muted">health</span>
  2807. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  2808. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  2809. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  2810. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  2811. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  2812. </ul>
  2813. <!--content end-->
  2814. <!--basic info end-->
  2815. </div>
  2816. </div>
  2817. </div>
  2818. <!--LIVING STATUS end-->
  2819. </div>
  2820. <div class="col-lg-6 p-1">
  2821. <!--CLOSEST PEOPLE -->
  2822. <div class="p-0">
  2823. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2824. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2825. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  2826. </div>
  2827. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  2828. <div class="row no-gutters">
  2829. <!--PERSON 1 -->
  2830. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2831. <!--PERSON 1 END -->
  2832. <!--PERSON 2 -->
  2833. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2834. <!--PERSON 2 END -->
  2835. <!--PERSON 3 -->
  2836. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2837. <!--PERSON 3 END -->
  2838. <!--PERSON 4 -->
  2839. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2840. <!--PERSON 4 END -->
  2841. <!--PERSON 5 -->
  2842. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2843. <!--PERSON 5 END -->
  2844. <!--PERSON 6 -->
  2845. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2846. <!--PERSON 6 END -->
  2847. </div>
  2848. </div>
  2849. </div>
  2850. </div>
  2851. <!--CLOSEST PEOPLE end-->
  2852. </div>
  2853. <div class="col-lg-6 p-1">
  2854. <!--ENEMIES -->
  2855. <div class="p-0">
  2856. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2857. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2858. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  2859. </div>
  2860. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  2861. <div class="row no-gutters">
  2862. <!--PERSON 1 -->
  2863. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2864. <!--PERSON 1 END -->
  2865. <!--PERSON 2 -->
  2866. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2867. <!--PERSON 2 END -->
  2868. <!--PERSON 3 -->
  2869. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2870. <!--PERSON 3 END -->
  2871. <!--PERSON 4 -->
  2872. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2873. <!--PERSON 4 END -->
  2874. <!--PERSON 5 -->
  2875. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2876. <!--PERSON 5 END -->
  2877. <!--PERSON 6 -->
  2878. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  2879. <!--PERSON 6 END -->
  2880. </div>
  2881. </div>
  2882. </div>
  2883. </div>
  2884. <!--ENEMIES end-->
  2885. </div>
  2886. </div>
  2887. </div>
  2888. </div>
  2889. </div>
  2890. </div>
  2891. </div>
  2892. </div>
  2893. <!--BOX END-------------------------------------------------------->
  2894. <!--19 END--------------------------------------------------------->
  2895. <!--18 START--------------------------------------------------------->
  2896. <div class="tab-pane fade" id="age18">
  2897. <div class="row no-gutters justify-content-center">
  2898. <div class="col-lg-4 p-1">
  2899. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  2900. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  2901. <!--- Timeline --->
  2902. <!--EVENT-->
  2903. <div class="p-3">
  2904. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2905. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2906.  
  2907. <h1 class="m-0">(OLDEST) EVENT</h1>
  2908. </div>
  2909.  
  2910. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  2911. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  2912. </div>
  2913. </div>
  2914. <!--EVENT end-->
  2915. <!--EVENT-->
  2916. <div class="p-3">
  2917. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2918. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2919.  
  2920. <h1 class="m-0">EVENT</h1>
  2921. </div>
  2922.  
  2923. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  2924. </div>
  2925. </div>
  2926. <!--EVENT end-->
  2927. <!--EVENT-->
  2928. <div class="p-3">
  2929. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2930. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2931.  
  2932. <h1 class="m-0">(NEWEST) EVENT</h1>
  2933. </div>
  2934.  
  2935. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  2936. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  2937. </div>
  2938. </div>
  2939. <!--EVENT end-->
  2940. </div>
  2941. <!--TIMELINE---------------->
  2942. </div>
  2943. </div>
  2944. <!--BOX-------------------------------------------------------->
  2945. <div class="col-lg-8 p-1">
  2946. <div class="card border-0 rounded-0 h-100">
  2947. <div class="container-fluid bg-faded p-0">
  2948. <div class="card p-0 m-1 border-0">
  2949. <!--ROW 1-->
  2950. <div class="row no-gutters justify-content-center">
  2951. <div class="col-lg-9">
  2952. <div class="card border-0 rounded-0 p-1 h-100">
  2953. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  2954. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  2955. </div>
  2956. </div>
  2957. </div>
  2958. <div class="col-lg-3 p-">
  2959. <!--IMAGE-->
  2960. <div class="text-center" style="border: 0px solid;">
  2961. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  2962. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  2963. </div>
  2964. <!--IMAGE END-->
  2965. </div>
  2966. <div class="col-lg-3 p-1">
  2967. <!--INJURY-->
  2968. <div class="p-0">
  2969. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2970. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2971. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  2972. </div>
  2973. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  2974.  
  2975. <ul class="list-unstyled mb-0" style="text-align:left;">
  2976. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2977. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2978. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  2979. <li>
  2980. <hr class="mt-0">
  2981. </li>
  2982. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  2983. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  2984. </ul>
  2985. </div>
  2986. </div>
  2987. </div>
  2988. <!--INJURY end-->
  2989. </div>
  2990. <div class="col-lg-3 p-1">
  2991. <!--BODY MOD -->
  2992. <div class="p-0">
  2993. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  2994. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  2995. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  2996. </div>
  2997. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  2998.  
  2999. <ul class="list-unstyled mb-0" style="text-align:left;">
  3000. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3001. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3002. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3003. <li>
  3004. <hr class="mt-0">
  3005. </li>
  3006. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  3007. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  3008. </ul>
  3009. </div>
  3010. </div>
  3011. </div>
  3012. <!--BODY MOD end-->
  3013. </div>
  3014. <div class="col-lg-6 p-1">
  3015. <!--LIVING STATUS -->
  3016. <div class="p-0">
  3017. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3018. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3019. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  3020. </div>
  3021. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  3022. <!--BASIC INFO-->
  3023. <!--CONTENT-->
  3024.  
  3025. <ul class="list-group list-group-flush">
  3026. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  3027. <!--make sure this is the first item on the list-->
  3028. <span class="text-uppercase text-muted">health</span>
  3029. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  3030. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  3031. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  3032. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  3033. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  3034. </ul>
  3035. <!--content end-->
  3036. <!--basic info end-->
  3037. </div>
  3038. </div>
  3039. </div>
  3040. <!--LIVING STATUS end-->
  3041. </div>
  3042. <div class="col-lg-6 p-1">
  3043. <!--CLOSEST PEOPLE -->
  3044. <div class="p-0">
  3045. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3046. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3047. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  3048. </div>
  3049. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  3050. <div class="row no-gutters">
  3051. <!--PERSON 1 -->
  3052. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3053. <!--PERSON 1 END -->
  3054. <!--PERSON 2 -->
  3055. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3056. <!--PERSON 2 END -->
  3057. <!--PERSON 3 -->
  3058. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3059. <!--PERSON 3 END -->
  3060. <!--PERSON 4 -->
  3061. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3062. <!--PERSON 4 END -->
  3063. <!--PERSON 5 -->
  3064. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3065. <!--PERSON 5 END -->
  3066. <!--PERSON 6 -->
  3067. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3068. <!--PERSON 6 END -->
  3069. </div>
  3070. </div>
  3071. </div>
  3072. </div>
  3073. <!--CLOSEST PEOPLE end-->
  3074. </div>
  3075. <div class="col-lg-6 p-1">
  3076. <!--ENEMIES -->
  3077. <div class="p-0">
  3078. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3079. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3080. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  3081. </div>
  3082. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  3083. <div class="row no-gutters">
  3084. <!--PERSON 1 -->
  3085. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3086. <!--PERSON 1 END -->
  3087. <!--PERSON 2 -->
  3088. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3089. <!--PERSON 2 END -->
  3090. <!--PERSON 3 -->
  3091. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3092. <!--PERSON 3 END -->
  3093. <!--PERSON 4 -->
  3094. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3095. <!--PERSON 4 END -->
  3096. <!--PERSON 5 -->
  3097. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3098. <!--PERSON 5 END -->
  3099. <!--PERSON 6 -->
  3100. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3101. <!--PERSON 6 END -->
  3102. </div>
  3103. </div>
  3104. </div>
  3105. </div>
  3106. <!--ENEMIES end-->
  3107. </div>
  3108. </div>
  3109. </div>
  3110. </div>
  3111. </div>
  3112. </div>
  3113. </div>
  3114. </div>
  3115. <!--BOX END-------------------------------------------------------->
  3116. <!--18 END--------------------------------------------------------->
  3117. <!--17 START--------------------------------------------------------->
  3118. <div class="tab-pane fade" id="age17">
  3119. <div class="row no-gutters justify-content-center">
  3120. <div class="col-lg-4 p-1">
  3121. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  3122. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  3123. <!--- Timeline --->
  3124. <!--EVENT-->
  3125. <div class="p-3">
  3126. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3127. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3128.  
  3129. <h1 class="m-0">(OLDEST) EVENT</h1>
  3130. </div>
  3131.  
  3132. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  3133. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  3134. </div>
  3135. </div>
  3136. <!--EVENT end-->
  3137. <!--EVENT-->
  3138. <div class="p-3">
  3139. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3140. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3141.  
  3142. <h1 class="m-0">EVENT</h1>
  3143. </div>
  3144.  
  3145. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  3146. </div>
  3147. </div>
  3148. <!--EVENT end-->
  3149. <!--EVENT-->
  3150. <div class="p-3">
  3151. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3152. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3153.  
  3154. <h1 class="m-0">(NEWEST) EVENT</h1>
  3155. </div>
  3156.  
  3157. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  3158. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  3159. </div>
  3160. </div>
  3161. <!--EVENT end-->
  3162. </div>
  3163. <!--TIMELINE---------------->
  3164. </div>
  3165. </div>
  3166. <!--BOX-------------------------------------------------------->
  3167. <div class="col-lg-8 p-1">
  3168. <div class="card border-0 rounded-0 h-100">
  3169. <div class="container-fluid bg-faded p-0">
  3170. <div class="card p-0 m-1 border-0">
  3171. <!--ROW 1-->
  3172. <div class="row no-gutters justify-content-center">
  3173. <div class="col-lg-9">
  3174. <div class="card border-0 rounded-0 p-1 h-100">
  3175. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  3176. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  3177. </div>
  3178. </div>
  3179. </div>
  3180. <div class="col-lg-3 p-">
  3181. <!--IMAGE-->
  3182. <div class="text-center" style="border: 0px solid;">
  3183. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  3184. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  3185. </div>
  3186. <!--IMAGE END-->
  3187. </div>
  3188. <div class="col-lg-3 p-1">
  3189. <!--INJURY-->
  3190. <div class="p-0">
  3191. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3192. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3193. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  3194. </div>
  3195. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  3196.  
  3197. <ul class="list-unstyled mb-0" style="text-align:left;">
  3198. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  3199. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  3200. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  3201. <li>
  3202. <hr class="mt-0">
  3203. </li>
  3204. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  3205. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  3206. </ul>
  3207. </div>
  3208. </div>
  3209. </div>
  3210. <!--INJURY end-->
  3211. </div>
  3212. <div class="col-lg-3 p-1">
  3213. <!--BODY MOD -->
  3214. <div class="p-0">
  3215. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3216. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3217. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  3218. </div>
  3219. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  3220.  
  3221. <ul class="list-unstyled mb-0" style="text-align:left;">
  3222. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3223. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3224. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3225. <li>
  3226. <hr class="mt-0">
  3227. </li>
  3228. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  3229. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  3230. </ul>
  3231. </div>
  3232. </div>
  3233. </div>
  3234. <!--BODY MOD end-->
  3235. </div>
  3236. <div class="col-lg-6 p-1">
  3237. <!--LIVING STATUS -->
  3238. <div class="p-0">
  3239. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3240. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3241. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  3242. </div>
  3243. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  3244. <!--BASIC INFO-->
  3245. <!--CONTENT-->
  3246.  
  3247. <ul class="list-group list-group-flush">
  3248. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  3249. <!--make sure this is the first item on the list-->
  3250. <span class="text-uppercase text-muted">health</span>
  3251. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  3252. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  3253. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  3254. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  3255. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  3256. </ul>
  3257. <!--content end-->
  3258. <!--basic info end-->
  3259. </div>
  3260. </div>
  3261. </div>
  3262. <!--LIVING STATUS end-->
  3263. </div>
  3264. <div class="col-lg-6 p-1">
  3265. <!--CLOSEST PEOPLE -->
  3266. <div class="p-0">
  3267. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3268. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3269. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  3270. </div>
  3271. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  3272. <div class="row no-gutters">
  3273. <!--PERSON 1 -->
  3274. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3275. <!--PERSON 1 END -->
  3276. <!--PERSON 2 -->
  3277. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3278. <!--PERSON 2 END -->
  3279. <!--PERSON 3 -->
  3280. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3281. <!--PERSON 3 END -->
  3282. <!--PERSON 4 -->
  3283. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3284. <!--PERSON 4 END -->
  3285. <!--PERSON 5 -->
  3286. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3287. <!--PERSON 5 END -->
  3288. <!--PERSON 6 -->
  3289. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3290. <!--PERSON 6 END -->
  3291. </div>
  3292. </div>
  3293. </div>
  3294. </div>
  3295. <!--CLOSEST PEOPLE end-->
  3296. </div>
  3297. <div class="col-lg-6 p-1">
  3298. <!--ENEMIES -->
  3299. <div class="p-0">
  3300. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3301. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3302. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  3303. </div>
  3304. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  3305. <div class="row no-gutters">
  3306. <!--PERSON 1 -->
  3307. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3308. <!--PERSON 1 END -->
  3309. <!--PERSON 2 -->
  3310. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3311. <!--PERSON 2 END -->
  3312. <!--PERSON 3 -->
  3313. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3314. <!--PERSON 3 END -->
  3315. <!--PERSON 4 -->
  3316. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3317. <!--PERSON 4 END -->
  3318. <!--PERSON 5 -->
  3319. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3320. <!--PERSON 5 END -->
  3321. <!--PERSON 6 -->
  3322. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3323. <!--PERSON 6 END -->
  3324. </div>
  3325. </div>
  3326. </div>
  3327. </div>
  3328. <!--ENEMIES end-->
  3329. </div>
  3330. </div>
  3331. </div>
  3332. </div>
  3333. </div>
  3334. </div>
  3335. </div>
  3336. </div>
  3337. <!--BOX END-------------------------------------------------------->
  3338. <!--17 END--------------------------------------------------------->
  3339. <!--16 START--------------------------------------------------------->
  3340. <div class="tab-pane fade" id="age16">
  3341. <div class="row no-gutters justify-content-center">
  3342. <div class="col-lg-4 p-1">
  3343. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  3344. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  3345. <!--- Timeline --->
  3346. <!--EVENT-->
  3347. <div class="p-3">
  3348. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3349. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3350.  
  3351. <h1 class="m-0">(OLDEST) EVENT</h1>
  3352. </div>
  3353.  
  3354. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  3355. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  3356. </div>
  3357. </div>
  3358. <!--EVENT end-->
  3359. <!--EVENT-->
  3360. <div class="p-3">
  3361. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3362. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3363.  
  3364. <h1 class="m-0">EVENT</h1>
  3365. </div>
  3366.  
  3367. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  3368. </div>
  3369. </div>
  3370. <!--EVENT end-->
  3371. <!--EVENT-->
  3372. <div class="p-3">
  3373. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3374. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3375.  
  3376. <h1 class="m-0">(NEWEST) EVENT</h1>
  3377. </div>
  3378.  
  3379. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  3380. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  3381. </div>
  3382. </div>
  3383. <!--EVENT end-->
  3384. </div>
  3385. <!--TIMELINE---------------->
  3386. </div>
  3387. </div>
  3388. <!--BOX-------------------------------------------------------->
  3389. <div class="col-lg-8 p-1">
  3390. <div class="card border-0 rounded-0 h-100">
  3391. <div class="container-fluid bg-faded p-0">
  3392. <div class="card p-0 m-1 border-0">
  3393. <!--ROW 1-->
  3394. <div class="row no-gutters justify-content-center">
  3395. <div class="col-lg-9">
  3396. <div class="card border-0 rounded-0 p-1 h-100">
  3397. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  3398. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  3399. </div>
  3400. </div>
  3401. </div>
  3402. <div class="col-lg-3 p-">
  3403. <!--IMAGE-->
  3404. <div class="text-center" style="border: 0px solid;">
  3405. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  3406. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  3407. </div>
  3408. <!--IMAGE END-->
  3409. </div>
  3410. <div class="col-lg-3 p-1">
  3411. <!--INJURY-->
  3412. <div class="p-0">
  3413. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3414. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3415. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  3416. </div>
  3417. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  3418.  
  3419. <ul class="list-unstyled mb-0" style="text-align:left;">
  3420. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  3421. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  3422. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  3423. <li>
  3424. <hr class="mt-0">
  3425. </li>
  3426. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  3427. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  3428. </ul>
  3429. </div>
  3430. </div>
  3431. </div>
  3432. <!--INJURY end-->
  3433. </div>
  3434. <div class="col-lg-3 p-1">
  3435. <!--BODY MOD -->
  3436. <div class="p-0">
  3437. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3438. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3439. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  3440. </div>
  3441. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  3442.  
  3443. <ul class="list-unstyled mb-0" style="text-align:left;">
  3444. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3445. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3446. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3447. <li>
  3448. <hr class="mt-0">
  3449. </li>
  3450. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  3451. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  3452. </ul>
  3453. </div>
  3454. </div>
  3455. </div>
  3456. <!--BODY MOD end-->
  3457. </div>
  3458. <div class="col-lg-6 p-1">
  3459. <!--LIVING STATUS -->
  3460. <div class="p-0">
  3461. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3462. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3463. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  3464. </div>
  3465. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  3466. <!--BASIC INFO-->
  3467. <!--CONTENT-->
  3468.  
  3469. <ul class="list-group list-group-flush">
  3470. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  3471. <!--make sure this is the first item on the list-->
  3472. <span class="text-uppercase text-muted">health</span>
  3473. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  3474. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  3475. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  3476. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  3477. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  3478. </ul>
  3479. <!--content end-->
  3480. <!--basic info end-->
  3481. </div>
  3482. </div>
  3483. </div>
  3484. <!--LIVING STATUS end-->
  3485. </div>
  3486. <div class="col-lg-6 p-1">
  3487. <!--CLOSEST PEOPLE -->
  3488. <div class="p-0">
  3489. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3490. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3491. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  3492. </div>
  3493. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  3494. <div class="row no-gutters">
  3495. <!--PERSON 1 -->
  3496. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3497. <!--PERSON 1 END -->
  3498. <!--PERSON 2 -->
  3499. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3500. <!--PERSON 2 END -->
  3501. <!--PERSON 3 -->
  3502. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3503. <!--PERSON 3 END -->
  3504. <!--PERSON 4 -->
  3505. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3506. <!--PERSON 4 END -->
  3507. <!--PERSON 5 -->
  3508. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3509. <!--PERSON 5 END -->
  3510. <!--PERSON 6 -->
  3511. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3512. <!--PERSON 6 END -->
  3513. </div>
  3514. </div>
  3515. </div>
  3516. </div>
  3517. <!--CLOSEST PEOPLE end-->
  3518. </div>
  3519. <div class="col-lg-6 p-1">
  3520. <!--ENEMIES -->
  3521. <div class="p-0">
  3522. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3523. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3524. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  3525. </div>
  3526. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  3527. <div class="row no-gutters">
  3528. <!--PERSON 1 -->
  3529. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3530. <!--PERSON 1 END -->
  3531. <!--PERSON 2 -->
  3532. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3533. <!--PERSON 2 END -->
  3534. <!--PERSON 3 -->
  3535. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3536. <!--PERSON 3 END -->
  3537. <!--PERSON 4 -->
  3538. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3539. <!--PERSON 4 END -->
  3540. <!--PERSON 5 -->
  3541. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3542. <!--PERSON 5 END -->
  3543. <!--PERSON 6 -->
  3544. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3545. <!--PERSON 6 END -->
  3546. </div>
  3547. </div>
  3548. </div>
  3549. </div>
  3550. <!--ENEMIES end-->
  3551. </div>
  3552. </div>
  3553. </div>
  3554. </div>
  3555. </div>
  3556. </div>
  3557. </div>
  3558. </div>
  3559. <!--BOX END-------------------------------------------------------->
  3560. <!--16 END--------------------------------------------------------->
  3561. <!--15 START--------------------------------------------------------->
  3562. <div class="tab-pane fade" id="age15">
  3563. <div class="row no-gutters justify-content-center">
  3564. <div class="col-lg-4 p-1">
  3565. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  3566. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  3567. <!--- Timeline --->
  3568. <!--EVENT-->
  3569. <div class="p-3">
  3570. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3571. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3572.  
  3573. <h1 class="m-0">(OLDEST) EVENT</h1>
  3574. </div>
  3575.  
  3576. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  3577. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  3578. </div>
  3579. </div>
  3580. <!--EVENT end-->
  3581. <!--EVENT-->
  3582. <div class="p-3">
  3583. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3584. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3585.  
  3586. <h1 class="m-0">EVENT</h1>
  3587. </div>
  3588.  
  3589. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  3590. </div>
  3591. </div>
  3592. <!--EVENT end-->
  3593. <!--EVENT-->
  3594. <div class="p-3">
  3595. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3596. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3597.  
  3598. <h1 class="m-0">(NEWEST) EVENT</h1>
  3599. </div>
  3600.  
  3601. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  3602. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  3603. </div>
  3604. </div>
  3605. <!--EVENT end-->
  3606. </div>
  3607. <!--TIMELINE---------------->
  3608. </div>
  3609. </div>
  3610. <!--BOX-------------------------------------------------------->
  3611. <div class="col-lg-8 p-1">
  3612. <div class="card border-0 rounded-0 h-100">
  3613. <div class="container-fluid bg-faded p-0">
  3614. <div class="card p-0 m-1 border-0">
  3615. <!--ROW 1-->
  3616. <div class="row no-gutters justify-content-center">
  3617. <div class="col-lg-9">
  3618. <div class="card border-0 rounded-0 p-1 h-100">
  3619. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  3620. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  3621. </div>
  3622. </div>
  3623. </div>
  3624. <div class="col-lg-3 p-">
  3625. <!--IMAGE-->
  3626. <div class="text-center" style="border: 0px solid;">
  3627. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  3628. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  3629. </div>
  3630. <!--IMAGE END-->
  3631. </div>
  3632. <div class="col-lg-3 p-1">
  3633. <!--INJURY-->
  3634. <div class="p-0">
  3635. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3636. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3637. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  3638. </div>
  3639. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  3640.  
  3641. <ul class="list-unstyled mb-0" style="text-align:left;">
  3642. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  3643. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  3644. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  3645. <li>
  3646. <hr class="mt-0">
  3647. </li>
  3648. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  3649. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  3650. </ul>
  3651. </div>
  3652. </div>
  3653. </div>
  3654. <!--INJURY end-->
  3655. </div>
  3656. <div class="col-lg-3 p-1">
  3657. <!--BODY MOD -->
  3658. <div class="p-0">
  3659. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3660. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3661. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  3662. </div>
  3663. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  3664.  
  3665. <ul class="list-unstyled mb-0" style="text-align:left;">
  3666. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3667. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3668. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3669. <li>
  3670. <hr class="mt-0">
  3671. </li>
  3672. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  3673. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  3674. </ul>
  3675. </div>
  3676. </div>
  3677. </div>
  3678. <!--BODY MOD end-->
  3679. </div>
  3680. <div class="col-lg-6 p-1">
  3681. <!--LIVING STATUS -->
  3682. <div class="p-0">
  3683. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3684. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3685. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  3686. </div>
  3687. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  3688. <!--BASIC INFO-->
  3689. <!--CONTENT-->
  3690.  
  3691. <ul class="list-group list-group-flush">
  3692. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  3693. <!--make sure this is the first item on the list-->
  3694. <span class="text-uppercase text-muted">health</span>
  3695. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  3696. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  3697. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  3698. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  3699. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  3700. </ul>
  3701. <!--content end-->
  3702. <!--basic info end-->
  3703. </div>
  3704. </div>
  3705. </div>
  3706. <!--LIVING STATUS end-->
  3707. </div>
  3708. <div class="col-lg-6 p-1">
  3709. <!--CLOSEST PEOPLE -->
  3710. <div class="p-0">
  3711. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3712. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3713. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  3714. </div>
  3715. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  3716. <div class="row no-gutters">
  3717. <!--PERSON 1 -->
  3718. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3719. <!--PERSON 1 END -->
  3720. <!--PERSON 2 -->
  3721. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3722. <!--PERSON 2 END -->
  3723. <!--PERSON 3 -->
  3724. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3725. <!--PERSON 3 END -->
  3726. <!--PERSON 4 -->
  3727. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3728. <!--PERSON 4 END -->
  3729. <!--PERSON 5 -->
  3730. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3731. <!--PERSON 5 END -->
  3732. <!--PERSON 6 -->
  3733. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3734. <!--PERSON 6 END -->
  3735. </div>
  3736. </div>
  3737. </div>
  3738. </div>
  3739. <!--CLOSEST PEOPLE end-->
  3740. </div>
  3741. <div class="col-lg-6 p-1">
  3742. <!--ENEMIES -->
  3743. <div class="p-0">
  3744. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3745. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3746. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  3747. </div>
  3748. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  3749. <div class="row no-gutters">
  3750. <!--PERSON 1 -->
  3751. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3752. <!--PERSON 1 END -->
  3753. <!--PERSON 2 -->
  3754. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3755. <!--PERSON 2 END -->
  3756. <!--PERSON 3 -->
  3757. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3758. <!--PERSON 3 END -->
  3759. <!--PERSON 4 -->
  3760. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3761. <!--PERSON 4 END -->
  3762. <!--PERSON 5 -->
  3763. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3764. <!--PERSON 5 END -->
  3765. <!--PERSON 6 -->
  3766. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3767. <!--PERSON 6 END -->
  3768. </div>
  3769. </div>
  3770. </div>
  3771. </div>
  3772. <!--ENEMIES end-->
  3773. </div>
  3774. </div>
  3775. </div>
  3776. </div>
  3777. </div>
  3778. </div>
  3779. </div>
  3780. </div>
  3781. <!--BOX END-------------------------------------------------------->
  3782. <!--15 END--------------------------------------------------------->
  3783. <!--14 START--------------------------------------------------------->
  3784. <div class="tab-pane fade" id="age14">
  3785. <div class="row no-gutters justify-content-center">
  3786. <div class="col-lg-4 p-1">
  3787. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  3788. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  3789. <!--- Timeline --->
  3790. <!--EVENT-->
  3791. <div class="p-3">
  3792. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3793. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3794.  
  3795. <h1 class="m-0">(OLDEST) EVENT</h1>
  3796. </div>
  3797.  
  3798. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  3799. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  3800. </div>
  3801. </div>
  3802. <!--EVENT end-->
  3803. <!--EVENT-->
  3804. <div class="p-3">
  3805. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3806. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3807.  
  3808. <h1 class="m-0">EVENT</h1>
  3809. </div>
  3810.  
  3811. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  3812. </div>
  3813. </div>
  3814. <!--EVENT end-->
  3815. <!--EVENT-->
  3816. <div class="p-3">
  3817. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3818. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3819.  
  3820. <h1 class="m-0">(NEWEST) EVENT</h1>
  3821. </div>
  3822.  
  3823. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  3824. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  3825. </div>
  3826. </div>
  3827. <!--EVENT end-->
  3828. </div>
  3829. <!--TIMELINE---------------->
  3830. </div>
  3831. </div>
  3832. <!--BOX-------------------------------------------------------->
  3833. <div class="col-lg-8 p-1">
  3834. <div class="card border-0 rounded-0 h-100">
  3835. <div class="container-fluid bg-faded p-0">
  3836. <div class="card p-0 m-1 border-0">
  3837. <!--ROW 1-->
  3838. <div class="row no-gutters justify-content-center">
  3839. <div class="col-lg-9">
  3840. <div class="card border-0 rounded-0 p-1 h-100">
  3841. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  3842. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  3843. </div>
  3844. </div>
  3845. </div>
  3846. <div class="col-lg-3 p-">
  3847. <!--IMAGE-->
  3848. <div class="text-center" style="border: 0px solid;">
  3849. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  3850. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  3851. </div>
  3852. <!--IMAGE END-->
  3853. </div>
  3854. <div class="col-lg-3 p-1">
  3855. <!--INJURY-->
  3856. <div class="p-0">
  3857. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3858. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3859. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  3860. </div>
  3861. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  3862.  
  3863. <ul class="list-unstyled mb-0" style="text-align:left;">
  3864. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  3865. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  3866. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  3867. <li>
  3868. <hr class="mt-0">
  3869. </li>
  3870. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  3871. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  3872. </ul>
  3873. </div>
  3874. </div>
  3875. </div>
  3876. <!--INJURY end-->
  3877. </div>
  3878. <div class="col-lg-3 p-1">
  3879. <!--BODY MOD -->
  3880. <div class="p-0">
  3881. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3882. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3883. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  3884. </div>
  3885. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  3886.  
  3887. <ul class="list-unstyled mb-0" style="text-align:left;">
  3888. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3889. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3890. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD.</li>
  3891. <li>
  3892. <hr class="mt-0">
  3893. </li>
  3894. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  3895. <li class="mb-2"><i class="fa fa-user fa-fw"></i> PREVIOUS BODY MOD.</li>
  3896. </ul>
  3897. </div>
  3898. </div>
  3899. </div>
  3900. <!--BODY MOD end-->
  3901. </div>
  3902. <div class="col-lg-6 p-1">
  3903. <!--LIVING STATUS -->
  3904. <div class="p-0">
  3905. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3906. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3907. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  3908. </div>
  3909. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  3910. <!--BASIC INFO-->
  3911. <!--CONTENT-->
  3912.  
  3913. <ul class="list-group list-group-flush">
  3914. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  3915. <!--make sure this is the first item on the list-->
  3916. <span class="text-uppercase text-muted">health</span>
  3917. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  3918. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  3919. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  3920. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  3921. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  3922. </ul>
  3923. <!--content end-->
  3924. <!--basic info end-->
  3925. </div>
  3926. </div>
  3927. </div>
  3928. <!--LIVING STATUS end-->
  3929. </div>
  3930. <div class="col-lg-6 p-1">
  3931. <!--CLOSEST PEOPLE -->
  3932. <div class="p-0">
  3933. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3934. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3935. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  3936. </div>
  3937. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  3938. <div class="row no-gutters">
  3939. <!--PERSON 1 -->
  3940. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3941. <!--PERSON 1 END -->
  3942. <!--PERSON 2 -->
  3943. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3944. <!--PERSON 2 END -->
  3945. <!--PERSON 3 -->
  3946. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3947. <!--PERSON 3 END -->
  3948. <!--PERSON 4 -->
  3949. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3950. <!--PERSON 4 END -->
  3951. <!--PERSON 5 -->
  3952. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3953. <!--PERSON 5 END -->
  3954. <!--PERSON 6 -->
  3955. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3956. <!--PERSON 6 END -->
  3957. </div>
  3958. </div>
  3959. </div>
  3960. </div>
  3961. <!--CLOSEST PEOPLE end-->
  3962. </div>
  3963. <div class="col-lg-6 p-1">
  3964. <!--ENEMIES -->
  3965. <div class="p-0">
  3966. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  3967. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  3968. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  3969. </div>
  3970. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  3971. <div class="row no-gutters">
  3972. <!--PERSON 1 -->
  3973. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3974. <!--PERSON 1 END -->
  3975. <!--PERSON 2 -->
  3976. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3977. <!--PERSON 2 END -->
  3978. <!--PERSON 3 -->
  3979. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3980. <!--PERSON 3 END -->
  3981. <!--PERSON 4 -->
  3982. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3983. <!--PERSON 4 END -->
  3984. <!--PERSON 5 -->
  3985. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3986. <!--PERSON 5 END -->
  3987. <!--PERSON 6 -->
  3988. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  3989. <!--PERSON 6 END -->
  3990. </div>
  3991. </div>
  3992. </div>
  3993. </div>
  3994. <!--ENEMIES end-->
  3995. </div>
  3996. </div>
  3997. </div>
  3998. </div>
  3999. </div>
  4000. </div>
  4001. </div>
  4002. </div>
  4003. <!--BOX END-------------------------------------------------------->
  4004. <!--14 END--------------------------------------------------------->
  4005. <!--13 START--------------------------------------------------------->
  4006. <div class="tab-pane fade" id="age13">
  4007. <div class="row no-gutters justify-content-center">
  4008. <div class="col-lg-4 p-1">
  4009. <div class="card bg-faded border-0 rounded-0 p-0 h-100">
  4010. <div class="card p-0 m-1 border-0" style="height: 510px; overflow: auto;">
  4011. <!--- Timeline --->
  4012. <!--EVENT-->
  4013. <div class="p-3">
  4014. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  4015. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  4016.  
  4017. <h1 class="m-0">(OLDEST) EVENT</h1>
  4018. </div>
  4019.  
  4020. <p class="p-1" style="text-align: center;">Describe the oldest event here, like the beginning of the story.
  4021. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  4022. </div>
  4023. </div>
  4024. <!--EVENT end-->
  4025. <!--EVENT-->
  4026. <div class="p-3">
  4027. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  4028. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  4029.  
  4030. <h1 class="m-0">EVENT</h1>
  4031. </div>
  4032.  
  4033. <p class="p-1" style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  4034. </div>
  4035. </div>
  4036. <!--EVENT end-->
  4037. <!--EVENT-->
  4038. <div class="p-3">
  4039. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  4040. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  4041.  
  4042. <h1 class="m-0">(NEWEST) EVENT</h1>
  4043. </div>
  4044.  
  4045. <p class="p-1" style="text-align: center;">Describe the most current event here, the ending of the story/your character&#39;s year.
  4046. <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p>
  4047. </div>
  4048. </div>
  4049. <!--EVENT end-->
  4050. </div>
  4051. <!--TIMELINE---------------->
  4052. </div>
  4053. </div>
  4054. <!--BOX-------------------------------------------------------->
  4055. <div class="col-lg-8 p-1">
  4056. <div class="card border-0 rounded-0 h-100">
  4057. <div class="container-fluid bg-faded p-0">
  4058. <div class="card p-0 m-1 border-0">
  4059. <!--ROW 1-->
  4060. <div class="row no-gutters justify-content-center">
  4061. <div class="col-lg-9">
  4062. <div class="card border-0 rounded-0 p-1 h-100">
  4063. <div class="card bg-faded rounded-0 p-0 m-1 border-0">
  4064. <div class="card m-1 rounded-0 border-0 p-1" style="height: 150px; overflow: auto; text-align: justify;">Describe your OC&#39;s year/life here. Explain how did they get the injuries/scars, body modification (like a tattoo or cropped ears in dogs), how did they acquaint certain people and why do they live in the place they&#39;re currently at. Basically a summary of what&#39;s in the other boxes.</div>
  4065. </div>
  4066. </div>
  4067. </div>
  4068. <div class="col-lg-3 p-">
  4069. <!--IMAGE-->
  4070. <div class="text-center" style="border: 0px solid;">
  4071. <div class="p-1" style="transform: rotate(-5deg); z-index: 4; position: relative;"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5px;" class="fr-fic fr-dii" width="157" height="157">
  4072. <i class="fal fa-paperclip" style="position: absolute; top: -5%; right: 9%; color: rgb(115, 115, 115); font-size: 35px;"></i></div>
  4073. </div>
  4074. <!--IMAGE END-->
  4075. </div>
  4076. <div class="col-lg-3 p-1">
  4077. <!--INJURY-->
  4078. <div class="p-0">
  4079. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  4080. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  4081. <div class="card bg-faded border-0 rounded-0 p-1 h-0">Injuries</div>
  4082. </div>
  4083. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  4084.  
  4085. <ul class="list-unstyled mb-0" style="text-align:left;">
  4086. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  4087. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  4088. <li class="mb-2"><i class="far fa-droplet fa-fw"></i> + NEW INJURY</li>
  4089. <li>
  4090. <hr class="mt-0">
  4091. </li>
  4092. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  4093. <li class="mb-2"><i class="fa fa-droplet fa-fw"></i> PREVIOUS INJURY</li>
  4094. </ul>
  4095. </div>
  4096. </div>
  4097. </div>
  4098. <!--INJURY end-->
  4099. </div>
  4100. <div class="col-lg-3 p-1">
  4101. <!--BODY MOD -->
  4102. <div class="p-0">
  4103. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  4104. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  4105. <div class="card bg-faded border-0 rounded-0 p-1 h-0">BODY MODIFICATIONS</div>
  4106. </div>
  4107. <div class="card border-0 rounded-0 p-1 h-0" style="height: 155px; overflow: auto;">
  4108.  
  4109. <ul class="list-unstyled mb-0" style="text-align:left;">
  4110. <li class="mb-2"><i class="far fa-user fa-fw"></i> + none</li>
  4111. <li class="mb-2"><i class="far fa-user fa-fw"></i> + NEW BODY MOD. (feel free to delete this)</li>
  4112. </ul>
  4113. </div>
  4114. </div>
  4115. </div>
  4116. <!--BODY MOD end-->
  4117. </div>
  4118. <div class="col-lg-6 p-1">
  4119. <!--LIVING STATUS -->
  4120. <div class="p-0">
  4121. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  4122. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  4123. <div class="card bg-faded border-0 rounded-0 p-1 h-0">living status</div>
  4124. </div>
  4125. <div class="card border-0 rounded-0 p-0 h-0" style="height: 155px; overflow: auto;">
  4126. <!--BASIC INFO-->
  4127. <!--CONTENT-->
  4128.  
  4129. <ul class="list-group list-group-flush">
  4130. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1" style="border-top:0;">
  4131. <!--make sure this is the first item on the list-->
  4132. <span class="text-uppercase text-muted">health</span>
  4133. <span><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i><i class="far fa-heart"></i></span></li>
  4134. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">build</span>slim/overweight/anorexic</li>
  4135. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">occupation</span>student/works at [place]/jobless</li>
  4136. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">location</span>town/city</li>
  4137. <li class="list-group-item bg-transparent d-flex justify-content-between px-2 py-1"><span class="text-uppercase text-muted">STay</span>parent&#39;s house/apartment/homeless</li>
  4138. </ul>
  4139. <!--content end-->
  4140. <!--basic info end-->
  4141. </div>
  4142. </div>
  4143. </div>
  4144. <!--LIVING STATUS end-->
  4145. </div>
  4146. <div class="col-lg-6 p-1">
  4147. <!--CLOSEST PEOPLE -->
  4148. <div class="p-0">
  4149. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  4150. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  4151. <div class="card bg-faded border-0 rounded-0 p-1 h-0">closest people</div>
  4152. </div>
  4153. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  4154. <div class="row no-gutters">
  4155. <!--PERSON 1 -->
  4156. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  4157. <!--PERSON 1 END -->
  4158. <!--PERSON 2 -->
  4159. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  4160. <!--PERSON 2 END -->
  4161. <!--PERSON 3 -->
  4162. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  4163. <!--PERSON 3 END -->
  4164. <!--PERSON 4 -->
  4165. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  4166. <!--PERSON 4 END -->
  4167. <!--PERSON 5 -->
  4168. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  4169. <!--PERSON 5 END -->
  4170. <!--PERSON 6 -->
  4171. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  4172. <!--PERSON 6 END -->
  4173. </div>
  4174. </div>
  4175. </div>
  4176. </div>
  4177. <!--CLOSEST PEOPLE end-->
  4178. </div>
  4179. <div class="col-lg-6 p-1">
  4180. <!--ENEMIES -->
  4181. <div class="p-0">
  4182. <div class="card bg-faded border-0 rounded-0 p-1 h-0">
  4183. <div class="card border-0 rounded-0 text-center text-muted text-uppercase p-2">
  4184. <div class="card bg-faded border-0 rounded-0 p-1 h-0">enemies</div>
  4185. </div>
  4186. <div class="card border-0 rounded-0 p-1 h-0" style="height: 60px; overflow: auto;">
  4187. <div class="row no-gutters">
  4188. <!--PERSON 1 -->
  4189. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  4190. <!--PERSON 1 END -->
  4191. <!--PERSON 2 -->
  4192. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  4193. <!--PERSON 2 END -->
  4194. <!--PERSON 3 -->
  4195. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  4196. <!--PERSON 3 END -->
  4197. <!--PERSON 4 -->
  4198. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  4199. <!--PERSON 4 END -->
  4200. <!--PERSON 5 -->
  4201. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  4202. <!--PERSON 5 END -->
  4203. <!--PERSON 6 -->
  4204. <span data-toggle="tooltip" title="OC NAME"><a href="#"><img src="https://f2.toyhou.se/file/f2-toyhou-se/characters/13419730?1636239516" class="fr-fic fr-dii" width="50" height="50"></a></span>
  4205. <!--PERSON 6 END -->
  4206. </div>
  4207. </div>
  4208. </div>
  4209. </div>
  4210. <!--ENEMIES end-->
  4211. </div>
  4212. </div>
  4213. </div>
  4214. </div>
  4215. </div>
  4216. <!--BOX END-------------------------------------------------------->
  4217. <!--13 END--------------------------------------------------------->
  4218. </div>
  4219. <!--TAB CONTENT END-->
  4220. </div>
  4221. <!--ROWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW-->
  4222. </div>
  4223.  
  4224. <p class="text-right small">code by @xCaramelCookiex &nbsp;</p>
  4225. <!--END OF THE CONTAINER-->
  4226. </div>
  4227. </div></div>
  4228.  
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!