API tools faq
paste
Advertisement
Mister-Muse

TH Code: Trisector

Mister-Muse
Apr 25th, 2020
560
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 38.51 KB | None | 0 0
raw download clone embed print report
  1. <!--------
  2. It can be used in WYSIWYG mode.
  3. The preset color to replace is 6259ac.
  4. It works.. okay on mobile. It stacks the three boxes vertically, but some stuff does flood to the right and causes a horizontal scroll. Everything should still be accessible and readable enough, it's just kind of ugly while it does it.
  5. The text in 'meta information' section is deliberately weird-looking. All of my typical options are there so I can easily pick the one that applies to the character. It looks better after it's trimmed down.
  6.  
  7. If you want a carousel to not auto scroll, replace (data-ride="carousel") with the following: data-ride="false" data-pause="true"
  8. Vice versa if you want a carousel TO auto scroll; replace (data-ride="false" data-pause="true") with: data-ride="carousel"
  9. ---------->
  10. <!--------------------------- CHANGE BACKGROUND START ------------------------------------>
  11. <div class="w-100" style="position: absolute; left: 0; background: url(BACKGROUND-IMG-URL) center no-repeat; background-size: cover; height: 45em; min-width: 1396px;">
  12. <!--------------------------- CHANGE BACKGROUND END ------------------------------------>
  13. <div class="w-100 h-100" style="position: absolute; left: 0; background: rgba(255, 255, 255, .0);">
  14. <br>
  15. </div>
  16. </div>
  17.  
  18. <p>
  19. <br>
  20. </p>
  21. <div class="row mb-0">
  22. <div class="col-md-3">
  23. <div class="ui-accordion card rounded-0 bg-faded" style="border-color:#000000;">
  24. <div class="carousel slide carousel-fade my-0" data-ride="false" data-pause="true" id="characterimage" style="overflow:hidden;">
  25. <div class="carousel-inner">
  26. <!------------------------------------------------------------------------------->
  27. <!--------------------------- CAROUSEL IMAGE 1 ------------------------------------>
  28. <!------------------------------------------------------------------------------->
  29. <div class="carousel-item active" style="height:601px;
  30. background: url(IMG-URL) center;background-size:cover;">
  31. <br>
  32. </div>
  33. <!------------------------------------------------------------------------------->
  34. <!--------------------------- CAROUSEL IMAGE 2 ------------------------------------>
  35. <!------------------------------------------------------------------------------->
  36. <div class="carousel-item" style="height:601px;
  37. background: url(IMG-URL) center;background-size:cover;">
  38. <br>
  39. </div>
  40. <!------------------------------------------------------------------------------->
  41. <!--------------------------- CAROUSEL IMAGE 3 ------------------------------------>
  42. <!------------------------------------------------------------------------------->
  43. <div class="carousel-item" style="height:601px;
  44. background: url(IMG-URL) center;background-size:cover;">
  45. <br>
  46. </div>
  47. <!----------------------------------------------------------------------------------------------------->
  48. <!--------------------------- ADD MORE CAROUSEL IMAGES ABOVE THIS LINE ------------------------------------>
  49. <!----------------------------------------------------------------------------------------------------->
  50. </div><a class="carousel-control-prev" data-slide="prev" href="#characterimage"><span class="fas fa-chevron-left fa-2x text-white"></span></a>
  51. <a class="carousel-control-next" data-slide="next" href="#characterimage"><span class="fas fa-chevron-right fa-2x text-white"></span></a></div>
  52. </div>
  53. </div>
  54. <!--------------------------- MIDDLE INFO START ------------------------------------>
  55. <div class="col-md-3">
  56. <div class="ui-accordion card rounded-0 bg-faded " style="border-color:#000000;">
  57. <div class="ui-accordion-content card-block " style="height:547px;">
  58. <!----------------------------------------------------------------------->
  59. <!--------------------------- BASIC INFO ------------------------------------>
  60. <!----------------------------------------------------------------------->
  61. <div class="col-12 p-2 display-4 text-center text-uppercase text-white" style="font-size:1.2rem;letter-spacing:1px;background-color:#6259ac;">General Information</div>
  62. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Full Name</span> info</div>
  63. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Pronounced</span>info</div>
  64. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Alias</span>info</div>
  65. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Species</span>
  66. <a href="#" id="" style="color:#6259ac;">link</a></div>
  67. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Age</span>stage (time)</div>
  68. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Sex</span>info</div>
  69. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Gender</span>info (pronouns)</div>
  70. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Orientation</span>info</div>
  71. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Height</span>info</div>
  72. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Weight</span>info</div>
  73. <!----------------------------------------------------------------------->
  74. <!--------------------------- CONNECTIONS ------------------------------------>
  75. <!----------------------------------------------------------------------->
  76. <div class="col-12 p-2 display-4 text-center text-uppercase text-white mt-2" style="font-size:1.2rem;letter-spacing:1px;background-color:#6259ac;">Connections</div>
  77. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Affiliation</span> info</div>
  78. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Rank</span> info</div>
  79. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Occupation</span> info</div>
  80. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Past affiliations</span> info</div>
  81. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Past ranks</span> info</div>
  82. <!----------------------------------------------------------------------->
  83. <!--------------------------- META INFO ------------------------------------>
  84. <!----------------------------------------------------------------------->
  85. <div class="col-12 p-2 display-4 text-center text-uppercase text-white mt-2" style="font-size:1.2rem;letter-spacing:1px;background-color:#6259ac;">Meta Information</div>
  86. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between" style="text-align: center;"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Profile</span> Incomplete
  87. <br>(details, e.g. personality)</div>
  88. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;"><span data-toggle="tooltip" title="How much I currently want art of this character.">Art Priority</span></span> High
  89. <br>Medium
  90. <br>Low</div>
  91. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;"><span data-toggle="tooltip" title="Whether I accept random gift art of this character.">Gift Art</span></span> Accepting
  92. <br>Not accepting</div>
  93. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;"><span data-toggle="tooltip" title="What kind of content random gift art can have.">Gift Content</span></span> Blood ✔✘
  94. <br>Gore ✔✘
  95. <br>NSFW ✔✘
  96. <br>Nudity ✔✘</div>
  97. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Acquisition</span> Created
  98. <br>Purchase [$]
  99. <br>Trade [For ID]
  100. <br>Art trade [Worth]
  101. <br>Free/Gift</div>
  102. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Status</span> Never for trade/sale
  103. <br>Not for trade/sale
  104. <br>Tentative
  105. <br>Detached
  106. <br>For trade/sale/offer
  107. <br>Free</div>
  108. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Character type</span> Original||Fan
  109. <br>Group||Roleplay</div>
  110. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Group</span>
  111. <a href="#" id="" style="color:#6259ac;">link</a></div>
  112. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Fandom</span>
  113. <a href="#" id="" style="color:#6259ac;">link</a></div>
  114. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Universe</span>
  115. <a href="#" id="" style="color:#6259ac;">link</a></div>
  116. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Importance</span> Very high
  117. <br>High
  118. <br>Medium
  119. <br>Low
  120. <br>Very low</div>
  121. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Creation</span> 1 Jan 2000</div>
  122. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Creator</span>
  123. <a href="#" style="color:#6259ac;">@username</a></div>
  124. <div class="col-lg-12 col-md-6 p-1 d-flex justify-content-between"><span class="text-muted text-uppercase" style="letter-spacing:1px;">Creator Rules</span>
  125. <a href="#" id="" style="color:#6259ac;">ToS</a></div>
  126. <!----------------------------------------------------------------------->
  127. <!------------------------- COLOR PALETTE ---------------------------------->
  128. <!----------------------------------------------------------------------->
  129. <div class="col-12 p-2 display-4 text-center text-uppercase text-white mt-2" style="font-size:1.2rem;letter-spacing:1px;background-color:#6259ac;">Color Palette</div>
  130. <div class="col-12 p-0 display-4 text-center text-uppercase text-muted mt-2" style="font-size:1.2rem;letter-spacing:1px;">Main palette</div>
  131. <div class="col-12 p-2 display-4 text-center text-uppercase text-white" style="font-size:1.2rem;letter-spacing:1px;background-color:#d398ea;"><span style="font-size: 14px;">primary #d398ea</span></div>
  132. <div class="col-12 p-2 display-4 text-center text-uppercase text-white" style="font-size:1.2rem;letter-spacing:1px;background-color:#d398ea;"><span style="font-size: 14px;">secondary #d398ea</span></div>
  133. <div class="col-12 p-2 display-4 text-center text-uppercase text-white" style="font-size:1.2rem;letter-spacing:1px;background-color:#d398ea;"><span style="font-size: 14px;">tertiary #d398ea</span></div>
  134. </div>
  135. <!------------------------------------------------------------------------------------->
  136. <!--------------------------- CHANGE MIDDLE FOOTER START ------------------------------------>
  137. <div class="card-header p-3" style="background:url(IMG-URL);">
  138. <br>
  139. </div>
  140. <!--------------------------- CHANGE MIDDLE FOOTER END -------------------------------------->
  141. <!------------------------------------------------------------------------------------->
  142. </div>
  143. </div>
  144. <!--------------------------- RIGHT INFO START ------------------------------------>
  145. <div class="col-md-6 col-sm-5 mb-2">
  146. <div class="card rounded-0" style="border-color:#000000;">
  147. <div class="card-header bg-faded">
  148. <!--------------------------- NAVIGATION BUTTONS -------------------------------------->
  149. <!----------- Remove lines from here to easily hide unwanted tabs --------------------->
  150.  
  151. <ul class="nav nav-tabs card-header-tabs nav-justified text-uppercase" style="letter-spacing:1px;">
  152. <li class="nav-item"><a class="nav-link show active" data-toggle="tab" href="#ONE">About</a></li>
  153. <li class="nav-item"><a class="nav-link show" data-toggle="tab" href="#TWO" id="">Closet</a></li>
  154. <li class="nav-item"><a class="nav-link show" data-toggle="tab" href="#THREE">Skills</a></li>
  155. <li class="nav-item"><a class="nav-link show" data-toggle="tab" href="#FOUR">History</a></li>
  156. <li class="nav-item"><a class="nav-link show" data-toggle="tab" href="#FIVE">Misc</a></li>
  157. <li class="nav-item"><a class="nav-link show" data-toggle="tab" href="#SIX">Value</a></li>
  158. </ul>
  159. </div>
  160. <div class="tab-content">
  161. <!--------------------------- SECTION ONE --- ABOUT ----------------------------------->
  162. <div class="tab-pane show card-block pb-1 active" id="ONE" style="height: 497px; overflow:auto;">
  163. <!--------------------------- APPEARANCE ------------------------------------>
  164.  
  165. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-male fa-fw mr-2" style="color:#6259ac;"></i>Appearance</h1>
  166. <hr class="d-flex" style="clear:none;">
  167. <div class="px-2 mb-2 text-muted">
  168.  
  169. <p>An overall description of the character&#39;s appearance. Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat.</p>
  170. <!--------------------------- DESIGN NOTES ------------------------------------>
  171. <br>
  172. <div class="text-uppercase" style="font-size:1rem;letter-spacing:1px;">Design Notes:</div>
  173.  
  174. <ul class="m-0 text-muted">
  175. <li>Things that are optional or things that should be specifically noted.</li>
  176. <li>Curabitur vel mauris ac nulla pulvinar dictum</li>
  177. </ul>
  178. </div>
  179. <br>
  180.  
  181. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-eye fa-fw mr-2" style="color:#6259ac;"></i>DETAILS</h1>
  182. <hr class="d-flex" style="clear:none;">
  183. <div class="px-2 mb-2 text-muted">
  184.  
  185. <p>Extended details about aspects of the character&#39;s physical form, good for bulletpointing details that don&#39;t fit in the appearance section. Suspendisse sed convallis est.</p>
  186. </div>
  187. <!--------------------------- OUTFITS ------------------------------------>
  188. <br>
  189.  
  190. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-user-tie fa-fw mr-2" style="color:#6259ac;"></i>OUTFITS</h1>
  191. <hr class="d-flex" style="clear:none;">
  192. <div class="px-2 mb-2 text-muted">
  193.  
  194. <p>Alternative to the clothing tab if one just wants to write out the outfits. Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu.</p>
  195. </div>
  196. <br>
  197. <!--------------------------- PERSONALITY ------------------------------------>
  198.  
  199. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-stars fa-fw mr-2" style="color:#6259ac;"></i>Personality</h1>
  200. <hr class="d-flex" style="clear:none;">
  201. <div class="px-2 mb-2 text-muted">
  202.  
  203. <p>Text ready in case one wants to write the personality in paragraph form without segmenting it based on the traits. Suspendisse sed convallis est.</p>
  204.  
  205. <p>＋ <strong><span style="color: #44a95f;">Positive trait</span></strong> 》 Definition or elaboration upon the trait.
  206. <br>＋ <strong><span style="color: #44a95f;">Positive<strong><span style="color: #44a95f;">&nbsp;trait</span></strong></span>
  207. </strong> 》 x
  208. <br>＋ <strong><span style="color: #44a95f;">Positive<strong><span style="color: #44a95f;">&nbsp;trait</span></strong></span>
  209. </strong> 》 x</p>
  210.  
  211. <p>＝ <strong><span style="color: #1c90a5;">Neutral trait</span></strong> 》 x
  212. <br>＝ <strong><span style="color: #1c90a5;">Neutral<strong><span style="color: #1c90a5;">&nbsp;trait</span></strong></span>
  213. </strong> 》 x
  214. <br>＝ <strong><span style="color: #1c90a5;">Neutral<strong><span style="color: #1c90a5;">&nbsp;trait</span></strong></span>
  215. </strong> 》 x</p>
  216.  
  217. <p>－ <strong><span style="color: #bd431f;">Negative trait</span></strong> 》 x
  218. <br>－ <strong><span style="color: #bd431f;">Negative<strong><span style="color: #bd431f;">&nbsp;trait</span></strong></span>
  219. </strong> 》 x
  220. <br>－ <strong><span style="color: #bd431f;">Negative<strong><span style="color: #bd431f;">&nbsp;trait</span></strong></span>
  221. </strong> 》 x</p>
  222. </div>
  223. <br>
  224. <!--------------------------- PREFERENCES ------------------------------------>
  225. <div class="row">
  226. <br>
  227. <!--------------------------- LIKES ------------------------------------>
  228. <div class="likes mb-md-0 mb-4 col-md" id="likes">
  229.  
  230. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-user-plus fa-fw mr-2" style="color:#6259ac;"></i>Likes</h1>
  231. <hr class="d-flex" style="clear:none;">
  232.  
  233. <ul class="m-0 text-muted">
  234. <li>Tincidunt</li>
  235. <li>Malesuada</li>
  236. <li>Quisque</li>
  237. </ul>
  238. </div>
  239. <!--------------------------- DISLIKES ------------------------------------>
  240. <div class="dislikes col-md" id="dislikes">
  241.  
  242. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-user-times fa-fw mr-2" style="color:#6259ac;"></i>Dislikes</h1>
  243. <hr class="d-flex" style="clear:none;">
  244.  
  245. <ul class="m-0 text-muted">
  246. <li>Suspendisse</li>
  247. <li>Pellentesque</li>
  248. <li>Vulputate</li>
  249. </ul>
  250. </div>
  251. </div>
  252. <br>
  253. <!--------------------------- TRIVIA ------------------------------------>
  254.  
  255. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-book-open fa-fw mr-2" style="color:#6259ac;"></i>Trivia</h1>
  256. <hr class="d-flex" style="clear:none;">
  257.  
  258. <ul class="m-0 text-muted">
  259. <li>In ut nisi quam. Integer quis luctus eros, ut imperdiet metus.</li>
  260. </ul>
  261. <br>
  262. <br>
  263. </div>
  264. <!--------------------------- SECTION TWO -- WARDROBE ------------------------------------>
  265. <!--------------------------- Wardrobe note:
  266.  
  267. By default the images will be zoomed in and fill the boxes, with a provided 'full view' link to see the whole image. If you would prefer to see the whole images and be able to change the size of them, replace all closet carousel image sections with this:
  268.  
  269. <div class="carousel-item active"><img class="d-block mx-auto fr-fic fr-dib" style="max-width: 100%;" src="IMG-URL" height="100" width="250">
  270. <div class="carousel-caption text-white p-2" style="background-color:rgba(0,0,0,0.5);">
  271.  
  272. <p><a href="IMG-URL" id="">[Full view]</a>Blazer</p>
  273. </div>
  274. </div>
  275.  
  276. ------------------------------------>
  277. <div class="tab-pane card-block pb-0 show" id="TWO" style="height:497px; overflow:auto;">
  278.  
  279. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-tshirt fa-fw mr-2" style="color:#6259ac;"></i>Closet</h1>
  280. <div class="px-2 mb-2 text-muted">
  281.  
  282. <p>All items can be mix-and-matched.</p>
  283. </div>
  284. <hr class="d-flex" style="clear:none;">
  285. <div class="px-2 mb-2 text-muted">
  286. <!------------------------------------------------------------------------------->
  287. <!------------------------------- HEADWEAR ---------------------------------------->
  288. <!------------------------------------------------------------------------------->
  289.  
  290. <h1 class="display-4" style="font-size: 1.2rem; letter-spacing: 1px; text-align: center;">Headwear</h1>
  291. <div class="ui-accordion card rounded-0 bg-faded" style="border-color:#000000;">
  292. <div class="carousel slide carousel-slide my-0" data-pause="true" data-ride="false" id="headwearimage" style="overflow:hidden;">
  293. <div class="carousel-inner">
  294. <!------------------------------------------------------------------------------->
  295. <!--------------------------- WARDROBE HEADWEAR 1 ------------------------------------>
  296. <!------------------------------------------------------------------------------->
  297. <div class="carousel-item active" style="height:301px;
  298. background: url(IMG-URL) center;background-size:cover;">
  299. <div class="carousel-caption text-white p-2" style="background-color:rgba(0,0,0,0.5);">
  300.  
  301. <p><a href="IMG-URL" id="">[Full view]</a>
  302. <br>Description/details about the clothing.</p>
  303. </div>
  304. </div>
  305. <!---------------------------------------------------------------------------------------------->
  306. <!--------------------------- ADD MORE HEADWEAR ABOVE THIS LINE ---------------------------->
  307. <!--------------------------------------------------------------------------------------------->
  308. </div><a class="carousel-control-prev" data-slide="prev" href="#headwearimage"><span class="fas fa-chevron-left fa-2x text-white"></span></a>
  309. <a class="carousel-control-next" data-slide="next" href="#headwearimage"><span class="fas fa-chevron-right fa-2x text-white"></span></a></div>
  310. </div>
  311. <!------------------------------------------------------------------------------->
  312. <!------------------------------- OUTERWEAR ---------------------------------------->
  313. <!------------------------------------------------------------------------------->
  314.  
  315. <h1 class="display-4" style="font-size: 1.2rem; letter-spacing: 1px; text-align: center;">
  316. <br>Outerwear</h1>
  317. <div class="ui-accordion card rounded-0 bg-faded" style="border-color:#000000;">
  318. <div class="carousel slide carousel-slide my-0" data-pause="true" data-ride="false" id="outerwearimage" style="overflow:hidden;">
  319. <div class="carousel-inner">
  320. <!------------------------------------------------------------------------------->
  321. <!--------------------------- WARDROBE OUTERWEAR 1 ------------------------------------>
  322. <!------------------------------------------------------------------------------->
  323. <div class="carousel-item active" style="height:301px;
  324. background: url(IMG-URL) center;background-size:cover;">
  325. <div class="carousel-caption text-white p-2" style="background-color:rgba(0,0,0,0.5);">
  326.  
  327. <p><a href="IMG-URL" id="">[Full view]</a>
  328. <br>Description/details about the clothing.</p>
  329. </div>
  330. </div>
  331. <!---------------------------------------------------------------------------------------------->
  332. <!--------------------------- ADD MORE OUTERWEAR ABOVE THIS LINE ---------------------------->
  333. <!--------------------------------------------------------------------------------------------->
  334. </div><a class="carousel-control-prev" data-slide="prev" href="#outerwearimage"><span class="fas fa-chevron-left fa-2x text-white"></span></a>
  335. <a class="carousel-control-next" data-slide="next" href="#outerwearimage"><span class="fas fa-chevron-right fa-2x text-white"></span></a></div>
  336. </div>
  337. <!------------------------------------------------------------------------------->
  338. <!------------------------------- TOPS ---------------------------------------->
  339. <!------------------------------------------------------------------------------->
  340.  
  341. <h1 class="display-4" style="font-size: 1.2rem; letter-spacing: 1px; text-align: center;">
  342. <br>Tops</h1>
  343. <div class="ui-accordion card rounded-0 bg-faded" style="border-color:#000000;">
  344. <div class="carousel slide carousel-slide my-0" data-pause="true" data-ride="false" id="topimage" style="overflow:hidden;">
  345. <div class="carousel-inner">
  346. <!------------------------------------------------------------------------------->
  347. <!--------------------------- WARDROBE TOP 1 ------------------------------------>
  348. <!------------------------------------------------------------------------------->
  349. <div class="carousel-item active" style="height:301px;
  350. background: url(IMG-URL) center;background-size:cover;">
  351. <div class="carousel-caption text-white p-2" style="background-color:rgba(0,0,0,0.5);">
  352.  
  353. <p><a href="IMG-URL" id="">[Full view]</a>
  354. <br>Description/details about the clothing.</p>
  355. </div>
  356. </div>
  357. <!---------------------------------------------------------------------------------------------->
  358. <!--------------------------- ADD MORE TOPS ABOVE THIS LINE ---------------------------->
  359. <!--------------------------------------------------------------------------------------------->
  360. </div><a class="carousel-control-prev" data-slide="prev" href="#topimage"><span class="fas fa-chevron-left fa-2x text-white"></span></a>
  361. <a class="carousel-control-next" data-slide="next" href="#topimage"><span class="fas fa-chevron-right fa-2x text-white"></span></a></div>
  362. </div>
  363. <!------------------------------------------------------------------------------->
  364. <!------------------------------- BOTTOMS ---------------------------------------->
  365. <!------------------------------------------------------------------------------->
  366.  
  367. <h1 class="display-4" style="font-size: 1.2rem; letter-spacing: 1px; text-align: center;">
  368. <br>Bottoms</h1>
  369. <div class="ui-accordion card rounded-0 bg-faded" style="border-color:#000000;">
  370. <div class="carousel slide carousel-slide my-0" data-pause="true" data-ride="false" id="bottomimage" style="overflow:hidden;">
  371. <div class="carousel-inner">
  372. <!------------------------------------------------------------------------------->
  373. <!--------------------------- WARDROBE BOTTOM 1 ------------------------------------>
  374. <!------------------------------------------------------------------------------->
  375. <div class="carousel-item active" style="height:301px;
  376. background: url(IMG-URL) center;background-size:cover;">
  377. <div class="carousel-caption text-white p-2" style="background-color:rgba(0,0,0,0.5);">
  378.  
  379. <p><a href="IMG-URL" id="">[Full view]</a>
  380. <br>Description/details about the clothing.</p>
  381. </div>
  382. </div>
  383. <!---------------------------------------------------------------------------------------------->
  384. <!--------------------------- ADD MORE BOTTOMS ABOVE THIS LINE ----------------------------->
  385. <!----------------------------------------------------------------------------------------------->
  386. </div><a class="carousel-control-prev" data-slide="prev" href="#bottomimage"><span class="fas fa-chevron-left fa-2x text-white"></span></a>
  387. <a class="carousel-control-next" data-slide="next" href="#bottomimage"><span class="fas fa-chevron-right fa-2x text-white"></span></a></div>
  388. </div>
  389. <!------------------------------------------------------------------------------->
  390. <!------------------------------- FOOTWEAR ---------------------------------------->
  391. <!------------------------------------------------------------------------------->
  392.  
  393. <h1 class="display-4" style="font-size: 1.2rem; letter-spacing: 1px; text-align: center;">
  394. <br>Footwear</h1>
  395. <div class="ui-accordion card rounded-0 bg-faded" style="border-color:#000000;">
  396. <div class="carousel slide carousel-slide my-0" data-pause="true" data-ride="false" id="feetimage" style="overflow:hidden;">
  397. <div class="carousel-inner">
  398. <!------------------------------------------------------------------------------->
  399. <!--------------------------- WARDROBE FOOTWEAR 1 ------------------------------------>
  400. <!------------------------------------------------------------------------------->
  401. <div class="carousel-item active" style="height:301px;
  402. background: url(IMG-URL) center;background-size:cover;">
  403. <div class="carousel-caption text-white p-2" style="background-color:rgba(0,0,0,0.5);">
  404.  
  405. <p><a href="IMG-URL" id="">[Full view]</a>
  406. <br>Description/details about the clothing.</p>
  407. </div>
  408. </div>
  409. <!---------------------------------------------------------------------------------------------->
  410. <!--------------------------- ADD MORE FOOTWEAR ABOVE THIS LINE ---------------------------->
  411. <!--------------------------------------------------------------------------------------------->
  412. </div><a class="carousel-control-prev" data-slide="prev" href="#feetimage"><span class="fas fa-chevron-left fa-2x text-white"></span></a>
  413. <a class="carousel-control-next" data-slide="next" href="#feetimage"><span class="fas fa-chevron-right fa-2x text-white"></span></a></div>
  414. </div>
  415. <!------------------------------------------------------------------------------->
  416. <!------------------------------- MISCELLANEOUS ---------------------------------------->
  417. <!------------------------------------------------------------------------------->
  418.  
  419. <h1 class="display-4" style="font-size: 1.2rem; letter-spacing: 1px; text-align: center;">
  420. <br>Miscellaneous</h1>
  421. <div class="ui-accordion card rounded-0 bg-faded" style="border-color:#000000;">
  422. <div class="carousel slide carousel-slide my-0" data-pause="true" data-ride="false" id="miscimage" style="overflow:hidden;">
  423. <div class="carousel-inner">
  424. <!------------------------------------------------------------------------------->
  425. <!--------------------------- WARDROBE MISC 1 ------------------------------------>
  426. <!------------------------------------------------------------------------------->
  427. <div class="carousel-item active" style="height:301px;
  428. background: url(IMG-URL) center;background-size:cover;">
  429. <div class="carousel-caption text-white p-2" style="background-color:rgba(0,0,0,0.5);">
  430.  
  431. <p><a href="IMG-URL" id="">[Full view]</a>
  432. <br>Description/details about the clothing.</p>
  433. </div>
  434. </div>
  435. <!---------------------------------------------------------------------------------------------->
  436. <!--------------------------- ADD MORE MISC ABOVE THIS LINE ----------------------------->
  437. <!----------------------------------------------------------------------------------------------->
  438. </div><a class="carousel-control-prev" data-slide="prev" href="#miscimage"><span class="fas fa-chevron-left fa-2x text-white"></span></a>
  439. <a class="carousel-control-next" data-slide="next" href="#miscimage"><span class="fas fa-chevron-right fa-2x text-white"></span></a></div>
  440. </div>
  441. </div>
  442. </div>
  443. <!--------------------------- SECTION THREE -- SKILLS AND ABILITIES ------------------------------------>
  444. <div class="tab-pane card-block pb-0 show" id="THREE" style="height:497px; overflow:auto;">
  445.  
  446. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-wrench fa-fw mr-2" style="color:#6259ac;"></i>Skills &amp; Abilities</h1>
  447. <hr class="d-flex" style="clear:none;">
  448. <div class="px-2 mb-2 text-muted">
  449. <!--------------------------- SKILL LIST ------------------------------------>
  450.  
  451. <h1 class="display-4" style="font-size:1.2rem;letter-spacing:1px;"><i class="fal fa-bahai fa-fw mr-2" style="color:#6259ac;"></i>Offensive Skill</h1>
  452.  
  453. <p>Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu.</p>
  454. <!--------------------------- ADD OFFENSIVE SKILLS ABOVE ------------------------------------>
  455.  
  456. <h1 class="display-4" style="font-size:1.2rem;letter-spacing:1px;"><i class="fal fa-shield fa-fw mr-2" style="color:#6259ac;"></i>Defensive Skill</h1>
  457.  
  458. <p>Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu.</p>
  459. <!--------------------------- ADD DEFENSIVE SKILLS ABOVE ------------------------------------>
  460.  
  461. <h1 class="display-4" style="font-size:1.2rem;letter-spacing:1px;"><i class="fal fa-sparkles fa-fw mr-2" style="color:#6259ac;"></i>Passive Ability</h1>
  462.  
  463. <p>Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu.</p>
  464. <!--------------------------- ADD PASSIVE ABILITIES ABOVE ------------------------------------>
  465. <br>
  466.  
  467. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-sword fa-fw mr-2" style="color:#6259ac;"></i>Combat</h1>
  468. <hr class="d-flex" style="clear:none;">
  469. <div class="px-2 mb-2 text-muted">
  470.  
  471. <p>How the character reacts to/in hostile situations. Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat.</p>
  472. <br>
  473. </div>
  474. </div>
  475. </div>
  476. <!--------------------------- SECTION FOUR -- STORY ------------------------------------>
  477. <div class="tab-pane card-block pb-1 show" id="FOUR" style="height:497px; overflow:auto;">
  478.  
  479. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-book-open fa-fw mr-2" style="color:#6259ac;"></i>History</h1>
  480. <hr class="d-flex" style="clear:none;">
  481. <div class="px-2 mb-2 text-muted">
  482.  
  483. <h1 class="display-4" style="font-size:1.2rem;letter-spacing:1px;">Parents</h1>
  484.  
  485. <p>How their parents met, circumstances of or preceding their birth, etc. Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat. Aenean sed mi eget augue pellentesque ornare. Duis consequat, dui vel rutrum laoreet, neque ex vehicula lacus, eget efficitur ante erat vitae leo. Phasellus ac euismod ligula. Duis molestie lacus tortor, in cursus nisi varius a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
  486.  
  487. <h1 class="display-4" style="font-size:1.2rem;letter-spacing:1px;">Childhood</h1>
  488.  
  489. <p>Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat. Aenean sed mi eget augue pellentesque ornare. Duis consequat, dui vel rutrum laoreet, neque ex vehicula lacus, eget efficitur ante erat vitae leo. Phasellus ac euismod ligula. Duis molestie lacus tortor, in cursus nisi varius a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
  490.  
  491. <h1 class="display-4" style="font-size:1.2rem;letter-spacing:1px;">Adolescence</h1>
  492.  
  493. <p>Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat. Aenean sed mi eget augue pellentesque ornare. Duis consequat, dui vel rutrum laoreet, neque ex vehicula lacus, eget efficitur ante erat vitae leo. Phasellus ac euismod ligula. Duis molestie lacus tortor, in cursus nisi varius a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
  494.  
  495. <h1 class="display-4" style="font-size:1.2rem;letter-spacing:1px;">Early Adulthood</h1>
  496.  
  497. <p>Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat. Aenean sed mi eget augue pellentesque ornare. Duis consequat, dui vel rutrum laoreet, neque ex vehicula lacus, eget efficitur ante erat vitae leo. Phasellus ac euismod ligula. Duis molestie lacus tortor, in cursus nisi varius a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
  498.  
  499. <h1 class="display-4" style="font-size:1.2rem;letter-spacing:1px;">Adulthood</h1>
  500.  
  501. <p>Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat. Aenean sed mi eget augue pellentesque ornare. Duis consequat, dui vel rutrum laoreet, neque ex vehicula lacus, eget efficitur ante erat vitae leo. Phasellus ac euismod ligula. Duis molestie lacus tortor, in cursus nisi varius a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
  502. </div>
  503. <br>
  504.  
  505. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-tree-alt fa-fw mr-2" style="color:#6259ac;"></i>Lineage</h1>
  506. <hr class="d-flex" style="clear:none;">
  507. <div class="px-2 mb-2 text-muted">
  508. <div><strong>Biological</strong></div>
  509.  
  510. <ul style="list-style-type: disc;">
  511. <li>Paternal Grandmother: <span style="color:#6259ac;">Unknown</span></li>
  512. <li>Paternal Grandfather: <span style="color:#6259ac;">Unknown</span></li>
  513. <li>Maternal Grandmother: <span style="color:#6259ac;">Unknown</span></li>
  514. <li>Maternal Grandfather: <span style="color:#6259ac;">Unknown</span></li>
  515. <li>Mother: <span style="color:#6259ac;">Unknown</span></li>
  516. <li>Father: <span style="color:#6259ac;">Unknown</span></li>
  517. <li>Aunts: <span style="color:#6259ac;">Unknown</span></li>
  518. <li>Uncles: <span style="color:#6259ac;">Unknown</span></li>
  519. <li>Siblings: <span style="color:#6259ac;">None</span></li>
  520. <li>Nieces: <span style="color:#6259ac;">None</span></li>
  521. <li>Nephews: <span style="color:#6259ac;">None</span></li>
  522. <li>Mate: <span style="color:#6259ac;">None</span></li>
  523. <li>Past mates: <span style="color:#6259ac;">None</span></li>
  524. <li>Children: <span style="color:#6259ac;">None</span></li>
  525. <li>Grandchildren: <span style="color:#6259ac;">None</span></li>
  526. </ul>
  527. <div><strong>Adoptive</strong></div>
  528.  
  529. <ul>
  530. <li>Paternal Grandmother: <span style="color:#6259ac;">Unknown</span></li>
  531. <li>Paternal Grandfather: <span style="color:#6259ac;">Unknown</span></li>
  532. <li>Maternal Grandmother: <span style="color:#6259ac;">Unknown</span></li>
  533. <li>Maternal Grandfather: <span style="color:#6259ac;">Unknown</span></li>
  534. <li>Mother: <span style="color:#6259ac;">Unknown</span></li>
  535. <li>Father: <span style="color:#6259ac;">Unknown</span></li>
  536. <li>Aunts: <span style="color:#6259ac;">Unknown</span></li>
  537. <li>Uncles: <span style="color:#6259ac;">Unknown</span></li>
  538. <li>Siblings: <span style="color:#6259ac;">None</span></li>
  539. <li>Nieces: <span style="color:#6259ac;">None</span></li>
  540. <li>Nephews: <span style="color:#6259ac;">None</span></li>
  541. <li>Children: <span style="color:#6259ac;">None</span></li>
  542. <li>Grandchildren: <span style="color:#6259ac;">None</span></li>
  543. </ul>
  544. </div>
  545. </div>
  546. <!--------------------------- SECTION FIVE -- MISC ------------------------------------>
  547. <div class="tab-pane card-block pb-1 show" id="FIVE" style="height: 497px; overflow: auto; text-align: center;">
  548. <!------------------------------------------------------------------------------->
  549. <!------------------------------- RIBBONS ---------------------------------------->
  550. <!------------------------------------------------------------------------------->
  551.  
  552. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-medal fa-fw mr-2" style="color:#6259ac;"></i>Ribbons</h1>
  553. <hr class="d-flex" style="clear:none;">
  554. <div class="px-2 mb-2 text-muted" style="text-align: center;">Hover over a ribbon to see it&#39;s meaning.</div>
  555. <div class="ui-accordion card rounded-0 bg-faded" style="border-color:#000000;">
  556. <div class="carousel slide carousel-slide my-0" data-ride="carousel" id="ribbonimage" style="overflow:hidden;">
  557. <div class="carousel-inner">
  558. <!------------------------------------------------------------------------->
  559. <!--------------------------- RIBBON 1 ------------------------------------>
  560. <div class="carousel-item active"><span data-toggle="tooltip" title="RIBBON DESCRIPTION"><img class="d-block mx-auto fr-fic fr-dib" style="max-width: 100%;" src="RIBBON-IMAGE-URL" height="16" width="43"></span></div>
  561. <!---------------------------------------------------------------------------------------------->
  562. <!--------------------------- ADD MORE RIBBONS ABOVE THIS LINE ---------------------------->
  563. <!--------------------------------------------------------------------------------------------->
  564. </div><a class="carousel-control-prev" data-slide="prev" href="#ribbonimage"><span class="fas fa-chevron-left fa-2x text-white"></span></a>
  565. <a class="carousel-control-next" data-slide="next" href="#ribbonimage"><span class="fas fa-chevron-right fa-2x text-white"></span></a></div>
  566. </div>
  567. <div class="row">
  568. <!--------------------------- VOICE ------------------------------------>
  569. <div class="likes mb-md-0 mb-4 col-md" id="likes">
  570. <br>
  571.  
  572. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-microphone fa-fw mr-2" style="color:#6259ac;"></i>Voice</h1>
  573. <hr class="d-flex" style="clear:none;">
  574. <div class="card square mx-auto" style="overflow:hidden;width:200px;height:100px;">
  575. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  576. <!-------------------------------------------------------------------------------->
  577. <!--------------------------- REPLACE VIDEOID ------------------------------------>
  578. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  579. </div>
  580. </div>
  581. </div>
  582. <!--------------------------- MAIN THEME ------------------------------------>
  583. <div class="dislikes col-md" id="dislikes">
  584. <br>
  585.  
  586. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-headphones fa-fw mr-2" style="color:#6259ac;"></i>Main Theme</h1>
  587. <hr class="d-flex" style="clear:none;">
  588. <div class="card square mx-auto" style="overflow:hidden;width:200px;height:100px;">
  589. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  590. <!-------------------------------------------------------------------------------->
  591. <!--------------------------- REPLACE VIDEOID ------------------------------------>
  592. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  593. </div>
  594. </div>
  595. </div>
  596. </div>
  597. <br>
  598. <!--------------------------------- VIDEOS ------------------------------------>
  599.  
  600. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-music fa-fw mr-2" style="color:#6259ac;"></i>Playlist</h1>
  601. <hr class="d-flex" style="clear:none;">
  602. <div class="px-2 mb-2 text-muted" style="text-align: center;"><em>Primary genres: ...</em>
  603. <br>
  604. <br>
  605. <div class="col-lg-16 p-1 d-flex my-auto">
  606. <!--------------------------------------------------------------------------->
  607. <!--------------------------------- VIDEO 1 ------------------------------------->
  608. <!--------------------------------------------------------------------------->
  609. <div class="card square mx-auto" style="overflow:hidden;width:100px;height:100px;">
  610. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  611. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  612. </div>
  613. </div>
  614. <!--------------------------------------------------------------------------->
  615. <!--------------------------------- VIDEO 2 ------------------------------------->
  616. <!--------------------------------------------------------------------------->
  617. <div class="card square mx-auto" style="overflow:hidden;width:100px;height:100px;">
  618. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  619. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  620. </div>
  621. </div>
  622. <!--------------------------------------------------------------------------->
  623. <!--------------------------------- VIDEO 3 ------------------------------------->
  624. <!--------------------------------------------------------------------------->
  625. <div class="card square mx-auto" style="overflow:hidden;width:100px;height:100px;">
  626. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  627. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  628. </div>
  629. </div>
  630. <!--------------------------------------------------------------------------->
  631. <!--------------------------------- VIDEO 4 ------------------------------------->
  632. <!--------------------------------------------------------------------------->
  633. <div class="card square mx-auto" style="overflow:hidden;width:100px;height:100px;">
  634. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  635. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  636. </div>
  637. </div>
  638. <!--------------------------------------------------------------------------->
  639. <!--------------------------------- VIDEO 5 ------------------------------------->
  640. <!--------------------------------------------------------------------------->
  641. <div class="card square mx-auto" style="overflow:hidden;width:100px;height:100px;">
  642. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  643. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  644. </div>
  645. </div>
  646. <!--------------------------------------------------------------------------->
  647. <!----------------- ADD MORE VIDEOS ABOVE THIS LINE ---------------------------->
  648. <!--------------------------------------------------------------------------->
  649. </div>
  650. </div>
  651. <!--------------------------------------------------------------------------->
  652. <!--------------------------------- MOODBOARD ------------------------------------>
  653. <!--------------------------------------------------------------------------->
  654. <br>
  655.  
  656. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-game-board fa-fw mr-2" style="color:#6259ac;"></i>Moodboard</h1>
  657. <hr class="d-flex" style="clear:none;">
  658. <div class="px-2 mb-2 text-muted" style="text-align: center;">
  659.  
  660. <p><img src="https://cdn.discordapp.com/attachments/556878774814113792/625389336925569034/cypermood.png" class="fr-fic fr-dib" width="466" height="466"><em>Moodboard made by @/username</em></p>
  661. <!--------------------------------------------------------------------------->
  662. <!------------------ OTHER MOODBOARDS START ----------------------------------->
  663. <!--------------------------------------------------------------------------->
  664. <br><a class="col-12 p-2 text-center text-uppercase text-white mt-2" href="#" id="" style="font-size:.8rem;letter-spacing:1px;background-color:#6259ac;">No alt moodboard/Alt Moodboard by Username</a></div><a href="https://toyhou.se/7016509.trisector" id="">&lt;/&gt;</a>
  665. <!--------------------------------------------------------------------------->
  666. <!------------------ OTHER MOODBOARDS END ----------------------------------->
  667. <!--------------------------------------------------------------------------->
  668. </div>
  669. <!--------------------------- SECTION SIX -- VALUE TRACKER ------------------------------------>
  670. <div class="tab-pane card-block pb-1 show" id="SIX" style="height:497px; overflow:auto;">
  671.  
  672. <h1 class="display-4 text-uppercase" style="font-size:1.4rem;letter-spacing:1px;"><i class="fal fa-dollar-sign fa-fw mr-2" style="color:#6259ac;"></i>Value Tracker</h1>
  673. <hr class="d-flex" style="clear:none;">
  674. <div class="px-2 mb-2 text-muted">
  675.  
  676. <h3 class="text-uppercase">Total Value as of 00 MON 2020: $00.00</h3>
  677.  
  678. <ul style="list-style-type: disc;">
  679. <li>You can change these rules, these are just my personal ones.</li>
  680. <li>Pieces by me are based on my commission prices at the time the piece was made.</li>
  681. <li>Old personal art may have lowered value, especially if I don&#39;t know what my prices were.</li>
  682. <li>Pieces by others are based on their commission prices. If none, they&#39;ll be based on mine.</li>
  683. <li>Art trades are added as their commission price, or mine if they have none listed.</li>
  684. <li>Commissions are added as listed USD price.</li>
  685. <li>Gifts are not added.</li>
  686. </ul>
  687.  
  688. <h3 class="text-uppercase">Art Pieces</h3>
  689.  
  690. <table class="table-striped table-hover w-100">
  691. <tbody>
  692. <tr class="font-weight-bold text-uppercase">
  693. <td>User</td>
  694. <!--the artist-->
  695. <td style="width: 30.9421%;">Type</td>
  696. <!--what kind of art the piece is (ex. chibi, pixel, fullbody)-->
  697. <td style="width: 12.169%;">Value</td>
  698. <!--how much the piece was worth-->
  699. <td style="width: 18.2431%;">Received As</td>
  700. <!--was the piece a commission? trade? freebie?-->
  701. <td style="width: 16.169%;">Date</td>
  702. <!--the date you received the piece-->
  703. </tr>
  704. <tr>
  705. <td>@/User</td>
  706. <td style="width: 30.9421%;"><a href="#" id="">Placeholder</a></td>
  707. <!--link to the piece-->
  708. <td style="width: 12.169%;">$0</td>
  709. <td style="width: 18.2431%;">None</td>
  710. <td style="width: 16.169%;">30 Jan 2020</td>
  711. </tr>
  712. </tbody>
  713. </table>
  714. <!--[ WRITING PIECES ]-->
  715.  
  716. <h3 class="text-uppercase mt-4">Writing Pieces</h3>
  717. <br>
  718.  
  719. <table class="table-striped table-hover w-100">
  720. <tbody>
  721. <tr class="font-weight-bold text-uppercase">
  722. <td style="width: 23.2384%;">User</td>
  723. <!--the writer-->
  724. <td style="width: 31.132%;">Word Count</td>
  725. <!--amount of words written in the piece-->
  726. <td style="width: 11.852%;">Value</td>
  727. <!--how much the piece was worth-->
  728. <td style="width: 17.6505%;">Received As</td>
  729. <!--was the piece a commission? trade? freebie?-->
  730. <td style="width: 16.6135%;">Date</td>
  731. <!--the date you received the piece-->
  732. </tr>
  733. <tr>
  734. <td style="width: 23.2384%;">@/User</td>
  735. <td style="width: 31.132%;"><a href="#">1K (SFW)</a></td>
  736. <!--link to the piece-->
  737. <td style="width: 11.852%;">$0</td>
  738. <td style="width: 17.6505%;">None</td>
  739. <td style="width: 16.6135%;">30 Jan 2020</td>
  740. </tr>
  741. </tbody>
  742. </table>
  743. </div>
  744. <div class="px-2 mb-2 text-muted" style="text-align: center;"><a href="https://toyhou.se/6027422.art-value-tracker" id="">&lt;/&gt;</a></div>
  745. </div>
  746. </div>
  747. <!--------------------------------------------------------------------------------------->
  748. <!--------------------------- CHANGE RIGHT FOOTER START ------------------------------------>
  749. <!--------------------------------------------------------------------------------------->
  750. <div class="card-header p-3" style='background: url("IMG-URL"); text-align: right;'>
  751. <br>
  752. </div>
  753. <!--------------------------------------------------------------------------------------->
  754. <!--------------------------- CHANGE RIGHT FOOTER END ------------------------------------>
  755. <!--------------------------------------------------------------------------------------->
  756. </div>
  757. </div>
  758. </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!