API tools faq
paste
Advertisement
LivvyAh

MODULAR: Ultimate Basics 1.0-ReColor

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