Advertisement
Guest User

MLP Code F2U (ACCENT)

a guest
Sep 7th, 2023
761
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.21 KB | None | 0 0
  1. <div class="container-fluid">
  2. <div class="row no-gutters justify-content-center">
  3. <div class="col-lg-6">
  4. <div class="row no-gutters justify-content-center">
  5. <!---------------ICON----------->
  6. <div class="col-lg-4 p-1">
  7. <div class="card border-1 rounded-2 p-1">
  8. <div class="border-0 rounded-0 h-100" style="background-size:cover; background-position:center; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/characters/21182242?1681997220');">
  9. <br>
  10. <br>
  11. <br>
  12. <br>
  13. <br>
  14. <br>
  15. <br>
  16. <br>
  17. <br>
  18. </div>
  19. </div>
  20. <!---------------QUOTE----------->
  21. <div class="card border-1 rounded-2 p-1 mt-2 ">
  22. <div class="card border-0 text-center bg-faded rounded-0 h-100 p-1" style="letter-spacing: 1px; font-size: 10px;"><span style="color: rgb(237, 69, 141);">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  23. &quot;</span></div>
  24. </div>
  25. </div>
  26. <!---------------INFO----------->
  27. <div class="col-lg-8 p-1">
  28. <div class="card border-1 rounded-2 p-1">
  29. <div class="card border-0 bg-faded rounded-0 h-100 p-1">
  30. <div class="text-center p-1 display-3" style="letter-spacing: 1px; font-size: 30px;">NAME SURNAME</div>
  31. <hr class="m-1">
  32.  
  33. <p class="text-center "><span style="color: rgb(237, 69, 141);">adjective &bull; <span style="color: rgb(237, 69, 141);">adjective&nbsp;</span>&bull; <span style="color: rgb(237, 69, 141);">adjective&nbsp;</span></span>
  34. </p>
  35. </div>
  36. </div>
  37. <div class="card border-1 rounded-2 p-1 mt-2 ">
  38. <div class="card border-0 bg-faded rounded-0 h-100 p-1">
  39. <div class="p- m-1 border-0" style="height: 137px; overflow: auto; text-align: justify;">
  40. <div class="row no-gutters justify-content-center text-center">
  41. <div class="col-lg-4">
  42.  
  43. <p style="font-size: 13px;">X
  44. <br><span class=" " style="letter-spacing: 1px; font-size: 10px; color: rgb(237, 69, 141);">NICKNAMES</span></p>
  45. <hr class="mt-1 mb-1">
  46. </div>
  47. <div class="col-lg-4">
  48.  
  49. <p style="font-size: 13px;">X
  50. <br><span style="letter-spacing: 1px; font-size: 10px; color: rgb(237, 69, 141);">SPECIES</span></p>
  51. <hr class="mt-1 mb-1">
  52. </div>
  53. <div class="col-lg-4">
  54.  
  55. <p style="font-size: 13px;">X
  56. <br><span style="letter-spacing: 1px; font-size: 10px; color: rgb(237, 69, 141);">AGE</span></p>
  57. <hr class="mt-1 mb-1">
  58. </div>
  59. <div class="col-lg-4">
  60.  
  61. <p style="font-size: 13px;">X
  62. <br><span style="letter-spacing: 1px; font-size: 10px; color: rgb(237, 69, 141);">GENDER</span></p>
  63. <hr class="mt-1 mb-1">
  64. </div>
  65. <div class="col-lg-4">
  66.  
  67. <p style="font-size: 13px;">X/X
  68. <br><span style="letter-spacing: 1px; font-size: 10px; color: rgb(237, 69, 141);">PRONOUNS</span></p>
  69. <hr class="mt-1 mb-1">
  70. </div>
  71. <div class="col-lg-4">
  72.  
  73. <p style="font-size: 13px;">Xsexual
  74. <br><span style="letter-spacing: 1px; font-size: 10px; color: rgb(237, 69, 141);">SEXUALITY</span></p>
  75. <hr class="mt-1 mb-1">
  76. </div>
  77. <div class="col-lg-4">
  78.  
  79. <p style="font-size: 13px;">X
  80. <br><span style="letter-spacing: 1px; font-size: 10px; color: rgb(237, 69, 141);">OCCUPATION</span></p>
  81. </div>
  82. <div class="col-lg-4">
  83.  
  84. <p style="font-size: 13px;">X
  85. <br><span style="letter-spacing: 1px; font-size: 10px; color: rgb(237, 69, 141);">RESIDENCE</span></p>
  86. </div>
  87. <div class="col-lg-4">
  88.  
  89. <p style="font-size: 13px;">X
  90. <br><span style="letter-spacing: 1px; font-size: 10px; color: rgb(237, 69, 141);">LOCATION</span></p>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="col-lg-6 p-1">
  98. <div class="card border-1 rounded-2 p-1 ">
  99. <div class="card border-0 text-center bg-faded rounded-0 h-100 p-1">
  100. <div class="mb-1 text-center display-3" style="letter-spacing: 1px; font-size: 16px;"><span style="color: rgb(237, 69, 141);">ABOUT</span></div>
  101. <div class="card border-1 rounded-2 p-1 ">
  102. <div class="card bg-faded border-0 rounded-2 p-1 ">
  103. <div class="px-1 m-0" style="height: 85px; overflow: auto; text-align: justify; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. <div class="col-lg-3 p-1">
  110. <div class="card border-1 rounded-2 p-1 ">
  111. <div class="card border-0 text-center bg-faded rounded-0 h-100 p-1">
  112. <div class="text-center display-3" style="color: rgb(237, 69, 141);letter-spacing: 1px; font-size: 18px;"><i class="fas font-weight-lighter ml-2 fa-heart"></i>
  113. <hr class="mt-1 mb-0">
  114. </div>
  115. <div class="px-1 m-0 border-0" style="height: 100px; overflow: auto; text-align: justify; font-size: 13px;">
  116.  
  117. <ul class="list-group list-group-flush p-">
  118. <li class="list-group-item bg-transparent d-flex justify-content-center py-1" style="text-align: center;">X</li>
  119. <li class="list-group-item bg-transparent d-flex justify-content-center py-1" style="text-align: center;">X</li>
  120. <li class="list-group-item bg-transparent d-flex justify-content-center py-1">X</li>
  121. </ul>
  122. </div>
  123. </div>
  124. </div>
  125. </div>
  126. <div class="col-lg-3 p-1">
  127. <div class="card border-1 rounded-2 p-1 ">
  128. <div class="card border-0 text-center bg-faded rounded-0 h-100 p-1">
  129. <div class="text-center display-3" style="color: rgb(237, 69, 141);letter-spacing: 1px; font-size: 18px;"><i class="fas font-weight-lighter ml-2 fa-heart-crack"></i>
  130. <hr class="mt-1 mb-0">
  131. </div>
  132. <div class="px-1 m-0 border-0" style="height: 100px; overflow: auto; text-align: justify; font-size: 13px;">
  133.  
  134. <ul class="list-group list-group-flush p-">
  135. <li class="list-group-item bg-transparent d-flex justify-content-center py-1" style="text-align: center;">X</li>
  136. <li class="list-group-item bg-transparent d-flex justify-content-center py-1">X</li>
  137. <li class="list-group-item bg-transparent d-flex justify-content-center py-1">X</li>
  138. </ul>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. <!---------------INFO----------->
  144. <div class="col-lg-9 p-1">
  145. <div class="card border-1 rounded-2 p-1 ">
  146. <div class="card border-0 bg-faded rounded-0 h-100 p-">
  147. <div class="px-1 m- border-0" style="height: 173px; overflow: auto; text-align: justify;">
  148. <div class="row no-gutters justify-content-center text-center">
  149. <div class="col-lg-7 mt-1 px-1">
  150. <div class="text-center mb-1 display-3" style="letter-spacing: 1px; font-size: 16px;"><span style="color: rgb(237, 69, 141);">BACKSTORY</span></div>
  151. <div class="card border-1 rounded-2 p-1 ">
  152. <div class="card bg-faded border-0 rounded-2 p-1 ">
  153. <div class="px-1 p-1 m-0 border-0" style="height: 125px; overflow: auto; text-align: justify; font-size: 13px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  154. </div>
  155. </div>
  156. </div>
  157. <div class="col-lg-5 mt-1 px-1">
  158. <div class="text-center display-3" style="letter-spacing: 1px; font-size: 16px;">
  159. <div class="text-center mb-1 display-3" style="letter-spacing: 1px; font-size: 16px;"><span style="color: rgb(237, 69, 141);">TRIVIA</span></div>
  160. </div>
  161. <div class="card border-1 rounded-2 p-1 ">
  162. <div class="card bg-faded border-0 rounded-2 p-1 ">
  163. <div class="px-1 m-0 border-0" style="height: 125px; overflow: auto; text-align: justify; font-size: 13px;">
  164.  
  165. <ul class="list-unstyled text-left">
  166. <li class="mb-1"><i style="color: rgb(237, 69, 141);" class="far fa-star mr-1"></i> trivia
  167. <hr class="mt-2 mb-1">
  168. </li>
  169. <li class="mb-1"><i style="color: rgb(237, 69, 141);" class="far fa-star mr-1"></i> trivia
  170. <hr class="mt-2 mb-1">
  171. </li>
  172. <li class="mb-1"><i style="color: rgb(237, 69, 141);" class="far fa-star mr-1"></i> trivia</li>
  173. </ul>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179. </div>
  180. </div>
  181. </div>
  182. </div>
  183. <div class="col-lg-3 p-1">
  184. <div class="card border-1 rounded-2 p-1 ">
  185. <div class="card border-0 text-center bg-faded rounded-0 h-100 p-1"><a class="text-center display-3 collapsed" data-toggle="collapse" href="#CM" style="color: rgb(237, 69, 141); letter-spacing: 1px; font-size: 16px;">CUTIEMARK</a></div>
  186. </div>
  187. <div class="mt-2 card border-1 rounded-2 p-1">
  188. <div style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/21182242?1681997220) no-repeat center;background-size:cover;">
  189. <div class="p-" style="height:130px;overflow:auto;">
  190. <div class="collapse" id="CM">
  191. <div style="height:130px;overflow:auto; text-align: justify; font-size: 10px;">
  192. <div class="card border-0 bg-faded rounded-0 p-1 ">Describe how did your pony get their cutiemark here.
  193. <br>
  194. <br>
  195. <br>
  196. <br>
  197. <br>
  198. <br>
  199. <br>
  200. </div>
  201. </div>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. </div>
  209. <div class="col-lg-6">
  210. <div class="row no-gutters justify-content-center">
  211. <!---------------BASIC INFO----------->
  212. <!---------------OVERVIEW----------->
  213. <div class="col-lg-12 p-1 ">
  214. <div class="card border-1 rounded-2 p-1 h-100 ">
  215. <div class="card border-0 bg-faded rounded-2 p-1 h-100">
  216. <div class="p-1 m- border-0" style="height: 241px; overflow: auto; text-align: justify;">
  217. <!----- RELATIONSHIP ------>
  218. <div class="card p-1 ">
  219. <div class="card border-0 bg-faded rounded-2 p-1">
  220. <!----- IMAGE ------>
  221. <div class="row no-gutters justify-content-center">
  222. <div class="col-lg-2">
  223. <div class="card border-1 rounded-2 p-1">
  224. <div class="rounded-0 border-0 h-100" style="background-size:cover; background-position:center; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/characters/21182242?1681997220');">
  225. <br>
  226. <br>
  227. <br>
  228. <br>
  229. </div>
  230. </div>
  231. </div>
  232. <div class="col-lg-10">
  233. <div class="px-2 display-3" style="font-size: 17px;"><span style="color: rgb(237, 69, 141);"><a href="LINK" id="" rel="noopener noreferrer" style="letter-spacing: 1px; color: rgb(237, 69, 141);" target="_blank">NAME</a><span style="font-size:13px;">&nbsp;| RELATIONSHIP <i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="fa fa-heart"></i><i class="far fa-heart"></i></span></span>
  234. </div>
  235. <hr class="m-1">
  236. <div class="p-">
  237. <div class="border px-2 p-1" style="height: 65px; overflow: auto; text-align: justify;">
  238.  
  239. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  240. </div>
  241. </div>
  242. </div>
  243. </div>
  244. </div>
  245. </div>
  246. <!----- RELATIONSHIP ------>
  247. <div class="card p-1 mt-2">
  248. <div class="card border-0 bg-faded rounded-2 p-1">
  249. <!----- IMAGE ------>
  250. <div class="row no-gutters justify-content-center">
  251. <div class="col-lg-10">
  252. <div class="px-2 text-right display-3" style="font-size: 17px;"><span style="color: rgb(237, 69, 141);"><span style="font-size:13px;"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="far fa-star"></i><i class="far fa-star"></i> RELATIONSHIP |&nbsp;</span><a href="LINK" id="" rel="noopener noreferrer" style="letter-spacing: 1px; color: rgb(237, 69, 141);" target="_blank">NAME</a></span>
  253. </div>
  254. <hr class="m-1">
  255. <div class="p-">
  256. <div class="border px-2 p-1" style="height: 65px; overflow: auto; text-align: left;">
  257.  
  258. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  259. </div>
  260. </div>
  261. </div>
  262. <div class="col-lg-2">
  263. <div class="card border-1 rounded-2 p-1">
  264. <div class="rounded-0 border-0 h-100" style="background-size:cover; background-position:center; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/characters/21182242?1681997220');">
  265. <br>
  266. <br>
  267. <br>
  268. <br>
  269. </div>
  270. </div>
  271. </div>
  272. </div>
  273. </div>
  274. </div>
  275. </div>
  276. </div>
  277. </div>
  278. </div>
  279. <!---------------PURPOSE----------->
  280. <div class="col-lg-7 p-1">
  281. <div class="card border-1 rounded-2 p-1 h-100">
  282. <!--TAB CONTENT-->
  283. <div class="tab-content">
  284. <!------ALT ----->
  285. <div class="tab-pane fade" id="ALT1">
  286. <div class="border-0 bg-faded rounded-2 p- h-100" style="background-size:cover; background-position:center; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/characters/21182242?1681997220');">
  287. <br>
  288. <br>
  289. <br>
  290. <br>
  291. <br>
  292. <br>
  293. <br>
  294. <br>
  295. <br>
  296. <br>
  297. <br>
  298. <br>
  299. <br>
  300. <br>
  301. <br>
  302. </div>
  303. </div>
  304. <!------ALT2 ----->
  305. <div class="tab-pane fade active show" id="ALT2">
  306. <div class="border-0 bg-faded rounded-2 p- h-100" style="background-size:cover; background-position:center; background-image:url('https://f2.toyhou.se/file/f2-toyhou-se/characters/21182242?1681997220');">
  307. <br>
  308. <br>
  309. <br>
  310. <br>
  311. <br>
  312. <br>
  313. <br>
  314. <br>
  315. <br>
  316. <br>
  317. <br>
  318. <br>
  319. <br>
  320. <br>
  321. <br>
  322. </div>
  323. </div>
  324. </div>
  325. </div>
  326. </div>
  327. <div class="col-lg-5 p-1">
  328. <div class="card border-1 rounded-2 p-1 h-100">
  329. <div class="card border-0 bg-faded rounded-2 h-100">
  330. <div class="p-2 m- border-0" style="height: 324px; overflow: auto; text-align: justify;">
  331. <div class="text-center mb-1 display-3" style="letter-spacing: 1px; font-size: 16px;"><span style="color: rgb(237, 69, 141);">DESIGN NOTES</span></div>
  332. <div class="card border-1 rounded-2 p-1 mt-2">
  333. <div class="card bg-faded border-0 rounded-2 p-1 ">
  334. <div class="px-1 m-0 border-0" style="height: 219px; overflow: auto; text-align: justify; font-size: 13px;">
  335.  
  336. <ul class="list-unstyled text-left">
  337. <li class="mb-1"><i style="color: rgb(237, 69, 141);" class="far fa-pen mr-1"></i> note
  338. <hr class="mt-2 mb-1">
  339. </li>
  340. <li class="mb-1"><i style="color: rgb(237, 69, 141);" class="far fa-pen mr-1"></i> note
  341. <hr class="mt-2 mb-1">
  342. </li>
  343. <li class="mb-1"><i style="color: rgb(237, 69, 141);" class="far fa-pen mr-1"></i>note</li>
  344. </ul>
  345. </div>
  346. </div>
  347. </div>
  348.  
  349. <ul class="nav nav-pills nav-fill d-flex flex-wrap mt-1">
  350. <li class="nav-item p-1"><a class="nav-link btn btn-secondary border- text-muted text-uppercase show active" data-toggle="pill" href="#ALT1"><span style="font-size: 0.95em; letter-spacing: 1.5px; color: rgb(237, 69, 141);">ALT</span></a></li>
  351. <li class="nav-item p-1"><a class="nav-link btn btn-secondary border- text-muted text-uppercase show" data-toggle="pill" href="#ALT2"><span style="font-size: 0.95em; letter-spacing: 1.5px; color: rgb(237, 69, 141);">ALT 2</span></a></li>
  352. </ul>
  353. </div>
  354. </div>
  355. </div>
  356. </div>
  357. <!---------------END----------->
  358. </div>
  359. </div>
  360. </div>
  361.  
  362. <p class="text-right" style="text-align: center;">&nbsp; <a class="text-secondary " data-toggle="tooltip" href="https://toyhou.se/xCaramelCookiex/characters/folder:3531028" id="" title="code by xCaramelCookiex"><i class="far fa-cookie-bite fa-flip-horizontal fa-sm"></i><i class="far fa-cookie"></i><i class="far fa-cookie-bite fa-sm"></i></a></p>
  363. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement