API tools faq
paste
CrocShop

Toyhouse | Yui Character Code

CrocShop
Jun 5th, 2022 (edited)
30
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 67.31 KB | None | 0 0
raw download clone embed print report
  1. <!-------------------------------->
  2. <!-- This Code made by CrocShop -->
  3. <!---- Don't remove this pls! ---->
  4. <!-- NOTE: This code was a costum
  5. for a character profil with two
  6. languages, you need to change both
  7. language on you own! ---->
  8. <!-------------------------------->
  9. <!-- TABS -->
  10. <ul class="nav nav-tabs mt-2" style="border-radius:0; border:0;">
  11. <li class="nav-item">
  12. <a class="nav-link active btn btn-secondary" style="border-radius:0; border:0;" data-toggle="tab" href="#TAB-1">LANGUAGE 1</a>
  13. </li>
  14. <li class="nav-item">
  15. <a class="nav-link btn btn-secondary" style="border-radius:0; border:0;" data-toggle="tab" href="#TAB-2">LANGUAGE 2</a>
  16. </li>
  17. </ul>
  18. <!-- tabs end -->
  19.  
  20. <!-- LANGUAGE 1 SECTION -->
  21. <div class="tab-content card rounded-0 border-0">
  22.  
  23. <!-- LANGUAGE 2 SECTION -->
  24. <div class="tab-pane fade show active p-3" id="TAB-1">
  25.  
  26. <!------------ LANGUAGE 1 -------------------------------------------->
  27. <div class="container-fluid" style="font-size: 13pt;">
  28.  
  29. <div class="row justify-content-md-center">
  30. <div class="col">
  31.  
  32. <!--- head banner --->
  33. <div class="col bg-faded rounded-0" style="border-bottom: 4px solid #000; height: 280px; background-size:cover; background-position:center; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/49995397_zrO.jpg');">
  34. <!--- oc headshot --->
  35. <div class="card-flex align-items-center justify-content-center col-12 mb-4">
  36. <div class="rounded-circle" style="background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192580_29IxCm84z.jpg'); background-size:100%; border: 4px solid #000; height: 250px; width: 250px; position: absolute; z-index: 4; top: 6px;">
  37. </div></div>
  38. <!--- oc headshot end --->
  39. <!--- oc name --->
  40. <div class="card-flex align-items-center justify-content-center col-12 mb-4">
  41. <div class="rounded-circle" style="background: #18191c; border: 4px solid #000; height: 70px; width: 450px; position: absolute; z-index: 3; top: 218px;">
  42. <p style="font-size: 40px; text-align: center; font-family: Arial; color: #FFFFFF;">Name</p></div></div>
  43. <!--- oc name end --->
  44. </div>
  45. <!--- head banner end --->
  46.  
  47. <div class="row">
  48. <!--- oc likes --->
  49. <div class="col bg-faded rounded-0" style="max-width: 300px; z-index: 1; position: relative; border-bottom: 4px solid #000; left: 15px; top: 0px; padding: 5px; background: #18191c;">
  50. <p style="text-align: center; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">Likes</p>
  51. <!--- likes list --->
  52. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  53. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Like 1</p>
  54. </td></tr></tbody></table><br>
  55. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  56. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Like 2</p>
  57. </td></tr></tbody></table><br>
  58. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  59. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Like 3</p>
  60. </td></tr></tbody></table><br>
  61. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  62. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Like 4</p>
  63. </td></tr></tbody></table><br>
  64. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  65. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Like 5</p>
  66. </td></tr></tbody></table><br>
  67. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  68. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Like 6</p>
  69. </td></tr></tbody></table>
  70. <!--- likes list end --->
  71. </div>
  72. <!--- oc likes end --->
  73.  
  74. <!--- ref sheet --->
  75. <div class="col bg-faded rounded-0" style="min-height: 580px; border-left: 4px solid #000; border-right: 4px solid #000; z-index: 2; position: relative; border-bottom: 4px solid #000; top: 0px; padding: 5px; background: #18191c; background-size: 100% 100%; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192564_Tu5yIJ7E2.jpg');">
  76. </div>
  77. <!--- ref sheet end --->
  78.  
  79. <!--- oc dislikes --->
  80. <div class="col bg-faded rounded-0" style="max-width: 300px; z-index: 1; position: relative; border-bottom: 4px solid #000;right: 15px; top: 0px; padding: 5px; background: #18191c;">
  81. <p style="text-align: center; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">Dislikes</p>
  82. <!--- disklikes list --->
  83. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  84. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Dislike 1</p>
  85. </td></tr></tbody></table><br>
  86. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  87. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Dislike 2</p>
  88. </td></tr></tbody></table><br>
  89. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  90. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Dislike 3</p>
  91. </td></tr></tbody></table><br>
  92. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  93. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Dislike 4</p>
  94. </td></tr></tbody></table><br>
  95. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  96. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Dislike 5</p>
  97. </td></tr></tbody></table><br>
  98. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  99. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Dislike 6</p>
  100. </td></tr></tbody></table>
  101. <!--- disklikes list end --->
  102. </div>
  103. <!--- oc dislikes end --->
  104. </div>
  105.  
  106. <!-- NOTE: copy ⮟ this whole section to add more colors! -->
  107. <div class="row">
  108. <!--- color pallette --->
  109. <div class="col" style="left: 15px; right: 25px;">
  110. <div class="row">
  111. <div class="col-md-3" style="text-align: center; border-right: 4px solid #000; border-bottom: 4px solid #000;padding: 5px; background: #18191c;"><p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Color Palette</p></div>
  112. <div class="col-md-2" style="border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #470003;"></div>
  113. <div class="col-md-2" style="border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #260001;"></div>
  114. <div class="col-md-2" style="border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #345589;"></div>
  115. <div class="col-md-2" style="border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #83D4E7;"></div>
  116. <div class="col-md-3" style="max-width: 97px; border-bottom: 4px solid #000; padding: 5px; background: #18191c;"></div>
  117. </div>
  118. <div class="row">
  119. <div class="col-md-3" style="text-align: center; border-right: 4px solid #000; border-bottom: 4px solid #000;padding: 5px; background: #18191c;"><p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Color Hex</p></div>
  120. <div class="col-md-2" style="text-align: center; border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #18191c;">#470003</div>
  121. <div class="col-md-2" style="text-align: center; border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #18191c;">#260001</div>
  122. <div class="col-md-2" style="text-align: center; border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #18191c;">#345589</div>
  123. <div class="col-md-2" style="text-align: center; border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #18191c;">#83D4E7</div>
  124. <div class="col-md-3" style="max-width: 97px; border-bottom: 4px solid #000; padding: 5px; background: #18191c;"></div>
  125. </div>
  126. </div>
  127. <!--- color pallette end --->
  128. </div>
  129. <!-- NOTE: copy ⮝ this whole section to add more colors! -->
  130.  
  131. <div class="row">
  132. <!--- personality --->
  133. <div class="col bg-faded rounded-0" style="border-bottom: 4px solid #000; left: 15px; top: 0px; padding: 5px; background: #18191c;">
  134. <p style="margin: 0px; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">Personality</p>
  135. <p style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Write something about the personality or make a list.</p>
  136. </div>
  137. <!--- personality end --->
  138.  
  139. <!--- info section --->
  140. <div class="col bg-faded rounded-0" style="border-left: 4px solid #000; border-bottom: 4px solid #000; right: 15px; top: 0px; padding: 5px; background: #18191c;">
  141. <!--- basic info --->
  142. <div class="col bg-faded rounded-0" style="border-bottom: 4px solid #000; padding: 5px; background: #18191c;">
  143. <p style="margin: 0px; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">Basic Info</p>
  144. <table style="width: 400px; padding: 5px; border-style: solid; border-color: #000000; border-width: 0px; border-collapse: separate;">
  145. <tr><td>
  146. <table style="width: 400px; padding: 5px; border-style: solid; border-color: #000000; border-width: 0px; border-collapse: separate;">
  147. <tr>
  148. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Age</td>
  149. <td align="center" style="font-family: Arial; font-size: 20px; color: #FFFFFF">Text</td>
  150. </tr>
  151. <tr>
  152. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Gender</td>
  153. <td align="center" style="font-family: Arial; font-size: 20px; color: #FFFFFF">Text</td>
  154. </tr>
  155. <tr>
  156. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">High</td>
  157. <td align="center" style="font-family: Arial; font-size: 20px; color: #FFFFFF">Text</td>
  158. </tr>
  159. </table>
  160. </td><td>
  161. <table style="width: 400px; padding: 5px; border-style: solid; border-color: #000000; border-width: 0px; border-collapse: separate;">
  162. <tr>
  163. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Sexuality</td>
  164. <td align="center" style="font-family: Arial; font-size: 20px; color: #FFFFFF">Text</td>
  165. </tr>
  166. <tr>
  167. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Relationship with</td>
  168. <td align="center" style="font-family: Arial; font-size: 20px; color: #FFFFFF">Text</td>
  169. </tr>
  170. </table></td></tr>
  171. </table>
  172. </div>
  173. <!--- basic info end --->
  174. <!--- meta info --->
  175. <div class="col bg-faded rounded-0" style="padding: 5px; background: #18191c;">
  176. <p style="margin: 0px; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">Meta Info</p>
  177. <table style="width: 400px; padding: 5px; border-style: solid; border-color: #000000; border-width: 0px; border-collapse: separate;">
  178. <tr>
  179. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Designer</td>
  180. <td align="center" style="font-family: Arial; font-size: 20px; color: #64B6CF"><a href="URL">Text</a></td>
  181. </tr>
  182. <tr>
  183. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Worth</td>
  184. <td align="center" style="font-family: Arial; font-size: 20px; color: #64B6CF">Text</td>
  185. </tr>
  186. <tr>
  187. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">World</td>
  188. <td align="center" style="font-family: Arial; font-size: 20px; color: #64B6CF"><a href="URL">Text</a></td>
  189. </tr>
  190. </table>
  191. </div>
  192. <!--- meta info end --->
  193. </div>
  194. <!--- info section end --->
  195. </div>
  196.  
  197. <div class="row">
  198. <!--- clothes section --->
  199. <div class="col bg-faded rounded-0" style="border-bottom: 4px solid #000; left: 15px; top: 0px; padding: 5px; background: #18191c;">
  200. <p style="margin: 0px; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">clothes</p>
  201. <!---------------- Clothes Picture ---------------------------------------->
  202. <div class="container" style="max-width:500px;">
  203. <div>
  204. <!-- Carousel -->
  205. <div id="carouselPic" class="carousel slide mx-auto p-1" data-ride="carousel" data-interval="50000">
  206. <!-- Bottom controls -->
  207. <ol class="carousel-indicators">
  208. <li data-target="#carouselPic" data-slide-to="0" class="active"></li>
  209. <li data-target="#carouselPic" data-slide-to="1"></li>
  210. <li data-target="#carouselPic" data-slide-to="2"></li>
  211. <li data-target="#carouselPic" data-slide-to="3"></li>
  212. <li data-target="#carouselPic" data-slide-to="4"></li>
  213. <li data-target="#carouselPic" data-slide-to="5"></li>
  214. <li data-target="#carouselPic" data-slide-to="6"></li>
  215. <li data-target="#carouselPic" data-slide-to="7"></li>
  216. <li data-target="#carouselPic" data-slide-to="8"></li>
  217. <li data-target="#carouselPic" data-slide-to="9"></li>
  218. <li data-target="#carouselPic" data-slide-to="10"></li>
  219. <li data-target="#carouselPic" data-slide-to="11"></li>
  220. </ol>
  221. <!-- Carousel items -->
  222. <div class="carousel-inner rounded">
  223.  
  224. <!-- Picture 0 -->
  225. <div class="carousel-item active">
  226. <!-- Background -->
  227. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192564_Tu5yIJ7E2.jpg);height:400px;background-size:100% 100%">
  228. <div class="p-5 text-center mx-1">
  229. </div>
  230. </div>
  231. </div>
  232. <!-- Picture 0 end -->
  233.  
  234. <!-- Picture 1 -->
  235. <div class="carousel-item">
  236. <!-- Background -->
  237. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  238. <div class="p-5 text-center mx-1">
  239. </div>
  240. </div>
  241. </div>
  242. <!-- Picture 1 end -->
  243.  
  244. <!-- Picture 2 -->
  245. <div class="carousel-item">
  246. <!-- Background -->
  247. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  248. <div class="p-5 text-center mx-1">
  249. </div>
  250. </div>
  251. </div>
  252. <!-- Picture 2 end -->
  253.  
  254. <!-- Picture 3 -->
  255. <div class="carousel-item">
  256. <!-- Background -->
  257. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  258. <div class="p-5 text-center mx-1">
  259. </div>
  260. </div>
  261. </div>
  262. <!-- Picture 3 end -->
  263.  
  264. <!-- Picture 4 -->
  265. <div class="carousel-item">
  266. <!-- Background -->
  267. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  268. <div class="p-5 text-center mx-1">
  269. </div>
  270. </div>
  271. </div>
  272. <!-- Picture 4 end -->
  273.  
  274. <!-- Picture 5 -->
  275. <div class="carousel-item">
  276. <!-- Background -->
  277. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  278. <div class="p-5 text-center mx-1">
  279. </div>
  280. </div>
  281. </div>
  282. <!-- Picture 5 end -->
  283.  
  284. <!-- Picture 6 -->
  285. <div class="carousel-item">
  286. <!-- Background -->
  287. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  288. <div class="p-5 text-center mx-1">
  289. </div>
  290. </div>
  291. </div>
  292. <!-- Picture 6 end -->
  293.  
  294. <!-- Picture 7 -->
  295. <div class="carousel-item">
  296. <!-- Background -->
  297. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  298. <div class="p-5 text-center mx-1">
  299. </div>
  300. </div>
  301. </div>
  302. <!-- Picture 7 end -->
  303.  
  304. <!-- Picture 8 -->
  305. <div class="carousel-item">
  306. <!-- Background -->
  307. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  308. <div class="p-5 text-center mx-1">
  309. </div>
  310. </div>
  311. </div>
  312. <!-- Picture 8 end -->
  313.  
  314. <!-- Picture 9 -->
  315. <div class="carousel-item">
  316. <!-- Background -->
  317. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  318. <div class="p-5 text-center mx-1">
  319. </div>
  320. </div>
  321. </div>
  322. <!-- Picture 9 end -->
  323.  
  324. <!-- Picture 10 -->
  325. <div class="carousel-item">
  326. <!-- Background -->
  327. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  328. <div class="p-5 text-center mx-1">
  329. </div>
  330. </div>
  331. </div>
  332. <!-- Picture 10 end -->
  333.  
  334. <!-- Picture 11 -->
  335. <div class="carousel-item">
  336. <!-- Background -->
  337. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  338. <div class="p-5 text-center mx-1">
  339. </div>
  340. </div>
  341. </div>
  342. <!-- Picture 11 end -->
  343.  
  344. </div>
  345. <!-- Left/right buttons - do not touch -->
  346. <a class="carousel-control-prev" href="#carouselPic" role="button" data-slide="prev">
  347. <i class="text-white fas fa-chevron-left fa-2x"></i>
  348. <span class="sr-only">Previous</span>
  349. </a>
  350. <a class="carousel-control-next" href="#carouselPic" role="button" data-slide="next">
  351. <i class="text-white fas fa-chevron-right fa-2x"></i>
  352. <span class="sr-only">Next</span>
  353. </a>
  354. </div>
  355. </div>
  356. </div>
  357. <!---------------- Clothes Picture End ------------------------------------>
  358. </div>
  359. <!--- clothes section end --->
  360.  
  361. <!--- accessories section --->
  362. <div class="col bg-faded rounded-0" style="border-left: 4px solid #000; border-bottom: 4px solid #000; right: 15px; top: 0px; padding: 5px; background: #18191c;">
  363. <p style="margin: 0px; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">accessories</p>
  364. <!---------------- Accessories Picture ---------------------------------------->
  365. <div class="container" style="max-width:500px;">
  366. <div>
  367. <!-- Carousel -->
  368. <div id="carouselPic1" class="carousel slide mx-auto p-1" data-ride="carousel" data-interval="50000">
  369. <!-- Bottom controls -->
  370. <ol class="carousel-indicators">
  371. <li data-target="#carouselPic1" data-slide-to="0" class="active"></li>
  372. <li data-target="#carouselPic1" data-slide-to="1"></li>
  373. <li data-target="#carouselPic1" data-slide-to="2"></li>
  374. <li data-target="#carouselPic1" data-slide-to="3"></li>
  375. <li data-target="#carouselPic1" data-slide-to="4"></li>
  376. <li data-target="#carouselPic1" data-slide-to="5"></li>
  377. <li data-target="#carouselPic1" data-slide-to="6"></li>
  378. <li data-target="#carouselPic1" data-slide-to="7"></li>
  379. <li data-target="#carouselPic1" data-slide-to="8"></li>
  380. <li data-target="#carouselPic1" data-slide-to="9"></li>
  381. <li data-target="#carouselPic1" data-slide-to="10"></li>
  382. <li data-target="#carouselPic1" data-slide-to="11"></li>
  383. </ol>
  384. <!-- Carousel items -->
  385. <div class="carousel-inner rounded">
  386.  
  387. <!-- Picture 0 -->
  388. <div class="carousel-item active">
  389. <!-- Background -->
  390. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192564_Tu5yIJ7E2.jpg);height:400px;background-size:100% 100%">
  391. <div class="p-5 text-center mx-1">
  392. </div>
  393. </div>
  394. </div>
  395. <!-- Picture 0 end -->
  396.  
  397. <!-- Picture 1 -->
  398. <div class="carousel-item">
  399. <!-- Background -->
  400. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  401. <div class="p-5 text-center mx-1">
  402. </div>
  403. </div>
  404. </div>
  405. <!-- Picture 1 end -->
  406.  
  407. <!-- Picture 2 -->
  408. <div class="carousel-item">
  409. <!-- Background -->
  410. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  411. <div class="p-5 text-center mx-1">
  412. </div>
  413. </div>
  414. </div>
  415. <!-- Picture 2 end -->
  416.  
  417. <!-- Picture 3 -->
  418. <div class="carousel-item">
  419. <!-- Background -->
  420. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  421. <div class="p-5 text-center mx-1">
  422. </div>
  423. </div>
  424. </div>
  425. <!-- Picture 3 end -->
  426.  
  427. <!-- Picture 4 -->
  428. <div class="carousel-item">
  429. <!-- Background -->
  430. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  431. <div class="p-5 text-center mx-1">
  432. </div>
  433. </div>
  434. </div>
  435. <!-- Picture 4 end -->
  436.  
  437. <!-- Picture 5 -->
  438. <div class="carousel-item">
  439. <!-- Background -->
  440. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  441. <div class="p-5 text-center mx-1">
  442. </div>
  443. </div>
  444. </div>
  445. <!-- Picture 5 end -->
  446.  
  447. <!-- Picture 6 -->
  448. <div class="carousel-item">
  449. <!-- Background -->
  450. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  451. <div class="p-5 text-center mx-1">
  452. </div>
  453. </div>
  454. </div>
  455. <!-- Picture 6 end -->
  456.  
  457. <!-- Picture 7 -->
  458. <div class="carousel-item">
  459. <!-- Background -->
  460. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  461. <div class="p-5 text-center mx-1">
  462. </div>
  463. </div>
  464. </div>
  465. <!-- Picture 7 end -->
  466.  
  467. <!-- Picture 8 -->
  468. <div class="carousel-item">
  469. <!-- Background -->
  470. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  471. <div class="p-5 text-center mx-1">
  472. </div>
  473. </div>
  474. </div>
  475. <!-- Picture 8 end -->
  476.  
  477. <!-- Picture 9 -->
  478. <div class="carousel-item">
  479. <!-- Background -->
  480. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  481. <div class="p-5 text-center mx-1">
  482. </div>
  483. </div>
  484. </div>
  485. <!-- Picture 9 end -->
  486.  
  487. <!-- Picture 10 -->
  488. <div class="carousel-item">
  489. <!-- Background -->
  490. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  491. <div class="p-5 text-center mx-1">
  492. </div>
  493. </div>
  494. </div>
  495. <!-- Picture 10 end -->
  496.  
  497. <!-- Picture 11 -->
  498. <div class="carousel-item">
  499. <!-- Background -->
  500. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  501. <div class="p-5 text-center mx-1">
  502. </div>
  503. </div>
  504. </div>
  505. <!-- Picture 11 end -->
  506.  
  507. </div>
  508. <!-- Left/right buttons - do not touch -->
  509. <a class="carousel-control-prev" href="#carouselPic1" role="button" data-slide="prev">
  510. <i class="text-white fas fa-chevron-left fa-2x"></i>
  511. <span class="sr-only">Previous</span>
  512. </a>
  513. <a class="carousel-control-next" href="#carouselPic1" role="button" data-slide="next">
  514. <i class="text-white fas fa-chevron-right fa-2x"></i>
  515. <span class="sr-only">Next</span>
  516. </a>
  517. </div>
  518. </div>
  519. </div>
  520. <!---------------- Accessories Picture End ------------------------------------>
  521. </div>
  522. <!--- accessories section end --->
  523.  
  524. <!--- hair style section --->
  525. <div class="col bg-faded rounded-0" style="border-left: 4px solid #000; border-bottom: 4px solid #000; right: 15px; top: 0px; padding: 5px; background: #18191c;">
  526. <p style="margin: 0px; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">hair style</p>
  527. <!---------------- Hair Style Picture ---------------------------------------->
  528. <div class="container" style="max-width:500px;">
  529. <div>
  530. <!-- Carousel -->
  531. <div id="carouselPic2" class="carousel slide mx-auto p-1" data-ride="carousel" data-interval="50000">
  532. <!-- Bottom controls -->
  533. <ol class="carousel-indicators">
  534. <li data-target="#carouselPic2" data-slide-to="0" class="active"></li>
  535. <li data-target="#carouselPic2" data-slide-to="1"></li>
  536. <li data-target="#carouselPic2" data-slide-to="2"></li>
  537. <li data-target="#carouselPic2" data-slide-to="3"></li>
  538. <li data-target="#carouselPic2" data-slide-to="4"></li>
  539. <li data-target="#carouselPic2" data-slide-to="5"></li>
  540. <li data-target="#carouselPic2" data-slide-to="6"></li>
  541. <li data-target="#carouselPic2" data-slide-to="7"></li>
  542. <li data-target="#carouselPic2" data-slide-to="8"></li>
  543. <li data-target="#carouselPic2" data-slide-to="9"></li>
  544. <li data-target="#carouselPic2" data-slide-to="10"></li>
  545. <li data-target="#carouselPic2" data-slide-to="11"></li>
  546. </ol>
  547. <!-- Carousel items -->
  548. <div class="carousel-inner rounded">
  549.  
  550. <!-- Picture 0 -->
  551. <div class="carousel-item active">
  552. <!-- Background -->
  553. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192564_Tu5yIJ7E2.jpg);height:400px;background-size:100% 100%">
  554. <div class="p-5 text-center mx-1">
  555. </div>
  556. </div>
  557. </div>
  558. <!-- Picture 0 end -->
  559.  
  560. <!-- Picture 1 -->
  561. <div class="carousel-item">
  562. <!-- Background -->
  563. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  564. <div class="p-5 text-center mx-1">
  565. </div>
  566. </div>
  567. </div>
  568. <!-- Picture 1 end -->
  569.  
  570. <!-- Picture 2 -->
  571. <div class="carousel-item">
  572. <!-- Background -->
  573. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  574. <div class="p-5 text-center mx-1">
  575. </div>
  576. </div>
  577. </div>
  578. <!-- Picture 2 end -->
  579.  
  580. <!-- Picture 3 -->
  581. <div class="carousel-item">
  582. <!-- Background -->
  583. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  584. <div class="p-5 text-center mx-1">
  585. </div>
  586. </div>
  587. </div>
  588. <!-- Picture 3 end -->
  589.  
  590. <!-- Picture 4 -->
  591. <div class="carousel-item">
  592. <!-- Background -->
  593. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  594. <div class="p-5 text-center mx-1">
  595. </div>
  596. </div>
  597. </div>
  598. <!-- Picture 4 end -->
  599.  
  600. <!-- Picture 5 -->
  601. <div class="carousel-item">
  602. <!-- Background -->
  603. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  604. <div class="p-5 text-center mx-1">
  605. </div>
  606. </div>
  607. </div>
  608. <!-- Picture 5 end -->
  609.  
  610. <!-- Picture 6 -->
  611. <div class="carousel-item">
  612. <!-- Background -->
  613. <div class="rounded pt-1" style="background-image:url(https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192584_tD9YCzKAn.png);height:400px;background-size:100% 100%">
  614. <div class="p-5 text-center mx-1">
  615. </div>
  616. </div>
  617. </div>
  618. <!-- Picture 6 end -->
  619.  
  620. <!-- Picture 7 -->
  621. <div class="carousel-item">
  622. <!-- Background -->
  623. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  624. <div class="p-5 text-center mx-1">
  625. </div>
  626. </div>
  627. </div>
  628. <!-- Picture 7 end -->
  629.  
  630. <!-- Picture 8 -->
  631. <div class="carousel-item">
  632. <!-- Background -->
  633. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  634. <div class="p-5 text-center mx-1">
  635. </div>
  636. </div>
  637. </div>
  638. <!-- Picture 8 end -->
  639.  
  640. <!-- Picture 9 -->
  641. <div class="carousel-item">
  642. <!-- Background -->
  643. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  644. <div class="p-5 text-center mx-1">
  645. </div>
  646. </div>
  647. </div>
  648. <!-- Picture 9 end -->
  649.  
  650. <!-- Picture 10 -->
  651. <div class="carousel-item">
  652. <!-- Background -->
  653. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  654. <div class="p-5 text-center mx-1">
  655. </div>
  656. </div>
  657. </div>
  658. <!-- Picture 10 end -->
  659.  
  660. <!-- Picture 11 -->
  661. <div class="carousel-item">
  662. <!-- Background -->
  663. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  664. <div class="p-5 text-center mx-1">
  665. </div>
  666. </div>
  667. </div>
  668. <!-- Picture 11 end -->
  669.  
  670. </div>
  671. <!-- Left/right buttons - do not touch -->
  672. <a class="carousel-control-prev" href="#carouselPic2" role="button" data-slide="prev">
  673. <i class="text-white fas fa-chevron-left fa-2x"></i>
  674. <span class="sr-only">Previous</span>
  675. </a>
  676. <a class="carousel-control-next" href="#carouselPic2" role="button" data-slide="next">
  677. <i class="text-white fas fa-chevron-right fa-2x"></i>
  678. <span class="sr-only">Next</span>
  679. </a>
  680. </div>
  681. </div>
  682. </div>
  683. <!---------------- Hair Style Picture End ------------------------------------>
  684. </div>
  685. <!--- hair style end --->
  686. </div>
  687.  
  688. <!---------------- LANGUAGE 1 END ---------------------------------------->
  689. </div></div></div> <!--tab 1 section end-->
  690. </div>
  691.  
  692. <!--TAB 2 SECTION-->
  693. <div class="tab-pane fade p-3" id="TAB-2">
  694.  
  695. <!------------ LANGUAGE 2 -------------------------------------------->
  696. <div class="container-fluid" style="font-size: 13pt;">
  697.  
  698. <div class="row justify-content-md-center">
  699. <div class="col">
  700.  
  701. <!--- head banner --->
  702. <div class="col bg-faded rounded-0" style="border-bottom: 4px solid #000; height: 280px; background-size:cover; background-position:center; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/49995397_zrO.jpg');">
  703. <!--- oc headshot --->
  704. <div class="card-flex align-items-center justify-content-center col-12 mb-4">
  705. <div class="rounded-circle" style="background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192580_29IxCm84z.jpg'); background-size:100%; border: 4px solid #000; height: 250px; width: 250px; position: absolute; z-index: 4; top: 6px;">
  706. </div></div>
  707. <!--- oc headshot end --->
  708. <!--- oc name --->
  709. <div class="card-flex align-items-center justify-content-center col-12 mb-4">
  710. <div class="rounded-circle" style="background: #18191c; border: 4px solid #000; height: 70px; width: 450px; position: absolute; z-index: 3; top: 218px;">
  711. <p style="font-size: 40px; text-align: center; font-family: Arial; color: #FFFFFF;">Name</p></div></div>
  712. <!--- oc name end --->
  713. </div>
  714. <!--- head banner end --->
  715.  
  716. <div class="row">
  717. <!--- oc likes --->
  718. <div class="col bg-faded rounded-0" style="max-width: 300px; z-index: 1; position: relative; border-bottom: 4px solid #000; left: 15px; top: 0px; padding: 5px; background: #18191c;">
  719. <p style="text-align: center; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">Likes</p>
  720. <!--- likes list --->
  721. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  722. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Like 1</p>
  723. </td></tr></tbody></table><br>
  724. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  725. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Like 2</p>
  726. </td></tr></tbody></table><br>
  727. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  728. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Like 3</p>
  729. </td></tr></tbody></table><br>
  730. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  731. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Like 4</p>
  732. </td></tr></tbody></table><br>
  733. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  734. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Like 5</p>
  735. </td></tr></tbody></table><br>
  736. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  737. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Like 6</p>
  738. </td></tr></tbody></table>
  739. <!--- likes list end --->
  740. </div>
  741. <!--- oc likes end --->
  742.  
  743. <!--- ref sheet --->
  744. <div class="col bg-faded rounded-0" style="min-height: 580px; border-left: 4px solid #000; border-right: 4px solid #000; z-index: 2; position: relative; border-bottom: 4px solid #000; top: 0px; padding: 5px; background: #18191c; background-size: 100% 100%; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/watermarks/50192564_Tu5yIJ7E2.jpg');">
  745. </div>
  746. <!--- ref sheet end --->
  747.  
  748. <!--- oc dislikes --->
  749. <div class="col bg-faded rounded-0" style="max-width: 300px; z-index: 1; position: relative; border-bottom: 4px solid #000;right: 15px; top: 0px; padding: 5px; background: #18191c;">
  750. <p style="text-align: center; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">Dislikes</p>
  751. <!--- disklikes list --->
  752. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  753. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Dislike 1</p>
  754. </td></tr></tbody></table><br>
  755. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  756. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Dislike 2</p>
  757. </td></tr></tbody></table><br>
  758. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  759. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Dislike 3</p>
  760. </td></tr></tbody></table><br>
  761. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  762. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Dislike 4</p>
  763. </td></tr></tbody></table><br>
  764. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  765. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Dislike 5</p>
  766. </td></tr></tbody></table><br>
  767. <table align="center" style="padding: 5px; border-style: solid; border-color: #000000; border-width: 2px; border-radius: 50%; border-collapse: separate;"><tbody><tr><td>
  768. <p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Dislike 6</p>
  769. </td></tr></tbody></table>
  770. <!--- disklikes list end --->
  771. </div>
  772. <!--- oc dislikes end --->
  773. </div>
  774.  
  775. <!-- NOTE: copy ⮟ this whole section to add more colors! -->
  776. <div class="row">
  777. <!--- color pallette --->
  778. <div class="col" style="left: 15px; right: 25px;">
  779. <div class="row">
  780. <div class="col-md-3" style="text-align: center; border-right: 4px solid #000; border-bottom: 4px solid #000;padding: 5px; background: #18191c;"><p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Color Palette</p></div>
  781. <div class="col-md-2" style="border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #470003;"></div>
  782. <div class="col-md-2" style="border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #260001;"></div>
  783. <div class="col-md-2" style="border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #345589;"></div>
  784. <div class="col-md-2" style="border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #83D4E7;"></div>
  785. <div class="col-md-3" style="max-width: 112px; border-bottom: 4px solid #000; padding: 5px; background: #18191c;"></div>
  786. </div>
  787. <div class="row">
  788. <div class="col-md-3" style="text-align: center; border-right: 4px solid #000; border-bottom: 4px solid #000;padding: 5px; background: #18191c;"><p style="text-align: center; font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Color Hex</p></div>
  789. <div class="col-md-2" style="text-align: center; border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #18191c;">#470003</div>
  790. <div class="col-md-2" style="text-align: center; border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #18191c;">#260001</div>
  791. <div class="col-md-2" style="text-align: center; border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #18191c;">#345589</div>
  792. <div class="col-md-2" style="text-align: center; border-right: 4px solid #000; border-bottom: 4px solid #000; padding: 5px; background: #18191c;">#83D4E7</div>
  793. <div class="col-md-3" style="max-width: 112px; border-bottom: 4px solid #000; padding: 5px; background: #18191c;"></div>
  794. </div>
  795. </div>
  796. <!--- color pallette end --->
  797. </div>
  798. <!-- NOTE: copy ⮝ this whole section to add more colors! -->
  799.  
  800. <div class="row">
  801. <!--- personality --->
  802. <div class="col bg-faded rounded-0" style="border-bottom: 4px solid #000; left: 15px; top: 0px; padding: 5px; background: #18191c;">
  803. <p style="margin: 0px; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">Personality</p>
  804. <p style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Write something about the personality or make a list.</p>
  805. </div>
  806. <!--- personality end --->
  807.  
  808. <!--- info section --->
  809. <div class="col bg-faded rounded-0" style="border-left: 4px solid #000; border-bottom: 4px solid #000; right: 15px; top: 0px; padding: 5px; background: #18191c;">
  810. <!--- basic info --->
  811. <div class="col bg-faded rounded-0" style="border-bottom: 4px solid #000; padding: 5px; background: #18191c;">
  812. <p style="margin: 0px; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">Basic Info</p>
  813. <table style="width: 400px; padding: 5px; border-style: solid; border-color: #000000; border-width: 0px; border-collapse: separate;">
  814. <tr><td>
  815. <table style="width: 400px; padding: 5px; border-style: solid; border-color: #000000; border-width: 0px; border-collapse: separate;">
  816. <tr>
  817. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Age</td>
  818. <td align="center" style="font-family: Arial; font-size: 20px; color: #FFFFFF">Text</td>
  819. </tr>
  820. <tr>
  821. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Gender</td>
  822. <td align="center" style="font-family: Arial; font-size: 20px; color: #FFFFFF">Text</td>
  823. </tr>
  824. <tr>
  825. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">High</td>
  826. <td align="center" style="font-family: Arial; font-size: 20px; color: #FFFFFF">Text</td>
  827. </tr>
  828. </table>
  829. </td><td>
  830. <table style="width: 400px; padding: 5px; border-style: solid; border-color: #000000; border-width: 0px; border-collapse: separate;">
  831. <tr>
  832. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Sexuality</td>
  833. <td align="center" style="font-family: Arial; font-size: 20px; color: #FFFFFF">Text</td>
  834. </tr>
  835. <tr>
  836. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Relationship with</td>
  837. <td align="center" style="font-family: Arial; font-size: 20px; color: #FFFFFF">Text</td>
  838. </tr>
  839. </table></td></tr>
  840. </table>
  841. </div>
  842. <!--- basic info end --->
  843. <!--- meta info --->
  844. <div class="col bg-faded rounded-0" style="padding: 5px; background: #18191c;">
  845. <p style="margin: 0px; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">Meta Info</p>
  846. <table style="width: 400px; padding: 5px; border-style: solid; border-color: #000000; border-width: 0px; border-collapse: separate;">
  847. <tr>
  848. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Designer</td>
  849. <td align="center" style="font-family: Arial; font-size: 20px; color: #64B6CF"><a href="URL">Text</a></td>
  850. </tr>
  851. <tr>
  852. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">Worth</td>
  853. <td align="center" style="font-family: Arial; font-size: 20px; color: #64B6CF">Text</td>
  854. </tr>
  855. <tr>
  856. <td style="font-family: Arial; font-size: 20px; font-weight: bold; color: #FFFFFF">World</td>
  857. <td align="center" style="font-family: Arial; font-size: 20px; color: #64B6CF"><a href="URL">Text</a></td>
  858. </tr>
  859. </table>
  860. </div>
  861. <!--- meta info end --->
  862. </div>
  863. <!--- info section end --->
  864. </div>
  865.  
  866. <div class="row">
  867. <!--- clothes section --->
  868. <div class="col bg-faded rounded-0" style="border-bottom: 4px solid #000; left: 15px; top: 0px; padding: 5px; background: #18191c;">
  869. <p style="margin: 0px; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">clothes</p>
  870. <!---------------- Clothes Picture ---------------------------------------->
  871. <div class="container" style="max-width:500px;">
  872. <div>
  873. <!-- Carousel -->
  874. <div id="carouselPic" class="carousel slide mx-auto p-1" data-ride="carousel" data-interval="50000">
  875. <!-- Bottom controls -->
  876. <ol class="carousel-indicators">
  877. <li data-target="#carouselPic" data-slide-to="0" class="active"></li>
  878. <li data-target="#carouselPic" data-slide-to="1"></li>
  879. <li data-target="#carouselPic" data-slide-to="2"></li>
  880. <li data-target="#carouselPic" data-slide-to="3"></li>
  881. <li data-target="#carouselPic" data-slide-to="4"></li>
  882. <li data-target="#carouselPic" data-slide-to="5"></li>
  883. <li data-target="#carouselPic" data-slide-to="6"></li>
  884. <li data-target="#carouselPic" data-slide-to="7"></li>
  885. <li data-target="#carouselPic" data-slide-to="8"></li>
  886. <li data-target="#carouselPic" data-slide-to="9"></li>
  887. <li data-target="#carouselPic" data-slide-to="10"></li>
  888. <li data-target="#carouselPic" data-slide-to="11"></li>
  889. </ol>
  890. <!-- Carousel items -->
  891. <div class="carousel-inner rounded">
  892.  
  893. <!-- Picture 0 -->
  894. <div class="carousel-item active">
  895. <!-- Background -->
  896. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  897. <div class="p-5 text-center mx-1">
  898. </div>
  899. </div>
  900. </div>
  901. <!-- Picture 0 end -->
  902.  
  903. <!-- Picture 1 -->
  904. <div class="carousel-item">
  905. <!-- Background -->
  906. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  907. <div class="p-5 text-center mx-1">
  908. </div>
  909. </div>
  910. </div>
  911. <!-- Picture 1 end -->
  912.  
  913. <!-- Picture 2 -->
  914. <div class="carousel-item">
  915. <!-- Background -->
  916. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  917. <div class="p-5 text-center mx-1">
  918. </div>
  919. </div>
  920. </div>
  921. <!-- Picture 2 end -->
  922.  
  923. <!-- Picture 3 -->
  924. <div class="carousel-item">
  925. <!-- Background -->
  926. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  927. <div class="p-5 text-center mx-1">
  928. </div>
  929. </div>
  930. </div>
  931. <!-- Picture 3 end -->
  932.  
  933. <!-- Picture 4 -->
  934. <div class="carousel-item">
  935. <!-- Background -->
  936. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  937. <div class="p-5 text-center mx-1">
  938. </div>
  939. </div>
  940. </div>
  941. <!-- Picture 4 end -->
  942.  
  943. <!-- Picture 5 -->
  944. <div class="carousel-item">
  945. <!-- Background -->
  946. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  947. <div class="p-5 text-center mx-1">
  948. </div>
  949. </div>
  950. </div>
  951. <!-- Picture 5 end -->
  952.  
  953. <!-- Picture 6 -->
  954. <div class="carousel-item">
  955. <!-- Background -->
  956. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  957. <div class="p-5 text-center mx-1">
  958. </div>
  959. </div>
  960. </div>
  961. <!-- Picture 6 end -->
  962.  
  963. <!-- Picture 7 -->
  964. <div class="carousel-item">
  965. <!-- Background -->
  966. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  967. <div class="p-5 text-center mx-1">
  968. </div>
  969. </div>
  970. </div>
  971. <!-- Picture 7 end -->
  972.  
  973. <!-- Picture 8 -->
  974. <div class="carousel-item">
  975. <!-- Background -->
  976. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  977. <div class="p-5 text-center mx-1">
  978. </div>
  979. </div>
  980. </div>
  981. <!-- Picture 8 end -->
  982.  
  983. <!-- Picture 9 -->
  984. <div class="carousel-item">
  985. <!-- Background -->
  986. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  987. <div class="p-5 text-center mx-1">
  988. </div>
  989. </div>
  990. </div>
  991. <!-- Picture 9 end -->
  992.  
  993. <!-- Picture 10 -->
  994. <div class="carousel-item">
  995. <!-- Background -->
  996. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  997. <div class="p-5 text-center mx-1">
  998. </div>
  999. </div>
  1000. </div>
  1001. <!-- Picture 10 end -->
  1002.  
  1003. <!-- Picture 11 -->
  1004. <div class="carousel-item">
  1005. <!-- Background -->
  1006. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1007. <div class="p-5 text-center mx-1">
  1008. </div>
  1009. </div>
  1010. </div>
  1011. <!-- Picture 11 end -->
  1012.  
  1013. </div>
  1014. <!-- Left/right buttons - do not touch -->
  1015. <a class="carousel-control-prev" href="#carouselPic" role="button" data-slide="prev">
  1016. <i class="text-white fas fa-chevron-left fa-2x"></i>
  1017. <span class="sr-only">Previous</span>
  1018. </a>
  1019. <a class="carousel-control-next" href="#carouselPic" role="button" data-slide="next">
  1020. <i class="text-white fas fa-chevron-right fa-2x"></i>
  1021. <span class="sr-only">Next</span>
  1022. </a>
  1023. </div>
  1024. </div>
  1025. </div>
  1026. <!---------------- Clothes Picture End ------------------------------------>
  1027. </div>
  1028. <!--- clothes section end --->
  1029.  
  1030. <!--- accessories section --->
  1031. <div class="col bg-faded rounded-0" style="border-left: 4px solid #000; border-bottom: 4px solid #000; right: 15px; top: 0px; padding: 5px; background: #18191c;">
  1032. <p style="margin: 0px; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">accessories</p>
  1033. <!---------------- Accessories Picture ---------------------------------------->
  1034. <div class="container" style="max-width:500px;">
  1035. <div>
  1036. <!-- Carousel -->
  1037. <div id="carouselPic1" class="carousel slide mx-auto p-1" data-ride="carousel" data-interval="50000">
  1038. <!-- Bottom controls -->
  1039. <ol class="carousel-indicators">
  1040. <li data-target="#carouselPic1" data-slide-to="0" class="active"></li>
  1041. <li data-target="#carouselPic1" data-slide-to="1"></li>
  1042. <li data-target="#carouselPic1" data-slide-to="2"></li>
  1043. <li data-target="#carouselPic1" data-slide-to="3"></li>
  1044. <li data-target="#carouselPic1" data-slide-to="4"></li>
  1045. <li data-target="#carouselPic1" data-slide-to="5"></li>
  1046. <li data-target="#carouselPic1" data-slide-to="6"></li>
  1047. <li data-target="#carouselPic1" data-slide-to="7"></li>
  1048. <li data-target="#carouselPic1" data-slide-to="8"></li>
  1049. <li data-target="#carouselPic1" data-slide-to="9"></li>
  1050. <li data-target="#carouselPic1" data-slide-to="10"></li>
  1051. <li data-target="#carouselPic1" data-slide-to="11"></li>
  1052. </ol>
  1053. <!-- Carousel items -->
  1054. <div class="carousel-inner rounded">
  1055.  
  1056. <!-- Picture 0 -->
  1057. <div class="carousel-item active">
  1058. <!-- Background -->
  1059. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1060. <div class="p-5 text-center mx-1">
  1061. </div>
  1062. </div>
  1063. </div>
  1064. <!-- Picture 0 end -->
  1065.  
  1066. <!-- Picture 1 -->
  1067. <div class="carousel-item">
  1068. <!-- Background -->
  1069. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1070. <div class="p-5 text-center mx-1">
  1071. </div>
  1072. </div>
  1073. </div>
  1074. <!-- Picture 1 end -->
  1075.  
  1076. <!-- Picture 2 -->
  1077. <div class="carousel-item">
  1078. <!-- Background -->
  1079. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1080. <div class="p-5 text-center mx-1">
  1081. </div>
  1082. </div>
  1083. </div>
  1084. <!-- Picture 2 end -->
  1085.  
  1086. <!-- Picture 3 -->
  1087. <div class="carousel-item">
  1088. <!-- Background -->
  1089. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1090. <div class="p-5 text-center mx-1">
  1091. </div>
  1092. </div>
  1093. </div>
  1094. <!-- Picture 3 end -->
  1095.  
  1096. <!-- Picture 4 -->
  1097. <div class="carousel-item">
  1098. <!-- Background -->
  1099. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1100. <div class="p-5 text-center mx-1">
  1101. </div>
  1102. </div>
  1103. </div>
  1104. <!-- Picture 4 end -->
  1105.  
  1106. <!-- Picture 5 -->
  1107. <div class="carousel-item">
  1108. <!-- Background -->
  1109. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1110. <div class="p-5 text-center mx-1">
  1111. </div>
  1112. </div>
  1113. </div>
  1114. <!-- Picture 5 end -->
  1115.  
  1116. <!-- Picture 6 -->
  1117. <div class="carousel-item">
  1118. <!-- Background -->
  1119. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1120. <div class="p-5 text-center mx-1">
  1121. </div>
  1122. </div>
  1123. </div>
  1124. <!-- Picture 6 end -->
  1125.  
  1126. <!-- Picture 7 -->
  1127. <div class="carousel-item">
  1128. <!-- Background -->
  1129. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1130. <div class="p-5 text-center mx-1">
  1131. </div>
  1132. </div>
  1133. </div>
  1134. <!-- Picture 7 end -->
  1135.  
  1136. <!-- Picture 8 -->
  1137. <div class="carousel-item">
  1138. <!-- Background -->
  1139. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1140. <div class="p-5 text-center mx-1">
  1141. </div>
  1142. </div>
  1143. </div>
  1144. <!-- Picture 8 end -->
  1145.  
  1146. <!-- Picture 9 -->
  1147. <div class="carousel-item">
  1148. <!-- Background -->
  1149. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1150. <div class="p-5 text-center mx-1">
  1151. </div>
  1152. </div>
  1153. </div>
  1154. <!-- Picture 9 end -->
  1155.  
  1156. <!-- Picture 10 -->
  1157. <div class="carousel-item">
  1158. <!-- Background -->
  1159. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1160. <div class="p-5 text-center mx-1">
  1161. </div>
  1162. </div>
  1163. </div>
  1164. <!-- Picture 10 end -->
  1165.  
  1166. <!-- Picture 11 -->
  1167. <div class="carousel-item">
  1168. <!-- Background -->
  1169. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1170. <div class="p-5 text-center mx-1">
  1171. </div>
  1172. </div>
  1173. </div>
  1174. <!-- Picture 11 end -->
  1175.  
  1176. </div>
  1177. <!-- Left/right buttons - do not touch -->
  1178. <a class="carousel-control-prev" href="#carouselPic1" role="button" data-slide="prev">
  1179. <i class="text-white fas fa-chevron-left fa-2x"></i>
  1180. <span class="sr-only">Previous</span>
  1181. </a>
  1182. <a class="carousel-control-next" href="#carouselPic1" role="button" data-slide="next">
  1183. <i class="text-white fas fa-chevron-right fa-2x"></i>
  1184. <span class="sr-only">Next</span>
  1185. </a>
  1186. </div>
  1187. </div>
  1188. </div>
  1189. <!---------------- Accessories Picture End ------------------------------------>
  1190. </div>
  1191. <!--- accessories section end --->
  1192.  
  1193. <!--- hair style section --->
  1194. <div class="col bg-faded rounded-0" style="border-left: 4px solid #000; border-bottom: 4px solid #000; right: 15px; top: 0px; padding: 5px; background: #18191c;">
  1195. <p style="margin: 0px; text-transform:uppercase; font-family: Arial; font-size: 40px; font-weight: bold; color: #FFFFFF">hair style</p>
  1196. <!---------------- Hair Style Picture ---------------------------------------->
  1197. <div class="container" style="max-width:500px;">
  1198. <div>
  1199. <!-- Carousel -->
  1200. <div id="carouselPic2" class="carousel slide mx-auto p-1" data-ride="carousel" data-interval="50000">
  1201. <!-- Bottom controls -->
  1202. <ol class="carousel-indicators">
  1203. <li data-target="#carouselPic2" data-slide-to="0" class="active"></li>
  1204. <li data-target="#carouselPic2" data-slide-to="1"></li>
  1205. <li data-target="#carouselPic2" data-slide-to="2"></li>
  1206. <li data-target="#carouselPic2" data-slide-to="3"></li>
  1207. <li data-target="#carouselPic2" data-slide-to="4"></li>
  1208. <li data-target="#carouselPic2" data-slide-to="5"></li>
  1209. <li data-target="#carouselPic2" data-slide-to="6"></li>
  1210. <li data-target="#carouselPic2" data-slide-to="7"></li>
  1211. <li data-target="#carouselPic2" data-slide-to="8"></li>
  1212. <li data-target="#carouselPic2" data-slide-to="9"></li>
  1213. <li data-target="#carouselPic2" data-slide-to="10"></li>
  1214. <li data-target="#carouselPic2" data-slide-to="11"></li>
  1215. </ol>
  1216. <!-- Carousel items -->
  1217. <div class="carousel-inner rounded">
  1218.  
  1219. <!-- Picture 0 -->
  1220. <div class="carousel-item active">
  1221. <!-- Background -->
  1222. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1223. <div class="p-5 text-center mx-1">
  1224. </div>
  1225. </div>
  1226. </div>
  1227. <!-- Picture 0 end -->
  1228.  
  1229. <!-- Picture 1 -->
  1230. <div class="carousel-item">
  1231. <!-- Background -->
  1232. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1233. <div class="p-5 text-center mx-1">
  1234. </div>
  1235. </div>
  1236. </div>
  1237. <!-- Picture 1 end -->
  1238.  
  1239. <!-- Picture 2 -->
  1240. <div class="carousel-item">
  1241. <!-- Background -->
  1242. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1243. <div class="p-5 text-center mx-1">
  1244. </div>
  1245. </div>
  1246. </div>
  1247. <!-- Picture 2 end -->
  1248.  
  1249. <!-- Picture 3 -->
  1250. <div class="carousel-item">
  1251. <!-- Background -->
  1252. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1253. <div class="p-5 text-center mx-1">
  1254. </div>
  1255. </div>
  1256. </div>
  1257. <!-- Picture 3 end -->
  1258.  
  1259. <!-- Picture 4 -->
  1260. <div class="carousel-item">
  1261. <!-- Background -->
  1262. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1263. <div class="p-5 text-center mx-1">
  1264. </div>
  1265. </div>
  1266. </div>
  1267. <!-- Picture 4 end -->
  1268.  
  1269. <!-- Picture 5 -->
  1270. <div class="carousel-item">
  1271. <!-- Background -->
  1272. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1273. <div class="p-5 text-center mx-1">
  1274. </div>
  1275. </div>
  1276. </div>
  1277. <!-- Picture 5 end -->
  1278.  
  1279. <!-- Picture 6 -->
  1280. <div class="carousel-item">
  1281. <!-- Background -->
  1282. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1283. <div class="p-5 text-center mx-1">
  1284. </div>
  1285. </div>
  1286. </div>
  1287. <!-- Picture 6 end -->
  1288.  
  1289. <!-- Picture 7 -->
  1290. <div class="carousel-item">
  1291. <!-- Background -->
  1292. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1293. <div class="p-5 text-center mx-1">
  1294. </div>
  1295. </div>
  1296. </div>
  1297. <!-- Picture 7 end -->
  1298.  
  1299. <!-- Picture 8 -->
  1300. <div class="carousel-item">
  1301. <!-- Background -->
  1302. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1303. <div class="p-5 text-center mx-1">
  1304. </div>
  1305. </div>
  1306. </div>
  1307. <!-- Picture 8 end -->
  1308.  
  1309. <!-- Picture 9 -->
  1310. <div class="carousel-item">
  1311. <!-- Background -->
  1312. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1313. <div class="p-5 text-center mx-1">
  1314. </div>
  1315. </div>
  1316. </div>
  1317. <!-- Picture 9 end -->
  1318.  
  1319. <!-- Picture 10 -->
  1320. <div class="carousel-item">
  1321. <!-- Background -->
  1322. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1323. <div class="p-5 text-center mx-1">
  1324. </div>
  1325. </div>
  1326. </div>
  1327. <!-- Picture 10 end -->
  1328.  
  1329. <!-- Picture 11 -->
  1330. <div class="carousel-item">
  1331. <!-- Background -->
  1332. <div class="rounded pt-1" style="background-image:url(URL);height:400px;background-size:100% 100%">
  1333. <div class="p-5 text-center mx-1">
  1334. </div>
  1335. </div>
  1336. </div>
  1337. <!-- Picture 11 end -->
  1338.  
  1339. </div>
  1340. <!-- Left/right buttons - do not touch -->
  1341. <a class="carousel-control-prev" href="#carouselPic2" role="button" data-slide="prev">
  1342. <i class="text-white fas fa-chevron-left fa-2x"></i>
  1343. <span class="sr-only">Previous</span>
  1344. </a>
  1345. <a class="carousel-control-next" href="#carouselPic2" role="button" data-slide="next">
  1346. <i class="text-white fas fa-chevron-right fa-2x"></i>
  1347. <span class="sr-only">Next</span>
  1348. </a>
  1349. </div>
  1350. </div>
  1351. </div>
  1352. <!---------------- Hair Style Picture End ------------------------------------>
  1353. </div>
  1354. <!--- hair style end --->
  1355. </div>
  1356.  
  1357. <!---------------- LANGUAGE 2 END ---------------------------------------->
  1358. </div></div></div> <!--tab 2 section end-->
  1359. </div>
  1360.  
  1361. <!--- CREDITS -- DO NOT REMOVE! --->
  1362. <p align="right"><a href="https://toyhou.se/CrocShop"><img src="https://f2.toyhou.se/file/f2-toyhou-se/images/49996103_jVhwWh93jzmHRDL.png"></a></p>
  1363. <!--- Credits end --->
Add Comment
Please, Sign In to add comment
Public Pastes
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!