API tools faq
paste
Advertisement
Guest User

MLP Code F2U (BOOTSTRAP)

a guest
Sep 7th, 2023
551
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.52 KB | None | 0 0
raw download clone embed print report
  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-muted text-center bg-faded rounded-0 h-100 p-1" style="letter-spacing: 1px; font-size: 10px;">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&quot;</div>
  23. </div>
  24. </div>
  25. <!---------------INFO----------->
  26. <div class="col-lg-8 p-1">
  27. <div class="card border-1 rounded-2 p-1">
  28. <div class="card border-0 bg-faded rounded-0 h-100 p-1">
  29. <div class="text-center p-1 display-3" style="letter-spacing: 1px; font-size: 30px;">NAME SURNAME</div>
  30. <hr class="m-1">
  31.  
  32. <p class="text-center text-muted">adjective &bull; adjective &bull; adjective</p>
  33. </div>
  34. </div>
  35. <div class="card border-1 rounded-2 p-1 mt-2 ">
  36. <div class="card border-0 bg-faded rounded-0 h-100 p-1">
  37. <div class="p- m-1 border-0" style="height: 137px; overflow: auto; text-align: justify;">
  38. <div class="row no-gutters justify-content-center text-center">
  39. <div class="col-lg-4">
  40.  
  41. <p style="font-size: 13px;">X
  42. <br><span class="text-muted " style="letter-spacing: 1px; font-size: 10px;">NICKNAMES</span></p>
  43. <hr class="mt-1 mb-1">
  44. </div>
  45. <div class="col-lg-4">
  46.  
  47. <p style="font-size: 13px;">X
  48. <br><span class="text-muted" style="letter-spacing: 1px; font-size: 10px;">SPECIES</span></p>
  49. <hr class="mt-1 mb-1">
  50. </div>
  51. <div class="col-lg-4">
  52.  
  53. <p style="font-size: 13px;">X
  54. <br><span class="text-muted" style="letter-spacing: 1px; font-size: 10px;">AGE</span></p>
  55. <hr class="mt-1 mb-1">
  56. </div>
  57. <div class="col-lg-4">
  58.  
  59. <p style="font-size: 13px;">X
  60. <br><span class="text-muted" style="letter-spacing: 1px; font-size: 10px;">GENDER</span></p>
  61. <hr class="mt-1 mb-1">
  62. </div>
  63. <div class="col-lg-4">
  64.  
  65. <p style="font-size: 13px;">X/X
  66. <br><span class="text-muted" style="letter-spacing: 1px; font-size: 10px;">PRONOUNS</span></p>
  67. <hr class="mt-1 mb-1">
  68. </div>
  69. <div class="col-lg-4">
  70.  
  71. <p style="font-size: 13px;">Xsexual
  72. <br><span class="text-muted" style="letter-spacing: 1px; font-size: 10px;">SEXUALITY</span></p>
  73. <hr class="mt-1 mb-1">
  74. </div>
  75. <div class="col-lg-4">
  76.  
  77. <p style="font-size: 13px;">X
  78. <br><span class="text-muted" style="letter-spacing: 1px; font-size: 10px;">OCCUPATION</span></p>
  79. </div>
  80. <div class="col-lg-4">
  81.  
  82. <p style="font-size: 13px;">X
  83. <br><span class="text-muted" style="letter-spacing: 1px; font-size: 10px;">RESIDENCE</span></p>
  84. </div>
  85. <div class="col-lg-4">
  86.  
  87. <p style="font-size: 13px;">X
  88. <br><span class="text-muted" style="letter-spacing: 1px; font-size: 10px;">LOCATION</span></p>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. <div class="col-lg-6 p-1">
  96. <div class="card border-1 rounded-2 p-1 ">
  97. <div class="card border-0 text-center bg-faded rounded-0 h-100 p-1">
  98. <div class="mb-1 text-center text-muted display-3" style="letter-spacing: 1px; font-size: 16px;">ABOUT</div>
  99. <div class="card border-1 rounded-2 p-1 ">
  100. <div class="card bg-faded border-0 rounded-2 p-1 ">
  101. <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>
  102. </div>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="col-lg-3 p-1">
  108. <div class="card border-1 rounded-2 p-1 ">
  109. <div class="card border-0 text-center bg-faded rounded-0 h-100 p-1">
  110. <div class="text-center text-muted display-3" style="letter-spacing: 1px; font-size: 18px;"><i class="fas font-weight-lighter ml-2 fa-heart"></i>
  111. <hr class="mt-1 mb-0">
  112. </div>
  113. <div class="px-1 m-0 border-0" style="height: 100px; overflow: auto; text-align: justify; font-size: 13px;">
  114.  
  115. <ul class="list-group list-group-flush p-">
  116. <li class="list-group-item bg-transparent d-flex justify-content-center py-1" style="text-align: center;">X</li>
  117. <li class="list-group-item bg-transparent d-flex justify-content-center py-1" style="text-align: center;">X</li>
  118. <li class="list-group-item bg-transparent d-flex justify-content-center py-1">X</li>
  119. <li class="list-group-item bg-transparent d-flex justify-content-center py-1">X</li>
  120. </ul>
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. <div class="col-lg-3 p-1">
  126. <div class="card border-1 rounded-2 p-1 ">
  127. <div class="card border-0 text-center bg-faded rounded-0 h-100 p-1">
  128. <div class="text-center text-muted display-3" style="letter-spacing: 1px; font-size: 18px;"><i class="fas font-weight-lighter ml-2 fa-heart-crack"></i>
  129. <hr class="mt-1 mb-0">
  130. </div>
  131. <div class="px-1 m-0 border-0" style="height: 100px; overflow: auto; text-align: justify; font-size: 13px;">
  132.  
  133. <ul class="list-group list-group-flush p-">
  134. <li class="list-group-item bg-transparent d-flex justify-content-center py-1" style="text-align: center;">X</li>
  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. <div class="col-lg-9 p-1">
  144. <div class="card border-1 rounded-2 p-1 ">
  145. <div class="card border-0 bg-faded rounded-0 h-100 p-">
  146. <div class="px-1 m- border-0" style="height: 173px; overflow: auto; text-align: justify;">
  147. <div class="row no-gutters justify-content-center text-center">
  148. <div class="col-lg-7 mt-1 px-1">
  149. <div class="text-center mb-1 text-muted display-3" style="letter-spacing: 1px; font-size: 16px;">BACKSTORY</div>
  150. <div class="card border-1 rounded-2 p-1 ">
  151. <div class="card bg-faded border-0 rounded-2 p-1 ">
  152. <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>
  153. </div>
  154. </div>
  155. </div>
  156. <div class="col-lg-5 mt-1 px-1">
  157. <div class="text-center text-muted display-3" style="letter-spacing: 1px; font-size: 16px;">
  158. <div class="text-center mb-1 text-muted display-3" style="letter-spacing: 1px; font-size: 16px;">TRIVIA</div>
  159. </div>
  160. <div class="card border-1 rounded-2 p-1 ">
  161. <div class="card bg-faded border-0 rounded-2 p-1 ">
  162. <div class="px-1 m-0 border-0" style="height: 125px; overflow: auto; text-align: justify; font-size: 13px;">
  163.  
  164. <ul class="list-unstyled text-left">
  165. <li class="mb-1"><i class="far fa-star text-muted mr-1"></i> trivia
  166. <hr class="mt-2 mb-1">
  167. </li>
  168. <li class="mb-1"><i class="far fa-star text-muted mr-1"></i> trivia
  169. <hr class="mt-2 mb-1">
  170. </li>
  171. <li class="mb-1"><i class="far fa-star text-muted mr-1"></i> trivia</li>
  172. </ul>
  173. </div>
  174. </div>
  175. </div>
  176. </div>
  177. </div>
  178. </div>
  179. </div>
  180. </div>
  181. </div>
  182. <div class="col-lg-3 p-1">
  183. <div class="card border-1 rounded-2 p-1 ">
  184. <div class="card border-0 text-muted text-center bg-faded rounded-0 h-100 p-1"><a class="text-center display-3 collapsed" data-toggle="collapse" href="#CM" style="letter-spacing: 1px; font-size: 16px;">CUTIEMARK</a></div>
  185. </div>
  186. <div class="mt-2 card border-1 rounded-2 p-1">
  187. <div style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/characters/21182242?1681997220) no-repeat center;background-size:cover;">
  188. <div class="p-" style="height:130px;overflow:auto;">
  189. <div class="collapse" id="CM">
  190. <div style="height:130px;overflow:auto; text-align: justify; font-size: 10px;">
  191. <div class="card border-0 bg-faded rounded-0 p-1 ">Describe how did your pony get their cutiemark here.
  192. <br>
  193. <br>
  194. <br>
  195. <br>
  196. <br>
  197. <br>
  198. <br>
  199. </div>
  200. </div>
  201. </div>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. <div class="col-lg-6">
  209. <div class="row no-gutters justify-content-center">
  210. <!---------------RELATIONSHIPS----------->
  211. <div class="col-lg-12 p-1 ">
  212. <div class="card border-1 rounded-2 p-1 h-100 ">
  213. <div class="card border-0 bg-faded rounded-2 p-1 h-100">
  214. <div class="p-1 m- border-0" style="height: 241px; overflow: auto; text-align: justify;">
  215. <!----- RELATIONSHIP ------>
  216. <div class="card p-1 ">
  217. <div class="card border-0 bg-faded rounded-2 p-1">
  218. <!----- IMAGE ------>
  219. <div class="row no-gutters justify-content-center">
  220. <div class="col-lg-2">
  221. <div class="card border-1 rounded-2 p-1">
  222. <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');">
  223. <br>
  224. <br>
  225. <br>
  226. <br>
  227. </div>
  228. </div>
  229. </div>
  230. <div class="col-lg-10">
  231. <div class="px-2 text-muted display-3" style="font-size: 17px;"><a href="LINK" id="" rel="noopener noreferrer" style="letter-spacing: 1px;" target="_blank">NAME</a><span class="text-muted" 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></div>
  232. <hr class="m-1">
  233. <div class="p-">
  234. <div class="border px-2 p-1" style="height: 65px; overflow: auto; text-align: left;">
  235.  
  236. <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>
  237. </div>
  238. </div>
  239. </div>
  240. </div>
  241. </div>
  242. </div>
  243. <!----- RELATIONSHIP ------>
  244. <div class="card p-1 mt-2">
  245. <div class="card border-0 bg-faded rounded-2 p-1">
  246. <!----- IMAGE ------>
  247. <div class="row no-gutters justify-content-center">
  248. <div class="col-lg-10">
  249. <div class="px-2 text-muted text-right display-3" style="font-size: 17px;"><span class="text-muted" style="font-size:13px;">&nbsp;<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;" target="_blank">NAME</a></div>
  250. <hr class="m-1">
  251. <div class="p-">
  252. <div class="border px-2 p-1" style="height: 65px; overflow: auto; text-align: left;">
  253.  
  254. <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>
  255. </div>
  256. </div>
  257. </div>
  258. <div class="col-lg-2">
  259. <div class="card border-1 rounded-2 p-1">
  260. <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');">
  261. <br>
  262. <br>
  263. <br>
  264. <br>
  265. </div>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270. </div>
  271. <!----- RELATIONSHIP ------>
  272. <div class="card p-1 mt-2">
  273. <div class="card border-0 bg-faded rounded-2 p-1">
  274. <!----- IMAGE ------>
  275. <div class="row no-gutters justify-content-center">
  276. <div class="col-lg-2">
  277. <div class="card border-1 rounded-2 p-1">
  278. <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');">
  279. <br>
  280. <br>
  281. <br>
  282. <br>
  283. </div>
  284. </div>
  285. </div>
  286. <div class="col-lg-10">
  287. <div class="px-2 text-muted display-3" style="font-size: 17px;"><a href="LINK" id="" rel="noopener noreferrer" style="letter-spacing: 1px;" target="_blank">NAME</a><span class="text-muted" 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></div>
  288. <hr class="m-1">
  289. <div class="p-">
  290. <div class="border px-2 p-1" style="height: 65px; overflow: auto; text-align: left;">
  291.  
  292. <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>
  293. </div>
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. </div>
  303. <!---------------TABS----------->
  304. <div class="col-lg-7 p-1">
  305. <div class="card border-1 rounded-2 p-1 h-100">
  306. <!--TAB CONTENT-->
  307. <div class="tab-content">
  308. <!------ALT ----->
  309. <div class="tab-pane fade" id="ALT1">
  310. <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');">
  311. <br>
  312. <br>
  313. <br>
  314. <br>
  315. <br>
  316. <br>
  317. <br>
  318. <br>
  319. <br>
  320. <br>
  321. <br>
  322. <br>
  323. <br>
  324. <br>
  325. <br>
  326. </div>
  327. </div>
  328. <!------ALT2 ----->
  329. <div class="tab-pane fade active show" id="ALT2">
  330. <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');">
  331. <br>
  332. <br>
  333. <br>
  334. <br>
  335. <br>
  336. <br>
  337. <br>
  338. <br>
  339. <br>
  340. <br>
  341. <br>
  342. <br>
  343. <br>
  344. <br>
  345. <br>
  346. </div>
  347. </div>
  348. </div>
  349. </div>
  350. </div>
  351. <div class="col-lg-5 p-1">
  352. <div class="card border-1 rounded-2 p-1 h-100">
  353. <div class="card border-0 bg-faded rounded-2 h-100">
  354. <div class="p-2 m- border-0" style="height: 324px; overflow: auto; text-align: justify;">
  355. <div class="text-center mb-1 text-muted display-3" style="letter-spacing: 1px; font-size: 16px;">DESIGN NOTES</div>
  356. <div class="card border-1 rounded-2 p-1 mt-2">
  357. <div class="card bg-faded border-0 rounded-2 p-1 ">
  358. <div class="px-1 m-0 border-0" style="height: 219px; overflow: auto; text-align: justify; font-size: 13px;">
  359.  
  360. <ul class="list-unstyled text-left">
  361. <li class="mb-1"><i class="far fa-pen mr-1 text-muted"></i> note
  362. <hr class="mt-2 mb-1">
  363. </li>
  364. <li class="mb-1"><i class="far fa-pen mr-1 text-muted"></i> note
  365. <hr class="mt-2 mb-1">
  366. </li>
  367. <li class="mb-1"><i class="far fa-pen mr-1 text-muted"></i> note
  368. <hr class="mt-2 mb-1">
  369. </li>
  370. <li class="mb-1"><i class="far fa-pen mr-1 text-muted"></i> note
  371. <hr class="mt-2 mb-1">
  372. </li>
  373. <li class="mb-1"><i class="far fa-pen mr-1 text-muted"></i> note
  374. <hr class="mt-2 mb-1">
  375. </li>
  376. </ul>
  377. </div>
  378. </div>
  379. </div>
  380.  
  381. <ul class="nav nav-pills nav-fill d-flex flex-wrap mt-1">
  382. <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;">ALT</span></a></li>
  383. <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;">ALT 2</span></a></li>
  384. </ul>
  385. </div>
  386. </div>
  387. </div>
  388. </div>
  389. <!---------------END----------->
  390. </div>
  391. </div>
  392. </div>
  393.  
  394. <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>
  395. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!