API tools faq
paste
Advertisement
CrispinAsheYA

To-Do List 2 (Bootstrap)

CrispinAsheYA
Feb 20th, 2025 (edited)
7
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.06 KB | Source Code | 0 0
raw download clone embed print report
  1. <!-- PLEASE SEE HERE FOR MY CODE RULES: https://toyhou.se/12931952.bonus-content/17098747.03-terms-of-service --
  2.  
  3. Version: 1.0
  4.  
  5. Default Colours
  6. -Important White: #FFFFFF
  7. -Important Black: #000000
  8. -Font Awesomes: fa-strawberry
  9.  
  10. Scroll To The Bottom for every single "Find & Replace" Variable! (Feel free to move to the top when you turn this into a personal template, I just keep it at the bottom for organisation.)
  11.  
  12. Thank you for reading!
  13. Crispin
  14.  
  15. -->
  16.  
  17. <div class="mb-3 p-0" style="border:#000000 8px solid;">
  18. <div class="card rounded-0" style="background:url([IMGHEADER]); background-position:center; background-size:cover; border:none;"><p class="display-4 text-center text-white m-1 p-3" style="background:rgba(0,0,0,0.7);"><i class="fas fa-strawberry fa-flip-horizontal"></i> TO-DO LIST <i class="fas fa-strawberry"></i></p></div>
  19. </div>
  20.  
  21. <div class="col-12 bg-dark p-0" style="border:#000000 8px solid;">
  22. <div class="col-12 m-0 p-3 row no-gutters text-center">
  23.  
  24. <div class="col-sm-2 d-none d-lg-block order-1">
  25. <div class="h-100" style="background:url([IMGLEFT]); background-position:center; background-size:cover; background-attachment:fixed; border:#000000 8px solid;"></div>
  26. </div>
  27.  
  28. <div class="col-sm-2 d-none d-lg-block order-3">
  29. <div class="h-100" style="background:url([IMGRIGHT]); background-position:center; background-size:cover; background-attachment:fixed; border:#000000 8px solid;"></div>
  30. </div>
  31.  
  32. <!-------- Start Main List -------->
  33. <div class="col-lg-8 col-12 order-2 text-white p-2">
  34. <div style="font-size:1.2rem;">
  35. <p>This is my To-Do List for 2025!</p>
  36. <p>Any completed goals from 2022-2024 have been removed. Only oustanding & goals completed in 2024 remain!</p>
  37. </div>
  38. <hr class="bg-muted mt-3 mb-2"><hr class="bg-muted mt-1 mb-2">
  39.  
  40. <div class="row justify-content-center">
  41. <p class="mx-4"><small><span class="badge badge-success"><i class="fa fa-fw fa-check"></i></span> - 100% Done </small></p>
  42. <p class="mx-4"><small><span class="badge badge-warning"><i class="fa fa-fw fa-question"></i></span> - WIP</small></p>
  43. <p class="mx-4"><small><span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> - Not Started</small></p>
  44. <p class="mx-4"><small><span class="badge badge-info"><i class="fa fa-fw fa-arrow-down"></i></span> - Done-Ish (Click To See Outstanding)</small></p>
  45. </div>
  46.  
  47. <hr class="bg-muted mt-0 mb-2"><hr class="bg-muted mt-1 mb-2">
  48.  
  49. <div class="row no-gutters" style="padding-left:10%; padding-right:10%;">
  50.  
  51. <!----- Start Characters ------>
  52. <div class="col-lg-6 col-12 p-3">
  53. <div class="text-left py-3">
  54. <h2 class="text-danger"><span class="badge badge-danger"><i class="fa fa-fw fa-user"></i></span> CHARACTERS</h2>
  55.  
  56. <!----- If you've semi finished a character, keep a list of what you have and haven't done here! ----->
  57.  
  58. <!----- Start Bramble ------>
  59. <a class="collapsed" href="#bramble" data-toggle="collapse"><span class="badge badge-info"><i class="fa fa-fw fa-arrow-down"></i></span> Bramble Prowl</a>
  60.  
  61. <div class="collapsed collapse" id="bramble"><ul>
  62. <li><span class="badge badge-success"><i class="fa fa-fw fa-check"></i></span> Avatar</li>
  63. <li><span class="badge badge-success"><i class="fa fa-fw fa-check"></i></span> Code</li>
  64. <li><span class="badge badge-warning"><i class="fa fa-fw fa-question"></i></span> Awards</li>
  65. <li><span class="badge badge-warning"><i class="fa fa-fw fa-question"></i></span> Playlist</li>
  66. <li><span class="badge badge-warning"><i class="fa fa-fw fa-question"></i></span> Rewards</li>
  67. <li><span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> Warning</li>
  68. <li><span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> CSS</li>
  69. </ul></div><br>
  70. <!----- End Bramble ------>
  71.  
  72. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  73. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  74. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  75. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  76. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  77. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  78. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  79. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  80. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  81. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  82. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  83. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  84. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  85. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  86. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  87. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  88. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  89. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  90. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  91. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  92.  
  93. </div>
  94. </div>
  95. <!----- End Characters ------>
  96.  
  97. <!----- Start Everything Else ------>
  98. <div class="col-lg-6 col-12 p-3">
  99.  
  100. <!----- Start Profile ------>
  101. <div class="text-left py-3">
  102. <h2 class="text-warning"><span class="badge badge-warning"><i class="fa fa-fw fa-home"></i></span> PROFILE</h2>
  103.  
  104. <span class="badge badge-warning"><i class="fa fa-fw fa-question"></i></span> [???]<br>
  105. <span class="badge badge-warning"><i class="fa fa-fw fa-question"></i></span> [???]<br>
  106. <span class="badge badge-warning"><i class="fa fa-fw fa-question"></i></span> [???]<br>
  107.  
  108. </div>
  109. <!----- End Profile ------>
  110.  
  111. <!----- Start Folders ------>
  112. <div class="text-left py-3">
  113. <h2 class="text-success"><span class="badge badge-success"><i class="fa fa-fw fa-folder"></i></span> FOLDERS</h2>
  114.  
  115. <span class="badge badge-success"><i class="fa fa-fw fa-check"></i></span> [???]<br>
  116. <span class="badge badge-success"><i class="fa fa-fw fa-check"></i></span> [???]<br>
  117. <span class="badge badge-success"><i class="fa fa-fw fa-check"></i></span> [???]<br>
  118.  
  119. </div>
  120. <!----- End Folders ------>
  121.  
  122. <!----- Start Worlds ------>
  123. <div class="text-left py-3">
  124. <h2 class="text-danger"><span class="badge badge-danger"><i class="fa fa-fw fa-globe"></i></span> WORLDS</h2>
  125.  
  126. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  127. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  128. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  129.  
  130. </div>
  131. <!----- End Worlds ------>
  132.  
  133. <!----- Start Literatures ------>
  134. <div class="text-left py-3">
  135. <h2 class="text-danger"><span class="badge badge-danger"><i class="fa fa-fw fa-book"></i></span> LITERATURES</h2>
  136.  
  137. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  138. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  139. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  140.  
  141. </div>
  142. <!----- End Literatures ------>
  143.  
  144. <!----- Start Misc ------>
  145. <div class="text-left py-3">
  146. <h2 class="text-danger"><span class="badge badge-danger"><i class="fa fa-fw fa-cog"></i></span> MISC</h2>
  147.  
  148. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  149. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  150. <span class="badge badge-danger"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  151.  
  152. </div>
  153. <!----- End Misc ------>
  154.  
  155. </div>
  156.  
  157. </div>
  158.  
  159. </div>
  160. <!-------- End Main List -------->
  161.  
  162. </div>
  163. </div>
  164.  
  165. <div class="col-12 mt-3 py-2 bg-primary text-center" style="font-size:1.2rem; border:#000000 8px solid;">
  166. <a href="[IMGLEFT]" data-toggle="tooltip" title="Left Image Source"><span style="color:#FFFFFF;"><i class="fas fa-image"></i></span></a>
  167. <a href="https://toyhou.se/16006417.overlay" data-toggle="tooltip" title="Header Code Frankensteined From: CuckooHoopoe"><span style="color:#FFFFFF;"><i class="fas fa-strawberry fa-flip-horizontal"></i></span></a>
  168. <a href="https://toyhou.se/31739594.two-do-list" data-toggle="tooltip" title="Code By: TomcatCodes / CrispinAsheYA"><span style="color:#FFFFFF;"><i class="fas fa-code"></i></span></a>
  169. <a href="[IMGHEADER]" data-toggle="tooltip" title="Header Image Source"><span style="color:#FFFFFF;"><i class="fas fa-strawberry"></i></span></a>
  170. <a href="[IMGRIGHT]" data-toggle="tooltip" title="Right Image Source"><span style="color:#FFFFFF;"><i class="fas fa-image"></i></span></a>
  171. </div>
  172.  
  173. <!--
  174. [IMGHEADER]
  175. [IMGLEFT] | [IMGRIGHT]
  176. [???]
  177. -->
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!