API tools faq
paste
Advertisement
CrispinAsheYA

Strawberry Milk (Bootstrap)

CrispinAsheYA
Jan 15th, 2025 (edited)
17
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 113.45 KB | Source Code | 0 0
raw download clone embed print report
  1. <!-- PLEASE SEE HERE FOR MY CODE RULES: https://toyhou.se/12931952.bonus-content/17098747.03-terms-of-service --
  2.  
  3. Version: 1.6 (Playlist Updated)
  4.  
  5. Default Colours
  6. -Important Black: #000000
  7. -Important White: #FFFFFF
  8. -
  9. -Default Font-Awesome: fas fa-glass | fas fa-strawberry
  10.  
  11. Thank you for reading!
  12. Crispin
  13.  
  14. -->
  15.  
  16. <!------------------------------- START ACTUAL CODE -------------------------------->
  17. <div class="col-12 p-0" style="font-size:1.1rem; font-family:'comic sans ms'; background-color:#000000; border:#000000 4px solid;">
  18.  
  19. <!------------------------------- START HEADING -------------------------------->
  20. <div class="col-12 m-0 p-0" style="border:#000000 4px solid;">
  21. <div class="card rounded-0" style="background:url(#); background-position:center; background-size:cover; border:none;">
  22. <span class="text-center display-4 m-1 p-3" style="color:#FFFFFF; background:rgba(0,0,0,0.7);">
  23. <a href="https://toyhou.se/26239966.strawberry-milk" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-glass fa-flip-horizontal"></i></span></a>
  24. # - #
  25. <a href="https://toyhou.se/26239966.strawberry-milk" data-toggle="tooltip" title="Code by: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-glass"></i></span></a>
  26. </span>
  27. </div>
  28. </div>
  29. <!------------------------------- END HEADING -------------------------------->
  30.  
  31. <!------------------------------- START TOP BUTTONS -------------------------------->
  32. <div class="col-12 m-0 p-0" style="position:sticky; top:0px; z-index:100;">
  33. <div class="col-12 p-0 m-0 text-center">
  34.  
  35. <ul class="nav nav-tabs card-header-tabs text-center row p-0 m-0">
  36. <li class="col-4 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link px-0" data-toggle="tab" href="#one" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px;">About</a></li>
  37. <li class="col-4 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link px-0" data-toggle="tab" href="#two" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px;">Personality</a></li>
  38. <li class="col-4 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link px-0" data-toggle="tab" href="#three" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px;">Design</a></li>
  39. </ul>
  40. </div>
  41. </div>
  42. <!------------------------------- END TOP BUTTONS -------------------------------->
  43.  
  44. <!------------------------------- START MIDDLE -------------------------------->
  45. <div class="col-12 m-0 p-0">
  46.  
  47. <div class="row no-gutters">
  48.  
  49. <!------------------------------- START SIDE BUTTONS -------------------------------->
  50. <div class="col-12 p-0">
  51. <ul class="nav nav-tabs card-header-tabs row p-0 m-0" style="text-align:center;">
  52. <li class="col-6 col-lg-1 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#four" data-placement="bottom" data-original-title="Life Story" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px"><i class="fas fa-book-bookmark"></i></a></li>
  53. <li class="col-6 col-lg-1 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#ten" data-placement="bottom" data-original-title="Identity" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px"><i class="fas fa-venus-mars"></i></a></li>
  54. <li class="col-6 col-lg-1 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#eleven" data-placement="bottom" data-original-title="Inventory" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px"><i class="fas fa-flask-round-potion"></i></a></li>
  55. <li class="col-6 col-lg-1 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#twelve" data-placement="bottom" data-original-title="Beliefs" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px"><i class="fas fa-ghost"></i></a></li>
  56. <li class="col-6 col-lg-1 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#thirteen" data-placement="bottom" data-original-title="Demeanour" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px"><i class="fas fa-message"></i></a></li>
  57. <li class="col-6 col-lg-1 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#fourteen" data-placement="bottom" data-original-title="Skills" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px"><i class="fas fa-violin"></i></a></li>
  58. <li class="col-6 col-lg-1 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#fifteen" data-placement="bottom" data-original-title="Medical" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px"><i class="fas fa-briefcase-medical"></i></a></li>
  59. <li class="col-6 col-lg-1 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#five" data-placement="bottom" data-original-title="Links" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px"><i class="fas fa-users"></i></a></li>
  60. <li class="col-6 col-lg-1 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#six" data-placement="bottom" data-original-title="Trivia" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px"><i class="fas fa-award"></i></a></li>
  61. <li class="col-6 col-lg-1 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#seven" data-placement="bottom" data-original-title="Headcanons" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px"><i class="fas fa-cannon"></i></a></li>
  62. <li class="col-6 col-lg-1 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#eight" data-placement="bottom" data-original-title="Bonus" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px"><i class="fas fa-bell"></i></a></li>
  63. <li class="col-6 col-lg-1 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#nine" data-placement="bottom" data-original-title="Slander" style="color:#FFFFFF; border:#000000 4px solid; border-radius:0px"><i class="fas fa-saxophone-fire"></i></a></li>
  64. </ul>
  65.  
  66. </div>
  67. <!------------------------------- END SIDE BUTTONS -------------------------------->
  68.  
  69. <!------------------------------- START PAGES -------------------------------->
  70. <div class="col-lg col-12 bg-faded" style="border:#000000 4px solid; border-radius:0px; z-index:50;">
  71.  
  72. <div class="tab-content">
  73.  
  74. <!------------------------------- START PAGE ONE -------------------------------->
  75. <div class="tab-pane active show" id="one">
  76.  
  77. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass fa-flip-horizontal"></i> ABOUT <i class="fas fa-glass"></i></div>
  78.  
  79. <div class="card bg-transparent p-4 border-0 rounded-0">
  80. <div class="row no-gutters">
  81.  
  82. <!------ Start Left Column ------>
  83. <div class="col-lg mr-lg-4 col-12 p-3">
  84.  
  85. <span class="text-primary" style="font-size:1.4rem;">Overview</span><hr class="mt-1 mb-2">
  86. <p>???</p>
  87. <br>
  88.  
  89. <!----- Start Flags ----->
  90. <div class="col-12 my-2 mb-4 text-center">
  91. <div data-toggle="tooltip" title="Pastebinwon'tletmeusethisword" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#E65524,#E65524 20%,#FE9855 20%,#FE9855 40%,#FFD4B8 40%,#FFD4B8 60%,#E17684 60%,#E17684 80%,#C93B5F 80%); line-height:60px; width:80px; font-size:0px;">Censoredbypastebin</div>
  92.  
  93. <div data-toggle="tooltip" title="Gay" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#23918B,#23918B 20%,#5AC6D3 20%,#5AC6D3 40%,#CFEDF8 40%,#CFEDF8 60%,#71B4DA 60%,#71B4DA 80%,#1E5D89 80%);line-height:60px;width:80px; font-size:0px;">Gay</div>
  94.  
  95. <div data-toggle="tooltip" title="Bisexual" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#D70170,#D70170 40%,#AD358A 40%,#AD358A 60%,#432798 60%,#432798);line-height:60px;width:80px; font-size:0px;">Bi</div>
  96.  
  97. <div data-toggle="tooltip" title="Transgender" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#9BBFE1,#9BBFE1 20%,#F5A8BA 20%,#F5A8BA 40%,#FBDCE2 40%,#FBDCE2 60%,#F5A8BA 60%,#F5A8BA 80%,#9BBFE1 80%);line-height:60px;width:80px; font-size:0px;">Trans</div>
  98.  
  99. <div data-toggle="tooltip" title="Non-Binary" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#E1C363,#E1C363 25%,#E1CDF2 25%,#E1CDF2 50%,#9C58D3 50%,#9C58D3 75%,#301C41 75%,#301C41);line-height:60px;width:80px; font-size:0px;">NB</div>
  100.  
  101. <div data-toggle="tooltip" title="Demi-Girl" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#AA8C96,#AA8C96 14%,#D9BBC5 14%,#D9BBC5 28%,#FEAEC9 28%,#FEAEC9 42%,#FFE6F1 42%,#FFE6F1 56%, #FEAEC9 56%,#FEAEC9 70%, #D9BBC5 70%,#D9BBC5 84%,#AA8C96 84%);line-height:60px;width:80px; font-size:0px;">Demigirl</div>
  102.  
  103. <div data-toggle="tooltip" title="Demi-Boy" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#889BA2,#889BA2 14%,#B9CBD5 14%,#B9CBD5 28%,#9AD8ED 28%,#9AD8ED 42%,#E1F3FD 42%,#E1F3FD 56%, #9AD8ED 56%,#9AD8ED 70%, #B9CBD5 70%,#B9CBD5 84%,#889BA2 84%);line-height:60px;width:80px; font-size:0px;">Demiboy</div>
  104.  
  105. <div data-toggle="tooltip" title="Genderfluid" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#FF74A3,#FF74A3 20%,#FFD5E1 20%,#FFD5E1 40%,#D333C7 40%,#D333C7 60%,#4E2430 60%,#4E2430 80%,#734EB5 80%);line-height:60px;width:80px; font-size:0px;">Fluid</div>
  106.  
  107. <div data-toggle="tooltip" title="Asexual" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#230023,#230023 25%,#9B799A 25%,#9B799A 50%,#E1BCE1 50%,#E1BCE1 75%,#820083 75%,#820083);line-height:60px;width:80px; font-size:0px;">Ace</div>
  108.  
  109. <div data-toggle="tooltip" title="Aromantic" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#31B456,#31B456 20%,#9CCE6D 20%,#9CCE6D 40%,#E3F0D4 40%,#E3F0D4 60%,#A7B498 60%,#A7B498 80%,#323F23 80%);line-height:60px;width:80px; font-size:0px;">Aro</div>
  110.  
  111. <div data-toggle="tooltip" title="Aromantic-Asexual" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#E38C01,#E38C01 20%,#EBB701 20%,#EBB701 40%,#F7DCB1 40%,#F7DCB1 60%,#89A49B 60%,#89A49B 80%,#5C513B 80%);line-height:60px;width:80px; font-size:0px;">AroAce</div>
  112.  
  113. <div data-toggle="tooltip" title="Straight" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#2D4046,#2D4046 20%,#596C72 20%,#596C72 40%,#879AA0 40%,#879AA0 60%,#B4C7CD 60%,#B4C7CD 80%,#E1F4FA 80%);line-height:60px;width:80px; font-size:0px;">LiveLaughLove</div>
  114. </div><br>
  115. <!----- End Flags ----->
  116.  
  117. <span class="text-primary" style="font-size:1.4rem;">Basic Info</span><hr class="mt-1 mb-2">
  118. <div class="row">
  119. <div class="col-12 text-center px-3">
  120. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Full Name</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  121. </div>
  122. <div class="col-lg-6 mr-lg-4 col-12 text-center px-3">
  123. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Species</p><hr style="flex-grow:1;"><a href="???"><span class="ml-2">Coaster</span></a></div>
  124. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Birthday</p><hr style="flex-grow:1;"><span class="ml-2">??.??.??</span></div>
  125. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Age</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  126. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Gender</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  127. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Orientation</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  128. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Occupation</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  129. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Story Role</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  130. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Alignment</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  131. </div>
  132. <div class="col-lg col-12 text-center px-3">
  133. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Birthplace</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  134. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Resides</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  135. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Status</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  136. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Relationship</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  137. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Religion</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  138. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Ethnicity</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  139. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Race</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  140. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Voiceclaim</p><hr style="flex-grow:1;"><a href="???"><span class="ml-2">???</span></a></div>
  141. </div>
  142. </div>
  143.  
  144. </div>
  145. <!------ End Left Column ------>
  146.  
  147. <!------ Start Right Column ------>
  148. <div class="col-lg-4 col-12">
  149. <div style="position:sticky; top:20px;">
  150.  
  151. <!------ Start Permissions ------>
  152. <div class="card bg-transparent border-0 rounded-0">
  153. <div class="row no-gutters text-center justify-content-between">
  154.  
  155. <!------ Start Badges ----->
  156. <div data-toggle="tooltip" title="Series: ???" class="bg-info d-inline-block my-2 border-0" style="color:#FFFFFF; line-height:35px; width:35px; border-radius:100%;"><i class="fas fa-strawberry"></i></div><br>
  157.  
  158. <div data-toggle="tooltip" title="Created By: CrispinAsheYA" class="bg-primary d-inline-block my-2 border-0" style="color:#FFFFFF; line-height:35px; width:35px; border-radius:100%;"><i class="fas fa-user"></i></div><br>
  159.  
  160. <div data-toggle="tooltip" title="Designer: CrispinAsheYA" class="bg-primary d-inline-block my-2 border-0" style="color:#FFFFFF; line-height:35px; width:35px; border-radius:100%;"><i class="fas fa-paintbrush"></i></div><br>
  161.  
  162. <div data-toggle="tooltip" title="Lore By: CrispinAsheYA" class="bg-primary d-inline-block my-2 border-0" style="color:#FFFFFF; line-height:35px; width:35px; border-radius:100%;"><i class="fas fa-pen"></i></div><br>
  163.  
  164. <div data-toggle="tooltip" title="Headcanons: Open" class="bg-success d-inline-block my-2 border-0" style="color:#FFFFFF; line-height:35px; width:35px; border-radius:100%;"><i class="fas fa-thought-bubble"></i></div><br>
  165.  
  166. <div data-toggle="tooltip" title="Art: Open" class="bg-success d-inline-block my-2 border-0" style="color:#FFFFFF; line-height:35px; width:35px; border-radius:100%;"><i class="fas fa-paintbrush-pencil"></i></div><br>
  167.  
  168. <div data-toggle="tooltip" title="Roleplay: Friends Only" class="bg-warning d-inline-block my-2 border-0" style="color:#FFFFFF; line-height:35px; width:35px; border-radius:100%;"><i class="fas fa-dice-d20"></i></div><br>
  169.  
  170. <div data-toggle="tooltip" title="Worth: Not For Sale" class="bg-danger d-inline-block my-2 border-0" style="color:#FFFFFF; line-height:35px; width:35px; border-radius:100%;"><i class="fas fa-coins"></i></div><br>
  171. <!------ End Badge ----->
  172.  
  173. </div>
  174. </div>
  175. <!------ End Permissions ------>
  176.  
  177. <!------ Start Images ------>
  178. <div class="tab-content container bg-dark text-center p-3">
  179.  
  180. <div class="tab-pane active" id="form1">
  181. <img src="???" style="width:300px;">
  182. </div>
  183.  
  184. <div class="tab-pane fade" id="form2">
  185. <img src="???" style="width:300px;">
  186. </div>
  187.  
  188. </div>
  189. <!------ End Images ------>
  190.  
  191. <ul class="nav nav-tabs card-header-tabs text-center row p-0 m-0" style="border:#000000 2px solid; border-radius:0px;">
  192. <li class="col-lg-6 col-12 bg-primary nav-item p-0 m-0"><a class="nav-link h-100 px-0" data-toggle="tab" href="#form1" style="color:#FFFFFF; border:#000000 2px solid; border-radius:0px;">Formal (Default)</a></li>
  193. <li class="col-lg-6 col-12 bg-primary nav-item p-0 m-0"><a class="nav-link h-100 px-0" data-toggle="tab" href="#form2" style="color:#FFFFFF; border:#000000 2px solid; border-radius:0px;">Casual</a></li>
  194. </ul>
  195.  
  196. </div>
  197. </div>
  198. <!------ End Right Column ------>
  199.  
  200. </div>
  201. </div>
  202.  
  203. </div>
  204. <!------------------------------- END PAGE ONE -------------------------------->
  205.  
  206. <!------------------------------- START PAGE TWO -------------------------------->
  207. <div class="tab-pane fade" id="two">
  208.  
  209. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass fa-flip-horizontal"></i> PERSONALITY <i class="fas fa-glass"></i></div>
  210.  
  211. <div class="card bg-transparent p-4 border-0 rounded-0">
  212. <div class="row no-gutters">
  213.  
  214. <!------ Start Left Column ------>
  215. <div class="col-lg mr-lg-4 col-12 p-3">
  216.  
  217. <span class="text-primary" style="font-size:1.4rem;">Overview</span><hr class="mt-1 mb-2">
  218. <p>???</p>
  219. <br>
  220.  
  221. <div class="row">
  222. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  223. <span class="text-primary pb-1" style="font-size:1.4rem;">Likes</span><hr class="mt-1 mb-2">
  224. <ul>
  225. <li>???</li>
  226. <li>???</li>
  227. <li>???</li>
  228. </ul>
  229. </div>
  230. <div class="col-lg col-12 my-2 mx-lg-2 p-3">
  231. <span class="text-primary pb-1" style="font-size:1.4rem;">Dislikes</span><hr class="mt-1 mb-2">
  232. <ul>
  233. <li>???</li>
  234. <li>???</li>
  235. <li>???</li>
  236. </ul>
  237. </div>
  238. </div><div class="row">
  239. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  240. <span class="text-primary pb-1" style="font-size:1.4rem;">Goals</span><hr class="mt-1 mb-2">
  241. <ul>
  242. <li>???</li>
  243. <li>???</li>
  244. <li>???</li>
  245. </ul>
  246. </div>
  247. <div class="col-lg col-12 my-2 mx-lg-2 p-3">
  248. <span class="text-primary pb-1" style="font-size:1.4rem;">Dreams</span><hr class="mt-1 mb-2">
  249. <ul>
  250. <li>???</li>
  251. <li>???</li>
  252. <li>???</li>
  253. </ul>
  254. </div>
  255. </div><div class="row">
  256. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  257. <span class="text-primary pb-1" style="font-size:1.4rem;">Regular Fears</span><hr class="mt-1 mb-2">
  258. <ul>
  259. <li>???</li>
  260. <li>???</li>
  261. <li>???</li>
  262. </ul>
  263. </div><div class="col-lg col-12 my-2 mx-lg-2 p-3">
  264. <span class="text-primary pb-1" style="font-size:1.4rem;">Traumatic Fears</span><hr class="mt-1 mb-2">
  265. <ul>
  266. <li>???</li>
  267. <li>???</li>
  268. <li>???</li>
  269. </ul>
  270. </div>
  271. </div><div class="row">
  272. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  273. <span class="text-primary pb-1" style="font-size:1.4rem;">Strengths</span><hr class="mt-1 mb-2">
  274. <ul>
  275. <li>???</li>
  276. <li>???</li>
  277. <li>???</li>
  278. </ul>
  279. </div>
  280. <div class="col-lg col-12 my-2 mx-lg-2 p-3">
  281. <span class="text-primary pb-1" style="font-size:1.4rem;">Weaknesses</span><hr class="mt-1 mb-2">
  282. <ul>
  283. <li>???</li>
  284. <li>???</li>
  285. <li>???</li>
  286. </ul>
  287. </div>
  288. </div><br>
  289.  
  290. <span class="text-primary" style="font-size:1.4rem;">Secrets</span><hr class="mt-1 mb-2">
  291. <ul>
  292. <li><span class="text-primary" style="font-weight:bold;">???</span> - ???</li>
  293. <li><span class="text-primary" style="font-weight:bold;">???</span> - ???</li>
  294. <li><span class="text-primary" style="font-weight:bold;">???</span> - ???</li>
  295. </ul>
  296. <br>
  297.  
  298. <span class="text-primary" style="font-size:1.4rem;">Hobbies And Pass Times</span><hr class="mt-1 mb-2">
  299.  
  300. <!----- Start Hobby ----->
  301. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  302. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  303. <img src="???">
  304. </div>
  305. </div><div class="col-12 col-lg-10">
  306. <span class="text-primary" style="font-size:1.4rem;">???</span><span class="pull-right" style="font-size:1.4rem;">???/5</span><hr class="mt-0 mb-2">
  307. <p>???</p>
  308. </div></div>
  309. <!----- End Hobby ----->
  310.  
  311. <!----- Start Hobby ----->
  312. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  313. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  314. <img src="???">
  315. </div>
  316. </div><div class="col-12 col-lg-10">
  317. <span class="text-primary" style="font-size:1.4rem;">???</span><span class="pull-right" style="font-size:1.4rem;">???/5</span><hr class="mt-0 mb-2">
  318. <p>???</p>
  319. </div></div>
  320. <!----- End Hobby ----->
  321.  
  322. <!----- Start Hobby ----->
  323. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  324. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  325. <img src="???">
  326. </div>
  327. </div><div class="col-12 col-lg-10">
  328. <span class="text-primary" style="font-size:1.4rem;">???</span><span class="pull-right" style="font-size:1.4rem;">???/5</span><hr class="mt-0 mb-2">
  329. <p>???</p>
  330. </div></div>
  331. <!----- End Hobby ----->
  332.  
  333. </div>
  334. <!------ End Left Column ------>
  335.  
  336. <!------ Start Right Column ------>
  337. <div class="col-lg-4 col-12">
  338. <div style="position:sticky; top:20px;">
  339. <div class="container bg-dark text-white p-3">
  340.  
  341. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Type</span><hr class="mt-1 mb-2">
  342. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">MBTI</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  343. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Enneagram</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  344. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Western Zodiac</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  345. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Eastern Zodiac</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  346. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Birth-Flower</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  347. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Birth-Stone</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  348. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Hogwarts House</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  349. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Blood-Type</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  350. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Triforce-Piece</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  351.  
  352. <span class="text-primary justify-content-center pt-2 pb-1" style="font-size:1.4rem;">Favourites</span><hr class="mt-1 mb-2">
  353. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  354. <p class="mr-2" style="flex-grow:0;">Snack Food</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  355. </div>
  356. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  357. <p class="mr-2" style="flex-grow:0;">Meal</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  358. </div>
  359. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  360. <p class="mr-2" style="flex-grow:0;">Cold Drink</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  361. </div>
  362. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  363. <p class="mr-2" style="flex-grow:0;">Hot Drink</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  364. </div>
  365. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  366. <p class="mr-2" style="flex-grow:0;">Animal</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  367. </div>
  368. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  369. <p class="mr-2" style="flex-grow:0;">Colour</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  370. </div>
  371. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  372. <p class="mr-2" style="flex-grow:0;">Time Of Day</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  373. </div>
  374. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  375. <p class="mr-2" style="flex-grow:0;">Season</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  376. </div>
  377. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  378. <p class="mr-2" style="flex-grow:0;">Holiday</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  379. </div>
  380. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  381. <p class="mr-2" style="flex-grow:0;">Sport</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  382. </div>
  383. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  384. <p class="mr-2" style="flex-grow:0;">Song</p><hr style="flex-grow:1;"><span class="ml-2"><a href="???">???</a></span>
  385. </div>
  386. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  387. <p class="mr-2" style="flex-grow:0;">Band</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  388. </div>
  389. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  390. <p class="mr-2" style="flex-grow:0;">Music Genre</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  391. </div>
  392. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  393. <p class="mr-2" style="flex-grow:0;">Book</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  394. </div>
  395. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  396. <p class="mr-2" style="flex-grow:0;">Film</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  397. </div>
  398. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  399. <p class="mr-2" style="flex-grow:0;">Book/Film Genre</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  400. </div>
  401.  
  402. </div>
  403. </div>
  404. </div>
  405. <!------ End Right Column ------>
  406.  
  407. </div>
  408.  
  409. </div>
  410.  
  411. </div>
  412. <!------------------------------- END PAGE TWO -------------------------------->
  413.  
  414. <!------------------------------- START PAGE THREE -------------------------------->
  415. <div class="tab-pane fade" id="three">
  416.  
  417. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> DESIGN <i class="fas fa-glass"></i></div>
  418.  
  419. <div class="card bg-transparent p-4 border-0 rounded-0">
  420. <div class="row no-gutters">
  421.  
  422. <!------ Start Left Column ------>
  423. <div class="col-lg mr-lg-4 col-12 p-3">
  424.  
  425. <!----- Start Ref Sheet ----->
  426. <span class="text-primary" style="font-size:1.4rem;">Reference Sheet</span><hr class="mt-1 mb-2">
  427. <div class="container bg-dark m-4 p-0 rounded-0"<img src="???">
  428. <a href="https://toyhou.se/~images/64864407" data-toggle="tooltip" title="Full Size" style="position:absolute; top:5%; right:5%; color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-glass"></i></a>
  429. </div>
  430. <!----- End Ref Sheet ----->
  431.  
  432. <!----- Start Permissions ----->
  433. <div class="row px-1">
  434. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  435. <span class="text-primary pb-1" style="font-size:1.4rem;">Do</span><hr class="mt-1 mb-2">
  436. <ul>
  437. <li>Global Permissions apply.</li>
  438. <li>NSFW is allowed.</li>
  439. </ul>
  440. </div>
  441. <div class="col-lg col-12 my-2 mx-lg-2 p-3">
  442. <span class="text-primary pb-1" style="font-size:1.4rem;">Don't</span><hr class="mt-1 mb-2">
  443. <ul>
  444. <li>Global "Don't"s apply.</li>
  445. </ul>
  446. </div>
  447. </div><div class="row px-1">
  448. <div class="col-12 my-2 p-3">
  449. <span class="text-primary pb-1" style="font-size:1.4rem;">Frequently Missed</span><hr class="mt-1 mb-2">
  450. <ul>
  451. <li>???</li>
  452. <li>???</li>
  453. <li>???</li>
  454. </ul>
  455. </div>
  456. <div class="col-12 my-2 p-3">
  457. <span class="text-primary pb-1" style="font-size:1.4rem;">Other Notes</span><hr class="mt-1 mb-2">
  458. <ul>
  459. <li>Opposed to feminine clothing, won't wear it.</li>
  460. <li>Has one piercing. It's his right earlobe.</li>
  461. <li>Some of his body parts and accessories correlate to certain parts of his ride experience. Interacting with them can cause damage/changes to the rollercoaster itself. These are:</li>
  462. <ul>
  463. <li>His tie represents his drop.</li>
  464. <li>His sunarrow-downes represent his Top-Section before the drop.</li>
  465. </ul>
  466. </div>
  467. </div>
  468. <!----- End Permissions ----->
  469.  
  470. <!----- Start Favourite Images ----->
  471. <span class="text-primary" style="font-size:1.4rem;">Favourite Images</span><hr class="mt-1 mb-2">
  472. <div class="row no-gutters">
  473. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  474. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  475. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  476. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  477. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  478. </div>
  479. <!----- End Favourite Images ----->
  480.  
  481. </div>
  482. <!------ End Left Column ------>
  483.  
  484. <!------ Start Right Column ------>
  485. <div class="col-lg-4 col-12">
  486. <div style="position:sticky; top:20px;">
  487. <div class="container bg-dark text-white p-3">
  488.  
  489. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Hair</span><hr class="mt-1 mb-2">
  490. <div class="row m-2">
  491. <div class="col-12 mb-1 p-2 justify-content-between" style="color:#FFFFFF; background-color:#1E0F00; border:#000000 2px solid;"><span>Super Black</span><span>#1E0F00</span></div>
  492. </div>
  493.  
  494. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Eyes</span><hr class="mt-1 mb-2">
  495. <div class="row m-2">
  496. <div class="col-12 mb-1 p-2 justify-content-between" style="color:#FFFFFF; background-color:#CE6800; border:#000000 2px solid;"><span>Curry Powder</span><span>#CE6800</span></div>
  497. </div>
  498.  
  499. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Skintone</span><hr class="mt-1 mb-2">
  500. <div class="row m-2">
  501. <div class="col-12 mb-1 p-2 justify-content-between" style="color:#000000; background-color:#FFE1D1; border:#000000 2px solid;"><span>Powdered Peach</span><span>#FFE1D1</span></div>
  502. <div class="col-12 mb-1 p-2 justify-content-between" style="color:#FFFFFF; background-color:#FFBD9C; border:#000000 2px solid;"><span>Blushing Cinnamon</span><span>#FFBD9C</span></div>
  503. </div>
  504.  
  505. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Clothes</span><hr class="mt-1 mb-2">
  506. <div class="row m-2">
  507. <div class="col-12 mb-1 p-2 justify-content-between" style="color:#FFFFFF; background-color:#D9B8A5; border:#000000 2px solid;"><span>Camel Hair</span><span>#D9B8A5</span></div>
  508. <div class="col-12 mb-1 p-2 justify-content-between" style="color:#FFFFFF; background-color:#CE6800; border:#000000 2px solid;"><span>Curry Powder</span><span>#CE6800</span></div>
  509. <div class="col-12 mb-1 p-2 justify-content-between" style="color:#FFFFFF; background-color:#1E0F00; border:#000000 2px solid;"><span>Super Black</span><span>#1E0F00</span></div>
  510. </div>
  511.  
  512. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Accessories</span><hr class="mt-1 mb-2">
  513. <div class="row m-2">
  514. <div class="col-12 mb-1 p-2 justify-content-between" style="color:#FFFFFF; background-color:#CE6800; border:#000000 2px solid;"><span>Curry Powder</span><span>#CE6800</span></div>
  515. </div>
  516.  
  517. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Characteristics</span><hr class="mt-1 mb-2">
  518. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Hair-Type</p><hr style="flex-grow:1;"><span class="ml-2">Straight</span></div>
  519. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Hair-Length</p><hr style="flex-grow:1;"><span class="ml-2">Short</span></div>
  520. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Eye-Vibe</p><hr style="flex-grow:1;"><span class="ml-2">#</span></div>
  521. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Body-Type</p><hr style="flex-grow:1;"><span class="ml-2">Skinny</span></div>
  522. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Height</p><hr style="flex-grow:1;"><span class="ml-2">5"6</span></div>
  523. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Weight</p><hr style="flex-grow:1;"><span class="ml-2">#lbs / #KG</span></div>
  524. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Piercings</p><hr style="flex-grow:1;"><span class="ml-2">Yes</span></div>
  525. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Tattoos</p><hr style="flex-grow:1;"><span class="ml-2">None</span></div>
  526. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Clothing-Style</p><hr style="flex-grow:1;"><span class="ml-2">Business-Casual</span></div>
  527. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Presentation</p><hr style="flex-grow:1;"><span class="ml-2">Masculine/Feminine/Androgynous</span></div>
  528.  
  529. </div>
  530. </div>
  531. </div>
  532. <!------ End Right Column ------>
  533.  
  534. </div>
  535.  
  536. </div>
  537.  
  538. </div>
  539. <!------------------------------- END PAGE THREE -------------------------------->
  540.  
  541. <!------------------------------- START PAGE FOUR -------------------------------->
  542. <div class="tab-pane fade" id="four">
  543.  
  544. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> LIFE STORY <i class="fas fa-glass"></i></div>
  545.  
  546. <div class="card bg-transparent p-4 border-0 rounded-0">
  547.  
  548. <!------ Start Story Texts ------>
  549. <div class="col-12 p-3">
  550.  
  551. <span class="text-primary" style="font-size:1.4rem;">Title - Ages 0-1 (199X-200X)</span><hr class="mt-1 mb-2">
  552. <p>???</p>
  553. <br>
  554.  
  555. </div>
  556. <!------ End Story Texts ------>
  557.  
  558. </div>
  559.  
  560. </div>
  561. <!------------------------------- END PAGE FOUR -------------------------------->
  562.  
  563. <!------------------------------- START PAGE FIVE -------------------------------->
  564. <div class="tab-pane fade" id="five">
  565.  
  566. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> LINKS <i class="fas fa-glass"></i></div>
  567.  
  568. <div class="card bg-transparent p-4 border-0 rounded-0">
  569.  
  570. <!----- Start Buddy ----->
  571. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  572. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  573. <a data-toggle="tooltip" href="???"><img src="???"></a>
  574. </div>
  575. </div><div class="col-12 col-lg-10">
  576. <a href="???" style="font-size:1.4rem;">???</a><span class="text-primary pull-right" style="font-size:1.4rem;">???</span><hr class="mt-0 mb-2">
  577. <p>???</p>
  578. </div></div>
  579. <!----- End Buddy ----->
  580.  
  581. <!----- Start Buddy ----->
  582. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  583. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  584. <a data-toggle="tooltip" href="???"><img src="???"></a>
  585. </div>
  586. </div><div class="col-12 col-lg-10">
  587. <a href="???" style="font-size:1.4rem;">???</a><span class="text-primary pull-right" style="font-size:1.4rem;">???</span><hr class="mt-0 mb-2">
  588. <p>???</p>
  589. </div></div>
  590. <!----- End Buddy ----->
  591.  
  592. <!----- Start Buddy ----->
  593. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  594. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  595. <a data-toggle="tooltip" href="???"><img src="???"></a>
  596. </div>
  597. </div><div class="col-12 col-lg-10">
  598. <a href="???" style="font-size:1.4rem;">???</a><span class="text-primary pull-right" style="font-size:1.4rem;">???</span><hr class="mt-0 mb-2">
  599. <p>???</p>
  600. </div></div>
  601. <!----- End Buddy ----->
  602.  
  603. </div>
  604.  
  605. </div>
  606. <!------------------------------- END PAGE FIVE -------------------------------->
  607.  
  608. <!------------------------------- START PAGE SIX -------------------------------->
  609. <div class="tab-pane fade" id="six">
  610.  
  611. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> TRIVIA <i class="fas fa-glass"></i></div>
  612.  
  613. <div class="card bg-transparent p-4 border-0 rounded-0">
  614.  
  615. <!------ Start Trivia Texts ------>
  616. <div class="col-12 p-3">
  617.  
  618. <span class="text-primary" style="font-size:1.4rem;">Interesting Facts / Canon Trivia</span><hr class="mt-1 mb-2">
  619. <ul>
  620. <li>None.</li>
  621. </ul>
  622. </ul>
  623. <br>
  624.  
  625. <span class="text-primary" style="font-size:1.4rem;">"Word Of God" Trivia</span><hr class="mt-1 mb-2">
  626. <ul>
  627. <li>None.</li>
  628. </ul>
  629. <br>
  630.  
  631. <span class="text-primary" style="font-size:1.4rem;">Developmental Trivia</span><hr class="mt-1 mb-2">
  632. <ul>
  633. <li>??? was created at (??:??) on ??.??.??.</li>
  634. <li>???'s Toyhouse title is "???", ???.</li>
  635. <li>??? First name meaning here ???</li>
  636. <ul>
  637. <li>???</li>
  638. </ul>
  639. </ul>
  640. <br>
  641.  
  642. <span class="text-primary" style="font-size:1.4rem;">Real-Life Rollercoaster Trivia</span><hr class="mt-1 mb-2">
  643. <ul>
  644. <li>None / Remove.</li>
  645. </ul>
  646. <br>
  647.  
  648. <span class="text-primary" style="font-size:1.4rem;">Retcons & Mistakes</span><hr class="mt-1 mb-2">
  649. <ul>
  650. <li>None.</li>
  651. </ul>
  652. <br>
  653.  
  654. <span class="text-primary" style="font-size:1.4rem;">Worth Tracker</span><hr class="mt-1 mb-2">
  655. <ul>
  656. <li><span class="font-weight-bold">Current Worth Is: £17.50</span></li>
  657. <li>DD.MM.YYYY - Commissioned Person - Added £???</li>
  658. <li>DD.MM.YYYY - Made By @CrispinAsheYA - Starting Price £0</li>
  659. </ul>
  660. <br>
  661.  
  662. </div>
  663. <!------ End Trivia Texts ------>
  664.  
  665. </div>
  666.  
  667. </div>
  668. <!------------------------------- END PAGE SIX -------------------------------->
  669.  
  670. <!------------------------------- START PAGE SEVEN -------------------------------->
  671. <div class="tab-pane fade" id="seven">
  672.  
  673. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> HEADCANONS <i class="fas fa-glass"></i></div>
  674.  
  675. <div class="card bg-transparent p-4 border-0 rounded-0">
  676. <div class="col-12 p-3">
  677.  
  678. <!------ Start Headcanons ------>
  679. <span class="text-primary" style="font-size:1.4rem;">Canon</span><hr class="mt-1 mb-2">
  680. <ul>
  681. <li><b>@???</b> - ???</li>
  682. <li><b>@???</b> - ???</li>
  683. <li><b>@???</b> - ???</li>
  684. </ul>
  685. <br>
  686.  
  687. <span class="text-primary" style="font-size:1.4rem;">Maybe</span><hr class="mt-1 mb-2">
  688. <ul>
  689. <li><b>@???</b> - ???</li>
  690. <li><b>@???</b> - ???</li>
  691. <li><b>@???</b> - ???</li>
  692. </ul>
  693. <br>
  694.  
  695. <span class="text-primary" style="font-size:1.4rem;">Not Canon</span><hr class="mt-1 mb-2">
  696. <ul>
  697. <li><b>@???</b> - ???</li>
  698. <li><b>@???</b> - ???</li>
  699. <li><b>@???</b> - ???</li>
  700. </ul>
  701. <br>
  702. <!------ End Headcanons ------>
  703.  
  704. </div>
  705. </div>
  706. </div>
  707. <!------------------------------- END PAGE SEVEN -------------------------------->
  708.  
  709. <!------------------------------- START PAGE EIGHT -------------------------------->
  710. <div class="tab-pane fade" id="eight">
  711.  
  712. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> BONUS <i class="fas fa-glass"></i></div>
  713.  
  714. <div class="card bg-transparent p-4 border-0 rounded-0">
  715. <div class="row no-gutters">
  716.  
  717. <!------ Start Left Column ------>
  718. <div class="col-lg mr-lg-4 col-12 px-3">
  719.  
  720. <!------ Start Awards ------>
  721. <div class="col-12 container text-center mb-2 p-3">
  722. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Awards Cabinet</span><hr class="mt-1 mb-2">
  723. <div class="justify-content-center row no-gutters">
  724.  
  725. <!-- 11 Award -->
  726. <div class="tooltipster px-3 pb-3" title="【 Bean Water 】">
  727. <img src="https://f2.toyhou.se/file/f2-toyhou-se/images/53113264_Bd2k12sBpXJQ56c.png" class="tooltipster" width="50" height="50" data-placement="bottom" title="This Character Participated In Artfight 2018!"></div>
  728. <!-- 11 Award -->
  729.  
  730. </div>
  731. </div>
  732. <!------ End Awards ------>
  733.  
  734. <!------ Start Moodboard ------>
  735. <div class="col-12 container my-2 p-3">
  736. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Moodboard</span><hr class="mt-1 mb-2">
  737.  
  738. <!---- Start Images ---->
  739. <div class="col-12 row mx-auto p-0" style="border:#000000 4px solid;">
  740. <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="???" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  741. <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="???" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  742. <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="???" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  743. <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="???" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  744. <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="???" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  745. <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="???" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  746. <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="???" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  747. <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="???" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  748. <div class="col-12 col-md-6 col-lg-4 m-0 p-0"><img src="???" style="height:250px; width:250px; border:#000000 4px solid;"></div>
  749. </div>
  750. <!---- End Images ---->
  751.  
  752. <!--- Start Credits -->
  753. <div class="m-0 py-2 bg-primary text-center" style="border:#000000 4px solid; border-top:none;">
  754. <a href="???" data-toggle="tooltip" title="Moodboard Image 1 Source"><span style="color:#FFFFFF;"><i class="fas fa-strawberry fa-flip-horizontal"></i></span></a>
  755. <a href="???" data-toggle="tooltip" title="Moodboard Image 2 Source"><span style="color:#FFFFFF;"><i class="fas fa-strawberry fa-flip-horizontal"></i></span></a>
  756. <a href="???" data-toggle="tooltip" title="Moodboard Image 3 Source"><span style="color:#FFFFFF;"><i class="fas fa-strawberry fa-flip-horizontal"></i></span></a>
  757. <a href="???" data-toggle="tooltip" title="Moodboard Image 4 Source"><span style="color:#FFFFFF;"><i class="fas fa-strawberry fa-flip-horizontal"></i></span></a>
  758. <a href="???" data-toggle="tooltip" title="Moodboard Image 5 Source"><span style="color:#FFFFFF;"><i class="fas fa-glass fa-flip-horizontal"></i></span></a>
  759. <a href="???" data-toggle="tooltip" title="Moodboard Image 6 Source"><span style="color:#FFFFFF;"><i class="fas fa-strawberry"></i></span></a>
  760. <a href="???" data-toggle="tooltip" title="Moodboard Image 7 Source"><span style="color:#FFFFFF;"><i class="fas fa-strawberry"></i></span></a>
  761. <a href="???" data-toggle="tooltip" title="Moodboard Image 8 Source"><span style="color:#FFFFFF;"><i class="fas fa-strawberry"></i></span></a>
  762. <a href="???" data-toggle="tooltip" title="Moodboard Image 9 Source"><span style="color:#FFFFFF;"><i class="fas fa-strawberry"></i></span></a>
  763. </div>
  764. <!--- End Credits -->
  765.  
  766. </div>
  767. <!------ End Moodboard ------>
  768.  
  769. <!----- Start Kin/Inspo ----->
  770. <div class="col-12 container my-2 p-3">
  771. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Kin/Inspo List</span><hr class="mt-1 mb-2">
  772.  
  773. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  774. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  775. <a data-toggle="tooltip" href="???"><img src="???"></a>
  776. </div>
  777. </div><div class="col-12 col-lg-10">
  778. <a href="???">???</a><span class="pull-right">???</span><hr class="mt-0 mb-2"><p>???</p>
  779. </div></div>
  780.  
  781. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  782. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  783. <a data-toggle="tooltip" href="???"><img src="???"></a>
  784. </div>
  785. </div><div class="col-12 col-lg-10">
  786. <a href="???">???</a><span class="pull-right">???</span><hr class="mt-0 mb-2"><p>???</p>
  787. </div></div>
  788.  
  789. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  790. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  791. <a data-toggle="tooltip" href="???"><img src="???"></a>
  792. </div>
  793. </div><div class="col-12 col-lg-10">
  794. <a href="???">???</a><span class="pull-right">???</span><hr class="mt-0 mb-2"><p>???</p>
  795. </div></div>
  796. </div>
  797. <!----- End Kin/Inspo ----->
  798.  
  799. <!------ Start Interview ----->
  800. <div class="col-12 container text-center my-2 p-3">
  801. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Interview</span><hr class="mt-1 mb-2">
  802. <h3><i>???</i></h3>
  803. <p>???</p><br>
  804. <h3><i>???</i></h3>
  805. <p>???</p><br>
  806. <h3><i>???</i></h3>
  807. <p>???</p><br>
  808. </div>
  809. <!------ End Interview ----->
  810.  
  811. </div>
  812. <!------ End Left Column ------>
  813.  
  814. <!------ Start Right Column ------>
  815. <div class="col-lg-4 col-12">
  816. <div style="position:sticky; top:20px;">
  817. <div class="container bg-dark text-white p-3">
  818.  
  819. <!------ Start Playlist ------>
  820. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Playlist</span><hr class="mt-1 mb-2">
  821.  
  822. <!-- Start Song -->
  823. <div class="text-center mx-auto p-3" style="max-width:300px;">
  824. <p class="text-primary" style="font-weight:bold;">Title<br>Artist</p>
  825. <div class="card align-items-center justify-content-center rounded-0" style="overflow:hidden; max-width:400px; height:50px; background-color:#000000;"><i class="ml-1 fas fa-play" style="color:#FFFFFF;"></i>
  826. <iframe style="width:500%; height:500%; position:absolute; opacity:.001;"
  827.  
  828. src="https://www.youtube.com/embed/???"></iframe> <!-- Where the ??? is, put the "jN5CYnaZk6w" section of a youtube link found after the "watch?v=" -->
  829.  
  830. </div>
  831. <div class="pb-3"><a class="btn btn-block bg-primary btn-primary text-white rounded-0" href="???">Youtube Link</a></div>
  832. </div>
  833. <!-- End Song -->
  834.  
  835. <!-- Start Song -->
  836. <div class="text-center mx-auto p-3" style="max-width:300px;">
  837. <p class="text-primary" style="font-weight:bold;">Title<br>Artist</p>
  838. <div class="card align-items-center justify-content-center rounded-0" style="overflow:hidden; max-width:400px; height:50px; background-color:#000000;"><i class="ml-1 fas fa-play" style="color:#FFFFFF;"></i>
  839. <iframe style="width:500%; height:500%; position:absolute; opacity:.001;"
  840.  
  841. src="https://www.youtube.com/embed/???"></iframe> <!-- Where the ??? is, put the "jN5CYnaZk6w" section of a youtube link found after the "watch?v=" -->
  842.  
  843. </div>
  844. <div class="pb-3"><a class="btn btn-block bg-primary btn-primary text-white rounded-0" href="???">Youtube Link</a></div>
  845. </div>
  846. <!-- End Song -->
  847.  
  848. <!-- Start Song -->
  849. <div class="text-center mx-auto p-3" style="max-width:300px;">
  850. <p class="text-primary" style="font-weight:bold;">Title<br>Artist</p>
  851. <div class="card align-items-center justify-content-center rounded-0" style="overflow:hidden; max-width:400px; height:50px; background-color:#000000;"><i class="ml-1 fas fa-play" style="color:#FFFFFF;"></i>
  852. <iframe style="width:500%; height:500%; position:absolute; opacity:.001;"
  853.  
  854. src="https://www.youtube.com/embed/???"></iframe> <!-- Where the ??? is, put the "jN5CYnaZk6w" section of a youtube link found after the "watch?v=" -->
  855.  
  856. </div>
  857. <div class="pb-3"><a class="btn btn-block bg-primary btn-primary text-white rounded-0" href="???">Youtube Link</a></div>
  858. </div>
  859. <!-- End Song -->
  860.  
  861. <!------ End Playlist ------>
  862.  
  863. </div>
  864. </div>
  865. </div>
  866. <!------ End Right Column ------>
  867.  
  868. </div>
  869.  
  870. </div>
  871.  
  872. </div>
  873. <!------------------------------- END PAGE EIGHT -------------------------------->
  874.  
  875. <!------------------------------- START PAGE NINE -------------------------------->
  876. <div class="tab-pane fade" id="nine">
  877.  
  878. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> SLANDER <i class="fas fa-glass"></i></div>
  879.  
  880. <div class="card bg-transparent p-4 border-0 rounded-0">
  881. <div class="col-12 p-3">
  882.  
  883. <!----- Start Images ----->
  884. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  885. <!----- End Images ----->
  886.  
  887. </div>
  888. </div>
  889. </div>
  890. <!------------------------------- END PAGE NINE -------------------------------->
  891.  
  892. <!------------------------------- START PAGE TEN -------------------------------->
  893. <div class="tab-pane fade" id="ten">
  894.  
  895. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> IDENTITY <i class="fas fa-glass"></i></div>
  896.  
  897. <div class="card bg-transparent p-4 border-0 rounded-0">
  898. <div class="row no-gutters">
  899.  
  900. <!------ Start Left Column ------>
  901. <div class="col-lg mr-lg-4 col-12">
  902.  
  903. <!----- Start Heritage Percentages ----->
  904. <div class="col-12 container p-3">
  905. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Heritage</span><hr class="mt-1 mb-2">
  906.  
  907. <div class="progress rounded-0 my-2" style="border:#000000 2px solid;">
  908. <div class="progress-bar p-2" style="height:36px; width:12.5%; background-color:#B00B69; border:#000000 2px solid; border-radius:0px;"></div>
  909. <div class="progress-bar p-2" style="height:36px; width:18.75%; background-color:#7544C7; border:#000000 2px solid; border-radius:0px;"></div>
  910. <div class="progress-bar p-2" style="height:36px; width:75%; background-color:#69B00B; border:#000000 2px solid; border-radius:0px;"></div>
  911. </div>
  912.  
  913. <div class="p-3">
  914. <div class="row my-1"><div class="mr-3" style="width:25px; height:25px; border:#000000 2px solid; background-color:#B00B69"></div><p>??? - 12.5% (Mother's Side)</p></div>
  915. <div class="row my-1"><div class="mr-3" style="width:25px; height:25px; border:#000000 2px solid; background-color:#7544C7"></div><p>??? - 18.75% (Mother's Side)</p></div>
  916. <div class="row my-1"><div class="mr-3" style="width:25px; height:25px; border:#000000 2px solid; background-color:#69B00B"></div><p>??? - 75% (Father's Side)</p></div>
  917. </div>
  918. </div>
  919. <!----- End Heritage Percentages ----->
  920.  
  921. <!----- Start Flags They Use ----->
  922. <div class="col-12 container mt-4 p-3">
  923. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Flags They Use</span><hr class="mt-1 mb-2">
  924.  
  925. <!----- Start Flags ----->
  926. <div class="col-12 my-2 mb-4 text-center">
  927. <div data-toggle="tooltip" title="Censoredbypastebin" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#E65524,#E65524 20%,#FE9855 20%,#FE9855 40%,#FFD4B8 40%,#FFD4B8 60%,#E17684 60%,#E17684 80%,#C93B5F 80%); line-height:60px; width:80px; font-size:0px;">L</div>
  928.  
  929. <div data-toggle="tooltip" title="Gay" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#23918B,#23918B 20%,#5AC6D3 20%,#5AC6D3 40%,#CFEDF8 40%,#CFEDF8 60%,#71B4DA 60%,#71B4DA 80%,#1E5D89 80%);line-height:60px;width:80px; font-size:0px;">Gay</div>
  930.  
  931. <div data-toggle="tooltip" title="Bisexual" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#D70170,#D70170 40%,#AD358A 40%,#AD358A 60%,#432798 60%,#432798);line-height:60px;width:80px; font-size:0px;">Bi</div>
  932.  
  933. <div data-toggle="tooltip" title="Transgender" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#9BBFE1,#9BBFE1 20%,#F5A8BA 20%,#F5A8BA 40%,#FBDCE2 40%,#FBDCE2 60%,#F5A8BA 60%,#F5A8BA 80%,#9BBFE1 80%);line-height:60px;width:80px; font-size:0px;">Trans</div>
  934.  
  935. <div data-toggle="tooltip" title="Non-Binary" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#E1C363,#E1C363 25%,#E1CDF2 25%,#E1CDF2 50%,#9C58D3 50%,#9C58D3 75%,#301C41 75%,#301C41);line-height:60px;width:80px; font-size:0px;">NB</div>
  936.  
  937. <div data-toggle="tooltip" title="Demi-Girl" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#AA8C96,#AA8C96 14%,#D9BBC5 14%,#D9BBC5 28%,#FEAEC9 28%,#FEAEC9 42%,#FFE6F1 42%,#FFE6F1 56%, #FEAEC9 56%,#FEAEC9 70%, #D9BBC5 70%,#D9BBC5 84%,#AA8C96 84%);line-height:60px;width:80px; font-size:0px;">Demigirl</div>
  938.  
  939. <div data-toggle="tooltip" title="Demi-Boy" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#889BA2,#889BA2 14%,#B9CBD5 14%,#B9CBD5 28%,#9AD8ED 28%,#9AD8ED 42%,#E1F3FD 42%,#E1F3FD 56%, #9AD8ED 56%,#9AD8ED 70%, #B9CBD5 70%,#B9CBD5 84%,#889BA2 84%);line-height:60px;width:80px; font-size:0px;">Demiboy</div>
  940.  
  941. <div data-toggle="tooltip" title="Genderfluid" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#FF74A3,#FF74A3 20%,#FFD5E1 20%,#FFD5E1 40%,#D333C7 40%,#D333C7 60%,#4E2430 60%,#4E2430 80%,#734EB5 80%);line-height:60px;width:80px; font-size:0px;">Fluid</div>
  942.  
  943. <div data-toggle="tooltip" title="Asexual" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#230023,#230023 25%,#9B799A 25%,#9B799A 50%,#E1BCE1 50%,#E1BCE1 75%,#820083 75%,#820083);line-height:60px;width:80px; font-size:0px;">Ace</div>
  944.  
  945. <div data-toggle="tooltip" title="Aromantic" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#31B456,#31B456 20%,#9CCE6D 20%,#9CCE6D 40%,#E3F0D4 40%,#E3F0D4 60%,#A7B498 60%,#A7B498 80%,#323F23 80%);line-height:60px;width:80px; font-size:0px;">Aro</div>
  946.  
  947. <div data-toggle="tooltip" title="Aromantic-Asexual" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#E38C01,#E38C01 20%,#EBB701 20%,#EBB701 40%,#F7DCB1 40%,#F7DCB1 60%,#89A49B 60%,#89A49B 80%,#5C513B 80%);line-height:60px;width:80px; font-size:0px;">AroAce</div>
  948.  
  949. <div data-toggle="tooltip" title="Straight" class="border-0 rounded-0 d-inline-block" style="background-image:linear-gradient(#2D4046,#2D4046 20%,#596C72 20%,#596C72 40%,#879AA0 40%,#879AA0 60%,#B4C7CD 60%,#B4C7CD 80%,#E1F4FA 80%);line-height:60px;width:80px; font-size:0px;">LiveLaughLove</div>
  950. </div><br>
  951. <!----- End Flags ----->
  952.  
  953. </div>
  954. <!----- End Flags They Use ----->
  955.  
  956. <!----- Start Attraction Table ----->
  957. <div class="col-12 container mt-4 p-3">
  958. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Attraction Table</span><hr class="mt-1 mb-2">
  959.  
  960. <div class="col-12 row no-gutters p-3 mb-4">
  961. <div class="col-3 p-1 text-center"><p class="display-5 mb-4 text-center"><b>People</b></p><hr class="mt-1 mb-2">
  962. <div class="p-3 mb-2">Men</div>
  963. <div class="p-3 mb-2">Women</div>
  964. <div class="p-3 mb-2">Non-Binary</div>
  965. <div class="p-3 mb-2">Masculine</div>
  966. <div class="p-3 mb-2">Feminine</div>
  967. <div class="p-3 mb-2">Androgynous</div>
  968. </div>
  969. <div class="col-3 p-1 text-center"><p class="display-5 mb-4 text-center"><b>Aesthetic</b></p><hr class="mt-1 mb-2">
  970. <div class="p-3 mb-2"><span class="fas fa-check"></span></div>
  971. <div class="p-3 mb-2"><span class="fas fa-check"></span></div>
  972. <div class="p-3 mb-2"><span class="fas fa-check"></span></div>
  973. <div class="p-3 mb-2"><span class="fas fa-check"></span></div>
  974. <div class="p-3 mb-2"><span class="fas fa-check"></span></div>
  975. <div class="p-3 mb-2"><span class="fas fa-check"></span></div>
  976. </div>
  977. <div class="col-3 p-1 text-center"><p class="display-5 mb-4 text-center"><b>Romantic</b></p><hr class="mt-1 mb-2">
  978. <div class="p-3 mb-2"><span class="fas fa-question"></span></div>
  979. <div class="p-3 mb-2"><span class="fas fa-question"></span></div>
  980. <div class="p-3 mb-2"><span class="fas fa-question"></span></div>
  981. <div class="p-3 mb-2"><span class="fas fa-question"></span></div>
  982. <div class="p-3 mb-2"><span class="fas fa-question"></span></div>
  983. <div class="p-3 mb-2"><span class="fas fa-question"></span></div>
  984. </div>
  985. <div class="col-3 p-1 text-center"><p class="display-5 mb-4 text-center"><b>Sexual</b></p><hr class="mt-1 mb-2">
  986. <div class="p-3 mb-2"><span class="fas fa-times"></span></div>
  987. <div class="p-3 mb-2"><span class="fas fa-times"></span></div>
  988. <div class="p-3 mb-2"><span class="fas fa-times"></span></div>
  989. <div class="p-3 mb-2"><span class="fas fa-times"></span></div>
  990. <div class="p-3 mb-2"><span class="fas fa-times"></span></div>
  991. <div class="p-3 mb-2"><span class="fas fa-times"></span></div>
  992. </div>
  993. </div>
  994.  
  995. </div>
  996.  
  997. </div>
  998. <!------ End Left Column ------>
  999.  
  1000. <!------ Start Right Column ------>
  1001. <div class="col-lg-4 col-12">
  1002. <div style="position:sticky; top:20px;">
  1003. <div class="container bg-dark text-white p-3">
  1004.  
  1005. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Basic Info</span><hr class="mt-1 mb-2">
  1006. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Name</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1007. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Sex</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1008. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Gender</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1009. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Pronouns</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1010. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Romantic Orientation</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1011. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Sexual Orientation</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1012. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Ethnicity</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1013. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Nationality</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1014. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Race</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1015. </div>
  1016. </div>
  1017. </div>
  1018. <!------ End Right Column ------>
  1019.  
  1020. </div>
  1021. </div>
  1022.  
  1023. </div>
  1024. <!------------------------------- END PAGE TEN -------------------------------->
  1025.  
  1026. <!------------------------------- START PAGE ELEVEN -------------------------------->
  1027. <div class="tab-pane fade" id="eleven">
  1028.  
  1029. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> INVENTORY <i class="fas fa-glass"></i></div>
  1030.  
  1031. <div class="card bg-transparent p-4 border-0 rounded-0">
  1032. <div class="col-12 p-3">
  1033.  
  1034. <div class="row no-gutters">
  1035.  
  1036. <!------ Start Left Column ------>
  1037. <div class="col-lg mr-lg-4 col-12 px-3">
  1038.  
  1039. <!------ Start Inventory ------>
  1040. <div class="col-12 container text-center mb-2 p-3">
  1041. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Inventory</span><hr class="mt-1 mb-2">
  1042. <div class="justify-content-center row no-gutters">
  1043.  
  1044. <!-- Inventory Item -->
  1045. <div class="bg-dark tooltipster m-2 p-3" title="【 # 】">
  1046. <img src="???" class="tooltipster" width="100" height="100" data-placement="bottom" title="#"></div>
  1047. <!-- Inventory Item -->
  1048.  
  1049. <!-- Inventory Item -->
  1050. <div class="bg-dark tooltipster m-2 p-3" title="【 # 】">
  1051. <img src="???" class="tooltipster" width="100" height="100" data-placement="bottom" title="#"></div>
  1052. <!-- Inventory Item -->
  1053.  
  1054. <!-- Inventory Item -->
  1055. <div class="bg-dark tooltipster m-2 p-3" title="【 # 】">
  1056. <img src="???" class="tooltipster" width="100" height="100" data-placement="bottom" title="#"></div>
  1057. <!-- Inventory Item -->
  1058.  
  1059. <!-- Inventory Item -->
  1060. <div class="bg-dark tooltipster m-2 p-3" title="【 # 】">
  1061. <img src="???" class="tooltipster" width="100" height="100" data-placement="bottom" title="#"></div>
  1062. <!-- Inventory Item -->
  1063.  
  1064. <!-- Inventory Item -->
  1065. <div class="bg-dark tooltipster m-2 p-3" title="【 # 】">
  1066. <img src="#" class="tooltipster" width="100" height="100" data-placement="bottom" title="#"></div>
  1067. <!-- Inventory Item -->
  1068.  
  1069. <!-- Inventory Item -->
  1070. <div class="bg-dark tooltipster m-2 p-3" title="【 # 】">
  1071. <img src="#" class="tooltipster" width="100" height="100" data-placement="bottom" title="#"></div>
  1072. <!-- Inventory Item -->
  1073.  
  1074. </div>
  1075.  
  1076. </div>
  1077. <!------ End Inventory ------>
  1078.  
  1079. </div>
  1080. <!------ End Left Column ------>
  1081.  
  1082. <!------ Start Right Column ------>
  1083. <div class="col-lg-4 col-12">
  1084. <div style="position:sticky; top:20px;">
  1085. <div class="container bg-dark text-white p-3">
  1086.  
  1087. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Outfits</span><hr class="mt-1 mb-2">
  1088.  
  1089. <!------ Start Images ------>
  1090. <div class="tab-content container bg-transparent text-center p-3">
  1091.  
  1092. <div class="tab-pane active" id="everyday">
  1093. <img src="???" style="width:300px;">
  1094. </div>
  1095.  
  1096. <div class="tab-pane fade" id="pyjamas">
  1097. <img src="???" style="width:300px;">
  1098. </div>
  1099.  
  1100. <div class="tab-pane fade" id="spring">
  1101. <img src="???" style="width:300px;">
  1102. </div>
  1103.  
  1104. <div class="tab-pane fade" id="summer">
  1105. <img src="???" style="width:300px;">
  1106. </div>
  1107.  
  1108. <div class="tab-pane fade" id="autumn">
  1109. <img src="???" style="width:300px;">
  1110. </div>
  1111.  
  1112. <div class="tab-pane fade" id="winter">
  1113. <img src="???" style="width:300px;">
  1114. </div>
  1115.  
  1116. <div class="tab-pane fade" id="casual">
  1117. <img src="???" style="width:300px;">
  1118. </div>
  1119.  
  1120. <div class="tab-pane fade" id="formal">
  1121. <img src="???" style="width:300px;">
  1122. </div>
  1123.  
  1124. </div>
  1125. <!------ End Images ------>
  1126.  
  1127. <!------ Start Outfit Buttons ------>
  1128. <ul class="nav nav-tabs card-header-tabs text-center row p-0 m-0" style="border:#000000 2px solid; border-radius:0px;">
  1129. <li class="col-lg-6 col-12 nav-item p-0 m-0"><a class="bg-primary btn-primary nav-link h-100 px-0" data-toggle="tab" href="#everyday" style="color:#FFFFFF; border:#000000 2px solid; border-radius:0px;">Everyday</a></li>
  1130. <li class="col-lg-6 col-12 nav-item p-0 m-0"><a class="bg-primary btn-primary nav-link h-100 px-0" data-toggle="tab" href="#pyjamas" style="color:#FFFFFF; border:#000000 2px solid; border-radius:0px;">Pyjamas</a></li>
  1131. <li class="col-lg-6 col-12 nav-item p-0 m-0"><a class="bg-primary btn-primary nav-link h-100 px-0" data-toggle="tab" href="#spring" style="color:#FFFFFF; border:#000000 2px solid; border-radius:0px;">Spring</a></li>
  1132. <li class="col-lg-6 col-12 nav-item p-0 m-0"><a class="bg-primary btn-primary nav-link h-100 px-0" data-toggle="tab" href="#summer" style="color:#FFFFFF; border:#000000 2px solid; border-radius:0px;">Summer</a></li>
  1133. <li class="col-lg-6 col-12 nav-item p-0 m-0"><a class="bg-primary btn-primary nav-link h-100 px-0" data-toggle="tab" href="#autumn" style="color:#FFFFFF; border:#000000 2px solid; border-radius:0px;">Autumn</a></li>
  1134. <li class="col-lg-6 col-12 nav-item p-0 m-0"><a class="bg-primary btn-primary nav-link h-100 px-0" data-toggle="tab" href="#winter" style="color:#FFFFFF; border:#000000 2px solid; border-radius:0px;">Winter</a></li>
  1135. <li class="col-lg-6 col-12 nav-item p-0 m-0"><a class="bg-primary btn-primary nav-link h-100 px-0" data-toggle="tab" href="#casual" style="color:#FFFFFF; border:#000000 2px solid; border-radius:0px;">Casual</a></li>
  1136. <li class="col-lg-6 col-12 nav-item p-0 m-0"><a class="bg-primary btn-primary nav-link h-100 px-0" data-toggle="tab" href="#formal" style="color:#FFFFFF; border:#000000 2px solid; border-radius:0px;">Formal</a></li>
  1137. </ul>
  1138. <!------ End Outfit Buttons ------>
  1139.  
  1140. </div>
  1141. </div>
  1142. </div>
  1143. <!------ End Right Column ------>
  1144.  
  1145. </div>
  1146.  
  1147. </div>
  1148. </div>
  1149. </div>
  1150. <!------------------------------- END PAGE ELEVEN -------------------------------->
  1151.  
  1152. <!------------------------------- START PAGE TWELVE -------------------------------->
  1153. <div class="tab-pane fade" id="twelve">
  1154.  
  1155. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> BELIEFS <i class="fas fa-glass"></i></div>
  1156.  
  1157. <div class="card bg-transparent p-4 border-0 rounded-0">
  1158. <div class="row no-gutters">
  1159.  
  1160. <!------ Start Left Column ------>
  1161. <div class="col-lg mr-lg-4 col-12 p-3">
  1162.  
  1163. <span class="text-primary" style="font-size:1.4rem;">Religious Beliefs</span><hr class="mt-1 mb-2">
  1164. <p>???</p>
  1165. <br>
  1166.  
  1167. <span class="text-primary" style="font-size:1.4rem;">Morality</span><hr class="mt-1 mb-2">
  1168. <p>???</p>
  1169. <br>
  1170.  
  1171. <span class="text-primary" style="font-size:1.4rem;">Do They Consider Themself A Good Person?</span><hr class="mt-1 mb-2">
  1172. <p>???</p>
  1173. <br>
  1174.  
  1175. <span class="text-primary" style="font-size:1.4rem;">Ever Encountered Something Unexplainable?</span><hr class="mt-1 mb-2">
  1176. <p>???</p>
  1177. <br>
  1178.  
  1179. </div>
  1180. <!------ End Left Column ------>
  1181.  
  1182. <!------ Start Right Column ------>
  1183. <div class="col-lg-4 col-12">
  1184. <div style="position:sticky; top:20px;">
  1185. <div class="container bg-dark text-white p-3">
  1186.  
  1187. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Belief In...</span><hr class="mt-1 mb-2">
  1188.  
  1189. <div class="col-12 my-2 text-center">
  1190. <span>Thiest (of Religion of Choice)</span><hr class="mt-1 mb-2">
  1191. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1192. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1193. </div>
  1194. </div><br>
  1195.  
  1196. <div class="col-12 my-2 text-center">
  1197. <span>The Afterlife</span><hr class="mt-1 mb-2">
  1198. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1199. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1200. </div>
  1201. </div><br>
  1202.  
  1203. <div class="col-12 my-2 text-center">
  1204. <span>Destiny</span><hr class="mt-1 mb-2">
  1205. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1206. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1207. </div>
  1208. </div><br>
  1209.  
  1210. <div class="col-12 my-2 text-center">
  1211. <span>Ghosts / Spirits</span><hr class="mt-1 mb-2">
  1212. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1213. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1214. </div>
  1215. </div><br>
  1216.  
  1217. <div class="col-12 my-2 text-center">
  1218. <span>Good & Evil</span><hr class="mt-1 mb-2">
  1219. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1220. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1221. </div>
  1222. </div><br>
  1223.  
  1224. <div class="col-12 my-2 text-center">
  1225. <span>Karma</span><hr class="mt-1 mb-2">
  1226. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1227. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1228. </div>
  1229. </div><br>
  1230.  
  1231. <div class="col-12 my-2 text-center">
  1232. <span>Magic</span><hr class="mt-1 mb-2">
  1233. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1234. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1235. </div>
  1236. </div><br>
  1237.  
  1238. <div class="col-12 my-2 text-center">
  1239. <span>Luck</span><hr class="mt-1 mb-2">
  1240. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1241. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1242. </div>
  1243. </div><br>
  1244.  
  1245. <div class="col-12 my-2 text-center">
  1246. <span>Horoscopes</span><hr class="mt-1 mb-2">
  1247. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1248. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1249. </div>
  1250. </div><br>
  1251.  
  1252. <div class="col-12 my-2 text-center">
  1253. <span>Soulmates</span><hr class="mt-1 mb-2">
  1254. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1255. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1256. </div>
  1257. </div><br>
  1258.  
  1259. <div class="col-12 my-2 text-center">
  1260. <span>Superstition</span><hr class="mt-1 mb-2">
  1261. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1262. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1263. </div>
  1264. </div><br>
  1265.  
  1266. <div class="col-12 my-2 text-center">
  1267. <span>Reincarnation</span><hr class="mt-1 mb-2">
  1268. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1269. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1270. </div>
  1271. </div><br>
  1272.  
  1273. <div class="col-12 my-2 text-center">
  1274. <span>Curses/Hexes/Blessings</span><hr class="mt-1 mb-2">
  1275. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1276. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1277. </div>
  1278. </div><br>
  1279.  
  1280. </div>
  1281. </div>
  1282. </div>
  1283. <!------ End Right Column ------>
  1284.  
  1285. </div>
  1286.  
  1287. </div>
  1288.  
  1289. </div>
  1290. <!------------------------------- END PAGE TWELVE -------------------------------->
  1291.  
  1292. <!------------------------------- START PAGE THIRTEEN -------------------------------->
  1293. <div class="tab-pane fade" id="thirteen">
  1294.  
  1295. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> DEMEANOUR <i class="fas fa-glass"></i></div>
  1296.  
  1297. <div class="card bg-transparent p-4 border-0 rounded-0">
  1298. <div class="row no-gutters">
  1299.  
  1300. <!------ Start Left Column ------>
  1301. <div class="col-lg mr-lg-4 col-12 p-3">
  1302.  
  1303. <span class="text-primary" style="font-size:1.4rem;">Overview</span><hr class="mt-1 mb-2">
  1304. <p>???</p>
  1305. <br>
  1306.  
  1307. <!------ Start Descriptions ------>
  1308. <div class="row">
  1309. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  1310. <span class="text-primary pb-1" style="font-size:1.4rem;">Posture</span><hr class="mt-1 mb-2">
  1311. <p>???</p>
  1312. </div>
  1313. <div class="col-lg col-12 my-2 mx-lg-2 p-3">
  1314. <span class="text-primary pb-1" style="font-size:1.4rem;">Habits</span><hr class="mt-1 mb-2">
  1315. <p>???</p>
  1316. <p>???</p>
  1317. <p>???</p>
  1318. </div>
  1319. </div><div class="row">
  1320. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  1321. <span class="text-primary pb-1" style="font-size:1.4rem;">Cry</span><hr class="mt-1 mb-2">
  1322. <p>???</p>
  1323. </div><div class="col-lg col-12 my-2 mx-lg-2 p-3">
  1324. <span class="text-primary pb-1" style="font-size:1.4rem;">Anger</span><hr class="mt-1 mb-2">
  1325. <p>???</p>
  1326. </div><div class="col-12 my-2 p-3">
  1327. <span class="text-primary pb-1" style="font-size:1.4rem;">Laugh</span><hr class="mt-1 mb-2">
  1328. <p>???</p>
  1329. </div>
  1330. </div><br>
  1331. <!------ End Descriptions ------>
  1332.  
  1333. <!------ Start Quotes ------>
  1334. <span class="text-primary" style="font-size:1.4rem;">Quotes</span><hr class="mt-1 mb-2">
  1335. <div class="font-italics">
  1336. <ul>
  1337. <li>"???"</li>
  1338. <li>"???"</li>
  1339. <li>"???"</li>
  1340. </ul>
  1341. </div>
  1342. <br>
  1343. <!------ End Quotes ------>
  1344.  
  1345. <!----- Start Handwriting ----->
  1346. <span class="text-primary" style="font-size:1.4rem;">Handwriting</span><hr class="mt-1 mb-2">
  1347. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  1348. <!----- End Handwriting ----->
  1349.  
  1350. </div>
  1351. <!------ End Left Column ------>
  1352.  
  1353. <!------ Start Right Column ------>
  1354. <div class="col-lg-4 col-12">
  1355. <div style="position:sticky; top:20px;">
  1356. <div class="container bg-dark text-white p-3">
  1357.  
  1358. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Idiolect Notes</span><hr class="mt-1 mb-2">
  1359. <ul>
  1360. <li>Swearing?</li>
  1361. <li>Uses British/American English.</li>
  1362. <ul>
  1363. <li>Calls it a biscuit instead of a cookie.</li>
  1364. <li>Calls it petrol instead of gas.</li>
  1365. <li>Calls it a car park instead of a parking lot.</li>
  1366. </ul>
  1367. <li>Speaks with a ??? Accent but doesn't use any of the dialect words.</li>
  1368. <ul>
  1369. <li>If applicable.</li>
  1370. </ul>
  1371. </ul>
  1372.  
  1373. </div>
  1374. </div>
  1375. </div>
  1376. <!------ End Right Column ------>
  1377.  
  1378. </div>
  1379.  
  1380. </div>
  1381.  
  1382. </div>
  1383. <!------------------------------- END PAGE THIRTEEN -------------------------------->
  1384.  
  1385. <!------------------------------- START PAGE FOURTEEN -------------------------------->
  1386. <div class="tab-pane fade" id="fourteen">
  1387.  
  1388. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> SKILLS <i class="fas fa-glass"></i></div>
  1389.  
  1390. <div class="card bg-transparent p-4 border-0 rounded-0">
  1391. <div class="row no-gutters">
  1392.  
  1393. <!------ Start Left Column ------>
  1394. <div class="col-lg mr-lg-4 col-12 p-3">
  1395.  
  1396. <span class="text-primary" style="font-size:1.4rem;">Overview</span><hr class="mt-1 mb-2">
  1397. <p>???</p>
  1398. <br>
  1399.  
  1400. <!------ Start Strengths & Weaknesses ------>
  1401. <div class="row">
  1402.  
  1403. <div class="col-lg-6 col-12 container my-2 mx-lg-2 p-3">
  1404. <span class="text-primary pb-1" style="font-size:1.4rem;">Strengths</span><hr class="mt-1 mb-2">
  1405. <p><span class="font-weight-bold">???</span><br>???</p>
  1406. <p><span class="font-weight-bold">???</span><br>???</p>
  1407. <p><span class="font-weight-bold">???</span><br>???</p>
  1408. </div>
  1409.  
  1410. <div class="col-lg col-12 container my-2 mx-lg-2 p-3">
  1411. <span class="text-primary pb-1" style="font-size:1.4rem;">Weaknesses</span><hr class="mt-1 mb-2">
  1412. <p><span class="font-weight-bold">???</span><br>???</p>
  1413. <p><span class="font-weight-bold">???</span><br>???</p>
  1414. <p><span class="font-weight-bold">???</span><br>???</p>
  1415. </div>
  1416.  
  1417. </div>
  1418. <!------ End Strengths & Weaknesses ------>
  1419.  
  1420. <!------ Start Languages ------>
  1421. <div class="col-12 my-2 mb-4 p-0">
  1422. <span class="text-primary" style="font-size:1.4rem;">Languages Spoken</span><hr class="mt-1 mb-2">
  1423.  
  1424. <div class="container text-white bg-dark d-flex text-center mt-2 p-3" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">English</p><hr style="flex-grow:1;"><span class="ml-2">Fluent</span></div>
  1425.  
  1426. <div class="container text-white bg-dark d-flex text-center mt-2 p-3" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">???</p><hr style="flex-grow:1;"><span class="ml-2">Toddler Level</span></div>
  1427.  
  1428. <div class="container text-white bg-dark d-flex text-center mt-2 p-3" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">???</p><hr style="flex-grow:1;"><span class="ml-2">Occasional Phrase</span></div>
  1429.  
  1430. </div>
  1431. <!------ End Languages ------>
  1432.  
  1433. <!------ Start Talents & Skills ------>
  1434. <div class="row">
  1435.  
  1436. <div class="col-lg-6 col-12 container my-2 mx-lg-2 p-3">
  1437. <span class="text-primary pb-1" style="font-size:1.4rem;">Natural Talents</span><hr class="mt-1 mb-2">
  1438. <p><span class="font-weight-bold">???</span><br>???</p>
  1439. <p><span class="font-weight-bold">???</span><br>???</p>
  1440. <p><span class="font-weight-bold">???</span><br>???</p>
  1441. </div>
  1442.  
  1443. <div class="col-lg col-12 container my-2 mx-lg-2 p-3">
  1444. <span class="text-primary pb-1" style="font-size:1.4rem;">Learned Skills</span><hr class="mt-1 mb-2">
  1445. <p><span class="font-weight-bold">???</span><br>???</p>
  1446. <p><span class="font-weight-bold">???</span><br>???</p>
  1447. <p><span class="font-weight-bold">???</span><br>???</p>
  1448. </div>
  1449.  
  1450. </div>
  1451. <!------ End Talents & Skills ------>
  1452.  
  1453. </div>
  1454. <!------ End Left Column ------>
  1455.  
  1456. <!------ Start Right Column ------>
  1457. <div class="col-lg-4 col-12">
  1458. <div style="position:sticky; top:20px;">
  1459. <div class="container bg-dark text-white p-3">
  1460.  
  1461. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Skills</span><hr class="mt-1 mb-2">
  1462.  
  1463. <div class="col-12 my-2 text-center">
  1464. <span>Book Smart</span><hr class="mt-1 mb-2">
  1465. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1466. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1467. </div>
  1468. </div><br>
  1469.  
  1470. <div class="col-12 my-2 text-center">
  1471. <span>Street Smart</span><hr class="mt-1 mb-2">
  1472. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1473. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1474. </div>
  1475. </div><br>
  1476.  
  1477. <div class="col-12 my-2 text-center">
  1478. <span>People Smart</span><hr class="mt-1 mb-2">
  1479. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1480. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1481. </div>
  1482. </div><br>
  1483.  
  1484. <div class="col-12 my-2 text-center">
  1485. <span>Physical Strength</span><hr class="mt-1 mb-2">
  1486. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1487. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1488. </div>
  1489. </div><br>
  1490.  
  1491. <div class="col-12 my-2 text-center">
  1492. <span>Endurance</span><hr class="mt-1 mb-2">
  1493. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1494. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1495. </div>
  1496. </div><br>
  1497.  
  1498. <div class="col-12 my-2 text-center">
  1499. <span>Speed</span><hr class="mt-1 mb-2">
  1500. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1501. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1502. </div>
  1503. </div><br>
  1504.  
  1505. <div class="col-12 my-2 text-center">
  1506. <span>Kindness</span><hr class="mt-1 mb-2">
  1507. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1508. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1509. </div>
  1510. </div><br>
  1511.  
  1512. <div class="col-12 my-2 text-center">
  1513. <span>Charisma</span><hr class="mt-1 mb-2">
  1514. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1515. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1516. </div>
  1517. </div><br>
  1518.  
  1519. <div class="col-12 my-2 text-center">
  1520. <span>Patience</span><hr class="mt-1 mb-2">
  1521. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1522. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1523. </div>
  1524. </div><br>
  1525.  
  1526. <div class="col-12 my-2 text-center">
  1527. <span>Loyalty</span><hr class="mt-1 mb-2">
  1528. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1529. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1530. </div>
  1531. </div><br>
  1532.  
  1533. <div class="col-12 my-2 text-center">
  1534. <span>Genorosity</span><hr class="mt-1 mb-2">
  1535. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1536. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1537. </div>
  1538. </div><br>
  1539.  
  1540. <div class="col-12 my-2 text-center">
  1541. <span>Work Ethic</span><hr class="mt-1 mb-2">
  1542. <div class="progress" style="background-color:#000000; border:#000000 4px solid; border-radius:0px;">
  1543. <div class="progress-bar border-0 rounded-0" style="width:50%; color:#FFFFFF;">50%<br></div>
  1544. </div>
  1545. </div><br>
  1546.  
  1547. </div>
  1548. </div>
  1549. </div>
  1550. <!------ End Right Column ------>
  1551.  
  1552. </div>
  1553.  
  1554. </div>
  1555.  
  1556. </div>
  1557. <!------------------------------- END PAGE FOURTEEN -------------------------------->
  1558.  
  1559. <!------------------------------- START PAGE FIFTEEN -------------------------------->
  1560. <div class="tab-pane fade" id="fifteen">
  1561.  
  1562. <div class="bg-dark text-primary text-uppercase text-center display-4 p-4"><i class="fas fa-glass"></i> MEDICAL HISTORY <i class="fas fa-glass"></i></div>
  1563.  
  1564. <div class="card bg-transparent p-4 border-0 rounded-0">
  1565. <div class="row no-gutters">
  1566.  
  1567. <!------ Start Left Column ------>
  1568. <div class="col-lg mr-lg-4 col-12 p-3">
  1569.  
  1570. <span class="text-primary" style="font-size:1.4rem;">Notable Events</span><hr class="mt-1 mb-2">
  1571. <ul>
  1572. <li>2022 - Age ??- ???</li>
  1573. <li>12th June 2023 - Age ?? - ???</li>
  1574. </ul>
  1575. <br>
  1576.  
  1577. <!------ Start Conditions ------>
  1578. <div class="row">
  1579.  
  1580. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  1581. <span class="text-primary pb-1" style="font-size:1.4rem;">Diagnosed Conditiions</span><hr class="mt-1 mb-2">
  1582. <ul>
  1583. <li>???</li>
  1584. </ul>
  1585. </div>
  1586.  
  1587. <div class="col-lg col-12 my-2 mx-lg-2 p-3">
  1588. <span class="text-primary pb-1" style="font-size:1.4rem;">Suspected Conditions</span><hr class="mt-1 mb-2">
  1589. <ul>
  1590. <li>???</li>
  1591. </ul>
  1592. </div>
  1593. </div>
  1594. <!------ End Conditions ------>
  1595.  
  1596. <!------ Start "Do They Do These?" ------>
  1597. <div class="row">
  1598.  
  1599. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  1600. <span class="text-primary pb-1" style="font-size:1.4rem;">Alcohol</span><hr class="mt-1 mb-2">
  1601. <p>???</p>
  1602. </div>
  1603. <div class="col-lg col-12 my-2 mx-lg-2 p-3">
  1604. <span class="text-primary pb-1" style="font-size:1.4rem;">Smoking</span><hr class="mt-1 mb-2">
  1605. <p>???</p>
  1606. </div>
  1607. <div class="col-12 my-2 p-3">
  1608. <span class="text-primary pb-1" style="font-size:1.4rem;">Drug Usage</span><hr class="mt-1 mb-2">
  1609. <p>???</p>
  1610. </div>
  1611.  
  1612. </div>
  1613. <!------ End "Do They Do These?" ------>
  1614.  
  1615. </div>
  1616. <!------ End Left Column ------>
  1617.  
  1618. <!------ Start Right Column ------>
  1619. <div class="col-lg-4 col-12">
  1620. <div style="position:sticky; top:20px;">
  1621. <div class="container bg-dark text-white p-3">
  1622.  
  1623. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Basic Info</span><hr class="mt-1 mb-2">
  1624. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Species</p><hr style="flex-grow:1;"><a href="???"><span class="ml-2">???</span></a></div>
  1625. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Age</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1626. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Blood-Type</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1627. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Body-Type</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1628. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Height</p><hr style="flex-grow:1;"><span class="ml-2">???</span></div>
  1629. <div class="d-flex text-center mt-2" style="flex-direction:row;"><p class="mr-2" style="flex-grow:0;">Weight</p><hr style="flex-grow:1;"><span class="ml-2">???lbs / ???KG</span></div>
  1630.  
  1631. </div>
  1632. </div>
  1633. </div>
  1634. <!------ End Right Column ------>
  1635.  
  1636. </div>
  1637.  
  1638. </div>
  1639.  
  1640. </div>
  1641. <!------------------------------- END PAGE FIFTEEN -------------------------------->
  1642.  
  1643. </div>
  1644.  
  1645. </div>
  1646. <!------------------------------- END PAGES -------------------------------->
  1647.  
  1648. </div>
  1649.  
  1650. </div>
  1651. <!------------------------------- END MIDDLE -------------------------------->
  1652.  
  1653. <!------------------------------- START GALLERY-BUTTON -------------------------------->
  1654. <div class="col-12 bg-primary text-center py-3" style="border:#000000 4px solid;">
  1655. <a href="???" style="color:#FFFFFF; font-size:1.4rem;"><i class="fas fa-glass fa-flip-horizontal"></i> GALLERY <i class="fas fa-glass"></i></li>
  1656. </div>
  1657. <!------------------------------- END GALLERY-BUTTON -------------------------------->
  1658.  
  1659. <!------------------------------- START CREDITS LIST -------------------------------->
  1660. <div class="col-12 bg-primary py-2 text-center" style="font-size:1.4rem; border:#000000 4px solid;">
  1661.  
  1662. <a href="???" data-toggle="tooltip" title="Header Image Source"><span style="color:#FFFFFF;"><i class="fas fa-strawberry fa-flip-horizontal"></i></span></a>
  1663. <a href="https://toyhou.se/16006417.overlay" data-toggle="tooltip" title="Header Code Frankensteined From: CuckooHoopoe"><span style="color:#FFFFFF;"><i class="fas fa-strawberry fa-flip-horizontal"></i></span></a>
  1664. <a href="https://toyhou.se/26239966.strawberry-milk" data-toggle="tooltip" title="Code By: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-glass"></i></span></a>
  1665. <a href="https://toyhou.se/16962387.html-pride-flags" data-toggle="tooltip" title="Pride Flags Frankensteined From: VynxCodes"><span style="color:#FFFFFF;"><i class="fas fa-strawberry"></i></span></a>
  1666. <a href="https://toyhou.se/15560571.ribbon-repository-upd8-510" data-toggle="tooltip" title="Ribbon Awards From: RadioStorage"><span style="color:#FFFFFF;"><i class="fas fa-strawberry"></i></span></a>
  1667.  
  1668. </div>
  1669. <!------------------------------- END CREDITS LIST -------------------------------->
  1670.  
  1671. </div>
  1672. <!------------------------------- END ACTUAL CODE -------------------------------->
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!