API tools faq
paste
Advertisement
LivvyAh

MODULAR: Ultimate Basics-Codeo

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