API tools faq
paste
MCDogWarrior

Descriptive Character Custom

MCDogWarrior
May 28th, 2021 (edited)
265
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.09 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid my-1" style="color:#ffffff;width:1300px;">
  2. <div class="card bg-faded p-2" style="background-color:#160829;">
  3. <div class="row">
  4. <!-- [Left side]-->
  5. <div class="col-4">
  6. <!-- Basic info-->
  7. <div class="card bg-faded p-2 my-1" style="background-color:#362267;">
  8. <p><span style="font-size: 24px;"><strong>CHARACTER (NICK)NAME</strong></span></p>
  9. <p></p>
  10. <div class="row">
  11. <div class="col-6">
  12. <p style="text-align: left;"><strong><i class="far fa-address-card"></i>&nbsp;Name</strong></span></p>
  13. </div>
  14. <div class="col-6">
  15. <p class="text-primary" style="text-align: right;">(content)</span></p>
  16. </div>
  17. </div>
  18.  
  19. <div class="row">
  20. <div class="col-6">
  21. <p style="text-align: left;"><strong><i class="far fa-birthday-cake"></i>&nbsp;&nbsp;Age</strong></span></p>
  22. </div>
  23. <div class="col-6">
  24. <p class="text-primary" style="text-align: right;">(content)</span></p>
  25. </div>
  26. </div>
  27.  
  28. <div class="row">
  29. <div class="col-6">
  30. <p style="text-align: left;"><strong><i class="far fa-transgender"></i>&nbsp;&nbsp;Gender</strong></span></p>
  31. </div>
  32. <div class="col-6">
  33. <p class="text-primary" style="text-align: right;">(content)</span></p>
  34. </div>
  35. </div>
  36.  
  37. <div class="row">
  38. <div class="col-6">
  39. <p style="text-align: left;"><strong><i class="far fa-paw"></i>&nbsp;Species/Race</strong></span></p>
  40. </div>
  41. <div class="col-6">
  42. <p class="text-primary" style="text-align: right;">(content)</span></p>
  43. </div>
  44. </div>
  45.  
  46. <div class="row">
  47. <div class="col-6">
  48. <p style="text-align: left;"><strong><i class="far fa-heartbeat"></i>&nbsp;Orientation</strong></span></p>
  49. </div>
  50. <div class="col-6">
  51. <p class="text-primary" style="text-align: right;">(content)</span></p>
  52. </div>
  53. </div>
  54. </div>
  55. <!-- Likes and dislikes-->
  56. <div class="card bg-faded my-1 p-2" style="background-color:#362267;">
  57. <div class="row">
  58. <!-- (Likes)-->
  59. <div class="col-6">
  60. <p><span style="font-size: 15px;"><strong>Likes</strong></span></p>
  61. <span style="text-align: left;"><i class="fas fa-heart"></i>&nbsp;a like</span></span><br>
  62. <span style="text-align: left;"><i class="fas fa-heart"></i>&nbsp;an appreciated thing</span></span><br>
  63. <span style="text-align: left;"><i class="fas fa-heart"></i>&nbsp;something e l s e</span></span><br>
  64. </div>
  65. <!-- (Dislikes)-->
  66. <div class="col-6">
  67. <p><span style="font-size: 15px;"><strong>Dislikes</strong></span></p>
  68. <span style="text-align: left;"><i class="fas fa-times"></i>&nbsp;a terrible thing</span></span><br>
  69. <span style="text-align: left;"><i class="fas fa-times"></i>&nbsp;absolutely horrid</span></span><br>
  70. <span style="text-align: left;"><i class="fas fa-times"></i>&nbsp;disgustingly disgusting</span></span><br>
  71. </div>
  72. </div>
  73. </div>
  74. <!-- Some stats -->
  75. <div class="card bg-faded my-1 p-1" style="background-color:#362267;">
  76. <div class="row">
  77. <div class="col-3">
  78. <span style="text-align: left;"><strong>Intelligence</strong></span><br>
  79. </div>
  80. <div class="col-9">
  81. <div class="progress bg-dark rounded mt-1">
  82. <div class="progress-bar" style="width: 50%; background-color: #10D5B9">
  83. </div>
  84. </div>
  85. </div>
  86. </div>
  87.  
  88. <div class="row">
  89. <div class="col-3">
  90. <span style="text-align: left;"><strong>Confidence</strong></span><br>
  91. </div>
  92. <div class="col-9">
  93. <div class="progress bg-dark rounded mt-1">
  94. <div class="progress-bar" style="width: 50%; background-color: #10D5B9">
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99.  
  100. <div class="row">
  101. <div class="col-3">
  102. <span style="text-align: left;"><strong>Empathy</strong></span><br>
  103. </div>
  104. <div class="col-9">
  105. <div class="progress bg-dark rounded mt-1">
  106. <div class="progress-bar" style="width: 50%; background-color: #10D5B9">
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111.  
  112. <div class="row">
  113. <div class="col-3">
  114. <span style="text-align: left;"><strong>Temper</strong></span><br>
  115. </div>
  116. <div class="col-9">
  117. <div class="progress bg-dark rounded mt-1">
  118. <div class="progress-bar" style="width: 50%; background-color: #10D5B9">
  119. </div>
  120. </div>
  121. </div>
  122. </div>
  123.  
  124. <div class="row">
  125. <div class="col-3">
  126. <span style="text-align: left;"><strong>Creativity</strong></span><br>
  127. </div>
  128. <div class="col-9">
  129. <div class="progress bg-dark rounded mt-1">
  130. <div class="progress-bar" style="width: 50%; background-color: #10D5B9">
  131. </div>
  132. </div>
  133. </div>
  134. </div>
  135.  
  136. <div class="row">
  137. <div class="col-3">
  138. <span style="text-align: left;"><strong>Humor</strong></span><br>
  139. </div>
  140. <div class="col-9">
  141. <div class="progress bg-dark rounded mt-1">
  142. <div class="progress-bar" style="width: 50%; background-color: #10D5B9">
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147. </div>
  148. </div>
  149. <!-- [Middle]-->
  150. <div class="col-4">
  151. <div class="card bg-faded p-2 my-1" style="background-color:#362267;">
  152. <div class="row">
  153. <!-- Appearance info-->
  154. <div class="col-6">
  155. <br>
  156. <div class="row">
  157. <div class="col-6">
  158. <p style="text-align: left;"><strong>Hair color</strong></span></p>
  159. </div>
  160. <div class="col-6">
  161. <p style="text-align: right;">(content)</span></p>
  162. </div>
  163. </div>
  164.  
  165. <div class="row">
  166. <div class="col-6">
  167. <p style="text-align: left;"><strong>Hair type</strong></span></p>
  168. </div>
  169. <div class="col-6">
  170. <p style="text-align: right;">(content)</span></p>
  171. </div>
  172. </div>
  173.  
  174. <div class="row">
  175. <div class="col-6">
  176. <p style="text-align: left;"><strong>Eye color</strong></span></p>
  177. </div>
  178. <div class="col-6">
  179. <p style="text-align: right;">(content)</span></p>
  180. </div>
  181. </div>
  182.  
  183. <div class="row">
  184. <div class="col-6">
  185. <p style="text-align: left;"><strong>Eye type</strong></span></p>
  186. </div>
  187. <div class="col-6">
  188. <p style="text-align: right;">(content)</span></p>
  189. </div>
  190. </div>
  191.  
  192. <p></p>
  193. <!-- Notes-->
  194. <a style="text-align: left;"><strong>Other details:</strong></span></a>
  195. <a style="text-align: left;">write down some other details about the character</span></a>
  196.  
  197. <p></p>
  198.  
  199. <p style="text-align: left;"><strong>Design notes</strong></span></p>
  200. <span style="text-align: left;"><strong>- </strong>a thingy about the design</span></span><br>
  201. <span style="text-align: left;"><strong>- </strong>or what it's based on</span></span><br>
  202. <span style="text-align: left;"><strong>- </strong>refer to a reference<a href="LINKTOSOMETHING" id=""><sup>[here]</sup></span></span>
  203. <br>
  204. </div>
  205. <!-- Reference image-->
  206. <div class="col-6">
  207. <div style="background: url(REFERENCEIMGURL); background-repeat: no-repeat; background-size:cover; background-position: top center; height:290px; max-width:170px; " class="card-block h-0" >
  208. <!-- (link to full ref pic)-->
  209. <a href="LINKTOREFFULL" class="text-white" style="position:absolute; top:270px; right:25px; font-size:13px; opacity:0.75;" data-toggle="tooltip" title="full reference"><i class="fas fa-image"></i> </a>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. <!-- Trivia-->
  215. <div class="card bg-faded p-2 my-1" style="background-color:#362267; height:110px; overflow:auto;">
  216. <p style="text-align: left;"><strong>Trivia</strong></span></p>
  217. <span style="text-align: left;"><strong>- </strong>something very incredibly interesting and engaging to know about the character</span></span>
  218. <span style="text-align: left;"><strong>- </strong>probably</span></span>
  219. <span style="text-align: left;"><strong>- </strong>maybe</span></span>
  220. <span style="text-align: left;"><strong>- </strong>box scrolls if full</span></span>
  221. </div>
  222. </div>
  223. <!-- [Right side]-->
  224. <div class="col-4">
  225. <!-- Personality box-->
  226. <div class="card bg-faded p-2 my-1" style="background-color:#362267; height:208px; overflow:auto;">
  227. <p style="text-align: right;"><span style="font-size: 20px;"><strong>PERSONALITY&nbsp;<i class="far fa-user"></i></strong></span></p>
  228. <p>just a whole lotta wording about the character's personality- try to write quite a bit of stuff trust me it probably looks better</p>
  229. <a>another row for even more words</p>
  230. </div>
  231. <!-- Story box-->
  232. <div class="card bg-faded p-2 my-1" style="background-color:#362267; height:208px; overflow:auto;">
  233. <p><span style="font-size: 20px;"><strong><i class="far fa-book"></i>&nbsp;BACKSTORY</strong></span></p>
  234. <p style="text-align: right;">oh did I mention that- yes- the boxes scroll when they get full</p>
  235. <a style="text-align: right;">it's incredible isn't it</p>
  236. </div>
  237. </div>
  238. </div>
  239. </div>
  240. <p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>
  241. </div>
  242. </div>
Add Comment
Please, Sign In to add comment
Public Pastes
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!