API tools faq
paste
Advertisement
CrispinAsheYA

To-Do List 2 (Custom Colours)

CrispinAsheYA
Feb 20th, 2025 (edited)
346
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.90 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. -Text Colour: #753227
  7. -Background-Colour: #FECBBF
  8. -Credits Box: #FF6867
  9. -
  10. -Success Green: #69B00B
  11. -Warning Yellow: #FF9A00
  12. -Danger Red: #CC334A
  13. -Info Blue: #211173
  14. -
  15. -Important White: #FFFFFF
  16. -Important Black: #000000
  17. -Font Awesomes: fa-strawberry
  18.  
  19. 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.)
  20.  
  21. Thank you for reading!
  22. Crispin
  23.  
  24. -->
  25.  
  26. <div class="mb-3 p-0" style="border:#000000 8px solid;">
  27.   <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>
  28. </div>
  29.  
  30. <div class="col-12 p-0" style="background-color:#FECBBF; border:#000000 8px solid;">
  31.   <div class="col-12 m-0 p-3 row no-gutters text-center">
  32.  
  33.     <div class="col-sm-2 d-none d-lg-block order-1">
  34.       <div class="h-100" style="background:url([IMGLEFT]); background-position:center; background-size:cover; background-attachment:fixed; border:#000000 8px solid;"></div>
  35.     </div>
  36.  
  37.     <div class="col-sm-2 d-none d-lg-block order-3">
  38.       <div class="h-100" style="background:url([IMGRIGHT]); background-position:center; background-size:cover; background-attachment:fixed; border:#000000 8px solid;"></div>
  39.     </div>
  40.  
  41.     <!-------- Start Main List -------->
  42.     <div class="col-lg-8 col-12 order-2 p-2" style="color:#753227;">
  43.       <div style="font-size:1.2rem;">
  44.       <p>This is my To-Do List for 2025!</p>
  45.       <p>Any completed goals from 2022-2024 have been removed. Only oustanding & goals completed in 2024 remain!</p>
  46.      </div>
  47.      <hr class="bg-muted mt-3 mb-2"><hr class="bg-muted mt-1 mb-2">
  48.      
  49.      <div class="row justify-content-center">
  50.        <p class="mx-4"><small><span class="badge text-white" style="background-color:#69B00B;"><i class="fa fa-fw fa-check"></i></span> - 100% Done </small></p>
  51.         <p class="mx-4"><small><span class="badge text-white" style="background-color:#FF9A00;"><i class="fa fa-fw fa-question"></i></span> - WIP</small></p>
  52.         <p class="mx-4"><small><span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> - Not Started</small></p>
  53.         <p class="mx-4"><small><span class="badge text-white" style="background-color:#211173;"><i class="fa fa-fw fa-arrow-down"></i></span> - Done-Ish (Click To See Outstanding)</small></p>
  54.       </div>
  55.      
  56.       <hr class="bg-muted mt-0 mb-2"><hr class="bg-muted mt-1 mb-2">
  57.      
  58.       <div class="row no-gutters" style="padding-left:10%; padding-right:10%;">
  59.        
  60.         <!----- Start Characters ------>
  61.         <div class="col-lg-6 col-12 p-3">
  62.           <div class="text-left py-3">
  63.             <h2 style="color:#CC334A;"><span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-user"></i></span> CHARACTERS</h2>
  64.            
  65.             <!----- If you've semi finished a character, keep a list of what you have and haven't done here! ----->
  66.            
  67.             <!----- Start Bramble ------>
  68.             <a class="collapsed" href="#bramble" data-toggle="collapse"><span class="badge text-white" style="background-color:#211173;"><i class="fa fa-fw fa-arrow-down"></i></span> Bramble Prowl</a>
  69.            
  70.             <div class="collapsed collapse" id="bramble"><ul>
  71.               <li><span class="badge text-white" style="background-color:#69B00B;"><i class="fa fa-fw fa-check"></i></span> Avatar</li>
  72.               <li><span class="badge text-white" style="background-color:#69B00B;"><i class="fa fa-fw fa-check"></i></span> Code</li>
  73.               <li><span class="badge text-white" style="background-color:#FF9A00;"><i class="fa fa-fw fa-question"></i></span> Awards</li>
  74.               <li><span class="badge text-white" style="background-color:#FF9A00;"><i class="fa fa-fw fa-question"></i></span> Playlist</li>
  75.               <li><span class="badge text-white" style="background-color:#FF9A00;"><i class="fa fa-fw fa-question"></i></span> Rewards</li>
  76.               <li><span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> Warning</li>
  77.               <li><span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> CSS</li>
  78.             </ul></div><br>
  79.             <!----- End Bramble ------>
  80.            
  81.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  82.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  83.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  84.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  85.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  86.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  87.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  88.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  89.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  90.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  91.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  92.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  93.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  94.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  95.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  96.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  97.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  98.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  99.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  100.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  101.            
  102.           </div>
  103.         </div>
  104.         <!----- End Characters ------>
  105.        
  106.         <!----- Start Everything Else ------>
  107.         <div class="col-lg-6 col-12 p-3">
  108.          
  109.           <!----- Start Profile ------>
  110.           <div class="text-left py-3">
  111.             <h2 class="text-warning"><span class="badge text-white" style="background-color:#FF9A00;"><i class="fa fa-fw fa-home"></i></span> PROFILE</h2>
  112.            
  113.             <span class="badge text-white" style="background-color:#FF9A00;"><i class="fa fa-fw fa-check"></i></span> [???]<br>
  114.             <span class="badge text-white" style="background-color:#FF9A00;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  115.             <span class="badge text-white" style="background-color:#FF9A00;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  116.           </div>
  117.           <!----- End Profile ------>
  118.        
  119.           <!----- Start Folders ------>
  120.           <div class="text-left py-3">
  121.             <h2 style="color:#69B00B;"><span class="badge text-white" style="background-color:#69B00B;"><i class="fa fa-fw fa-folder"></i></span> FOLDERS</h2>
  122.            
  123.             <span class="badge text-white" style="background-color:#69B00B;"><i class="fa fa-fw fa-check"></i></span> [???]<br>
  124.             <span class="badge text-white" style="background-color:#69B00B;"><i class="fa fa-fw fa-check"></i></span> [???]<br>
  125.             <span class="badge text-white" style="background-color:#69B00B;"><i class="fa fa-fw fa-check"></i></span> [???]<br>
  126.            
  127.           </div>
  128.           <!----- End Folders ------>
  129.        
  130.           <!----- Start Worlds ------>
  131.           <div class="text-left py-3">
  132.             <h2 style="color:#CC334A;"><span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-globe"></i></span> WORLDS</h2>
  133.            
  134.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  135.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  136.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  137.            
  138.           </div>
  139.           <!----- End Worlds ------>
  140.        
  141.           <!----- Start Literatures ------>
  142.           <div class="text-left py-3">
  143.             <h2 style="color:#CC334A;"><span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-book"></i></span> LITERATURES</h2>
  144.            
  145.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  146.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  147.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  148.            
  149.           </div>
  150.           <!----- End Literatures ------>
  151.        
  152.           <!----- Start Misc ------>
  153.           <div class="text-left py-3">
  154.             <h2 style="color:#CC334A;"><span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-cog"></i></span> MISC</h2>
  155.            
  156.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  157.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  158.             <span class="badge text-white" style="background-color:#CC334A;"><i class="fa fa-fw fa-x"></i></span> [???]<br>
  159.            
  160.           </div>
  161.           <!----- End Misc ------>
  162.        
  163.       </div>
  164.      
  165.       </div>
  166.      
  167.     </div>
  168.     <!-------- End Main List -------->
  169.  
  170.   </div>
  171. </div>
  172.  
  173. <div class="col-12 mt-3 py-2 text-center" style="font-size:1.2rem; background-color:#FF6867; border:#000000 8px solid;">
  174.   <a href="[IMGLEFT]" data-toggle="tooltip" title="Left Image Source"><span style="color:#FFFFFF;"><i class="fas fa-image"></i></span></a>
  175.   <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>
  176.   <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>
  177.   <a href="[IMGHEADER]" data-toggle="tooltip" title="Header Image Source"><span style="color:#FFFFFF;"><i class="fas fa-strawberry"></i></span></a>
  178.   <a href="[IMGRIGHT]" data-toggle="tooltip" title="Right Image Source"><span style="color:#FFFFFF;"><i class="fas fa-image"></i></span></a>
  179. </div>
  180.  
  181. <!--
  182. [IMGHEADER]
  183. [IMGLEFT] | [IMGRIGHT]
  184. [???]
  185. -->
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!