API tools faq
paste
LivvyAh

MODULAR: Ultimate Basics 1.0

LivvyAh
Feb 19th, 2022
131
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.43 KB | None | 0 0
raw download clone embed print report
  1. <!-- ULTIMATE BASICS START
  2. I see you all adding stats to this code. I'm here for you.
  3. To add a new pair of label+answer add:
  4. <div class="p-1 d-flex justify-content-between mb-1">
  5. <span class="text-uppercase text-white">Label
  6. </span>Answer
  7. </div>
  8. The line between sections is:
  9. <hr class="bg-white w-100">
  10. The version that's hidden until the screen is too small to have two columns is this one:
  11. <hr class="bg-white w-100 hidden-md-up">
  12. -->
  13. <div class="row">
  14. <div class="col-12 p-2">
  15. <div class="text-light bg-dark p-3">
  16. <div class="text-uppercase d-flex justify-content-between" style="letter-spacing:3px; font-size:20px;">
  17. BASICS</div>
  18. <hr class="bg-white w-100">
  19. <div class="p-1">
  20. <div class="row">
  21. <div class="col-md-5 col-sm-12">
  22. <!-- LABELS + ANSWERS START -->
  23. <div class="p-1 d-flex justify-content-between mb-1">
  24. <span class="text-uppercase text-white">Name</span>
  25. First "Nickname" Last
  26. </div>
  27. <div class="p-1 d-flex justify-content-between mb-1">
  28. <span class="text-uppercase text-white">Pronounced</span>
  29. some way
  30. </div>
  31. <div class="p-1 d-flex justify-content-between mb-1">
  32. <span class="text-uppercase text-white">Pronouns</span>
  33. xxx/xxx/xxx
  34. </div>
  35. <div class="p-1 d-flex justify-content-between mb-1">
  36. <span class="text-uppercase text-white">Gender</span>
  37. ???gender
  38. </div>
  39. <div class="p-1 d-flex justify-content-between mb-1">
  40. <span class="text-uppercase text-white">Orientation</span>
  41. ???sexual
  42. </div>
  43. <div class="p-1 d-flex justify-content-between mb-1">
  44. <span class="text-uppercase text-white">Age</span>
  45. Young Adult
  46. </div>
  47. <div class="p-1 d-flex justify-content-between mb-1">
  48. <span class="text-uppercase text-white">Birthday</span>
  49. ?????ber ??th
  50. </div>
  51. <hr class="bg-white w-100">
  52. <div class="p-1 d-flex justify-content-between mb-1">
  53. <span class="text-uppercase text-white">Species</span>
  54. ??????
  55. </div>
  56. <div class="p-1 d-flex justify-content-between mb-1">
  57. <span class="text-uppercase text-white">Race</span>
  58. ??????
  59. </div>
  60. <div class="p-1 d-flex justify-content-between mb-1">
  61. <span class="text-uppercase text-white">Build</span>
  62. ??????
  63. </div>
  64. <div class="p-1 d-flex justify-content-between mb-1">
  65. <span class="text-uppercase text-white">Height</span>
  66. ??????
  67. </div>
  68. <div class="p-1 d-flex justify-content-between mb-1">
  69. <span class="text-uppercase text-white">Weight</span>
  70. ??????
  71. </div>
  72. <!-- LABELS + ANSWERS END -->
  73. <hr class="bg-white w-100 hidden-md-up">
  74. </div>
  75. <div class="col-md-7 col-sm-12">
  76. <!-- STAT BARS START
  77. If you want the bars to be a different color change the info part of
  78. bg-info
  79. to one of the values found here:
  80. https://toyhou.se/2621177.
  81. To change how full they are you change the percent in the style section.
  82. style="width:50%;height:16px;"
  83. This part!
  84. -->
  85. <div class="row no-gutters p-1">
  86. <!-- BAR 1 START-->
  87. <div class="p-1 col-3 text-uppercase text-white">Value</div>
  88. <div class="col-9 progress my-2 rounded-20 bg-faded">
  89. <div class="progress-bar bg-info"
  90. style="width:50%;height:16px;"><br></div>
  91. </div>
  92. <!-- BAR 1 END-->
  93. <!-- BAR 2 START-->
  94. <div class="col-9 progress my-2 rounded-20 bg-faded">
  95. <div class="progress-bar bg-info"
  96. style="width:90%;height:16px;"><br></div>
  97. </div>
  98. <div class="p-1 col-3 text-uppercase text-white text-right">Value</div>
  99. <!-- BAR 2 END-->
  100. </div><!-- STAT BARS END -->
  101. <hr class="bg-white w-100">
  102. <!-- SYMBOL BARS START
  103. There's a couple different styles here
  104. They all use fontawesome icons, so you're welcome to change them.
  105.  
  106. For FILL style, change fas to far or vice versa to fill and unfill.
  107.  
  108. For OVERLAP style, one icon is this whole code segment:
  109. <span class="fa-stack">
  110. <i class="far fa-square fa-stack-2x text-muted"></i>
  111. <i class="fas fa-square fa-stack-1x text-info"></i>
  112. </span>
  113. The top one is on the bottom, so to check or uncheck you add or remove it. You can totally play with different fontawesome icon combos!
  114. -->
  115. <div class="row no-gutters p-1">
  116. <!-- FILL 1 START-->
  117. <div class="p-1 col-3 text-uppercase text-white">Value</div>
  118. <div class="p-1 col-3 text-right">
  119. <i class="far fa-square text-muted"></i>
  120. <i class="far fa-square text-muted"></i>
  121. <i class="fas fa-square text-info"></i>
  122. <i class="fas fa-square text-info"></i>
  123. <i class="fas fa-square text-info"></i>
  124. </div>
  125. <!-- FILL 1 END-->
  126. <!-- FILL 2 START-->
  127. <div class="p-1 col-3 text-uppercase text-white">Value</div>
  128. <div class="p-1 col-3 text-right">
  129. <i class="far fa-heart-crack text-muted"></i>
  130. <i class="fas fa-heart text-danger"></i>
  131. <i class="fas fa-heart text-danger"></i>
  132. <i class="fas fa-heart text-danger"></i>
  133. </div>
  134. <!-- FILL 2 END-->
  135. <hr class="bg-white w-100">
  136. <!-- OVERLAP 1 START-->
  137. <div class="p-1 col-3 text-uppercase text-white" style="font-size:20px;">Value</div>
  138. <div class="p-1 col-9 text-center fa-lg">
  139. <span class="fa-stack">
  140. <i class="far fa-square fa-stack-2x text-muted"></i>
  141. <i class="fas fa-square fa-stack-1x text-info"></i>
  142. </span>
  143. <span class="fa-stack">
  144. <i class="far fa-square fa-stack-2x text-muted"></i>
  145. <i class="fas fa-square fa-stack-1x text-info"></i>
  146. </span>
  147. <span class="fa-stack">
  148. <i class="far fa-square fa-stack-2x text-muted"></i>
  149. </span>
  150. <span class="fa-stack">
  151. <i class="far fa-square fa-stack-2x text-muted"></i>
  152. </span>
  153. <span class="fa-stack">
  154. <i class="far fa-square fa-stack-2x text-muted"></i>
  155. </span>
  156. </div>
  157. <!-- OVERLAP 1 END-->
  158. <!-- OVERLAP 2 START-->
  159. <div class="p-1 col-9 text-center fa-lg">
  160. <span class="fa-stack">
  161. <i class="far fa-heart fa-stack-2x text-muted"></i>
  162. <i class="fas fa-heart fa-stack-1x fa-inverse text-danger"></i>
  163. </span>
  164. <span class="fa-stack">
  165. <i class="far fa-heart fa-stack-2x text-muted"></i>
  166. <i class="fas fa-heart fa-stack-1x text-danger"></i>
  167. </span>
  168. <span class="fa-stack">
  169. <i class="far fa-heart fa-stack-2x text-muted"></i>
  170. </span>
  171. <span class="fa-stack">
  172. <i class="far fa-heart fa-stack-2x text-muted"></i>
  173. </span>
  174. <span class="fa-stack">
  175. <i class="far fa-heart fa-stack-2x text-muted"></i>
  176. </span>
  177. </div>
  178. <div class="p-1 col-3 text-uppercase text-white" style="font-size:20px;">Value</div>
  179. <!-- OVERLAP 2 END-->
  180. </div>
  181. <!-- SYMBOL BARS END -->
  182. <hr class="bg-white w-100">
  183. <!-- MINI BLURB START -->
  184. Hey you like all my stat options? Don't feel like you gotta use them all or do the alternating thing. I just wanted you to have some options cause I think you're cool.
  185. <br>Here's an optional blurb. Could be a super quick run down.
  186. <br><b>Still no scrollbars!</b> Do mobile users hate me or do they appreciate the readability?
  187. <!-- MINI BLURB END -->
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. <!-- ULTIMATE BASICS END -->
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!