Advertisement
CrispinAsheYA

Chocolate Milk (Bootstrap)

Jan 15th, 2025
9
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 63.42 KB | Source Code | 0 0
  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-candy-bar fa-rotate-90
  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="#onea" 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="#twoa" 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="#threea" 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-2 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#foura" 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-2 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#fivea" 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>
  54. <li class="col-6 col-lg-2 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#sixa" 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>
  55. <li class="col-6 col-lg-2 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#sevena" 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>
  56. <li class="col-6 col-lg-2 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#eighta" 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>
  57. <li class="col-6 col-lg-2 bg-primary btn-primary nav-item p-0 m-0"><a class="bg-primary nav-link tooltipster px-0" data-toggle="tab" href="#ninea" 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>
  58. </ul>
  59.  
  60. </div>
  61. <!------------------------------- END SIDE BUTTONS -------------------------------->
  62.  
  63. <!------------------------------- START PAGES -------------------------------->
  64. <div class="col-lg col-12 bg-faded" style="border:#000000 4px solid; border-radius:0px; z-index:50;">
  65.  
  66. <div class="tab-content">
  67.  
  68. <!------------------------------- START PAGE ONE -------------------------------->
  69. <div class="tab-pane active show" id="onea">
  70.  
  71. <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>
  72.  
  73. <div class="card bg-transparent p-4 border-0 rounded-0">
  74. <div class="row no-gutters">
  75.  
  76. <!------ Start Left Column ------>
  77. <div class="col-lg mr-lg-4 col-12 p-3">
  78.  
  79. <span class="text-primary" style="font-size:1.4rem;">Overview</span><hr class="mt-1 mb-2">
  80. <p>???</p>
  81. <br>
  82.  
  83. <!----- Start Flags ----->
  84. <div class="col-12 my-2 mb-4 text-center">
  85. <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>
  86.  
  87. <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>
  88.  
  89. <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>
  90.  
  91. <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>
  92.  
  93. <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>
  94.  
  95. <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>
  96.  
  97. <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>
  98.  
  99. <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>
  100.  
  101. <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>
  102.  
  103. <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>
  104.  
  105. <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>
  106.  
  107. <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>
  108. </div><br>
  109. <!----- End Flags ----->
  110.  
  111. <span class="text-primary" style="font-size:1.4rem;">Basic Info</span><hr class="mt-1 mb-2">
  112. <div class="row">
  113. <div class="col-12 text-center px-3">
  114. <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>
  115. </div>
  116. <div class="col-lg-6 mr-lg-4 col-12 text-center px-3">
  117. <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>
  118. <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>
  119. <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>
  120. <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>
  121. <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>
  122. <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>
  123. <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>
  124. <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>
  125. </div>
  126. <div class="col-lg col-12 text-center px-3">
  127. <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>
  128. <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>
  129. <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>
  130. <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>
  131. <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>
  132. <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>
  133. <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>
  134. <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>
  135. </div>
  136. </div>
  137.  
  138. </div>
  139. <!------ End Left Column ------>
  140.  
  141. <!------ Start Right Column ------>
  142. <div class="col-lg-4 col-12">
  143. <div style="position:sticky; top:20px;">
  144.  
  145. <!------ Start Permissions ------>
  146. <div class="card bg-transparent border-0 rounded-0">
  147. <div class="row no-gutters text-center justify-content-between">
  148.  
  149. <!------ Start Badges ----->
  150. <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-candy-bar fa-rotate-90"></i></div><br>
  151.  
  152. <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>
  153.  
  154. <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>
  155.  
  156. <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>
  157.  
  158. <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>
  159.  
  160. <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>
  161.  
  162. <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>
  163.  
  164. <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>
  165. <!------ End Badge ----->
  166.  
  167. </div>
  168. </div>
  169. <!------ End Permissions ------>
  170.  
  171. <!------ Start Images ------>
  172. <div class="tab-content container bg-dark text-center p-3">
  173.  
  174. <div class="tab-pane active" id="form1">
  175. <img src="???" style="width:300px;">
  176. </div>
  177.  
  178. <div class="tab-pane fade" id="form2">
  179. <img src="???" style="width:300px;">
  180. </div>
  181.  
  182. </div>
  183. <!------ End Images ------>
  184.  
  185. <ul class="nav nav-tabs card-header-tabs text-center row p-0 m-0" style="border:#000000 2px solid; border-radius:0px;">
  186. <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>
  187. <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>
  188. </ul>
  189.  
  190. </div>
  191. </div>
  192. <!------ End Right Column ------>
  193.  
  194. </div>
  195. </div>
  196.  
  197. </div>
  198. <!------------------------------- END PAGE ONE -------------------------------->
  199.  
  200. <!------------------------------- START PAGE TWO -------------------------------->
  201. <div class="tab-pane fade" id="twoa">
  202.  
  203. <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>
  204.  
  205. <div class="card bg-transparent p-4 border-0 rounded-0">
  206. <div class="row no-gutters">
  207.  
  208. <!------ Start Left Column ------>
  209. <div class="col-lg mr-lg-4 col-12 p-3">
  210.  
  211. <span class="text-primary" style="font-size:1.4rem;">Overview</span><hr class="mt-1 mb-2">
  212. <p>???</p>
  213. <br>
  214.  
  215. <div class="row">
  216. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  217. <span class="text-primary pb-1" style="font-size:1.4rem;">Likes</span><hr class="mt-1 mb-2">
  218. <ul>
  219. <li>???</li>
  220. <li>???</li>
  221. <li>???</li>
  222. </ul>
  223. </div>
  224. <div class="col-lg col-12 my-2 mx-lg-2 p-3">
  225. <span class="text-primary pb-1" style="font-size:1.4rem;">Dislikes</span><hr class="mt-1 mb-2">
  226. <ul>
  227. <li>???</li>
  228. <li>???</li>
  229. <li>???</li>
  230. </ul>
  231. </div>
  232. </div><div class="row">
  233. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  234. <span class="text-primary pb-1" style="font-size:1.4rem;">Goals</span><hr class="mt-1 mb-2">
  235. <ul>
  236. <li>???</li>
  237. <li>???</li>
  238. <li>???</li>
  239. </ul>
  240. </div>
  241. <div class="col-lg col-12 my-2 mx-lg-2 p-3">
  242. <span class="text-primary pb-1" style="font-size:1.4rem;">Dreams</span><hr class="mt-1 mb-2">
  243. <ul>
  244. <li>???</li>
  245. <li>???</li>
  246. <li>???</li>
  247. </ul>
  248. </div>
  249. </div><div class="row">
  250. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  251. <span class="text-primary pb-1" style="font-size:1.4rem;">Regular Fears</span><hr class="mt-1 mb-2">
  252. <ul>
  253. <li>???</li>
  254. <li>???</li>
  255. <li>???</li>
  256. </ul>
  257. </div><div class="col-lg col-12 my-2 mx-lg-2 p-3">
  258. <span class="text-primary pb-1" style="font-size:1.4rem;">Traumatic Fears</span><hr class="mt-1 mb-2">
  259. <ul>
  260. <li>???</li>
  261. <li>???</li>
  262. <li>???</li>
  263. </ul>
  264. </div>
  265. </div><div class="row">
  266. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  267. <span class="text-primary pb-1" style="font-size:1.4rem;">Strengths</span><hr class="mt-1 mb-2">
  268. <ul>
  269. <li>???</li>
  270. <li>???</li>
  271. <li>???</li>
  272. </ul>
  273. </div>
  274. <div class="col-lg col-12 my-2 mx-lg-2 p-3">
  275. <span class="text-primary pb-1" style="font-size:1.4rem;">Weaknesses</span><hr class="mt-1 mb-2">
  276. <ul>
  277. <li>???</li>
  278. <li>???</li>
  279. <li>???</li>
  280. </ul>
  281. </div>
  282. </div><br>
  283.  
  284. <span class="text-primary" style="font-size:1.4rem;">Secrets</span><hr class="mt-1 mb-2">
  285. <ul>
  286. <li><span class="text-primary" style="font-weight:bold;">???</span> - ???</li>
  287. <li><span class="text-primary" style="font-weight:bold;">???</span> - ???</li>
  288. <li><span class="text-primary" style="font-weight:bold;">???</span> - ???</li>
  289. </ul>
  290. <br>
  291.  
  292. <span class="text-primary" style="font-size:1.4rem;">Hobbies And Pass Times</span><hr class="mt-1 mb-2">
  293.  
  294. <!----- Start Hobby ----->
  295. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  296. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  297. <img src="???">
  298. </div>
  299. </div><div class="col-12 col-lg-10">
  300. <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">
  301. <p>???</p>
  302. </div></div>
  303. <!----- End Hobby ----->
  304.  
  305. <!----- Start Hobby ----->
  306. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  307. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  308. <img src="???">
  309. </div>
  310. </div><div class="col-12 col-lg-10">
  311. <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">
  312. <p>???</p>
  313. </div></div>
  314. <!----- End Hobby ----->
  315.  
  316. <!----- Start Hobby ----->
  317. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  318. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  319. <img src="???">
  320. </div>
  321. </div><div class="col-12 col-lg-10">
  322. <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">
  323. <p>???</p>
  324. </div></div>
  325. <!----- End Hobby ----->
  326.  
  327. </div>
  328. <!------ End Left Column ------>
  329.  
  330. <!------ Start Right Column ------>
  331. <div class="col-lg-4 col-12">
  332. <div style="position:sticky; top:20px;">
  333. <div class="container bg-dark text-white p-3">
  334.  
  335. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Type</span><hr class="mt-1 mb-2">
  336. <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>
  337. <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>
  338. <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>
  339. <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>
  340. <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>
  341. <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>
  342. <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>
  343. <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>
  344. <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>
  345.  
  346. <span class="text-primary justify-content-center pt-2 pb-1" style="font-size:1.4rem;">Favourites</span><hr class="mt-1 mb-2">
  347. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  348. <p class="mr-2" style="flex-grow:0;">Snack Food</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  349. </div>
  350. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  351. <p class="mr-2" style="flex-grow:0;">Meal</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  352. </div>
  353. <div class="d-flex text-center mt-2" style="flex-direction:row;">
  354. <p class="mr-2" style="flex-grow:0;">Cold Drink</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;">Hot Drink</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;">Animal</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;">Colour</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;">Time Of Day</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;">Season</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;">Holiday</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;">Sport</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;">Song</p><hr style="flex-grow:1;"><span class="ml-2"><a href="???">???</a></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;">Band</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;">Music Genre</p><hr style="flex-grow:1;"><span class="ml-2">???</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;">Book</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;">Film</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/Film Genre</p><hr style="flex-grow:1;"><span class="ml-2">???</span>
  394. </div>
  395.  
  396. </div>
  397. </div>
  398. </div>
  399. <!------ End Right Column ------>
  400.  
  401. </div>
  402.  
  403. </div>
  404.  
  405. </div>
  406. <!------------------------------- END PAGE TWO -------------------------------->
  407.  
  408. <!------------------------------- START PAGE THREE -------------------------------->
  409. <div class="tab-pane fade" id="threea">
  410.  
  411. <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>
  412.  
  413. <div class="card bg-transparent p-4 border-0 rounded-0">
  414. <div class="row no-gutters">
  415.  
  416. <!------ Start Left Column ------>
  417. <div class="col-lg mr-lg-4 col-12 p-3">
  418.  
  419. <!----- Start Ref Sheet ----->
  420. <span class="text-primary" style="font-size:1.4rem;">Reference Sheet</span><hr class="mt-1 mb-2">
  421. <div class="container bg-dark m-4 p-0 rounded-0"<img src="???">
  422. <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>
  423. </div>
  424. <!----- End Ref Sheet ----->
  425.  
  426. <!----- Start Permissions ----->
  427. <div class="row px-1">
  428. <div class="col-lg-6 col-12 my-2 mx-lg-2 p-3">
  429. <span class="text-primary pb-1" style="font-size:1.4rem;">Do</span><hr class="mt-1 mb-2">
  430. <ul>
  431. <li>Global Permissions apply.</li>
  432. <li>NSFW is allowed.</li>
  433. </ul>
  434. </div>
  435. <div class="col-lg col-12 my-2 mx-lg-2 p-3">
  436. <span class="text-primary pb-1" style="font-size:1.4rem;">Don't</span><hr class="mt-1 mb-2">
  437. <ul>
  438. <li>Global "Don't"s apply.</li>
  439. </ul>
  440. </div>
  441. </div><div class="row px-1">
  442. <div class="col-12 my-2 p-3">
  443. <span class="text-primary pb-1" style="font-size:1.4rem;">Frequently Missed</span><hr class="mt-1 mb-2">
  444. <ul>
  445. <li>???</li>
  446. <li>???</li>
  447. <li>???</li>
  448. </ul>
  449. </div>
  450. <div class="col-12 my-2 p-3">
  451. <span class="text-primary pb-1" style="font-size:1.4rem;">Other Notes</span><hr class="mt-1 mb-2">
  452. <ul>
  453. <li>Opposed to feminine clothing, won't wear it.</li>
  454. <li>Has one piercing. It's his right earlobe.</li>
  455. <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>
  456. <ul>
  457. <li>His tie represents his drop.</li>
  458. <li>His sunarrow-downes represent his Top-Section before the drop.</li>
  459. </ul>
  460. </div>
  461. </div>
  462. <!----- End Permissions ----->
  463.  
  464. <!----- Start Favourite Images ----->
  465. <span class="text-primary" style="font-size:1.4rem;">Favourite Images</span><hr class="mt-1 mb-2">
  466. <div class="row no-gutters">
  467. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  468. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  469. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  470. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  471. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  472. </div>
  473. <!----- End Favourite Images ----->
  474.  
  475. </div>
  476. <!------ End Left Column ------>
  477.  
  478. <!------ Start Right Column ------>
  479. <div class="col-lg-4 col-12">
  480. <div style="position:sticky; top:20px;">
  481. <div class="container bg-dark text-white p-3">
  482.  
  483. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Hair</span><hr class="mt-1 mb-2">
  484. <div class="row m-2">
  485. <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>
  486. </div>
  487.  
  488. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Eyes</span><hr class="mt-1 mb-2">
  489. <div class="row m-2">
  490. <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>
  491. </div>
  492.  
  493. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Skintone</span><hr class="mt-1 mb-2">
  494. <div class="row m-2">
  495. <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>
  496. <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>
  497. </div>
  498.  
  499. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Clothes</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:#FFFFFF; background-color:#D9B8A5; border:#000000 2px solid;"><span>Camel Hair</span><span>#D9B8A5</span></div>
  502. <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>
  503. <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>
  504. </div>
  505.  
  506. <span class="justify-content-center text-center pb-1" style="font-size:1.4rem;">Accessories</span><hr class="mt-1 mb-2">
  507. <div class="row m-2">
  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>
  510.  
  511. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Characteristics</span><hr class="mt-1 mb-2">
  512. <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>
  513. <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>
  514. <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>
  515. <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>
  516. <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>
  517. <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>
  518. <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>
  519. <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>
  520. <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>
  521. <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>
  522.  
  523. </div>
  524. </div>
  525. </div>
  526. <!------ End Right Column ------>
  527.  
  528. </div>
  529.  
  530. </div>
  531.  
  532. </div>
  533. <!------------------------------- END PAGE THREE -------------------------------->
  534.  
  535. <!------------------------------- START PAGE FOUR -------------------------------->
  536. <div class="tab-pane fade" id="foura">
  537.  
  538. <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>
  539.  
  540. <div class="card bg-transparent p-4 border-0 rounded-0">
  541.  
  542. <!------ Start Story Texts ------>
  543. <div class="col-12 p-3">
  544.  
  545. <span class="text-primary" style="font-size:1.4rem;">Title - Ages 0-1 (199X-200X)</span><hr class="mt-1 mb-2">
  546. <p>???</p>
  547. <br>
  548.  
  549. </div>
  550. <!------ End Story Texts ------>
  551.  
  552. </div>
  553.  
  554. </div>
  555. <!------------------------------- END PAGE FOUR -------------------------------->
  556.  
  557. <!------------------------------- START PAGE FIVE -------------------------------->
  558. <div class="tab-pane fade" id="fivea">
  559.  
  560. <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>
  561.  
  562. <div class="card bg-transparent p-4 border-0 rounded-0">
  563.  
  564. <!----- Start Buddy ----->
  565. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  566. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  567. <a data-toggle="tooltip" href="???"><img src="???"></a>
  568. </div>
  569. </div><div class="col-12 col-lg-10">
  570. <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">
  571. <p>???</p>
  572. </div></div>
  573. <!----- End Buddy ----->
  574.  
  575. <!----- Start Buddy ----->
  576. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  577. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  578. <a data-toggle="tooltip" href="???"><img src="???"></a>
  579. </div>
  580. </div><div class="col-12 col-lg-10">
  581. <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">
  582. <p>???</p>
  583. </div></div>
  584. <!----- End Buddy ----->
  585.  
  586. <!----- Start Buddy ----->
  587. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  588. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  589. <a data-toggle="tooltip" href="???"><img src="???"></a>
  590. </div>
  591. </div><div class="col-12 col-lg-10">
  592. <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">
  593. <p>???</p>
  594. </div></div>
  595. <!----- End Buddy ----->
  596.  
  597. </div>
  598.  
  599. </div>
  600. <!------------------------------- END PAGE FIVE -------------------------------->
  601.  
  602. <!------------------------------- START PAGE SIX -------------------------------->
  603. <div class="tab-pane fade" id="sixa">
  604.  
  605. <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>
  606.  
  607. <div class="card bg-transparent p-4 border-0 rounded-0">
  608.  
  609. <!------ Start Trivia Texts ------>
  610. <div class="col-12 p-3">
  611.  
  612. <span class="text-primary" style="font-size:1.4rem;">Interesting Facts / Canon Trivia</span><hr class="mt-1 mb-2">
  613. <ul>
  614. <li>None.</li>
  615. </ul>
  616. </ul>
  617. <br>
  618.  
  619. <span class="text-primary" style="font-size:1.4rem;">"Word Of God" Trivia</span><hr class="mt-1 mb-2">
  620. <ul>
  621. <li>None.</li>
  622. </ul>
  623. <br>
  624.  
  625. <span class="text-primary" style="font-size:1.4rem;">Developmental Trivia</span><hr class="mt-1 mb-2">
  626. <ul>
  627. <li>??? was created at (??:??) on ??.??.??.</li>
  628. <li>???'s Toyhouse title is "???", ???.</li>
  629. <li>??? First name meaning here ???</li>
  630. <ul>
  631. <li>???</li>
  632. </ul>
  633. </ul>
  634. <br>
  635.  
  636. <span class="text-primary" style="font-size:1.4rem;">Real-Life Rollercoaster Trivia</span><hr class="mt-1 mb-2">
  637. <ul>
  638. <li>None / Remove.</li>
  639. </ul>
  640. <br>
  641.  
  642. <span class="text-primary" style="font-size:1.4rem;">Retcons & Mistakes</span><hr class="mt-1 mb-2">
  643. <ul>
  644. <li>None.</li>
  645. </ul>
  646. <br>
  647.  
  648. <span class="text-primary" style="font-size:1.4rem;">Worth Tracker</span><hr class="mt-1 mb-2">
  649. <ul>
  650. <li><span class="font-weight-bold">Current Worth Is: £17.50</span></li>
  651. <li>DD.MM.YYYY - Commissioned Person - Added £???</li>
  652. <li>DD.MM.YYYY - Made By @CrispinAsheYA - Starting Price £0</li>
  653. </ul>
  654. <br>
  655.  
  656. </div>
  657. <!------ End Trivia Texts ------>
  658.  
  659. </div>
  660.  
  661. </div>
  662. <!------------------------------- END PAGE SIX -------------------------------->
  663.  
  664. <!------------------------------- START PAGE SEVEN -------------------------------->
  665. <div class="tab-pane fade" id="sevena">
  666.  
  667. <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>
  668.  
  669. <div class="card bg-transparent p-4 border-0 rounded-0">
  670. <div class="col-12 p-3">
  671.  
  672. <!------ Start Headcanons ------>
  673. <span class="text-primary" style="font-size:1.4rem;">Canon</span><hr class="mt-1 mb-2">
  674. <ul>
  675. <li><b>@???</b> - ???</li>
  676. <li><b>@???</b> - ???</li>
  677. <li><b>@???</b> - ???</li>
  678. </ul>
  679. <br>
  680.  
  681. <span class="text-primary" style="font-size:1.4rem;">Maybe</span><hr class="mt-1 mb-2">
  682. <ul>
  683. <li><b>@???</b> - ???</li>
  684. <li><b>@???</b> - ???</li>
  685. <li><b>@???</b> - ???</li>
  686. </ul>
  687. <br>
  688.  
  689. <span class="text-primary" style="font-size:1.4rem;">Not Canon</span><hr class="mt-1 mb-2">
  690. <ul>
  691. <li><b>@???</b> - ???</li>
  692. <li><b>@???</b> - ???</li>
  693. <li><b>@???</b> - ???</li>
  694. </ul>
  695. <br>
  696. <!------ End Headcanons ------>
  697.  
  698. </div>
  699. </div>
  700. </div>
  701. <!------------------------------- END PAGE SEVEN -------------------------------->
  702.  
  703. <!------------------------------- START PAGE EIGHT -------------------------------->
  704. <div class="tab-pane fade" id="eighta">
  705.  
  706. <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>
  707.  
  708. <div class="card bg-transparent p-4 border-0 rounded-0">
  709. <div class="row no-gutters">
  710.  
  711. <!------ Start Left Column ------>
  712. <div class="col-lg mr-lg-4 col-12 px-3">
  713.  
  714. <!------ Start Awards ------>
  715. <div class="col-12 container text-center mb-2 p-3">
  716. <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">
  717. <div class="justify-content-center row no-gutters">
  718.  
  719. <!-- 11 Award -->
  720. <div class="tooltipster px-3 pb-3" title="【 Bean Water 】">
  721. <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>
  722. <!-- 11 Award -->
  723.  
  724. </div>
  725. </div>
  726. <!------ End Awards ------>
  727.  
  728. <!------ Start Moodboard ------>
  729. <div class="col-12 container my-2 p-3">
  730. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Moodboard</span><hr class="mt-1 mb-2">
  731.  
  732. <!---- Start Images ---->
  733. <div class="col-12 row mx-auto p-0" style="border:#000000 4px solid;">
  734. <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>
  735. <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>
  736. <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>
  737. <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>
  738. <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>
  739. <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>
  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>
  744. <!---- End Images ---->
  745.  
  746. <!--- Start Credits -->
  747. <div class="m-0 py-2 bg-primary text-center" style="border:#000000 4px solid; border-top:none;">
  748. <a href="???" data-toggle="tooltip" title="Moodboard Image 1 Source"><span style="color:#FFFFFF;"><i class="fas fa-candy-bar fa-rotate-90"></i></span></a>
  749. <a href="???" data-toggle="tooltip" title="Moodboard Image 2 Source"><span style="color:#FFFFFF;"><i class="fas fa-candy-bar fa-rotate-90"></i></span></a>
  750. <a href="???" data-toggle="tooltip" title="Moodboard Image 3 Source"><span style="color:#FFFFFF;"><i class="fas fa-candy-bar fa-rotate-90"></i></span></a>
  751. <a href="???" data-toggle="tooltip" title="Moodboard Image 4 Source"><span style="color:#FFFFFF;"><i class="fas fa-candy-bar fa-rotate-90"></i></span></a>
  752. <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>
  753. <a href="???" data-toggle="tooltip" title="Moodboard Image 6 Source"><span style="color:#FFFFFF;"><i class="fas fa-candy-bar fa-rotate-90"></i></span></a>
  754. <a href="???" data-toggle="tooltip" title="Moodboard Image 7 Source"><span style="color:#FFFFFF;"><i class="fas fa-candy-bar fa-rotate-90"></i></span></a>
  755. <a href="???" data-toggle="tooltip" title="Moodboard Image 8 Source"><span style="color:#FFFFFF;"><i class="fas fa-candy-bar fa-rotate-90"></i></span></a>
  756. <a href="???" data-toggle="tooltip" title="Moodboard Image 9 Source"><span style="color:#FFFFFF;"><i class="fas fa-candy-bar fa-rotate-90"></i></span></a>
  757. </div>
  758. <!--- End Credits -->
  759.  
  760. </div>
  761. <!------ End Moodboard ------>
  762.  
  763. <!----- Start Kin/Inspo ----->
  764. <div class="col-12 container my-2 p-3">
  765. <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">
  766.  
  767. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  768. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  769. <a data-toggle="tooltip" href="???"><img src="???"></a>
  770. </div>
  771. </div><div class="col-12 col-lg-10">
  772. <a href="???">???</a><span class="pull-right">???</span><hr class="mt-0 mb-2"><p>???</p>
  773. </div></div>
  774.  
  775. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  776. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  777. <a data-toggle="tooltip" href="???"><img src="???"></a>
  778. </div>
  779. </div><div class="col-12 col-lg-10">
  780. <a href="???">???</a><span class="pull-right">???</span><hr class="mt-0 mb-2"><p>???</p>
  781. </div></div>
  782.  
  783. <div class="row my-4"><div class="col-12 col-lg-2 mb-2 mb-sm-0">
  784. <div class="card bg-transparent border-0" style="max-width:150px; margin-left:auto; margin-right:auto;">
  785. <a data-toggle="tooltip" href="???"><img src="???"></a>
  786. </div>
  787. </div><div class="col-12 col-lg-10">
  788. <a href="???">???</a><span class="pull-right">???</span><hr class="mt-0 mb-2"><p>???</p>
  789. </div></div>
  790. </div>
  791. <!----- End Kin/Inspo ----->
  792.  
  793. <!------ Start Interview ----->
  794. <div class="col-12 container text-center my-2 p-3">
  795. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Interview</span><hr class="mt-1 mb-2">
  796. <h3><i>???</i></h3>
  797. <p>???</p><br>
  798. <h3><i>???</i></h3>
  799. <p>???</p><br>
  800. <h3><i>???</i></h3>
  801. <p>???</p><br>
  802. </div>
  803. <!------ End Interview ----->
  804.  
  805. </div>
  806. <!------ End Left Column ------>
  807.  
  808. <!------ Start Right Column ------>
  809. <div class="col-lg-4 col-12">
  810. <div style="position:sticky; top:20px;">
  811. <div class="container bg-dark text-white p-3">
  812.  
  813. <!------ Start Playlist ------>
  814. <span class="justify-content-center text-primary mb-2 pb-1" style="font-size:1.4rem;">Playlist</span><hr class="mt-1 mb-2">
  815.  
  816. <!-- Start Song -->
  817. <div class="text-center mx-auto p-3" style="max-width:300px;">
  818. <p class="text-primary" style="font-weight:bold;">Title<br>Artist</p>
  819. <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>
  820. <iframe style="width:500%; height:500%; position:absolute; opacity:.001;"
  821.  
  822. src="https://www.youtube.com/embed/???"></iframe> <!-- Where the ??? is, put the "jN5CYnaZk6w" section of a youtube link found after the "watch?v=" -->
  823.  
  824. </div>
  825. <div class="pb-3"><a class="btn btn-block bg-primary btn-primary text-white rounded-0" href="???">Youtube Link</a></div>
  826. </div>
  827. <!-- End Song -->
  828.  
  829. <!-- Start Song -->
  830. <div class="text-center mx-auto p-3" style="max-width:300px;">
  831. <p class="text-primary" style="font-weight:bold;">Title<br>Artist</p>
  832. <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>
  833. <iframe style="width:500%; height:500%; position:absolute; opacity:.001;"
  834.  
  835. src="https://www.youtube.com/embed/???"></iframe> <!-- Where the ??? is, put the "jN5CYnaZk6w" section of a youtube link found after the "watch?v=" -->
  836.  
  837. </div>
  838. <div class="pb-3"><a class="btn btn-block bg-primary btn-primary text-white rounded-0" href="???">Youtube Link</a></div>
  839. </div>
  840. <!-- End Song -->
  841.  
  842. <!-- Start Song -->
  843. <div class="text-center mx-auto p-3" style="max-width:300px;">
  844. <p class="text-primary" style="font-weight:bold;">Title<br>Artist</p>
  845. <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>
  846. <iframe style="width:500%; height:500%; position:absolute; opacity:.001;"
  847.  
  848. src="https://www.youtube.com/embed/???"></iframe> <!-- Where the ??? is, put the "jN5CYnaZk6w" section of a youtube link found after the "watch?v=" -->
  849.  
  850. </div>
  851. <div class="pb-3"><a class="btn btn-block bg-primary btn-primary text-white rounded-0" href="???">Youtube Link</a></div>
  852. </div>
  853. <!-- End Song -->
  854.  
  855. <!------ End Playlist ------>
  856.  
  857. </div>
  858. </div>
  859. </div>
  860. <!------ End Right Column ------>
  861.  
  862. </div>
  863.  
  864. </div>
  865.  
  866. </div>
  867. <!------------------------------- END PAGE EIGHT -------------------------------->
  868.  
  869. <!------------------------------- START PAGE NINE -------------------------------->
  870. <div class="tab-pane fade" id="ninea">
  871.  
  872. <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>
  873.  
  874. <div class="card bg-transparent p-4 border-0 rounded-0">
  875. <div class="col-12 p-3">
  876.  
  877. <!----- Start Images ----->
  878. <div class="container bg-dark p-0 rounded-0"><img src="???"></div>
  879. <!----- End Images ----->
  880.  
  881. </div>
  882. </div>
  883. </div>
  884. <!------------------------------- END PAGE NINE -------------------------------->
  885.  
  886. </div>
  887.  
  888. </div>
  889. <!------------------------------- END PAGES -------------------------------->
  890.  
  891. </div>
  892.  
  893. </div>
  894. <!------------------------------- END MIDDLE -------------------------------->
  895.  
  896. <!------------------------------- START GALLERY-BUTTON -------------------------------->
  897. <div class="col-12 bg-primary text-center py-3" style="border:#000000 4px solid;">
  898. <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>
  899. </div>
  900. <!------------------------------- END GALLERY-BUTTON -------------------------------->
  901.  
  902. <!------------------------------- START CREDITS LIST -------------------------------->
  903. <div class="col-12 bg-primary py-2 text-center" style="font-size:1.4rem; border:#000000 4px solid;">
  904.  
  905. <a href="???" data-toggle="tooltip" title="Header Image Source"><span style="color:#FFFFFF;"><i class="fas fa-candy-bar fa-rotate-90"></i></span></a>
  906. <a href="https://toyhou.se/16006417.overlay" data-toggle="tooltip" title="Header Code Frankensteined From: CuckooHoopoe"><span style="color:#FFFFFF;"><i class="fas fa-candy-bar fa-rotate-90"></i></span></a>
  907. <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>
  908. <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-candy-bar fa-rotate-90"></i></span></a>
  909. <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-candy-bar fa-rotate-90"></i></span></a>
  910.  
  911. </div>
  912. <!------------------------------- END CREDITS LIST -------------------------------->
  913.  
  914. </div>
  915. <!------------------------------- END ACTUAL CODE -------------------------------->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement