API tools faq
paste
Advertisement
RinTheYordle

FFCC Toyhouse RP Code

RinTheYordle
Sep 7th, 2021 (edited)
199
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 45.40 KB | None | 0 0
raw download clone embed print report
  1. <!-- Thanks for checking out the code! Hopefully, it works for you! Please give credit to @RinTheYordle if you use this! -->
  2. <!-- Want more templates and icons assets to interchange? Check out this dropbox link here! [ https://www.dropbox.com/s/dm04vooqmmeux4c/FFCC_RP_Profile_Assets.rar?dl=0 ] -->
  3.  
  4. <!-- ALL OFFICIAL ASSETS used are (C) Final Fantasy Crystal Chronicles, Square Enix. This is a simple fan-created character sheet for RP purposes. Any other artwork uploaded, such as profile images for fan characters, are owned by the rightful creators. -->
  5.  
  6. <div class="container p-1 pr-2 p-sm-5" style="background-image:url(https://i.imgur.com/g8kzOPT.jpg); background-color: #bcb78d; background-repeat: repeat-x; border-radius: 20px;">
  7. <div class="card no-gutters" style="background-color: #fbf0dc; border-color: #866d55; border-width: 2px; box-shadow: 4px 8px #866d55; border-radius: 15px 0px; max-width: 1050px;">
  8. <div class="container p-1">
  9. <div class="row no-gutters">
  10. <div class="col-12 col-lg-4">
  11. <!-- TRIBE CRESTS GO HERE -->
  12. <!-- For Yukes, Use this link: https://i.imgur.com/IKcXbYt.png -->
  13. <!-- For Lilty, Use this link: https://i.imgur.com/KwLrrXl.png -->
  14. <!-- For Clavats, Use this link: https://i.imgur.com/HXK7vGk.png -->
  15. <!-- For Selkies, Use this link: https://i.imgur.com/b7YRbhq.png -->
  16. <div
  17. style="background-image:url(https://i.imgur.com/IKcXbYt.png);
  18. height: 500px; background-repeat: no-repeat; background-size: 100%; background-position: center; text-align: center; background-color: #fbf0dc; border: 0px; margin-left: auto; margin-right: auto;"
  19. class="card justify-content-center no-gutters">
  20. <!-- PROFILE IMAGE GOES HERE. Please do not change the width!!! Best Image Size: Width: 350 Height: 600-->
  21. <img
  22. src="https://i.imgur.com/F8zr1hy.png"
  23. style="width: 350px; margin-left: auto; margin-right: auto; top: 2%">
  24.  
  25. <div class="justify-content-center card-img-overlay">
  26. <div class="card justify-content-center p-0" style="border-radius: 20px 0px; background-color: #866d55; text-align: center; width: 450px; height: 50px; top: 400px; border: solid #e6a630; border-width: 2px 3px 3px 2px; box-shadow: 2px 2px #866d55;">
  27. <p class="font-weight-bold font-italic" style="font-family:garamond; font-size: 20px; letter-spacing: 5px; color: #ffc14f">
  28. <!-- Character Name Goes Here -->
  29.  
  30. Name
  31.  
  32. </p>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
  37. <!-- MAIN CONTENT CONTAINER TAB-->
  38. <div class="card col-12 col-lg-8 p-3 tab-content" style="height: 500px; overflow: auto; background-color: rgba(251, 240,220, 0.5); color: #a69250; border: 0px;">
  39. <!-- ABOUT INFORMATION START -->
  40. <div class="tab-pane fade active show" id="about">
  41. <div class="container no-gutters p-0">
  42. <h1 class="text-uppercase mb-0 font-weight-bold" style="letter-spacing: 1.5px; color: #46a589; font-family: Garamond;">
  43. <i class="fas fa-play fa-xs"></i> About
  44. </h1>
  45. <hr class="my-2" style="border-color: #46a589;">
  46. </div>
  47.  
  48. <div class="row p-3">
  49.  
  50. <div class="col-md-6 mb-1">
  51. <div class="d-flex justify-content-between">
  52. <span class="font-weight-bold text-uppercase" style="letter-spacing:1px;">
  53.  
  54. Age
  55.  
  56. </span><span>
  57. <!-- INSERT CHARACTER AGE HERE -->
  58.  
  59. content
  60.  
  61. </span>
  62. </div>
  63. <hr class="my-2" style="border-color: #e6a630;">
  64. </div>
  65.  
  66. <div class="col-md-6 mb-1">
  67. <div class="d-flex justify-content-between">
  68. <span class="font-weight-bold text-uppercase" style="letter-spacing:1px;">
  69.  
  70. Height
  71.  
  72. </span><span>
  73. <!-- INSERT CHARACTER HEIGHT HERE -->
  74.  
  75. content
  76.  
  77. </span>
  78. </div>
  79. <hr class="my-2" style="border-color: #e6a630;">
  80. </div>
  81.  
  82. <div class="col-md-6 mb-1">
  83. <div class="d-flex justify-content-between">
  84. <span class="font-weight-bold text-uppercase" style="letter-spacing:1px;">
  85.  
  86. Gender
  87.  
  88. </span><span>
  89. <!-- INSERT CHARACTER GENDER HERE -->
  90.  
  91. content
  92.  
  93. </span>
  94. </div>
  95. <hr class="my-2" style="border-color: #e6a630;">
  96. </div>
  97.  
  98. <div class="col-md-6 mb-1">
  99. <div class="d-flex justify-content-between">
  100. <span class="font-weight-bold text-uppercase" style="letter-spacing:1px;">
  101.  
  102. Pronouns
  103.  
  104. </span><span>
  105. <!-- INSERT CHARACTER PRONOUNS HERE -->
  106.  
  107. content
  108.  
  109. </span>
  110. </div>
  111. <hr class="my-2" style="border-color: #e6a630;">
  112. </div>
  113. <div class="col-md-6 mb-1">
  114. <div class="d-flex justify-content-between">
  115. <span class="font-weight-bold text-uppercase" style="letter-spacing:1px;">
  116.  
  117. Tribe
  118.  
  119. </span><span>
  120. <!-- INSERT CHARACTER TRIBE HERE -->
  121.  
  122. content
  123.  
  124. </span>
  125. </div>
  126. <hr class="my-2" style="border-color: #e6a630;">
  127. </div>
  128.  
  129. <div class="col-md-6 mb-1">
  130. <div class="d-flex justify-content-between">
  131. <span class="font-weight-bold text-uppercase" style="letter-spacing:1px;">
  132.  
  133. Occupation
  134.  
  135. </span><span>
  136. <!-- INSERT CHARACTER OCCUPATION HERE -->
  137.  
  138. content
  139.  
  140. </span>
  141. </div>
  142. <hr class="my-2" style="border-color: #e6a630;">
  143. </div>
  144. </div>
  145.  
  146. <div class="card justify-content-center p-2 my-2 mb-4" style=" border: solid #e6a630; border-width: 2px; border-radius: 20px 0px; background-color: rgba(134,109,85,0.2); box-shadow: 2px 4px #866d55;">
  147. <div class="p-1" style="text-align: center; letter-spacing: 2px; color: #46a589">
  148. <!-- Character Personality Traits! -->
  149.  
  150. Trait ✧ Trait ✧ Trait ✧ Trait ✧ Trait
  151.  
  152. <hr class="my-2 mx-5" style="border-color: #46a589;">
  153. </div>
  154. <div class="px-2 mb-2">
  155. <!-- Brief Character Personality Goes Here! -->
  156.  
  157. Describe your character's personality briefly here. Deep lore and background goes in the lore tab. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas erat ut ligula bibendum, rutrum consequat nisi aliquam. Phasellus dolor sem, aliquam in neque sit amet, sagittis tempor ligula. Morbi at eros ullamcorper, pretium neque eget, tempor mauris. Duis at mauris condimentum, blandit mauris quis, semper quam.
  158.  
  159. </div>
  160. </div>
  161.  
  162. <div style="text-align: center;"><img src="https://i.imgur.com/cVNjtFo.png" style="width: 300px;"></div>
  163.  
  164.  
  165. </div>
  166. <!-- END INFORMATION TAB -->
  167. <!-- ABILITIES CONTENT START -->
  168. <div class="tab-pane fade" id="abilities">
  169. <div class="container no-gutters p-0">
  170.  
  171. <h1 class="text-uppercase mb-0 font-weight-bold" style="letter-spacing: 1.5px; color: #46a589; font-family: Garamond;">
  172. <i class="fas fa-play fa-xs"></i> Stats
  173. </h1>
  174. <hr class="my-2" style="border-color: #46a589;">
  175. <div class="p-1 m-2 row">
  176.  
  177. <div class="col-md-6 mb-1">
  178. <div class="d-flex justify-content-between">
  179. <span class="font-weight-bold text-uppercase" style="letter-spacing:1px;">
  180.  
  181. STR
  182.  
  183. </span><span>
  184. <!-- Change Character Strength Stats Here -->
  185.  
  186. <i class="fas fa-star"></i>
  187. <i class="fas fa-star"></i>
  188. <i class="fas fa-star-half-alt"></i>
  189. <i class="far fa-star"></i>
  190. <i class="far fa-star"></i>
  191.  
  192. </span>
  193. </div>
  194. <hr class="my-2" style="border-color: #e6a630;">
  195. </div>
  196.  
  197. <div class="col-md-6 mb-1">
  198. <div class="d-flex justify-content-between">
  199. <span class="font-weight-bold text-uppercase" style="letter-spacing:1px;">
  200.  
  201. DEF
  202.  
  203. </span><span>
  204. <!-- Change Character Defense Stats Here -->
  205.  
  206. <i class="fas fa-star"></i>
  207. <i class="fas fa-star"></i>
  208. <i class="fas fa-star-half-alt"></i>
  209. <i class="far fa-star"></i>
  210. <i class="far fa-star"></i>
  211.  
  212. </span>
  213. </div>
  214. <hr class="my-2" style="border-color: #e6a630;">
  215. </div>
  216.  
  217. <div class="col-md-6 mb-1">
  218. <div class="d-flex justify-content-between">
  219. <span class="font-weight-bold text-uppercase" style="letter-spacing:1px;">
  220.  
  221. MAG
  222.  
  223. </span><span>
  224. <!-- Change Character Magic Stats Here -->
  225.  
  226. <i class="fas fa-star"></i>
  227. <i class="fas fa-star"></i>
  228. <i class="fas fa-star-half-alt"></i>
  229. <i class="far fa-star"></i>
  230. <i class="far fa-star"></i>
  231.  
  232. </span>
  233. </div>
  234. <hr class="my-2" style="border-color: #e6a630;">
  235. </div>
  236.  
  237. <div class="col-md-6 mb-1">
  238. <div class="d-flex justify-content-between">
  239. <span class="font-weight-bold text-uppercase" style="letter-spacing:1px;">
  240.  
  241. AGI
  242.  
  243. </span><span>
  244. <!-- Change Character Agility Stats Here -->
  245.  
  246. <i class="fas fa-star"></i>
  247. <i class="fas fa-star"></i>
  248. <i class="fas fa-star-half-alt"></i>
  249. <i class="far fa-star"></i>
  250. <i class="far fa-star"></i>
  251.  
  252. </span>
  253. </div>
  254. <hr class="my-2" style="border-color: #e6a630;">
  255. </div>
  256.  
  257. </div>
  258.  
  259. <h1 class="text-uppercase mb-0 font-weight-bold" style="letter-spacing: 1.5px; color: #46a589; font-family: Garamond;">
  260. <i class="fas fa-play fa-xs"></i> Abilities
  261. </h1>
  262. <hr class="my-2" style="border-color: #46a589;">
  263.  
  264. <!-- Abilities Section START! -->
  265. <div class="card p-2 mb-4 mt-3 mx-2" style="border: solid #e6a630; border-width: 2px; border-radius: 20px 0px; background-color: rgba(134,109,85,0.2); box-shadow: 2px 4px #866d55; overflow: auto; height: 200px;">
  266.  
  267. <!-- Start Ability #1 -->
  268. <div class="p-1" style="text-align: center; letter-spacing: 3px; color: #46a589">
  269. <!-- Ability Name #1 -->
  270.  
  271. <i class="far fa-bookmark fa-xs"></i>
  272. Ability #1
  273.  
  274. <hr class="my-1 mx-5" style="border-color: #46a589;">
  275. </div>
  276.  
  277. <div class="px-2 mb-2">
  278. <!-- Ability Description #1 -->
  279.  
  280. Ability or Spell Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas erat ut ligula bibendum, rutrum consequat nisi aliquam. Phasellus dolor sem, aliquam in neque sit amet, sagittis tempor ligula. Morbi at eros ullamcorper, pretium neque eget, tempor mauris. Duis at mauris condimentum, blandit mauris quis, semper quam.
  281.  
  282. </div>
  283. <!-- End Ability #1 -->
  284.  
  285. <!-- Start Ability #2 -->
  286. <div class="p-1" style="text-align: center; letter-spacing: 3px; color: #46a589">
  287. <!-- Ability Name #2 -->
  288.  
  289. <i class="far fa-bookmark fa-xs"></i>
  290. Ability #2
  291.  
  292. <hr class="my-1 mx-5" style="border-color: #46a589;">
  293. </div>
  294.  
  295. <div class="px-2 mb-2">
  296. <!-- Ability Description #2 -->
  297.  
  298. Ability or Spell Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas erat ut ligula bibendum, rutrum consequat nisi aliquam. Phasellus dolor sem, aliquam in neque sit amet, sagittis tempor ligula. Morbi at eros ullamcorper, pretium neque eget, tempor mauris. Duis at mauris condimentum, blandit mauris quis, semper quam.
  299.  
  300. </div>
  301. <!-- End Ability #2 -->
  302.  
  303. <!-- Start Ability #3 -->
  304. <div class="p-1" style="text-align: center; letter-spacing: 3px; color: #46a589">
  305. <!-- Ability/Spell/Weaponskill Name #3 -->
  306.  
  307. <i class="far fa-bookmark fa-xs"></i>
  308. Ability #3
  309.  
  310. <hr class="my-1 mx-5" style="border-color: #46a589;">
  311. </div>
  312.  
  313. <div class="px-2 mb-2">
  314. <!-- Ability Description #3 -->
  315.  
  316. Ability or Spell Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas erat ut ligula bibendum, rutrum consequat nisi aliquam. Phasellus dolor sem, aliquam in neque sit amet, sagittis tempor ligula. Morbi at eros ullamcorper, pretium neque eget, tempor mauris. Duis at mauris condimentum, blandit mauris quis, semper quam.
  317.  
  318. </div>
  319. <!-- End Ability #3 -->
  320. </div>
  321. <!-- END ABILITIES -->
  322.  
  323. <!-- Items START -->
  324. <h1 class="text-uppercase mb-0 font-weight-bold" style="letter-spacing: 1.5px; color: #46a589; font-family: Garamond;">
  325. <i class="fas fa-play fa-xs"></i> Items
  326. </h1>
  327. <hr class="my-2" style="border-color: #46a589;">
  328. <div class="p-2 m-1">
  329.  
  330. <!-- START ITEM #1 -->
  331. <div class="media p-3 mb-2" style="border-radius: 20px; background-color: rgba(134,109,85,0.1);">
  332. <!-- ITEM IMAGE -->
  333. <img
  334. src="https://i.imgur.com/BU3r4Cg.png"
  335. class="align-self-center mr-3 hidden-sm-down img-thumbnail mb-1" style="max-width: 50px; background: none; border: none;">
  336.  
  337. <div class="media-body">
  338. <p class="font-weight-bold text-uppercase mb-1" style="letter-spacing:1px;">
  339. <!-- Item Name and Description Goes Here! -->
  340.  
  341. Item Name #1
  342.  
  343. </p><p>
  344.  
  345. A Small Item Description. Magicite, Weapon, whatever it is! Use Magicite or Magic, or Special Weapons for others!
  346. </p>
  347.  
  348. </div>
  349. </div>
  350. <!-- END ITEM #1 -->
  351.  
  352. <!-- START ITEM #2 -->
  353. <div class="media p-3 mb-2" style="border-radius: 20px; background-color: rgba(134,109,85,0.1);">
  354. <!-- ITEM IMAGE -->
  355. <img
  356. src="https://i.imgur.com/vQZzD4H.png"
  357. class="align-self-center mr-3 hidden-sm-down img-thumbnail mb-1" style="max-width: 50px; background: none; border: none;">
  358.  
  359. <div class="media-body">
  360. <p class="font-weight-bold text-uppercase mb-1" style="letter-spacing:1px;">
  361. <!-- Item Name and Description Goes Here! -->
  362.  
  363. Item Name #2
  364.  
  365. </p><p>
  366.  
  367. A Small Item Description. Magicite, Weapon, whatever it is! Use Magicite or Magic, or Special Weapons for others!
  368. </p>
  369.  
  370. </div>
  371. </div>
  372. <!-- END ITEM #2 -->
  373.  
  374. <!-- START ITEM #3 -->
  375. <div class="media p-3 mb-2" style="border-radius: 20px; background-color: rgba(134,109,85,0.1);">
  376. <!-- ITEM IMAGE -->
  377. <img
  378. src="https://i.imgur.com/YfA0o4M.png"
  379. class="align-self-center mr-3 hidden-sm-down img-thumbnail mb-1" style="max-width: 50px; background: none; border: none;">
  380.  
  381. <div class="media-body">
  382. <p class="font-weight-bold text-uppercase mb-1" style="letter-spacing:1px;">
  383. <!-- Item Name and Description Goes Here! -->
  384.  
  385. Item Name #3
  386.  
  387. </p><p>
  388.  
  389. A Small Item Description. Magicite, Weapon, whatever it is! Use Magicite or Magic, or Special Weapons for others!
  390. </p>
  391.  
  392. </div>
  393. </div>
  394. <!-- END ITEM #3 -->
  395.  
  396. </div>
  397. <!-- END ITEM CONTAINER-->
  398.  
  399. </div>
  400. </div>
  401. <!-- ABILITIES CONTENT END-->
  402. <!-- LORE CONTENT START -->
  403. <div class="tab-pane fade" id="lore">
  404.  
  405. <div class="container no-gutters p-0">
  406. <h1 class="text-uppercase mb-0 font-weight-bold" style="letter-spacing: 1.5px; color: #46a589; font-family: Garamond;">
  407. <i class="fas fa-play fa-xs"></i> Lore
  408. </h1>
  409. <hr class="my-2" style="border-color: #46a589;">
  410. <div class="p-3">
  411.  
  412. <!-- Mini Profile Image Here -->
  413. <img
  414. src="https://i.imgur.com/5H6Jjzm.png"
  415.  
  416. class="float-right ml-3 mb-1 hidden-sm-down img-thumbnail mb-1" style="max-height: 150px; background: none; border: none;">
  417. <!-- Lore Content Goes Here! -->
  418. <!-- Start Backstory Paragraph -->
  419. <p class="font-weight-bold text-uppercase mb-1" style="letter-spacing:1px;">Backstory</p>
  420. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas erat ut ligula bibendum, rutrum consequat nisi aliquam. Phasellus dolor sem, aliquam in neque sit amet, sagittis tempor ligula. Morbi at eros ullamcorper, pretium neque eget, tempor mauris. Duis at mauris condimentum, blandit mauris quis, semper quam. Nulla et ante non augue euismod tempus. Sed varius auctor mauris non varius. Sed tempus erat vel nibh egestas dignissim. Mauris posuere efficitur dolor, id dapibus nisi dictum id. Vestibulum et sem sollicitudin, vehicula massa sit amet, congue purus. Maecenas accumsan massa magna, eu fringilla justo ornare eu. Integer mattis placerat ipsum in lobortis. Pellentesque venenatis urna vel condimentum gravida. Mauris tempor, sem at vestibulum sollicitudin, erat risus fringilla tortor, sit amet tincidunt risus ipsum ut quam. Duis at condimentum magna. Praesent orci sapien, facilisis id cursus non, ultricies et dolor. </p>
  421.  
  422. <div style="text-align: center;"><img src="https://i.imgur.com/cVNjtFo.png" style="width: 300px;"></div>
  423. <!-- End Backstory Paragraph -->
  424.  
  425. <!-- Start Present Day Paragraph -->
  426. <p class="font-weight-bold text-uppercase mb-1" style="letter-spacing:1px;">Present Day</p>
  427. <p>Etiam volutpat sollicitudin ligula vel placerat. Nam semper condimentum mauris vitae tristique. Vivamus tincidunt leo a tellus tincidunt elementum. Integer ultrices dignissim diam quis mattis. Nullam at lorem non erat rutrum venenatis id nec urna. Suspendisse finibus congue mauris, vitae volutpat diam aliquet vitae. Aliquam vel mi eu turpis maximus ornare. Pellentesque nec placerat lorem. Donec aliquam porta ligula, ut gravida massa laoreet et. Curabitur sed fermentum enim. Vivamus eleifend tincidunt lacus a imperdiet. Cras tempus consequat arcu id ornare. Cras et fermentum tellus, sit amet condimentum tellus.</p>
  428.  
  429. <div style="text-align: center;"><img src="https://i.imgur.com/cVNjtFo.png" style="width: 300px;"></div>
  430. <!-- End Backstory Paragraph -->
  431.  
  432. <!-- Start Strengths Paragraph -->
  433. <p class="font-weight-bold text-uppercase mb-1" style="letter-spacing:1px;">Strengths</p>
  434. <p>Sed tempus pellentesque eros, eget pharetra nisi dictum a. Donec eu massa eget nulla iaculis gravida nec eget lectus. Duis semper, orci vel sagittis tincidunt, lectus urna mollis odio, nec aliquet massa leo sed diam. Phasellus at consequat tellus. Quisque nec ligula a lorem tempus mattis. Aenean at velit non eros aliquet interdum. Cras eu eleifend nulla. Quisque ornare venenatis cursus. Donec id dui nec magna tincidunt dapibus id sit amet mi. Cras in ex vitae enim efficitur finibus. In metus ex, iaculis in pulvinar a, aliquet et massa. Phasellus egestas dignissim neque at ornare. </p>
  435.  
  436. <div style="text-align: center;" class="mt-3"><img src="https://i.imgur.com/cVNjtFo.png" style="width: 300px;"></div>
  437. <!-- End Strengths Paragraph -->
  438.  
  439. <!-- Start Weaknesses Paragraph -->
  440. <p class="font-weight-bold text-uppercase mb-1" style="letter-spacing:1px;">Weaknesses</p>
  441. <p>Sed tempus pellentesque eros, eget pharetra nisi dictum a. Donec eu massa eget nulla iaculis gravida nec eget lectus. Duis semper, orci vel sagittis tincidunt, lectus urna mollis odio, nec aliquet massa leo sed diam. Phasellus at consequat tellus. Quisque nec ligula a lorem tempus mattis. Aenean at velit non eros aliquet interdum. Cras eu eleifend nulla. Quisque ornare venenatis cursus. Donec id dui nec magna tincidunt dapibus id sit amet mi. Cras in ex vitae enim efficitur finibus. In metus ex, iaculis in pulvinar a, aliquet et massa. Phasellus egestas dignissim neque at ornare. In accumsan nisi ut ligula pellentesque pulvinar sit amet vel libero. Sed tempus pellentesque eros, eget pharetra nisi dictum a.</p>
  442.  
  443. <div style="text-align: center;" class="mt-3"><img src="https://i.imgur.com/cVNjtFo.png" style="width: 300px;"></div>
  444. <!-- End Weaknesses Paragraph -->
  445.  
  446. <!-- End Lore Container -->
  447. </div>
  448. </div>
  449. </div>
  450. <!-- LORE CONTENT TAB END-->
  451.  
  452. <!-- START RELATIONSHIPS TAB -->
  453. <div class="tab-pane fade" id="relationships">
  454. <!-- RELATIONS CONTENT START -->
  455. <!-- CHARACTER RELATIONSHIPS EMOTES CHEATSHEET! -->
  456. <!--Sad Emote: https://i.imgur.com/XFiJbJc.png-->
  457. <!--Angry Emote: https://i.imgur.com/ef9yyZu.png-->
  458. <!--Neutral Emote: https://i.imgur.com/x0L4i3X.png-->
  459. <!--Happy Emote: https://i.imgur.com/FDAYeOR.png-->
  460. <!--Loved Emote: https://i.imgur.com/R0J5z6o.png-->
  461. <div class="container no-gutters p-0">
  462. <h1 class="text-uppercase mb-0 font-weight-bold" style="letter-spacing: 1.5px; color: #46a589; font-family: Garamond;">
  463. <i class="fas fa-play fa-xs"></i> Relationships
  464. </h1>
  465. <hr class="my-2" style="border-color: #46a589;">
  466.  
  467. <!-- Character Relationship #1 -->
  468. <div class="media p-3 my-3 mx-3" style="font-family:Garamond; background: rgba(134,109,85,0.2); border-radius: 50px; border-style: solid; border-color: #e6a630; border-width: 2px; box-shadow: 2px 4px #866d55;">
  469.  
  470. <!-- Character Relationship Mini Profile Image! -->
  471.  
  472. <img src="https://i.imgur.com/F7DuMJQ.png"
  473.  
  474. class="align-self-center mr-3 img-thumbnail hidden-sm-down" style="max-width: 90px; background: none; border: none;">
  475.  
  476. <div>
  477. <!--CHARACTER RELATIONSHIP STATUS IMAGE!-->
  478.  
  479. <img
  480. src="https://i.imgur.com/R0J5z6o.png"
  481.  
  482. class="float-left d-block mx-auto hidden-sm-down"
  483. style="height: 25px; position: absolute; left: 100px;">
  484. </div>
  485.  
  486. <div class="media-body my-auto ml-3" style="">
  487. <!-- Relationship #1 Link Goes here -->
  488.  
  489. <a href="#"
  490.  
  491. class="font-weight-bold mb-1" style="color: #43868d; font-size: 19px;">
  492. <!-- Relationship #1 Details go here! -->
  493.  
  494. Full Name
  495.  
  496. </a><p class="p-0 m-0">
  497.  
  498. Relationship Status
  499.  
  500. </p>
  501.  
  502. </div>
  503. </div>
  504. <!-- End Character Relationship #1 -->
  505. <!-- Character Relationship #2 -->
  506. <div class="media p-3 my-3 mx-3" style="font-family:Garamond; background: rgba(134,109,85,0.2); border-radius: 50px; border-style: solid; border-color: #e6a630; border-width: 2px; box-shadow: 2px 4px #866d55;">
  507.  
  508. <!-- Character Relationship Mini Profile Image! -->
  509.  
  510. <img src="https://i.imgur.com/521f1TO.png"
  511.  
  512. class="align-self-center mr-3 img-thumbnail hidden-sm-down" style="max-width: 90px; background: none; border: none;">
  513. <div>
  514. <!--CHARACTER RELATIONSHIP STATUS IMAGE!-->
  515.  
  516. <img
  517. src="https://i.imgur.com/x0L4i3X.png"
  518.  
  519. class="float-left d-block mx-auto hidden-sm-down"
  520. style="height: 25px; position: absolute; left: 100px;">
  521. </div>
  522.  
  523. <div class="media-body my-auto ml-3" style="">
  524. <!-- Relationship #2 Link Goes here -->
  525.  
  526. <a href="#"
  527.  
  528. class="font-weight-bold mb-1" style="color: #43868d; font-size: 19px;">
  529. <!-- Relationship #2 Details go here! -->
  530.  
  531. Full Name
  532.  
  533. </a><p class="p-0 m-0">
  534.  
  535. Relationship Status
  536.  
  537. </p>
  538.  
  539. </div>
  540. </div>
  541. <!-- End Character Relationship #2 -->
  542. <!-- Character Relationship #3 -->
  543. <div class="media p-3 my-3 mx-3" style="font-family:Garamond; background: rgba(134,109,85,0.2); border-radius: 50px; border-style: solid; border-color: #e6a630; border-width: 2px; box-shadow: 2px 4px #866d55;">
  544.  
  545. <!-- Character Relationship Mini Profile Image! -->
  546.  
  547. <img src="https://i.imgur.com/xDxLVjn.png"
  548.  
  549. class="align-self-center mr-3 img-thumbnail hidden-sm-down" style="max-width: 90px; background: none; border: none;">
  550. <div>
  551. <!--CHARACTER RELATIONSHIP STATUS IMAGE!-->
  552.  
  553. <img
  554. src="https://i.imgur.com/FDAYeOR.png"
  555.  
  556. class="float-left d-block mx-auto hidden-sm-down"
  557. style="height: 25px; position: absolute; left: 100px;">
  558. </div>
  559.  
  560. <div class="media-body my-auto ml-3" style="">
  561. <!-- Relationship #3 Link Goes here -->
  562.  
  563. <a href="#"
  564.  
  565. class="font-weight-bold mb-1" style="color: #43868d; font-size: 19px;">
  566. <!-- Relationship #3 Details go here! -->
  567.  
  568. Full Name
  569.  
  570. </a><p class="p-0 m-0">
  571.  
  572. Relationship Status
  573.  
  574. </p>
  575.  
  576. </div>
  577. </div>
  578. <!-- End Character Relationship #3 -->
  579. <!-- Character Relationship #4 -->
  580. <div class="media p-3 my-3 mx-3" style="font-family:Garamond; background: rgba(134,109,85,0.2); border-radius: 50px; border-style: solid; border-color: #e6a630; border-width: 2px; box-shadow: 2px 4px #866d55;">
  581.  
  582. <!-- Character Relationship Mini Profile Image! -->
  583.  
  584. <img src="https://i.imgur.com/fm1QqB9.png"
  585.  
  586. class="align-self-center mr-3 img-thumbnail hidden-sm-down" style="max-width: 90px; background: none; border: none;">
  587. <div>
  588. <!--CHARACTER RELATIONSHIP STATUS IMAGE!-->
  589.  
  590. <img
  591. src="https://i.imgur.com/ef9yyZu.pngg"
  592.  
  593. class="float-left d-block mx-auto hidden-sm-down"
  594. style="height: 25px; position: absolute; left: 100px;">
  595. </div>
  596.  
  597. <div class="media-body my-auto ml-3" style="">
  598. <!-- Relationship #4 Link Goes here -->
  599.  
  600. <a href="#"
  601.  
  602. class="font-weight-bold mb-1" style="color: #43868d; font-size: 19px;">
  603. <!-- Relationship #4 Details go here! -->
  604.  
  605. Full Name
  606.  
  607. </a><p class="p-0 m-0">
  608.  
  609. Relationship Status
  610.  
  611. </p>
  612.  
  613. </div>
  614. </div>
  615. <!-- End Character Relationship #4 -->
  616. </div>
  617.  
  618. </div>
  619. <!-- End Relationships Tab -->
  620. </div>
  621. </div>
  622. </div>
  623. </div>
  624. <!-- Navigation Start -->
  625. <div class="row no-gutters">
  626. <div class="col-12 pr-3 pr-sm-4 justify-content-end no-gutters">
  627. <ul class="nav nav-tabs card-header-tabs row mb-3">
  628. <li class="col-0">
  629. <a data-toggle="tab" href="#about">
  630. <span class="fa-stack fa-2x" style="top: -05px;">
  631. <i class="fas fa-bookmark fa-stack-2x" style="color:#1f286b;"></i>
  632. <i class="fas fa-stream fa-stack-1x fa-inverse"></i></span>
  633.  
  634. </a>
  635. </li>
  636. <li class="col-0">
  637. <a data-toggle="tab" href="#abilities">
  638. <span class="fa-stack fa-2x" style="top: -05px;">
  639. <i class="fas fa-bookmark fa-stack-2x" style="color:#315371;"></i>
  640. <i class="fas fa-star fa-stack-1x fa-inverse"></i></span>
  641. </a>
  642. </li>
  643. <li class="col-0">
  644.  
  645. <a data-toggle="tab" href="#lore">
  646. <span class="fa-stack fa-2x" style="top: -05px;">
  647. <i class="fas fa-bookmark fa-stack-2x" style="color:#43868d;"></i>
  648. <i class="fas fa-feather fa-stack-1x fa-inverse"></i></span>
  649. </a>
  650. </li>
  651. <li class="col-0">
  652. <a data-toggle="tab" href="#relationships">
  653. <span class="fa-stack fa-2x" style="top: -05px;">
  654. <i class="fas fa-bookmark fa-stack-2x" style="color:#46a589;"></i>
  655. <i class="fas fa-heart fa-stack-1x fa-inverse"></i></span>
  656. </a>
  657. </li>
  658. </ul>
  659. </div>
  660. </div>
  661. <!-- Navigation End -->
  662. <!-- Quote Container Starts -->
  663. <div class="no-gutters justify-content-center">
  664.  
  665. <div class="card col-2 justify-content-center hidden-sm-down" style="border-radius: 40px 0px 0px 0px; background-color: rgba(251, 240, 220, 1); text-align: center; height: 65px; border-color: #866d55; border-width: 2px 0px 2px 2px; box-shadow: 4px 8px #866d55;">
  666. <img class="card-img" src="https://i.imgur.com/5pFCj5B.png" style="width: 150px; left: 3px">
  667. </div>
  668. <div class="card col-10 hidden-sm-down" style="background-color: rgba(251, 240, 220, 1); text-align: center; height: 65px; border-radius: 0px 0px 40px 0px; border-color: #866d55; border-width: 2px 2px 2px 0px; box-shadow: 4px 8px #866d55;">
  669. <div class="card col-12 mb-3 font-weight-bold font-italic justify-content-center" style="font-family:garamond; font-size: 15px; letter-spacing: 3px; color: #43868d; background: none; border:0px;">
  670. <!-- QUOTE GOES HERE! This hides on mobile version.-->
  671. "A beautiful quote to say to you today. Limited, but nice."
  672. </div>
  673. </div>
  674. </div>
  675. <!-- Quote Container Ends -->
  676. </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!