API tools faq
paste
Advertisement
MCDogWarrior

Tab Character (Custom)

MCDogWarrior
Jun 2nd, 2021 (edited)
329
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.52 KB | None | 0 0
raw download clone embed print report
  1. <div class="container-fluid my-1" style="color:#ffffff;max-width:1050px;">
  2. <div class="container">
  3. <!--Background Image-->
  4. <div class="card rounded-0 border-0 p-2 mt-3" style="background-image:url( https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/2de243d6-ec05-4a84-9349-779a25b48c92/deixvjm-eb7ff3c6-b999-4d07-804a-88ebfa8968aa.png/v1/fill/w_1147,h_696,q_70,strp/img_by_mcdogwarrior_deixvjm-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9Nzc3IiwicGF0aCI6IlwvZlwvMmRlMjQzZDYtZWMwNS00YTg0LTkzNDktNzc5YTI1YjQ4YzkyXC9kZWl4dmptLWViN2ZmM2M2LWI5OTktNGQwNy04MDRhLTg4ZWJmYTg5NjhhYS5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.YG0ABhcre5NIwkjspfvti9Zi_SoHjly7SC-TZyNNLDk ); background-attachment:fixed; background-size:cover; background-position: center;">
  5. <div class="row no-gutters">
  6.  
  7. <!--Top Banner-->
  8. <div class="col-8">
  9. <div class="card bg-faded p-1" style="background-color:#150B3B;">
  10. <div class="card card-block bg-faded p-2 my-1" style="background-color:#251271;">
  11. <p style="text-align: center;"><span style="font-size: 25px;"><strong>CHARACTER NAME</strong></span></p>
  12. </div>
  13. </div>
  14. <!--Tab 1 (Basics)-->
  15. <div class="tab-content">
  16. <div class="tab-pane fade active show" id="tab1">
  17. <div class="card bg-faded p-2 my-1" style="background-color:#150B3B;">
  18. <div class="card bg-faded p-2 my-1" style="background-color:#251271;max-width:800px;">
  19. <div class="row">
  20. <!--Information columns-->
  21. <div class="col-6">
  22. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Name</strong> info</div>
  23. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Age</strong> info</div>
  24. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Gender</strong> info</div>
  25. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Species</strong> info</div>
  26. </div>
  27. <div class="col-6">
  28. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Orientation</strong> info</div>
  29. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Race</strong> info</div>
  30. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Career</strong> info</div>
  31. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Role</strong> info</div>
  32. </div>
  33. </div>
  34. </div>
  35. <div class="row">
  36. <!--Likes-->
  37. <div class="col-6">
  38. <div class="card bg-faded p-2 my-1" style="background-color:#251271;max-height:200;overflow:auto;">
  39. <p><span style="font-size: 15px;"><strong>Likes</strong></span></p>
  40. <span style="text-align: left;"><i class="fas fa-heart"></i>&nbsp;like #1</span></span>
  41. <span style="text-align: left;"><i class="fas fa-heart"></i>&nbsp;like #2</span></span>
  42. <span style="text-align: left;"><i class="fas fa-heart"></i>&nbsp;like #3</span></span>
  43. <span style="text-align: left;"><i class="fas fa-heart"></i>&nbsp;yes yes you get the idea</span></span>
  44. </div>
  45. </div>
  46. <!--Dislikes-->
  47. <div class="col-6">
  48. <div class="card bg-faded p-2 my-1" style="background-color:#251271;max-height:200;overflow:auto;">
  49. <p><span style="font-size: 15px;"><strong>Dislikes</strong></span></p>
  50. <span style="text-align: left;"><i class="fas fa-times"></i>&nbsp;dislike #1</span></span>
  51. <span style="text-align: left;"><i class="fas fa-times"></i>&nbsp;dislike #2</span></span>
  52. <span style="text-align: left;"><i class="fas fa-times"></i>&nbsp;dislike #3</span></span>
  53. <span style="text-align: left;"><i class="fas fa-times"></i>&nbsp;once again you probably get the idea</span></span>
  54. </div>
  55. </div>
  56. </div>
  57. <!--Hobbies/Interests-->
  58. <div class="card bg-faded p-2 my-1" style="background-color:#251271;max-height:200;overflow:auto;">
  59. <p style="text-align: center;"><span style="font-size: 17px;"><strong>Hobbies/Interests</strong></span></p>
  60. <ul style="list-style-type: circle">
  61. <li style="font-size: 14px;">write something they typically do on day-to-day days</li>
  62. <li style="font-size: 14px;">or something they generally enjoy doing</li>
  63. <li style="font-size: 14px;">or something they generally enjoy</li>
  64. <li style="font-size: 14px;">listen man I'm just trying to give you more bullet points here</li>
  65. </ul>
  66. </div>
  67. <!--World/Person relationship-->
  68. <div class="card bg-faded p-2 my-1" style="background-color:#251271;">
  69. <p style="text-align: center;"><span style="font-size: 17px;"><strong>Relationship</strong></span></p>
  70. <!--(icon- TH icons reccomended)-->
  71. <div class="row">
  72. <div class="col-3">
  73. <img src="IMAGEURL" class="d-block mx-auto mb-2 rounded-circle" style="max-height:150px;" alt="6748679?1588208130">
  74. <!--(description)-->
  75. </div>
  76. <div class="col-9">
  77. <a style="text-align: center;"><a class="btn btn-secondary my-2" href="LINKHERE">CHARACTER/WORLD NAME</a></a>
  78. <div class="card bg-faded my-1" style="background-color:#EA41C6; height:85px;overflow:auto;">
  79. <p style="text-align: justify;" class="my-1 p-1"><span>Brief description of the relationship between these 2 characters or the world the character lives in. Box scrolls</span></p>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. </div>
  86.  
  87. <!--Tab 2 (Design)-->
  88. <div class="tab-pane fade" id="tab2">
  89. <div class="card bg-faded p-2 my-1" style="background-color:#150B3B;">
  90. <div class="card bg-faded p-2 my-1" style="background-color:#251271;">
  91. <div class="row">
  92. <!--Reference pic-->
  93. <div class="col-5">
  94. <img src="IMAGEURL" class="d-block mx-auto mb-2" style="height:485px;" alt="6748679?1588208130">
  95. </div>
  96. <!--Design Notes-->
  97. <div class="col-7">
  98. <br>
  99. <p style="text-align: center;"><span style="font-size: 20px;"><strong>Design Notes</strong></span></p>
  100. <p></p>
  101. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Primary color</strong> info</div>
  102. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Secondary color</strong> info</div>
  103. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Hair color(s)</strong> info</div>
  104. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Hair shape</strong> info</div>
  105. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Eye color(s)</strong> info</div>
  106. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Eye shape</strong> info</div>
  107. <p></p>
  108. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Designer</strong> <a href="LINKTOUSER" id="">info</a></div>
  109. <div class="col-12 justify-content-between" style="text-align: center;"><strong>Masterlist</strong> <a href="LINKTOWORLD" id="">info</a></div>
  110. <br>
  111. <!--(Other details)-->
  112. <p><span style="font-size: 17px;"><strong>Other Details:</strong></span></p>
  113. <ul style="list-style-type: circle">
  114. <li style="font-size: 14px;">details about the character</li>
  115. <li style="font-size: 14px;">that are important</li>
  116. <li style="font-size: 14px;">or make it easier to draw them</li>
  117. <li style="font-size: 14px;">and stuff like that</li>
  118. </ul>
  119. </div>
  120. </div>
  121. </div>
  122. <div class="container-fluid my-1" style="color:#ffffff;max-width:700px;">
  123. <!--Color palette-->
  124. <div class="row">
  125. <div class="col-2">
  126. <div class="card card-block bg-faded my-2" style="background-color:#321063; max-height:100px;"></div>
  127. </div>
  128. <div class="col-2">
  129. <div class="card card-block bg-faded my-2" style="background-color:#58198C; max-height:100px;"></div>
  130. </div>
  131. <div class="col-2">
  132. <div class="card card-block bg-faded my-2" style="background-color:#7F20A6; max-height:100px;"></div>
  133. </div>
  134. <div class="col-2">
  135. <div class="card card-block bg-faded my-2" style="background-color:#A729C0; max-height:100px;"></div>
  136. </div>
  137. <div class="col-2">
  138. <div class="card card-block bg-faded my-2" style="background-color:#D734DA; max-height:100px;"></div>
  139. </div>
  140. <div class="col-2">
  141. <div class="card card-block bg-faded my-2" style="background-color:#F05AD9; max-height:100px;"></div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. </div>
  147.  
  148. <!--Tab 3 (Story)-->
  149. <div class="tab-pane fade" id="tab3">
  150. <div class="card bg-faded p-2 my-1" style="background-color:#150B3B;">
  151. <!--Personality-->
  152. <div class="card bg-faded p-2 my-1" style="background-color:#251271; height:200px; overflow:auto;">
  153. <p style="text-align: left;"><span style="font-size: 20px;"><strong>Personality</strong></span></p>
  154. <p style="text-align: left;"><span style="font-size: 14px;">Wrtie about the character's personality here. Write as much as ya want, the box scrolls</span></p>
  155. <a style="text-align: left;"><span style="font-size: 14px;">Oh and you can change the header if you insist</span></a>
  156. </div>
  157. <!--History-->
  158. <div class="card bg-faded p-2 my-1" style="background-color:#251271; height:200px; overflow:auto;">
  159. <p style="text-align: right;"><span style="font-size: 20px;"><strong>History</strong></span></p>
  160. <p style="text-align: right;"><span style="font-size: 14px;">Write about the character's edgy backstory here. Again, box scrolls</span></p>
  161. <a style="text-align: right;"><span style="font-size: 14px;">Another paragraph if needed</span></a>
  162. </div>
  163. <!--Trivia-->
  164. <div class="card bg-faded p-2 my-1" style="background-color:#251271; height:162px; overflow:auto;">
  165. <p style="text-align: left;"><span style="font-size: 20px;"><strong>Trivia</strong></span></p>
  166. <p></p>
  167. <ul style="list-style-type: circle">
  168. <li style="font-size: 14px;">more details about the character</li>
  169. <li style="font-size: 14px;">like stuff you would find on the bottom of a wiki page</li>
  170. <li style="font-size: 14px;">certain design choices and story choices for the character</li>
  171. </ul>
  172. </div>
  173. </div>
  174. </div>
  175. <!--Tab interface-->
  176. <div class="card bg-faded p-1 my-1" style="background-color:#150B3B;">
  177. <div class="card card-block bg-faded p-2" style="background-color:#251271;">
  178. <ul class="nav nav-tabs card-header-tabs row mb-1">
  179. <li class="col-md-4 mb-1"><a class="btn bg-faded btn-block btn-outline-primary active" data-toggle="tab" href="#tab1">Basics</a></li>
  180. <li class="col-md-4 mb-1"><a class="btn bg-faded btn-block btn-outline-primary" data-toggle="tab" href="#tab2">Design</a></li>
  181. <li class="col-md-4 mb-1"><a class="btn bg-faded btn-block btn-outline-primary" data-toggle="tab" href="#tab3">Story</a></li>
  182. </ul>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. <!--Floating image on side (height may need to be adjusted)-->
  188. <img src="IMGURL" class="d-block mx-auto mb-2" style="height:700px;" alt="6748679?1588208130">
  189. </div>
  190. </div>
  191. <!--BG image credit (optional)-->
  192. <div class="col-12 justify-content-between" style="text-align: center;">
  193. <strong><a href="CREDITLINK" class="text-white" data-toggle="tooltip" title="bg image"><i class="fas fa-image"></i> </a></strong>
  194. <!--Credit, stop removing here!-->
  195. <p style="text-align: right;"><span style="font-size: 9px;">Code by <a href="https://toyhou.se/MCDogResource" id="">MCDogWarrior</a></span></p>
  196. </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!