API tools faq
paste
Advertisement
rude-baesil

Party Selection Screen Code

rude-baesil
Oct 21st, 2020 (edited)
970
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.41 KB | None | 0 0
raw download clone embed print report
  1. <!--- | PARTY SELECTION SCREEN |
  2. | by Zylphide | --->
  3.  
  4. <!--- BACKGROUND IMAGE GOES HERE--->
  5. <div class="row justify-content-center p-4" style="background: url(https://images.unsplash.com/photo-1500236861371-c749e9a06b46) fixed;background-size:cover;background-position: right">
  6.  
  7. <div class="w-50 py-5">
  8. <div class="d-sm-flex justify-content-sm-between text-center" style="font-family:century gothic">
  9. <hr class="w-100 d-none d-sm-block">
  10. <span class="text-muted display-4 col-auto pl-0" style="font-size:32px">&nbsp<b>Party Select</b></span>
  11. <hr class="w-100 d-none d-sm-block">
  12. </div>
  13. </div>
  14.  
  15.  
  16. <div class="col-lg-12">
  17. <div class="row no-gutters">
  18. <!-- CHARACTER 1 -->
  19. <div class="col-lg-2 col-md-6 p-2 d-flex mb-sm-3" style="text-align:center">
  20. <div style="width:90%">
  21. <!--- CHARACTER NAME GOES HERE --->
  22. <span class="text-uppercase text-muted my-1 center" style="font-size:20px;">NAME</h1>
  23. <!--- IMAGE URL GOES HERE, image will get cropped to fit inside --->
  24. <div class="d-block mt-2 w-100" style="background:url(IMG LINK) center no-repeat; background-size: cover; height:400px">
  25. <!--- CHARACTER LINK GOES HERE, color of light can be changed by changing "btn-outline-primary" to one of the other bootstrap colors --->
  26. <a href="#" class="btn btn-outline-primary btn-block btn-lg" style="height:100%;mix-blend-mode: soft-light;"></a>
  27. </div>
  28.  
  29. <div class="my-3">
  30. <!--- BAR 1, change width:50% to change how full the bar is (0-100%)--->
  31. <div class="progress my-1">
  32. <div class="progress-bar bg-primary" role="progressbar" style="width:50%;height:16px">HP</div>
  33. </div>
  34. <!--- BAR 2--->
  35. <div class="progress my-1">
  36. <div class="progress-bar bg-danger" role="progressbar" style="width:50%;height:16px">Attack</div>
  37. </div>
  38. <!--- BAR 3--->
  39. <div class="progress my-1">
  40. <div class="progress-bar bg-warning" role="progressbar" style="width:50%;height:16px">Defense</div>
  41. </div>
  42. <!--- BAR 4--->
  43. <div class="progress my-1">
  44. <div class="progress-bar bg-success" role="progressbar" style="width:50%;height:16px">Support</div>
  45. </div>
  46. <!--- ADD MORE BARS HERE--->
  47. </div>
  48. </div>
  49. </div>
  50. <!--- END CHARACTER 1 --->
  51.  
  52. <!--- CHARACTER 2 --->
  53. <div class="col-lg-2 col-md-6 p-2 d-flex mb-sm-3" style="text-align:center">
  54. <div style="width:90%">
  55. <!--- CHARACTER NAME GOES HERE --->
  56. <span class="text-uppercase text-muted my-1 center" style="font-size:20px;">name</h1>
  57. <!--- IMAGE URL GOES HERE, image will get cropped to fit inside (but not resized), 200x400px is best --->
  58. <div class="d-block mt-2 w-100" style="background:url(IMG LINK) center no-repeat; background-size: cover; height:400px">
  59. <!--- CHARACTER LINK GOES HERE, color of light can be changed by changing "btn-outline-primary" to one of the other bootstrap colors --->
  60. <a href="#" class="btn btn-outline-primary btn-block btn-lg" style="height:100%;mix-blend-mode: soft-light;"></a>
  61. </div>
  62.  
  63. <div class="my-3">
  64. <!--- BAR 1, change width:50% to change how full the bar is (0-100%)--->
  65. <div class="progress my-1">
  66. <div class="progress-bar bg-primary" role="progressbar" style="width:50%;height:16px">HP</div>
  67. </div>
  68. <!--- BAR 2--->
  69. <div class="progress my-1">
  70. <div class="progress-bar bg-danger" role="progressbar" style="width:50%;height:16px">Attack</div>
  71. </div>
  72. <!--- BAR 3--->
  73. <div class="progress my-1">
  74. <div class="progress-bar bg-warning" role="progressbar" style="width:50%;height:16px">Defense</div>
  75. </div>
  76. <!--- BAR 4--->
  77. <div class="progress my-1">
  78. <div class="progress-bar bg-success" role="progressbar" style="width:50%;height:16px">Support</div>
  79. </div>
  80. <!--- ADD MORE BARS HERE--->
  81. </div>
  82. </div>
  83. </div>
  84. <!--- END CHARACTER 2 --->
  85.  
  86. <!--- CHARACTER 3 --->
  87. <div class="col-lg-2 col-md-6 p-2 d-flex mb-sm-3" style="text-align:center">
  88. <div style="width:90%">
  89. <!--- CHARACTER NAME GOES HERE --->
  90. <span class="text-uppercase text-muted my-1 center" style="font-size:20px;">name</h1>
  91. <!--- IMAGE URL GOES HERE, image will get cropped to fit inside --->
  92. <div class="d-block mt-2 w-100" style="background:url(IMG LINK) center no-repeat; background-size: cover; height:400px">
  93. <!--- CHARACTER LINK GOES HERE, color of light can be changed by changing "btn-outline-primary" to one of the other bootstrap colors --->
  94. <a href="#" class="btn btn-outline-primary btn-block btn-lg" style="height:100%; mix-blend-mode: soft-light;"></a>
  95. </div>
  96.  
  97. <div class="my-3">
  98. <!--- BAR 1, change width:50% to change how full the bar is (0-100%)--->
  99. <div class="progress my-1">
  100. <div class="progress-bar bg-primary" role="progressbar" style="width:50%;height:16px">HP</div>
  101. </div>
  102. <!--- BAR 2--->
  103. <div class="progress my-1">
  104. <div class="progress-bar bg-danger" role="progressbar" style="width:50%;height:16px">Attack</div>
  105. </div>
  106. <!--- BAR 3--->
  107. <div class="progress my-1">
  108. <div class="progress-bar bg-warning" role="progressbar" style="width:50%;height:16px">Defense</div>
  109. </div>
  110. <!--- BAR 4--->
  111. <div class="progress my-1">
  112. <div class="progress-bar bg-success" role="progressbar" style="width:50%;height:16px">Support</div>
  113. </div>
  114. <!--- ADD MORE BARS HERE--->
  115. </div>
  116. </div>
  117. </div>
  118. <!--- END CHARACTER 3 --->
  119.  
  120. <!--- CHARACTER 4 --->
  121. <div class="col-lg-2 col-md-6 p-2 d-flex mb-sm-3" style="text-align:center">
  122. <div style="width:90%">
  123. <!--- CHARACTER NAME GOES HERE --->
  124. <span class="text-uppercase text-muted my-1 center" style="font-size:20px;">name</h1>
  125. <!--- IMAGE URL GOES HERE, image will get cropped to fit inside --->
  126. <div class="d-block mt-2 w-100" style="background:url(IMG LINK) center no-repeat; background-size: cover; height:400px">
  127. <!--- CHARACTER LINK GOES HERE, color of light can be changed by changing "btn-outline-primary" to one of the other bootstrap colors --->
  128. <a href="#" class="btn btn-outline-primary btn-block btn-lg" style="height:100%; mix-blend-mode: soft-light;"></a>
  129. </div>
  130.  
  131. <div class="my-3">
  132. <!--- BAR 1, change width:50% to change how full the bar is (0-100%)--->
  133. <div class="progress my-1">
  134. <div class="progress-bar bg-primary" role="progressbar" style="width:50%;height:16px">HP</div>
  135. </div>
  136. <!--- BAR 2--->
  137. <div class="progress my-1">
  138. <div class="progress-bar bg-danger" role="progressbar" style="width:50%;height:16px">Attack</div>
  139. </div>
  140. <!--- BAR 3--->
  141. <div class="progress my-1">
  142. <div class="progress-bar bg-warning" role="progressbar" style="width:50%;height:16px">Defense</div>
  143. </div>
  144. <!--- BAR 4--->
  145. <div class="progress my-1">
  146. <div class="progress-bar bg-success" role="progressbar" style="width:50%;height:16px">Support</div>
  147. </div>
  148. <!--- ADD MORE BARS HERE--->
  149. </div>
  150. </div>
  151. </div>
  152. <!--- END CHARACTER 4 --->
  153.  
  154. <!--- CHARACTER 5 --->
  155. <div class="col-lg-2 col-md-6 p-2 d-flex mb-sm-3" style="text-align:center">
  156. <div style="width:90%">
  157. <!--- CHARACTER NAME GOES HERE --->
  158. <span class="text-uppercase text-muted my-1 center" style="font-size:20px;">name</h1>
  159. <!--- IMAGE URL GOES HERE, image will get cropped to fit inside --->
  160. <div class="d-block mt-2 w-100" style="background:url(IMG LINK) center no-repeat; background-size: cover; height:400px">
  161. <!--- CHARACTER LINK GOES HERE, color of light can be changed by changing "btn-outline-primary" to one of the other bootstrap colors --->
  162. <a href="#" class="btn btn-outline-primary btn-block btn-lg" style="height:100%; mix-blend-mode: soft-light;"></a>
  163. </div>
  164.  
  165. <div class="my-3">
  166. <!--- BAR 1, change width:50% to change how full the bar is (0-100%)--->
  167. <div class="progress my-1">
  168. <div class="progress-bar bg-primary" role="progressbar" style="width:50%;height:16px">HP</div>
  169. </div>
  170. <!--- BAR 2--->
  171. <div class="progress my-1">
  172. <div class="progress-bar bg-danger" role="progressbar" style="width:50%;height:16px">Attack</div>
  173. </div>
  174. <!--- BAR 3--->
  175. <div class="progress my-1">
  176. <div class="progress-bar bg-warning" role="progressbar" style="width:50%;height:16px">Defense</div>
  177. </div>
  178. <!--- BAR 4--->
  179. <div class="progress my-1">
  180. <div class="progress-bar bg-success" role="progressbar" style="width:50%;height:16px">Support</div>
  181. </div>
  182. <!--- ADD MORE BARS HERE--->
  183. </div>
  184. </div>
  185. </div>
  186. <!--- END CHARACTER 5 --->
  187.  
  188. <!--- CHARACTER 6 --->
  189. <div class="col-lg-2 col-md-6 p-2 d-flex mb-sm-3" style="text-align:center">
  190. <div style="width:90%">
  191. <!--- CHARACTER NAME GOES HERE --->
  192. <span class="text-uppercase text-muted my-1 center" style="font-size:20px;">name</h1>
  193. <!--- IMAGE URL GOES HERE, image will get cropped to fit inside --->
  194. <div class="d-block mt-2 w-100" style="background:url(IMG LINK) center no-repeat; background-size: cover; height:400px">
  195. <!--- CHARACTER LINK GOES HERE, color of light can be changed by changing "btn-outline-primary" to one of the other bootstrap colors --->
  196. <a href="#" class="btn btn-outline-primary btn-block btn-lg" style="height:100%; mix-blend-mode: soft-light;"></a>
  197. </div>
  198.  
  199. <div class="my-3">
  200. <!--- BAR 1, change width:50% to change how full the bar is (0-100%)--->
  201. <div class="progress my-1">
  202. <div class="progress-bar bg-primary" role="progressbar" style="width:50%;height:16px">HP</div>
  203. </div>
  204. <!--- BAR 2--->
  205. <div class="progress my-1">
  206. <div class="progress-bar bg-danger" role="progressbar" style="width:50%;height:16px">Attack</div>
  207. </div>
  208. <!--- BAR 3--->
  209. <div class="progress my-1">
  210. <div class="progress-bar bg-warning" role="progressbar" style="width:50%;height:16px">Defense</div>
  211. </div>
  212. <!--- BAR 4--->
  213. <div class="progress my-1">
  214. <div class="progress-bar bg-success" role="progressbar" style="width:50%;height:16px">Support</div>
  215. </div>
  216. <!--- ADD MORE BARS HERE--->
  217.  
  218. </div>
  219. </div>
  220. </div>
  221. <!--- END CHARACTER 6 --->
  222. <!--- ADD MORE CHARACTERS HERE, they'll just get put on a second row--->
  223.  
  224. </div>
  225. </div>
  226.  
  227. </div>
  228.  
  229. <!--- credits, do not remove! --->
  230. <a class="d-block text-right p-1" style="font-size:12px" href="https://toyhou.se/Zylphide"><i class="fal fa-dragon fa-flip-horizontal" data-placement="left" title="code by Zylphide"></i></a>
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!