API tools faq
paste
Advertisement
Mister-Muse

Trisected Wings

Mister-Muse
Jul 19th, 2020 (edited)
74
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 44.93 KB | None | 0 0
raw download clone embed print report
  1. <!--------
  2. It can be used in WYSIWYG mode.
  3. 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, it's just kind of ugly while it does it.
  4. 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 apply to the character. It looks better after it's trimmed down.
  5.  
  6. If you want a carousel to not auto scroll, replace (data-ride="carousel") with the following: data-ride="false" data-pause="true"
  7. Vice versa if you want a carousel TO auto scroll; replace (data-ride="false" data-pause="true") with: data-ride="carousel"
  8. ---------->
  9. <!---------------------------------------------------------------------------------->
  10. <!--------------------------- CHANGE BACKGROUND ------------------------------------>
  11. <!--------------- Change .0 to a number to overlay the RGBA value ----------------->
  12. <!------------------- at a certain opacity , default white ------------------------->
  13. <!---------------------------------------------------------------------------------->
  14. <div class="w-100" style="position: absolute; left: 0; background: url(https://tuibooks.com/wp-content/uploads/2014/12/Wings-of-Fire-6-full-cover-final-art1.jpg) center no-repeat; background-size: cover; height: 45em; min-width: 1396px;">
  15. <div class="w-100 h-100" style="position: absolute; left: 0; background: rgba(255, 255, 255, .3);">
  16. <br>
  17. </div>
  18. </div>
  19. <!---------------------------------------------------------------------------------->
  20. <!---------------------------------------------------------------------------------->
  21. <div class="row no-gutters mb-2">
  22. <!----------------------------------------------------------------------------->
  23. <!----------------------------------------------------------------------------->
  24. <!--------------------------- LEFT SECTION ------------------------------------>
  25. <!----------------------------------------------------------------------------->
  26. <!----------------------------------------------------------------------------->
  27. <div class="col-lg-3 col-md-5 mb-md-0 mb-2 p-1">
  28. <div class="card rounded-0">
  29. <div class="carousel slide carousel-fade my-0" data-pause="true" data-ride="false" id="characterimage" style="overflow:hidden;">
  30. <div class="carousel-inner">
  31. <!---------------------------------------------------------------------------------->
  32. <!--------------------------- CAROUSEL IMAGE - ------------------------------------>
  33. <!---------------------------------------------------------------------------------->
  34. <div class="carousel-item active" style="height:601px;
  35. background: url(IMG-URL) center;background-size:cover;">
  36. <br>
  37. </div>
  38. <!----------------------------------------------------------------------------------------------------->
  39. <!--------------------------- ADD MORE CAROUSEL IMAGES ABOVE THIS LINE ------------------------------------>
  40. <!----------------------------------------------------------------------------------------------------->
  41. </div><a class="carousel-control-prev" data-slide="prev" href="#characterimage"><span class="fas fa-chevron-left fa-2x text-white"></span></a>
  42. <a class="carousel-control-next" data-slide="next" href="#characterimage"><span class="fas fa-chevron-right fa-2x text-white"></span></a></div>
  43. <!----------------------------- LEFT FOOTER ----------------------------------->
  44. <div class="card-header p-2" style="background:url(https://cdn.discordapp.com/attachments/556878774814113792/734494251919999006/unknown.png);">
  45. <!----------------------------------------------------------------------------->
  46. <br>
  47. </div>
  48. </div>
  49. </div>
  50. <!----------------------------------------------------------------------------->
  51. <!----------------------------------------------------------------------------->
  52. <!-------------------------- MIDDLE SECTION ----------------------------------->
  53. <!----------------------------------------------------------------------------->
  54. <!----------------------------------------------------------------------------->
  55. <div class="col-md-6 col-sm-5 mb-2 p-1">
  56. <div class="card rounded-0">
  57. <div class="card-header bg-faded">
  58. <!------------------------ MIDDLE NAVIGATION BUTTONS ---------------------------------->
  59. <!----------- Remove lines from here to easily hide unwanted tabs --------------------->
  60.  
  61. <ul class="nav nav-tabs card-header-tabs nav-justified text-uppercase" style="letter-spacing:1px;">
  62. <li class="nav-item"><a class="nav-link show active" data-toggle="tab" href="#ONE" id="">About</a></li>
  63. <li class="nav-item"><a class="nav-link show" data-toggle="tab" href="#THREE" id="">Quotes</a></li>
  64. <li class="nav-item"><a class="nav-link show" data-toggle="tab" href="#FOUR" id="">Biography</a></li>
  65. <li class="nav-item"><a class="nav-link show" data-toggle="tab" href="#FIVE" id="">Misc</a></li>
  66. <li class="nav-item"><a class="nav-link show" data-toggle="tab" href="#SIX" id="">Value</a></li>
  67. </ul>
  68. </div>
  69. <div class="tab-content">
  70. <!------------------------------------------------------------------------------------->
  71. <!------------------------ MIDDLE SECTION ONE --- ABOUT ------------------------------->
  72. <!------------------------------------------------------------------------------------->
  73. <div class="tab-pane show card-block pb-1 active" id="ONE" style="height: 551px; overflow:auto;">
  74. <!--------------------------------------------------------------------------->
  75. <!--------------------------- APPEARANCE ------------------------------------>
  76. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Appearance</div>
  77. <hr class="mt-1 mb-2">
  78. <div class="mb-4 text-muted text-justify">
  79.  
  80. <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>
  81. <br>
  82. <div class="text-uppercase" style="font-size:1rem;letter-spacing:1px;">Design Notes:</div>
  83.  
  84. <ul style="list-style-type: disc;">
  85. <li>Things that are optional or things that should be specifically noted.</li>
  86. <li>Curabitur vel mauris ac nulla pulvinar dictum.</li>
  87. </ul>
  88. </div>
  89. <!--------------------------------------------------------------------------->
  90. <!--------------------------- PERSONALITY ------------------------------------>
  91. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Personality</div>
  92. <hr class="mt-1 mb-2">
  93. <div class="mb-4 text-muted text-justify">
  94.  
  95. <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>
  96.  
  97. <p>＋ <strong><span style="color: #44a95f;">Positive trait</span></strong> 》 Definition or elaboration upon the trait.
  98. <br>＋ <strong><span style="color: #44a95f;">Positive<strong><span style="color: #44a95f;">&nbsp;trait</span></strong></span>
  99. </strong> 》 x
  100. <br>＋ <strong><span style="color: #44a95f;">Positive<strong><span style="color: #44a95f;">&nbsp;trait</span></strong></span>
  101. </strong> 》 x</p>
  102.  
  103. <p>＝ <strong><span style="color: #1c90a5;">Neutral trait</span></strong> 》 x
  104. <br>＝ <strong><span style="color: #1c90a5;">Neutral<strong><span style="color: #1c90a5;">&nbsp;trait</span></strong></span>
  105. </strong> 》 x
  106. <br>＝ <strong><span style="color: #1c90a5;">Neutral<strong><span style="color: #1c90a5;">&nbsp;trait</span></strong></span>
  107. </strong> 》 x</p>
  108.  
  109. <p>－ <strong><span style="color: #bd431f;">Negative trait</span></strong> 》 x
  110. <br>－ <strong><span style="color: #bd431f;">Negative<strong><span style="color: #bd431f;">&nbsp;trait</span></strong></span>
  111. </strong> 》 x
  112. <br>－ <strong><span style="color: #bd431f;">Negative<strong><span style="color: #bd431f;">&nbsp;trait</span></strong></span>
  113. </strong> 》 x</p>
  114. </div>
  115. <!--------------------------------------------------------------------------->
  116. <!--------------------------- APPEARANCE ------------------------------------>
  117. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Abilities</div>
  118. <hr class="mt-1 mb-2">
  119. <div class="mb-4 text-muted text-justify">
  120.  
  121. <p>Typical abilities of <a href="https://wingsoffire.fandom.com/wiki/SandWings" id="">their tribe</a>. Unless they&#39;re a hybrid or something else, then you should probably elaborate on the differences.</p>
  122.  
  123. <p>✦ <strong>Fire Breath</strong> 》 Explanation of how the ability differs from the norm.
  124. <br>✦ <strong>Ability</strong> 》 x
  125. <br>✦ <strong>Ability</strong> 》 x</p>
  126. </div>
  127. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Trivia</div>
  128. <hr class="mt-1 mb-2">
  129. <div class="mb-4 text-muted text-justify">
  130.  
  131. <ul style="list-style-type: disc;">
  132. <li>Curabitur vel mauris ac nulla pulvinar dictum.</li>
  133. </ul>
  134. </div>
  135. </div>
  136. <!------------------------------------------------------------------------------------->
  137. <!------------------------ MIDDLE SECTION THREE --- SKILLS ------------------------------->
  138. <!------------------------------------------------------------------------------------->
  139. <div class="tab-pane show card-block pb-1" id="THREE" style="height: 551px; overflow:auto;">
  140. <!--------------------------------------------------------------------------->
  141. <!--------------------------- OFFENSIVE SKILL ------------------------------------>
  142. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Quotes</div>
  143. <hr class="mt-1 mb-2">
  144. <div class="mb-4 text-muted text-justify">
  145. <br>
  146. <div class="card p-2 text-muted text-center mt-auto"><em>&quot;Easy. Its because we have all these special powers, and we don&#39;t want to make regular dragons feel inferior. You know. Telepathy? Precognition? Invisibility? Hello?&quot;<br>&mdash; To Clay, about the NightWings</em></div>
  147. <br>
  148. <div class="card p-2 text-muted text-center mt-auto"><em>&quot;Quote...&quot;<br>&mdash; To Name, about Subject</em></div>
  149. <br>
  150. <div class="card p-2 text-muted text-center mt-auto"><em>&quot;Quote...&quot;<br>&mdash; To <em>Name, about Subject</em></em>
  151. </div>
  152. </div>
  153. </div>
  154. <!------------------------------------------------------------------------------------->
  155. <!------------------------ MIDDLE SECTION FOUR --- STORY ------------------------------->
  156. <!------------------------------------------------------------------------------------->
  157. <div class="tab-pane show card-block pb-1" id="FOUR" style="height: 551px; overflow:auto;">
  158. <!--------------------------------------------------------------------------->
  159. <!--------------------------- STORY PART 1 ------------------------------------>
  160. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Parents</div>
  161. <hr class="mt-1 mb-2">
  162. <div class="mb-4 text-muted text-justify">
  163.  
  164. <p>How their parents met/the circumstances of their birth. Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat.</p>
  165. </div>
  166. <!--------------------------- STORY PART 2 ------------------------------------>
  167. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Egg</div>
  168. <hr class="mt-1 mb-2">
  169. <div class="mb-4 text-muted text-justify">
  170.  
  171. <p>Things that happened while they were in their egg. Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat.</p>
  172. </div>
  173. <!--------------------------- STORY PART 3 ------------------------------------>
  174. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Dragonethood</div>
  175. <hr class="mt-1 mb-2">
  176. <div class="mb-4 text-muted text-justify">
  177.  
  178. <p>Anything that happened between 1-7 years of age. Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat.</p>
  179. </div>
  180. <!--------------------------- STORY PART 4 ------------------------------------>
  181. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Early adulthood</div>
  182. <hr class="mt-1 mb-2">
  183. <div class="mb-4 text-muted text-justify">
  184.  
  185. <p>Anything that happened not long after 7 years of age, like around 8-10. Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat.</p>
  186. </div>
  187. <!--------------------------- STORY PART 5 ------------------------------------>
  188. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Adulthood</div>
  189. <hr class="mt-1 mb-2">
  190. <div class="mb-4 text-muted text-justify">
  191.  
  192. <p>Anything else. Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat.</p>
  193. </div>
  194. <!--------------------------- STORY PART 6 ------------------------------------>
  195. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Death</div>
  196. <hr class="mt-1 mb-2">
  197. <div class="mb-4 text-muted text-justify">
  198.  
  199. <p>The circumstances/consequences of their death. Suspendisse sed convallis est. Morbi at sem ultricies, iaculis ipsum venenatis, maximus arcu. Integer et congue mi, sit amet efficitur erat.</p>
  200. </div>
  201. <!--------------------------- LINEAGE ------------------------------------>
  202. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Family tree</div>
  203. <hr class="mt-1 mb-2">
  204. <div class="mb-4 text-muted text-justify">
  205. <div><strong>Biological</strong></div>
  206.  
  207. <ul style="list-style-type: disc;">
  208. <li>Paternal Grandmother: Unknown</li>
  209. <li>Paternal Grandfather: Unknown</li>
  210. <li>Maternal Grandmother: Unknown</li>
  211. <li>Maternal Grandfather: Unknown</li>
  212. <li>Mother: Unknown</li>
  213. <li>Father: Unknown</li>
  214. <li>Aunts: Unknown</li>
  215. <li>Uncles: Unknown</li>
  216. <li>Siblings: None</li>
  217. <li>Nieces: None</li>
  218. <li>Nephews: None</li>
  219. <li>Mate: None</li>
  220. <li>Past mates: None</li>
  221. <li>Children: None</li>
  222. <li>Grandchildren: None</li>
  223. </ul>
  224. <div><strong>Adoptive</strong></div>
  225.  
  226. <ul>
  227. <li>Paternal Grandmother: Unknown</li>
  228. <li>Paternal Grandfather: Unknown</li>
  229. <li>Maternal Grandmother: Unknown</li>
  230. <li>Maternal Grandfather: Unknown</li>
  231. <li>Mother: Unknown</li>
  232. <li>Father: Unknown</li>
  233. <li>Aunts: Unknown</li>
  234. <li>Uncles: Unknown</li>
  235. <li>Siblings: None</li>
  236. <li>Nieces: None</li>
  237. <li>Nephews: None</li>
  238. <li>Children: None</li>
  239. <li>Grandchildren: None</li>
  240. </ul>
  241. </div>
  242. </div>
  243. <!------------------------------------------------------------------------------------->
  244. <!------------------------ MIDDLE SECTION FIVE --- MISC ------------------------------->
  245. <!------------------------------------------------------------------------------------->
  246. <div class="tab-pane show card-block pb-1" id="FIVE" style="height: 551px; overflow:auto;">
  247. <!--------------------------------------------------------------------------->
  248. <!------------------------------ RIBBONS ------------------------------------>
  249. <div class="pt-1 text-uppercase pull-left" style="font-size: 17px; letter-spacing: 1px; text-align: center;">Ribbons</div>
  250. <hr class="mt-1 mb-2">
  251. <div class="ui-accordion card rounded-0 bg-faded">
  252. <div class="carousel slide carousel-slide my-0" data-ride="carousel" id="ribbonimage" style="overflow:hidden;">
  253. <div class="carousel-inner">
  254. <!------------------------------------------------------------------------->
  255. <!--------------------------- RIBBON 1 ------------------------------------>
  256. <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="IMG-URL" height="16" width="43"></span></div>
  257. <!------------------------------------------------------------------------->
  258. <!--------------------------- RIBBON 2 ------------------------------------>
  259. <div class="carousel-item"><span data-toggle="tooltip" title="RIBBON DESCRIPTION"><img class="d-block mx-auto fr-fic fr-dib" style="max-width: 100%;" src="IMG-URL" height="62" width="43"></span></div>
  260. <!---------------------------------------------------------------------------------------------->
  261. <!--------------------------- ADD MORE RIBBONS ABOVE THIS LINE ---------------------------->
  262. <!--------------------------------------------------------------------------------------------->
  263. </div><a class="carousel-control-prev" data-slide="prev" href="#ribbonimage"><span class="fas fa-chevron-left fa-2x text-white"></span></a>
  264. <a class="carousel-control-next" data-slide="next" href="#ribbonimage"><span class="fas fa-chevron-right fa-2x text-white"></span></a></div>
  265. </div>
  266. <div class="mb-4 text-muted text-justify">
  267.  
  268. <p style="text-align: center;">Hover over a ribbon to see it&#39;s meaning.
  269. <br><span style="font-size: 11px;">[&nbsp;</span><a href="https://toyhou.se/4739396.-ribbons" id=""><span style="font-size: 11px;">Ribbons</span></a><span style="font-size: 11px;">&nbsp;]</span></p>
  270. </div>
  271. <div class="row">
  272. <br>
  273. <!--------------------------- VOICE ------------------------------------>
  274. <div class="likes mb-md-0 mb-4 col-md">
  275. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Voice</div>
  276. <hr class="d-flex" style="clear:none;">
  277. <div class="card square mx-auto" style="overflow:hidden;width:300px;height:100px;">
  278. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  279. <!-------------------------------------------------------------------------------->
  280. <!--------------------------- REPLACE VIDEOID ------------------------------------>
  281. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  282. </div>
  283. </div>
  284. </div>
  285. <!--------------------------- MAIN THEME ------------------------------------>
  286. <div class="dislikes col-md">
  287. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">main theme</div>
  288. <hr class="d-flex" style="clear:none;">
  289. <div class="card square mx-auto" style="overflow:hidden;width:300px;height:100px;">
  290. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  291. <!-------------------------------------------------------------------------------->
  292. <!--------------------------- REPLACE VIDEOID ------------------------------------>
  293. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  298. <br>
  299. <!--------------------------- PLAYLIST ------------------------------------>
  300. <div class="pt-1 text-uppercase pull-left" style="font-size: 17px; letter-spacing: 1px; text-align: center;">Playlist</div>
  301. <hr class="mt-1 mb-2">
  302. <div class="mb-4 text-muted text-justify">
  303.  
  304. <p style="text-align: center;"><em>Main genres: ...</em></p>
  305. <div class="col-lg-16 p-1 d-flex my-auto">
  306. <!--------------------------------------------------------------------------->
  307. <!--------------------------------- VIDEO 1 - ------------------------------------>
  308. <!--------------------------------------------------------------------------->
  309. <div class="card square mx-auto" style="overflow:hidden;width:100px;height:100px;">
  310. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  311. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  312. </div>
  313. </div>
  314. <!--------------------------------------------------------------------------->
  315. <!--------------------------------- VIDEO 2 - ------------------------------------>
  316. <!--------------------------------------------------------------------------->
  317. <div class="card square mx-auto" style="overflow:hidden;width:100px;height:100px;">
  318. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  319. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  320. </div>
  321. </div>
  322. <!--------------------------------------------------------------------------->
  323. <!--------------------------------- VIDEO 3 - ------------------------------------>
  324. <!--------------------------------------------------------------------------->
  325. <div class="card square mx-auto" style="overflow:hidden;width:100px;height:100px;">
  326. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  327. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  328. </div>
  329. </div>
  330. <!--------------------------------------------------------------------------->
  331. <!--------------------------------- VIDEO 4 - ------------------------------------>
  332. <!--------------------------------------------------------------------------->
  333. <div class="card square mx-auto" style="overflow:hidden;width:100px;height:100px;">
  334. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  335. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  336. </div>
  337. </div>
  338. <!--------------------------------------------------------------------------->
  339. <!--------------------------------- VIDEO 5 - ------------------------------------>
  340. <!--------------------------------------------------------------------------->
  341. <div class="card square mx-auto" style="overflow:hidden;width:100px;height:100px;">
  342. <div style="display:inline-block;position:relative;left:-55px;top:-32.5px;">
  343. <iframe width="1000" height="135" src="https://www.youtube-nocookie.com/embed/VIDEOID" frameborder="0" allowfullscreen=""></iframe>
  344. </div>
  345. </div>
  346. <!--------------------------------------------------------------------------->
  347. <!----------------- ADD MORE VIDEOS ABOVE THIS LINE ---------------------------->
  348. <!--------------------------------------------------------------------------->
  349. </div>
  350. </div>
  351. <!--------------------------- MOODBOARDS ------------------------------------>
  352. <div class="pt-1 text-uppercase pull-left" style="font-size: 17px; letter-spacing: 1px; text-align: center;">Moodboards</div>
  353. <hr class="mt-1 mb-2">
  354. <div class="mb-4 text-muted text-justify">
  355.  
  356. <p>
  357. <a href="http://Creator" id=""><img src="IMG-URL" class="fr-fic fr-dib" width="474" height="16"></a>
  358. </p>
  359.  
  360. <p style="text-align: center;"><a href="https://toyhou.se/7435913" id="">&lt;/&gt;</a></p>
  361. </div>
  362. </div>
  363. <!------------------------------------------------------------------------------------->
  364. <!------------------------ MIDDLE SECTION SIX --- VALUE ------------------------------->
  365. <!------------------------------------------------------------------------------------->
  366. <div class="tab-pane show card-block pb-1" id="SIX" style="height: 551px; overflow:auto;">
  367. <!--------------------------------------------------------------------------->
  368. <!--------------------------- VALUE ------------------------------------>
  369. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">TOTAL VALUE AS OF 00 MON 2020: $00.00&nbsp;</div>
  370. <hr class="mt-1 mb-2">
  371. <div class="mb-4 text-muted text-justify">
  372.  
  373. <ul>
  374. <li>You can change these rules, these are just my personal ones.</li>
  375. <li>Pieces by me are based on my commission prices at the time the piece was made.</li>
  376. <li>Pieces by others are based on their commission prices. If none, they&#39;ll be based on mine.</li>
  377. <li>Art trades are added as the artist&#39;s commission value.</li>
  378. <li>Commissions are added as the price paid.</li>
  379. <li>Gifts are not added unless the artist specifically says I can do so.
  380.  
  381. <ul>
  382. <li><em>It can be argued that the art shouldn&#39;t be rendered worthless just because it wasn&#39;t paid for, but it can also be argued that it&#39;s not very good to profit off of free art. This is my compromise. If you have made gift art of my character and wish for me to add it to their value, please let me know!</em></li>
  383. </ul>
  384. </li>
  385. </ul>
  386.  
  387. <table class="table table-striped" style="width: 100%;">
  388. <tbody>
  389. <tr>
  390. <td style="width: 20%; text-align: left;"><strong>Artist</strong></td>
  391. <td style="width: 30.4324%; text-align: left;"><strong>Type</strong></td>
  392. <td style="width: 18.3026%; text-align: left;"><strong>Value</strong></td>
  393. <td style="width: 15.7638%; text-align: left;"><strong>Received as</strong></td>
  394. <td style="width: 15.4069%; text-align: left;"><strong>Date</strong></td>
  395. </tr>
  396. <tr>
  397. <td style="text-align: left;">@/username</td>
  398. <td style="text-align: left; width: 30.4324%;">Reference (3x Fullbodies)</td>
  399. <td style="text-align: left; width: 18.3026%;">$00.00</td>
  400. <td style="text-align: left; width: 15.7638%;">Commission</td>
  401. <td style="text-align: left; width: 15.4069%;">11 Jan 2020</td>
  402. </tr>
  403. </tbody>
  404. </table>
  405. </div>
  406.  
  407. <p style="text-align: center;"><a href="https://toyhou.se/6027422.art-value-tracker" id="">&lt;/&gt;</a></p>
  408. </div>
  409. </div>
  410. <!--------------------------- MIDDLE FOOTER ----------------------------------->
  411. <div class="card-header p-2" style="background:url(https://cdn.discordapp.com/attachments/556878774814113792/734494263097950308/unknown.png);">
  412. <!----------------------------------------------------------------------------->
  413. <br>
  414. </div>
  415. </div>
  416. </div>
  417. <!----------------------------------------------------------------------------->
  418. <!----------------------------------------------------------------------------->
  419. <!-------------------------- RIGHT SECTION ----------------------------------->
  420. <!----------------------------------------------------------------------------->
  421. <!----------------------------------------------------------------------------->
  422. <div class="col-md-3 col-sm-5 mb-2 p-1">
  423. <div class="card rounded-0">
  424. <div class="card-header bg-faded">
  425. <!------------------------- RIGHT NAVIGATION BUTTONS ---------------------------------->
  426. <!----------- Remove lines from here to easily hide unwanted tabs --------------------->
  427.  
  428. <ul class="nav nav-tabs card-header-tabs nav-justified text-uppercase" style="letter-spacing:1px;">
  429. <li class="nav-item"><a class="nav-link show active" data-toggle="tab" href="#RONE" id="">Profile</a></li>
  430. <li class="nav-item"><a class="nav-link show" data-toggle="tab" href="#RTWO" id="">Social</a></li>
  431. <li class="nav-item"><a class="nav-link show" data-toggle="tab" href="#RTHREE" id="">Meta</a></li>
  432. <li class="nav-item"><a class="nav-link show" data-toggle="tab" href="#RFOUR" id="">Colors</a></li>
  433. </ul>
  434. </div>
  435. <div class="tab-content">
  436. <!------------------------------------------------------------------------------------->
  437. <!------------------------ RIGHT SECTION ONE --- PROFILE ------------------------------>
  438. <!------------------------------------------------------------------------------------->
  439. <div class="tab-pane show card-block pb-1 active" id="RONE" style="height: 551px; overflow:auto;">
  440. <div align="center" class="pt-0">
  441. <!----------------------------------------------------------------------->
  442. <!--------------------------- PAGEVIEW COUNTER -------------------------->
  443. <!---- You must go to https://www.cutercounter.com/ to make this functional for your character. ----->
  444. <!----------------------------------------------------------------------->
  445. <a href="https://www.cutercounter.com/" target="_blank"><img src="https://www.cutercounter.com/hits.php?id=hxxpxaq&nd=6&style=1" border="0" alt="" class="fr-fic fr-dii" width="44" height="12"></a>
  446. <!----------------------------------------------------------------------->
  447. <!--------------------------- AVATAR ------------------------------------>
  448. <div class="rounded-circle text-light" style="width: 10rem; height: 10rem;
  449. background: url(IMG-URL) no-repeat center center;
  450. background-size: cover; background-color: white; border-width: .4rem; border-style: solid; border-color: inherit;">
  451. <br>
  452. </div>
  453. </div>
  454. <br>
  455. <div class="row no-gutters">
  456. <!----------------------------------------------------------------------->
  457. <!-------------------------------- INFO --------------------------------->
  458. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Status</span>
  459. <span class="text-muted pull-right">Alive/Deceased (died in year)</span></div>
  460. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Full name</span>
  461. <span class="text-muted pull-right">info</span></div>
  462. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Pronounced</span>
  463. <span class="text-muted pull-right">info</span></div>
  464. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Meaning/Origin</span>
  465. <span class="text-muted pull-right">info</span></div>
  466. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Nickname</span>
  467. <span class="text-muted pull-right">info</span></div>
  468. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Tribe</span>
  469. <span class="text-muted pull-right">info</span></div>
  470. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Age</span>
  471. <span class="text-muted pull-right">7 years</span></div>
  472. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Sex</span>
  473. <span class="text-muted pull-right">info</span></div>
  474. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Gender</span>
  475. <span class="text-muted pull-right">info</span></div>
  476. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Orientation</span>
  477. <span class="text-muted pull-right">info</span></div>
  478. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Hometown/Birthplace</span>
  479. <span class="text-muted pull-right">info</span></div>
  480. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Residence</span>
  481. <span class="text-muted pull-right">info</span></div>
  482. <!----------------------------------------------------------------------->
  483. </div>
  484. <hr class="mt-3 mb-2">
  485. <!----------------------------------------------------------------------->
  486. <!------------------------------- STATS --------------------------------->
  487. <div class="d-flex"><span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px;"><span data-toggle="tooltip" title="The character's ability to attack another.">Offense</span></span>
  488. <div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px;">
  489. <div class="progress-bar" style="width: 50%;">
  490. <br>
  491. </div>
  492. </div>
  493. </div>
  494. <div class="d-flex"><span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px;"><span data-toggle="tooltip" title="The character's ability to resist or block damage taken.">Durability</span></span>
  495. <div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px;">
  496. <div class="progress-bar" style="width: 50%;">
  497. <br>
  498. </div>
  499. </div>
  500. </div>
  501. <div class="d-flex"><span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px;"><span data-toggle="tooltip" title="The character's ability to evade grabs or attacks.">Evasion</span></span>
  502. <div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px;">
  503. <div class="progress-bar" style="width: 50%;">
  504. <br>
  505. </div>
  506. </div>
  507. </div>
  508. <div class="d-flex"><span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px;"><span data-toggle="tooltip" title="The character's ability to move with accuracy and precision.">Agility</span></span>
  509. <div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px;">
  510. <div class="progress-bar" style="width: 50%;">
  511. <br>
  512. </div>
  513. </div>
  514. </div>
  515. <div class="d-flex"><span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px;"><span data-toggle="tooltip" title="How fast the character can perform actions.">Speed</span></span>
  516. <div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px;">
  517. <div class="progress-bar" style="width: 50%;">
  518. <br>
  519. </div>
  520. </div>
  521. </div>
  522. <div class="d-flex"><span class="w-100 p-1 text-truncate text-uppercase text-muted" style="letter-spacing:1px;"><span data-toggle="tooltip" title="The character's ability to strategize, as well as examine and understand situations or problems.">Intelligence</span></span>
  523. <div class="w-100 mx-1 progress my-auto rounded-0" style="height:5px;">
  524. <div class="progress-bar" style="width: 50%;">
  525. <br>
  526. </div>
  527. </div>
  528. </div>
  529. <!----------------------------------------------------------------------->
  530. </div>
  531. <!------------------------------------------------------------------------------------->
  532. <!--------------------=---- RIGHT SECTION TWO --- SOCIAL ------------------------------>
  533. <!------------------------------------------------------------------------------------->
  534. <div class="tab-pane show card-block pb-1" id="RTWO" style="height: 551px; overflow:auto;">
  535. <!--------------------------- SOCIAL --------------------------------------->
  536. <!------------------------- CONNECTIONS ------------------------------------>
  537. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Connections</div>
  538. <hr class="mt-1 mb-2">
  539. <div class="row no-gutters">
  540. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Affiliation</span>
  541. <span class="text-muted pull-right">info</span></div>
  542. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Occupation</span>
  543. <span class="text-muted pull-right">info</span></div>
  544. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Rank</span>
  545. <span class="text-muted pull-right">info</span></div>
  546. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Former Affiliations</span>
  547. <span class="text-muted pull-right">info</span></div>
  548. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Former Occupations</span>
  549. <span class="text-muted pull-right">info</span></div>
  550. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Former Ranks</span>
  551. <span class="text-muted pull-right">info</span></div>
  552. <!----------------------------------------------------------------------->
  553. <!--------------------------- RELATIONSHIPS ------------------------------------>
  554. </div>
  555. <br>
  556. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Relationships</div>
  557. <hr class="mt-1 mb-2">
  558. <div align="center" class="pt-0">
  559. <!----------------------------------------------------------------------->
  560. <!--------------------------- ICON ------------------------------------>
  561. <div class="rounded-circle text-light" style="width: 10rem; height: 10rem;
  562. background: url(IMG-URL) no-repeat center center;
  563. background-size: cover; background-color: white; border-width: .4rem; border-style: solid; border-color: inherit;">
  564. <br>
  565. </div>
  566. <!----------------------------- THOUGHTS ----------------------------------->
  567. <div class="card p-2 text-muted text-center mt-auto"><a href="#" id=""><strong>Character Name</strong></a>[ Label. Friend, enemy, etc. ]
  568. <br><em>Thoughts on them.</em></div>
  569. <br>
  570. <!----------------------------------------------------------------------->
  571. <!--------------------------- ICON ------------------------------------>
  572. <div class="rounded-circle text-light" style="width: 10rem; height: 10rem;
  573. background: url(IMG-URL) no-repeat center center;
  574. background-size: cover; background-color: white; border-width: .4rem; border-style: solid; border-color: inherit;">
  575. <br>
  576. </div>
  577. <!----------------------------- THOUGHTS ----------------------------------->
  578. <div class="card p-2 text-muted text-center mt-auto"><a href="#" id=""><strong>Character Name</strong></a>[ Label. Friend, enemy, etc. ]
  579. <br><em>Thoughts on them.</em></div>
  580. <br>
  581. <!-------------------------- ADD MORE RELATIONSHIPS ABOVE ----------------------------->
  582. <!------------------------------------------------------------------------------------->
  583. </div>
  584. </div>
  585. <!------------------------------------------------------------------------------------->
  586. <!--------------------=---- RIGHT SECTION THREE --- META ------------------------------>
  587. <!------------------------------------------------------------------------------------->
  588. <div class="tab-pane show card-block pb-1" id="RTHREE" style="height: 551px; overflow:auto;">
  589. <!--------------------------- META ------------------------------------>
  590. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Meta information</div>
  591. <hr class="mt-1 mb-2">
  592. <div class="row no-gutters">
  593. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Profile</span>
  594. <span class="text-muted pull-right">Complete</span>
  595. <br><span class="text-muted pull-right">Incomplete</span></div>
  596. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Art Priority</span>
  597. <span class="text-muted pull-right">High</span>
  598. <br><span class="text-muted pull-right">Medium</span>
  599. <br><span class="text-muted pull-right">Low</span></div>
  600. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Gift Art</span>
  601. <span class="text-muted pull-right">Accepting</span>
  602. <br><span class="text-muted pull-right">Not Accepting</span></div>
  603. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Gift Content</span>
  604. <span class="text-muted pull-right">Blood ✔✘<br>Gore ✔✘<br>NSFW ✔✘<br>Nudity ✔✘</span></div>
  605. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Acquisition</span>
  606. <span class="text-muted pull-right">Created<br>Purchase [$]<br>Trade [For ID]<br>Art trade [Worth]<br>Free/Gift</span></div>
  607. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Status</span>
  608. <span class="text-muted pull-right">Never for trade/sale<br>Not for trade/sale<br>Tentative<br>Detached<br>For trade/sale/offer<br>Free</span></div>
  609. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Character Type</span>
  610. <span class="text-muted pull-right">Fan<br>Group<br>Roleplay</span></div>
  611. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Group</span>
  612. <span class="text-muted pull-right"><a href="#" id="">link</a></span></div>
  613. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Fandom</span>
  614. <span class="text-muted pull-right"><a href="https://en.wikipedia.org/wiki/Wings_of_Fire_(novel_series)" id="">Wings of Fire</a></span></div>
  615. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Universe</span>
  616. <span class="text-muted pull-right"><a href="#" id="">link</a></span></div>
  617. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Importance</span>
  618. <span class="text-muted pull-right">Very high<br>High<br>Medium<br>Low<br>Very low</span></div>
  619. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Creation</span>
  620. <span class="text-muted pull-right">01 Jan 2000</span></div>
  621. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Creator</span>
  622. <span class="text-muted pull-right"><a href="#" id="">@/username</a></span></div>
  623. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Creator Rules</span>
  624. <span class="text-muted pull-right"><a href="#" id="">ToS</a></span></div>
  625. <div class="col-sm-12 mb-2"><span class="text-uppercase text-muted pull-left" style="letter-spacing:1px;">Base Credit</span>
  626. <span class="text-muted pull-right"><a href="http://joyang.ca/artwork/" id="">Joy Ang</a></span></div>
  627. </div>
  628. </div>
  629. <!------------------------------------------------------------------------------------->
  630. <!---------------------- RIGHT SECTION FOUR --- PALETTES ------------------------------>
  631. <!------------------------------------------------------------------------------------->
  632. <div class="tab-pane show card-block pb-1" id="RFOUR" style="height: 551px; overflow:auto;">
  633. <!--------------------------- PALETTES ------------------------------------>
  634. <div class="pt-1 text-uppercase pull-left" style="font-size:17px; letter-spacing:1px;">Palette</div>
  635. <hr class="mt-1 mb-2">
  636. <div class="mb-4 text-muted text-justify">
  637.  
  638. <p>Any notes about the palette.</p>
  639. <hr class="mt-1 mb-2">
  640. <div class="row no-gutters">
  641. <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>
  642. <div class="col-12 p-2 display-4 text-center text-uppercase text-black" style="font-size:1.2rem;letter-spacing:1px;background-color:#d398ea;"><span style="font-size: 14px;">primary #d398ea</span></div>
  643. <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>
  644. </div>
  645. </div>
  646. </div>
  647. <!----------------------------- RIGHT FOOTER ---------------------------------->
  648. <div class="card-header p-2" style="background:url(https://cdn.discordapp.com/attachments/556878774814113792/734494273634041916/unknown.png);">
  649. <!----------------------------------------------------------------------------->
  650. <br>
  651. </div>
  652. </div>
  653. </div>
  654. </div>
  655. </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!