API tools faq
paste
Advertisement
CrispinAsheYA

Windows XP (FOLDER, F2U)

CrispinAsheYA
Mar 13th, 2022 (edited)
453
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.92 KB | None | 0 0
raw download clone embed print report
  1. <p>(17:06) 11.12.21</p><a href="https://pastebin.com/TuYFU8UC">Get Code Here! (Finished (13:32) 13.03.22)</a>
  2.  
  3. <!DOCTYPE HTML>
  4.  
  5. <!--RULES
  6.  
  7. YOU MAY
  8. -Frankenstein this with other codes and add/change/delete sections to your liking
  9. -Change colours, images, fonts, ect.
  10.  
  11. YOU MAYN'T
  12. -Resell or copy and paste this template pretty much exactly and pass it off as your own
  13. -Change every single image to be Minecraft Raw Porkchop
  14.  
  15. HOW TO USE
  16. -When editing, remember to turn WYSIWYG off! (AKA, the button should say "Enable WYSIWYG"! What does that stand for anyway?
  17. -I tend to litter comments everywhere. I like to assume that somewhere out there, one of my templates it's someone's first ever experience with HTML so I tend to explain accordingly. Feel free to delete the comments to your liking.
  18. -To change the colours, I reccomend copy and pasting all of your code into a Google Doc, going onto "find and replace" and using the colours below to quickly change the colours globally.
  19.  
  20. Default Colours
  21. -Internal Border Grey: #BFBFBF
  22. -External Border Grey: #DFDFDF
  23. -Header Blue: #1A4E99
  24. -Background White : #E2ECFF
  25. -Text White: #E2EDFF
  26. -Windows Icon Blue: #3C75F6
  27. -Background Color: #141B3E
  28.  
  29. -Header Blue Gradient: (64,138,230,1)
  30. -Header Blue Gradient: (14,96,203,1)
  31. -Header Blue Gradient: (50,140,240,1)
  32. -Header Red Gradient: (247,169,148,1)    (Sorry, I had to use rgba. It wouldn't work with hexcode. D=)
  33. -Header Red Gradient: (36,111,245,1)
  34. -Header Red Gradient: (22,83,199,1)
  35.  
  36. Thank you for reading!
  37. Crispin
  38.  
  39. -->
  40.  
  41. <!---------------------------------------------------------  START BACKGROUND --------------------------------------------------------->
  42.  
  43. <div class="col-lg-2 col-md-3 hidden-sm-down sidebar"></div> <!-- Defines the background -->
  44. <div class="card rounded-0 border-0 col-lg-10 offset-lg-2 col-md-9 offset-md-3 p-0" style="overflow:hidden; position:fixed; bottom:0; top:0; left:0; z-index:-1; background-color:#141B3E;"> <!-- More background mumbo jumbo. Listen, if you wanna mess around with this all you need to do is change "background-color:#B00B69" or whatever hexcode I put there. -->
  45. </div>
  46.  
  47. <!---------------------------------------------------------  END BACKGROUND --------------------------------------------------------->
  48.  
  49.  
  50.  
  51.  
  52. <!----------------------------------------------------------- START OF DO NOT REMOVE ----------------------------------------------------------->
  53.  
  54.  
  55. <div class="mx-auto mt-5" style="max-width:700px; background:#BFBFBF; color:#000000; font-family:MS Sans Serif; border-left: 1px solid #DFDFDF;border-top: 1px solid #DFDFDF;border-right: 1px solid #020202;border-bottom: 1px solid #DFDFDF;"> <!-- Wouldn't reccomend editing this. But if you do... -->
  56. <!-- max-width:700px defines that this code is 700 pixels across. Change this to be bigger or small to your liking, but you may break it. -->
  57. <!-- background:#BFBFBF; defines that the background colour (appears more like a border) is a color. Y'know, you could probably remove this if you really wanted to and be fine. -->
  58. <!-- color:#000000; makes the text black by default unless it's stated overwise later. Y'know... Now that I think about it, I don't think any of the text is actually black. Yo... -->
  59. <!-- font-family:MS Sans Serif; means the default font is my beloved Comic Sans. -->
  60. <!-- Everything else is border stuff. I'd only really reccomend editing the colours unless you know what you're doing. -->
  61.  
  62.   <!--------------------------------------------------------- START HEADER --------------------------------------------------------->
  63.  
  64.   <div style="border-left: 1px solid #DFDFDF;border-top: #DFDFDF 1px solid;border-right: 1px solid #DFDFDF;border-bottom: 1px solid #DFDFDF;">
  65.     <!-- Makes the header. Doesn't end until after the main-body div also ends, consider this DIV Bobby. -->
  66.    
  67.     <div class="col-lg-12 p-2" style="position:relative; border: 2px solid #1A4E99; border-radius:5px;border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;background: linear-gradient(0deg,rgba(64,138,230,1) 0%,rgba(14,96,203,1) 93%,rgba(50,140,240,1) 100%);"> <!-- This makes up the main colour of the header. Sorry, I know, I try to stay clear of rgb but I HAD to use RGBA to do this. -->
  68.      
  69.       <img src="https://images-ext-1.discordapp.net/external/hFYqIG3jQ1gTaR7dO3SH1Sczh5IC7b6CO-wx9OdeOrE/%3F9599974954/https/www4.lunapic.com/do-not-link-here-use-hosting-instead/164702865515552621" style="width:20px;height:20px;"> <!--- Favourites Icon on the left. Hey, wouldn't it be fun if, if you clicked this, it would be liek "WOAH, YOU WANNA ADD THIS CODE TO YOUR FAVOURITES?" Haha, if only I was that skilled... -->
  70.      
  71.       <!-- Start Minimise/Minus Square -->
  72.       <span class="pull-right" style="position:absolute;top:7px;right:65px;"> <!-- Makes it so this button is on the right of the header and is that size -->
  73.         <i class="fas fa-minus p-1 justify-content-center" style="background:linear-gradient(135deg,rgba(163,193,253,1) 5%,rgba(36,111,245,1),rgba(22,83,199,1));border:1px solid #fff;color:#ffffff;border-radius:5px;width:25px;height:25px;"></i>
  74.       </span>
  75.       <!-- End Minimise/Minus Square -->
  76.      
  77.       <!-- Start Maximise/Squares Square -->
  78.       <span class="pull-right" style="position:absolute;top:7px;right:35px;">
  79.         <i class="far fa-window-maximize p-1 justify-content-center" style="background:linear-gradient(135deg,rgba(163,193,253,1) 5%,rgba(36,111,245,1),rgba(22,83,199,1));border:1px solid #fff;color:#ffffff;border-radius:5px;width:25px;height:25px;"></i> <! --Makes the button have that icon and be that colour -->
  80.       </span>
  81.       <!-- End Maximise/Squares Square -->
  82.      
  83.       <!-- Start Close/X Square -->
  84.       <span class="pull-right" style="position:absolute;top:7px;right:5px;">
  85.         <a href="#CloseThis" data-toggle="collapse">
  86.         <i class="fas fa-times p-1 justify-content-center" style="background: linear-gradient(135deg, rgba(247,169,148,1) 5%,rgba(231,74,33,1),rgba(206,41,0,1));border: 1px solid #fff;color: #ffffff;border-radius: 5px;width: 25px;height: 25px;"></i>
  87.       </span> <!-- Button ends on this row -->
  88.       <!-- Start Close/X Square -->
  89.      
  90.     </div> <!--- END HEADER --->
  91.    
  92.     <!--------------------------------------------------------- END HEADER --------------------------------------------------------->
  93.    
  94.     <!--- Wraps around all the code here so the close button actually closes your code. Just a fun little easter egg! -->
  95.     <div id="CloseThis" class="collapse show"> <!--- /\/\ Let's call this <<< Div X. -->
  96.    
  97.     <!--------------------------------------------------------- START LEFT BUTTONS -------------------------------------------------------->
  98.      
  99.       <div class="row no-gutters p-1"> <!--- Makes the whole main body of the code. Call this DIV Timmy. -->
  100.        
  101.         <div class="col-sm-6 p-1"> <!-- Start Left Text Box -->
  102.          
  103.           <div class="card border-0 rounded-0 p-1 h-100 justify-content-center" style="background:#E2ECFF;"> <!-- Formatting -->
  104.            
  105.             <!--- Start Button --->
  106.             <div class="btn p-0 m-1 border-0 rounded-0" style="background:#3C75F6;"> <!-- Defines button and gives it a background colour -->
  107.               <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; letter-spacing:2px; color:#E2EDFF;" href="#">All Characters</a> <!-- the style here makes it change colour when you hover over it, defines letter spacing, & defines text colour - href="#" allows you to add a hyperlink and "Text" allows you to add your own text there. -->
  108.             </div> <!-- Button ends here -->
  109.             <!--- End Button --->
  110.            
  111.             <!--- Start Button --->
  112.             <div class="btn p-0 m-1 border-0 rounded-0" style="background:#3C75F6;">
  113.               <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; letter-spacing:2px; color:#E2EDFF;" href="#">Sort By Tags</a>
  114.             </div>
  115.             <!--- End Button --->
  116.            
  117.             <!--- Start Button --->
  118.             <div class="btn p-0 m-1 border-0 rounded-0" style="background:#3C75F6;">
  119.               <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; letter-spacing:2px; color:#E2EDFF;" href="#">Button</a>
  120.             </div>
  121.             <!--- End Button --->
  122.            
  123.           </div> <!-- End Formatting -->
  124.            
  125.         </div> <!-- End Left Text Box -->
  126.        
  127.         <!--------------------------------------------------------- END LEFT BUTTONS -------------------------------------------------------->
  128.        
  129.         <!--------------------------------------------------------- START RIGHT BUTTONS -------------------------------------------------------->
  130.        
  131.         <div class="col-sm-6 p-1"> <!-- Defines Area -->
  132.          
  133.           <div class="card border-0 rounded-0 p-1 h-100 justify-content-center" style="background:#E2ECFF;"> <!-- Formatting -->
  134.            
  135.             <!--- Start Button --->
  136.             <div class="btn p-0 m-1 border-0 rounded-0" style="background:#3C75F6;"> <!-- See earlier to learn how this button works -->
  137.               <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; letter-spacing:2px; color:#E2EDFF;" href="#">Birthday Calender</a>
  138.             </div>
  139.             <!--- End Button --->
  140.            
  141.             <!--- Start Button --->
  142.             <div class="btn p-0 m-1 border-0 rounded-0" style="background:#3C75F6;">
  143.               <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; letter-spacing:2px; color:#E2EDFF;" href="#">Stampbook</a>
  144.             </div>
  145.             <!--- End Button --->
  146.            
  147.             <!--- Start Button --->
  148.             <div class="btn p-0 m-1 border-0 rounded-0" style="background:#3C75F6;">
  149.               <a class="btn btn-block btn-outline-primary border-0 rounded-0" style="mix-blend-mode:luminosity; letter-spacing:2px; color:#E2EDFF;" href="#">Worldbuilding</a>
  150.             </div>
  151.             <!--- End Button --->
  152.            
  153.           </div> <!-- End Formatting -->
  154.          
  155.         </div> <!-- End Buttons On The Right -->
  156.        
  157.         <!--------------------------------------------------------- END RIGHT BUTTONS --------------------------------------------------------->
  158.        
  159.         <!--------------------------------------------------------- START FOLDERS --------------------------------------------------------->
  160.        
  161.         <div class="col-sm-12 p-1"> <!-- Start Folders 1 (Defines Area) -->
  162.          
  163.           <div class="card border-0 rounded-0 p-1 h-100 justify-content-center" style="background:#E2ECFF;"> <!-- Start Folders 2 (Formatting) -->
  164.            
  165.             <div class="row no-gutters"> <!-- Contains links to your different folders -->
  166.              
  167.               <!-- Start Thing 1 -->
  168.               <div class="col-md-3 col-6 text-center p-1"> <!-- Defines this specific image/link/text abomination -->
  169.                 <!-- Image stuff starts here VV --> <!-- href="#" put your own link where the hashtag is, title=""> is there because my code BROKE otherwise not fun =( -->
  170.                 <a data-toggle="tooltip"
  171.                href="#"
  172.                title="">
  173.                 <img src="https://media.discordapp.net/attachments/927649368583073824/951927777391702086/unknown.png"
  174.                width="125"
  175.                height="125" /> <!-- Width and height allows you to choose how big your image is - img src="linklinklink" put your own image there if you want -->
  176.                 <!-- Image stuff ends here /\/\ -->
  177.                 <a class="text-uppercase text-center" styles="letter spacing: 1px;" href="#">Folder</a><hr class="my-0">
  178.                 4 Line At Most Description <!-- This is the stuff under the image. Text is centered. In style we decide that the text has 1px spacing. href="#" put your own link the hashtag, preferably the same as earlier unless you're weird and "Folder" is where the name of your folder goes. - "4 Line At Most Description" put a very short description of the folder there. -->
  179.               </div>
  180.               <!-- End Thing 1 -->
  181.              
  182.               <!-- Start Thing 2 -->
  183.               <div class="col-md-3 col-6 text-center p-1">
  184.                 <!-- Image -->
  185.                 <a data-toggle="tooltip"
  186.                href="#"
  187.                title="">
  188.                 <img src="https://media.discordapp.net/attachments/927649368583073824/951927751550586960/unknown.png"
  189.                width="125"
  190.                height="125" />
  191.                 <!-- Image -->
  192.                 <a class="text-uppercase text-center" styles="letter spacing: 1px;" href="#">Folder</a><hr class="my-0">
  193.                 4 Line At Most Description
  194.               </div>
  195.               <!-- End Thing 2 -->
  196.              
  197.               <!-- Start Thing 3 -->
  198.               <div class="col-md-3 col-6 text-center p-1">
  199.                 <!-- Image -->
  200.                 <a data-toggle="tooltip"
  201.                href="#"
  202.                title="">
  203.                 <img src="https://media.discordapp.net/attachments/927649368583073824/951927810690261083/unknown.png"
  204.                width="125"
  205.                height="125" />
  206.                 <!-- Image -->
  207.                 <a class="text-uppercase text-center" styles="letter spacing: 1px;" href="#">Folder</a><hr class="my-0">
  208.                 4 Line At Most Description
  209.               </div>
  210.               <!-- End Thing 3 -->
  211.              
  212.               <!-- Start Thing 4 -->
  213.               <div class="col-md-3 col-6 text-center p-1">
  214.                 <!-- Image -->
  215.                 <a data-toggle="tooltip"
  216.                href="#"
  217.                title="">
  218.                 <img src="https://media.discordapp.net/attachments/927649368583073824/951927438886199366/unknown.png"
  219.                width="125"
  220.                height="125" />
  221.                 <!-- Image -->
  222.                 <a class="text-uppercase text-center" styles="letter spacing: 1px;" href="#">Folder</a><hr class="my-0">
  223.                 4 Line At Most Description
  224.               </div>
  225.               <!-- End Thing 4 -->
  226.              
  227.               <!-- Start Thing 5 -->
  228.               <div class="col-md-3 col-6 text-center p-1">
  229.                 <!-- Image -->
  230.                 <a data-toggle="tooltip"
  231.                href="#"
  232.                title="">
  233.                 <img src="https://media.discordapp.net/attachments/927649368583073824/951927406917189712/unknown.png"
  234.                width="125"
  235.                height="125" />
  236.                 <!-- Image -->
  237.                 <a class="text-uppercase text-center" styles="letter spacing: 1px;" href="#">Folder</a><hr class="my-0">
  238.                 4 Line At Most Description
  239.               </div>
  240.               <!-- End Thing 5 -->
  241.              
  242.               <!-- Start Thing 6 -->
  243.               <div class="col-md-3 col-6 text-center p-1">
  244.                 <!-- Image -->
  245.                 <a data-toggle="tooltip"
  246.                href="#"
  247.                title="">
  248.                 <img src="https://media.discordapp.net/attachments/927649368583073824/951927498604687380/unknown.png"
  249.                width="125"
  250.                height="125" />
  251.                 <!-- Image -->
  252.                 <a class="text-uppercase text-center" styles="letter spacing: 1px;" href="#">Folder</a><hr class="my-0">
  253.                 4 Line At Most Description
  254.               </div>
  255.               <!-- End Thing 6 -->
  256.              
  257.               <!-- Start Thing 7 -->
  258.               <div class="col-md-3 col-6 text-center p-1">
  259.                 <!-- Image -->
  260.                 <a data-toggle="tooltip"
  261.                href="#"
  262.                title="">
  263.                 <img src="https://media.discordapp.net/attachments/927649368583073824/951927559224975400/unknown.png"
  264.                width="125"
  265.                height="125" />
  266.                 <!-- Image -->
  267.                 <a class="text-uppercase text-center" styles="letter spacing: 1px;" href="#">Folder</a><hr class="my-0">
  268.                 4 Line At Most Description
  269.               </div>
  270.               <!-- End Thing 7 -->
  271.              
  272.               <!-- Start Thing 8 -->
  273.               <div class="col-md-3 col-6 text-center p-1">
  274.                 <!-- Image -->
  275.                 <a data-toggle="tooltip"
  276.                href="#"
  277.                title="">
  278.                 <img src="https://media.discordapp.net/attachments/927649368583073824/951927601277054996/unknown.png"
  279.                width="125"
  280.                height="125" />
  281.                 <!-- Image -->
  282.                 <a class="text-uppercase text-center" styles="letter spacing: 1px;" href="#">Folder</a><hr class="my-0">
  283.                 4 Line At Most Description
  284.               </div>
  285.               <!-- End Thing 8 -->
  286.              
  287.               <!-- Start Thing 9 -->
  288.               <div class="col-md-3 col-6 text-center p-1">
  289.                 <!-- Image -->
  290.                 <a data-toggle="tooltip"
  291.                href="#"
  292.                title="">
  293.                 <img src="https://media.discordapp.net/attachments/927649368583073824/951927644415479868/unknown.png"
  294.                width="125"
  295.                height="125" />
  296.                 <!-- Image -->
  297.                 <a class="text-uppercase text-center" styles="letter spacing: 1px;" href="#">Folder</a><hr class="my-0">
  298.                 4 Line At Most Description
  299.               </div>
  300.               <!-- End Thing 9 -->
  301.              
  302.               <!-- Start Thing 10 -->
  303.               <div class="col-md-3 col-6 text-center p-1">
  304.                 <!-- Image -->
  305.                 <a data-toggle="tooltip"
  306.                href="#"
  307.                title="">
  308.                 <img src="https://media.discordapp.net/attachments/927649368583073824/951927847138775080/unknown.png"
  309.                width="125"
  310.                height="125" />
  311.                 <!-- Image -->
  312.                 <a class="text-uppercase text-center" styles="letter spacing: 1px;" href="#">Folder</a><hr class="my-0">
  313.                 4 Line At Most Description
  314.               </div>
  315.               <!-- End Thing 10 -->
  316.              
  317.             </div> <!-- End Folders -->
  318.            
  319.           </div> <!-- End Folders 2 -->
  320.          
  321.         </div> <!-- End Folders 1 -->
  322.        
  323.         <!--------------------------------------------------------- END FOLDERS --------------------------------------------------------->
  324.        
  325.       </div> <!--- End DIV Timmy -->
  326.      
  327.     </div> <!--- End DIV X -->
  328.  
  329.   </div> <!--- End DIV Bobby -->
  330.  
  331. </div> <!-- End Of Code -->
  332.  
  333. <!----------------------------------------------------------- CREDIT DO NOT REMOVE ----------------------------------------------------------->
  334. <div class="text-right w-100">
  335.   <a href="https://toyhou.se/13860369.windows-xp-directory-" target="_blank" class="m-1" style="color:#fff;"><i class="fas fa-code"></i> Code By CrispinAsheYA</a>
  336. </div>
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!