├── assets
    ├── images
    │   ├── favicon.png
    │   ├── Mac Studio.png
    │   ├── Coming Soon Folder.png
    │   ├── Websitescreenshot.png
    │   ├── moon.svg
    │   ├── sun.svg
    │   ├── LogoSvg.svg
    │   ├── star-svgrepo-com.svg
    │   └── textIconSVG.svg
    ├── Fonts
    │   └── minecraft-font
    │   │   ├── info.txt
    │   │   ├── MinecraftBold-nMK1.otf
    │   │   ├── MinecraftItalic-R8Mo.otf
    │   │   ├── MinecraftRegular-Bmg3.otf
    │   │   └── MinecraftBoldItalic-1y1e.otf
    └── Icons
    │   ├── Purple
    │       ├── Game.ico
    │       ├── Music.ico
    │       ├── Video.ico
    │       ├── Coding.ico
    │       ├── Default.ico
    │       ├── Desktop.ico
    │       ├── Editing.ico
    │       ├── Photos.ico
    │       ├── This PC.ico
    │       ├── Documents.ico
    │       ├── Download.ico
    │       ├── This PC 2.ico
    │       ├── This PC 3.ico
    │       ├── Recyle Bin Full.ico
    │       └── Recycle Bin Empty.ico
    │   └── Yellow
    │       ├── This PC.ico
    │       ├── This PC 2.ico
    │       ├── CodingYellow.ico
    │       ├── GamesYellow.ico
    │       ├── MusicYellow.ico
    │       ├── PhotosYellow.ico
    │       ├── Video2Yellow.ico
    │       ├── VideoYellow.ico
    │       ├── DesktopYellow.ico
    │       ├── DocumentsYellow.ico
    │       ├── DownloadsYellow.ico
    │       ├── EditingYellow.ico
    │       ├── Photos2Yellow.ico
    │       ├── Recyle Bin Full.ico
    │       └── Recyle Bin Empty.ico
├── script.js
├── README.md
├── FileSaver.js
├── preloader.css
├── index.css
└── index.html


/assets/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/images/favicon.png


--------------------------------------------------------------------------------
/assets/Fonts/minecraft-font/info.txt:
--------------------------------------------------------------------------------
1 | license: Public Domain
2 | link: https://www.fontspace.com/minecraft-font-f28180


--------------------------------------------------------------------------------
/assets/Icons/Purple/Game.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/Game.ico


--------------------------------------------------------------------------------
/assets/Icons/Purple/Music.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/Music.ico


--------------------------------------------------------------------------------
/assets/Icons/Purple/Video.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/Video.ico


--------------------------------------------------------------------------------
/assets/images/Mac Studio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/images/Mac Studio.png


--------------------------------------------------------------------------------
/assets/Icons/Purple/Coding.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/Coding.ico


--------------------------------------------------------------------------------
/assets/Icons/Purple/Default.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/Default.ico


--------------------------------------------------------------------------------
/assets/Icons/Purple/Desktop.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/Desktop.ico


--------------------------------------------------------------------------------
/assets/Icons/Purple/Editing.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/Editing.ico


--------------------------------------------------------------------------------
/assets/Icons/Purple/Photos.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/Photos.ico


--------------------------------------------------------------------------------
/assets/Icons/Purple/This PC.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/This PC.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/This PC.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/This PC.ico


--------------------------------------------------------------------------------
/assets/Icons/Purple/Documents.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/Documents.ico


--------------------------------------------------------------------------------
/assets/Icons/Purple/Download.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/Download.ico


--------------------------------------------------------------------------------
/assets/Icons/Purple/This PC 2.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/This PC 2.ico


--------------------------------------------------------------------------------
/assets/Icons/Purple/This PC 3.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/This PC 3.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/This PC 2.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/This PC 2.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/CodingYellow.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/CodingYellow.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/GamesYellow.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/GamesYellow.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/MusicYellow.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/MusicYellow.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/PhotosYellow.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/PhotosYellow.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/Video2Yellow.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/Video2Yellow.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/VideoYellow.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/VideoYellow.ico


--------------------------------------------------------------------------------
/assets/images/Coming Soon Folder.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/images/Coming Soon Folder.png


--------------------------------------------------------------------------------
/assets/images/Websitescreenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/images/Websitescreenshot.png


--------------------------------------------------------------------------------
/assets/Icons/Purple/Recyle Bin Full.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/Recyle Bin Full.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/DesktopYellow.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/DesktopYellow.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/DocumentsYellow.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/DocumentsYellow.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/DownloadsYellow.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/DownloadsYellow.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/EditingYellow.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/EditingYellow.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/Photos2Yellow.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/Photos2Yellow.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/Recyle Bin Full.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/Recyle Bin Full.ico


--------------------------------------------------------------------------------
/assets/Icons/Purple/Recycle Bin Empty.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Purple/Recycle Bin Empty.ico


--------------------------------------------------------------------------------
/assets/Icons/Yellow/Recyle Bin Empty.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Icons/Yellow/Recyle Bin Empty.ico


--------------------------------------------------------------------------------
/assets/Fonts/minecraft-font/MinecraftBold-nMK1.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Fonts/minecraft-font/MinecraftBold-nMK1.otf


--------------------------------------------------------------------------------
/assets/Fonts/minecraft-font/MinecraftItalic-R8Mo.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Fonts/minecraft-font/MinecraftItalic-R8Mo.otf


--------------------------------------------------------------------------------
/assets/Fonts/minecraft-font/MinecraftRegular-Bmg3.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Fonts/minecraft-font/MinecraftRegular-Bmg3.otf


--------------------------------------------------------------------------------
/assets/Fonts/minecraft-font/MinecraftBoldItalic-1y1e.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vinodjangid07/Pexelicons/HEAD/assets/Fonts/minecraft-font/MinecraftBoldItalic-1y1e.otf


--------------------------------------------------------------------------------
/assets/images/moon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"></path></svg>


--------------------------------------------------------------------------------
/assets/images/sun.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="#ffd43b"><circle r="5" cy="12" cx="12"></circle><path d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z"></path></g></svg>


--------------------------------------------------------------------------------
/assets/images/LogoSvg.svg:
--------------------------------------------------------------------------------
1 | <svg width="420" height="561" viewBox="0 0 420 561" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M346.665 504H314.478V471.812V439.625V407.438V375.25V343.062V310.875V278.688V246.5V214.312H346.665H378.853V246.5V278.688V310.875V343.062V375.25V407.438V439.625V471.812V504H346.665ZM346.665 182.125H314.478V149.938V117.75H346.665H378.853V149.938V182.125H346.665Z" fill="white"/>
3 | <rect x="314" y="117" width="65" height="65" fill="white"/>
4 | <path d="M32.1875 505.562H0V473.375V441.188V409V376.812V344.625V312.438V280.25V248.062V215.875V183.688V151.5V119.312H32.1875H64.375V151.5V183.688H96.5625H128.75V215.875V248.062H96.5625H64.375V280.25V312.438H96.5625H128.75H160.938H193.125H225.312V344.625V376.812H193.125H160.938H128.75H96.5625H64.375V409V441.188V473.375V505.562H32.1875ZM225.312 312.438V280.25V248.062V215.875V183.688H257.5H289.688V215.875V248.062V280.25V312.438H257.5H225.312ZM225.312 183.688H193.125H160.938H128.75V151.5V119.312H160.938H193.125H225.312V151.5V183.688Z" fill="white"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/assets/images/star-svgrepo-com.svg:
--------------------------------------------------------------------------------
 1 | 
 2 | <svg height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 3 | 	 viewBox="0 0 217.929 217.929" xml:space="preserve">
 4 | <g>
 5 | 	<path d="M212.39,101.703c5.023-4.897,6.797-12.083,4.629-18.755s-7.827-11.443-14.769-12.452l-52.969-7.697
 6 | 		c-0.097-0.014-0.18-0.075-0.223-0.162L125.371,14.64C122.267,8.349,115.98,4.44,108.964,4.44S95.662,8.349,92.558,14.64
 7 | 		L68.87,62.637c-0.043,0.087-0.126,0.147-0.223,0.162l-52.968,7.697c-6.942,1.009-12.601,5.78-14.769,12.452
 8 | 		s-0.394,13.858,4.629,18.755l38.328,37.361c0.07,0.068,0.102,0.166,0.085,0.262l-9.048,52.755
 9 | 		c-1.186,6.914,1.604,13.771,7.279,17.894c5.676,4.125,13.059,4.657,19.268,1.393l47.376-24.907c0.086-0.046,0.19-0.045,0.276,0
10 | 		l47.376,24.907c2.701,1.42,5.623,2.121,8.531,2.121c3.777,0,7.53-1.184,10.736-3.514c5.675-4.123,8.464-10.98,7.279-17.895
11 | 		l-9.048-52.754c-0.017-0.096,0.016-0.194,0.085-0.262L212.39,101.703z M156.235,142.368l9.048,52.754
12 | 		c0.024,0.14,0.031,0.182-0.118,0.29c-0.149,0.108-0.187,0.088-0.312,0.022l-47.377-24.908c-5.33-2.801-11.695-2.801-17.027,0
13 | 		l-47.376,24.907c-0.125,0.065-0.163,0.086-0.312-0.022c-0.149-0.108-0.142-0.15-0.118-0.289l9.048-52.755
14 | 		c1.018-5.936-0.949-11.989-5.262-16.194L18.103,88.813c-0.101-0.099-0.132-0.128-0.075-0.303c0.057-0.175,0.099-0.181,0.239-0.202
15 | 		l52.968-7.697c5.961-0.866,11.111-4.607,13.776-10.008l23.688-47.998c0.063-0.126,0.081-0.165,0.265-0.165s0.203,0.039,0.265,0.165
16 | 		l23.688,47.998c2.666,5.401,7.815,9.143,13.776,10.008l52.968,7.697c0.14,0.021,0.182,0.027,0.239,0.202
17 | 		c0.057,0.175,0.026,0.205-0.075,0.303l-38.328,37.361C157.185,130.378,155.218,136.432,156.235,142.368z"/>
18 | </g>
19 | </svg>


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
 1 | //  
 2 | // ██╗░░░██╗██╗███╗░░██╗░█████╗░██████╗░
 3 | // ██║░░░██║██║████╗░██║██╔══██╗██╔══██╗
 4 | // ╚██╗░██╔╝██║██╔██╗██║██║░░██║██║░░██║
 5 | // ░╚████╔╝░██║██║╚████║██║░░██║██║░░██║
 6 | // ░░╚██╔╝░░██║██║░╚███║╚█████╔╝██████╔╝
 7 | // ░░░╚═╝░░░╚═╝╚═╝░░╚══╝░╚════╝░╚═════╝░
 8 | // ░░░░░██╗░█████╗░███╗░░██╗░██████╗░██╗██████╗░
 9 | // ░░░░░██║██╔══██╗████╗░██║██╔════╝░██║██╔══██╗
10 | // ░░░░░██║███████║██╔██╗██║██║░░██╗░██║██║░░██║
11 | // ██╗░░██║██╔══██║██║╚████║██║░░╚██╗██║██║░░██║
12 | // ╚█████╔╝██║░░██║██║░╚███║╚██████╔╝██║██████╔╝
13 | // ░╚════╝░╚═╝░░╚═╝╚═╝░░╚══╝░╚═════╝░╚═╝╚═════╝░
14 | 
15 | // preloader script............
16 |     
17 | var loader = document.getElementById("preloader");
18 | window.addEventListener("load", function () {
19 |     setTimeout(function() {
20 |         loader.style.display = "none";
21 |         document.body.classList.add('scroll-enable');
22 |         }, 0);
23 |   
24 |   
25 | })
26 | 
27 | const visualTogglebutton = document.getElementById('visual-toggle-button');
28 | const checkbox = document.getElementById('visual-toggle');
29 | 
30 | function visualMode(){
31 |     if(checkbox.checked){
32 |         visualTogglebutton.classList.toggle('lightmode');
33 |         document.body.classList.toggle('lightcolors');
34 |     }
35 |     else{
36 |         visualTogglebutton.classList.toggle('animate')
37 |     }
38 | }
39 | 
40 | 
41 | const downloadBtn = document.querySelectorAll('.download-icon');
42 | downloadBtn.forEach((currentBtn) =>{
43 |     currentBtn.addEventListener("click",() =>{
44 |         let fileFetch = currentBtn.previousElementSibling.querySelector('h5');
45 |         var fileName = fileFetch.innerHTML;
46 |         var image = currentBtn.previousElementSibling.querySelector('img');
47 | 
48 |         var imgPath = image.getAttribute('src');
49 |        console.log(imgPath);
50 |        saveAs(imgPath, fileName);  
51 | 
52 |     });
53 | })
54 |      


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # <a href="https://vinodjangid07.github.io/Pexelicons" target="_blank">Pexelicons</a>
 2 | 
 3 | ![Pexelicons Logo](assets/images/Websitescreenshot.png)
 4 | 
 5 | Pexelicons is a website that offers custom folder icons for Windows, allowing users to personalize their PC by changing the default folder icons to match their style preferences.
 6 | 
 7 | ## Features
 8 | 
 9 | - 🎨 **Custom Icons:** Explore a world of personalized file folder icons inspired by various themes.
10 | - 🚀 **Easy to Use:** Download and apply custom icons to your folders effortlessly.
11 | - 💻 **Compatibility:** Icons are provided in ICO format, ensuring compatibility with Windows systems.
12 | 
13 | ## Table of Contents
14 | 
15 | - [Getting Started](#getting-started)
16 |   - [Download Icons](#download-icons)
17 |   - [How to Use](#how-to-use)
18 | - [Contributing](#contributing)
19 | - [License](#license)
20 | - [Contact](#contact)
21 | 
22 | ## Getting Started
23 | 
24 | ### Download Icons
25 | 
26 | Visit the [Pexelicons Website](https://vinodjangid07.github.io/Pexelicons) to download custom folder icons for your PC.
27 | 
28 | ### How to Use
29 | 
30 | Follow these steps to apply custom icons to your folders:
31 | 
32 | 1. **Download a Custom Icon:** Download a custom icon (ICO file) that you want to use for your folder. Icons are provided in ICO format, ensuring compatibility with Windows systems.
33 | 2. **Copy the ICO File to the Folder:** Copy the custom ICO file to the folder for which you want to change the icon.
34 | 3. **Right-click on the Folder:** Right-click on the folder, and select "Properties" from the context menu.
35 | 4. **Go to the "Customize" Tab:** In the folder properties window, go to the "Customize" tab.
36 | 5. **Click on "Change Icon":** Look for the "Change Icon" button and click on it.
37 | 6. **Browse for the Custom ICO File:** Browse to the location where you copied the custom ICO file and select it.
38 | 7. **Apply and OK:** Apply the changes, and then click "OK" to close the properties window.
39 | 
40 | ## Contributing
41 | 
42 | If you'd like to contribute to Pexelicons, feel free to open an issue or submit a pull request. Your contributions are highly appreciated!
43 | 
44 | ## License
45 | 
46 | This project is licensed under the [MIT License](LICENSE).
47 | 
48 | ## Contact
49 | 
50 | - For inquiries, contact infovinodjangid@gmail.com
51 | 
52 | ---
53 | 
54 | <p align="center">Design & Built by <a href="https://github.com/vinodjangid07">@Vinodjangid07</a> | &copy; twentytwentyfour</p>
55 | 


--------------------------------------------------------------------------------
/assets/images/textIconSVG.svg:
--------------------------------------------------------------------------------
1 | <svg width="3381" height="387" viewBox="0 0 3381 387" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M32.1875 387H0V354.812V322.625V290.438V258.25V226.062V193.875V161.688V129.5V97.3125V65.125V32.9375V0.75H32.1875H64.375H96.5625H128.75H160.938H193.125H225.312H257.5V32.9375V65.125H289.688H321.875V97.3125V129.5H289.688H257.5V97.3125V65.125H225.312H193.125H160.938H128.75H96.5625H64.375V97.3125V129.5H96.5625H128.75H160.938H193.125H225.312H257.5V161.688V193.875H225.312H193.125H160.938H128.75H96.5625H64.375V226.062V258.25V290.438V322.625V354.812V387H32.1875ZM661.775 387H629.587H597.4H565.212H533.025H500.837V354.812V322.625H533.025H565.212H597.4H629.587V290.438H661.775H693.962V322.625V354.812V387H661.775ZM500.837 322.625H468.65H436.462V290.438V258.25V226.062V193.875V161.688H468.65H500.837V129.5V97.3125H533.025H565.212H597.4H629.587H661.775H693.962V129.5V161.688V193.875V226.062H661.775H629.587V258.25H597.4H565.212H533.025H500.837V290.438V322.625ZM597.4 193.875H629.587V161.688H597.4H565.212H533.025H500.837V193.875H533.025H565.212H597.4ZM1098.24 387H1066.05V354.812V322.625H1098.24H1130.42V354.812V387H1098.24ZM840.737 387H808.55V354.812V322.625H840.737H872.925V354.812V387H840.737ZM1066.05 322.625H1033.86H1001.67V290.438V258.25H1033.86H1066.05V290.438V322.625ZM872.925 322.625V290.438V258.25H905.112H937.3V290.438V322.625H905.112H872.925ZM1001.67 258.25H969.487H937.3V226.062V193.875H969.487H1001.67V226.062V258.25ZM1001.67 193.875V161.688V129.5H1033.86H1066.05V161.688V193.875H1033.86H1001.67ZM937.3 193.875H905.112H872.925V161.688V129.5H905.112H937.3V161.688V193.875ZM1066.05 129.5V97.3125V65.125H1098.24H1130.42V97.3125V129.5H1098.24H1066.05ZM872.925 129.5H840.737H808.55V97.3125V65.125H840.737H872.925V97.3125V129.5ZM1470.32 387H1438.14H1405.95H1373.76H1341.57H1309.39V354.812V322.625H1341.57H1373.76H1405.95H1438.14V290.438H1470.32H1502.51V322.625V354.812V387H1470.32ZM1309.39 322.625H1277.2H1245.01V290.438V258.25V226.062V193.875V161.688H1277.2H1309.39V129.5V97.3125H1341.57H1373.76H1405.95H1438.14H1470.32H1502.51V129.5V161.688V193.875V226.062H1470.32H1438.14V258.25H1405.95H1373.76H1341.57H1309.39V290.438V322.625ZM1405.95 193.875H1438.14V161.688H1405.95H1373.76H1341.57H1309.39V193.875H1341.57H1373.76H1405.95ZM1649.29 387H1617.1V354.812V322.625V290.438V258.25V226.062V193.875V161.688V129.5V97.3125V65.125V32.9375V0.75H1649.29H1681.47V32.9375V65.125V97.3125V129.5V161.688V193.875V226.062V258.25V290.438V322.625V354.812V387H1649.29ZM1828.25 387H1796.06V354.812V322.625V290.438V258.25V226.062V193.875V161.688V129.5V97.3125H1828.25H1860.44V129.5V161.688V193.875V226.062V258.25V290.438V322.625V354.812V387H1828.25ZM1828.25 65.125H1796.06V32.9375V0.75H1828.25H1860.44V32.9375V65.125H1828.25ZM2168.15 387H2135.96H2103.78H2071.59H2039.4V354.812V322.625H2071.59H2103.78H2135.96H2168.15H2200.34V354.812V387H2168.15ZM2200.34 322.625V290.438V258.25H2232.53H2264.71V290.438V322.625H2232.53H2200.34ZM2039.4 322.625H2007.21H1975.03V290.438V258.25V226.062V193.875V161.688H2007.21H2039.4V193.875V226.062V258.25V290.438V322.625ZM2232.53 226.062H2200.34V193.875V161.688H2232.53H2264.71V193.875V226.062H2232.53ZM2200.34 161.688H2168.15H2135.96H2103.78H2071.59H2039.4V129.5V97.3125H2071.59H2103.78H2135.96H2168.15H2200.34V129.5V161.688ZM2540.24 387H2508.05H2475.86H2443.68V354.812V322.625H2475.86H2508.05H2540.24H2572.43V354.812V387H2540.24ZM2572.43 322.625V290.438V258.25V226.062V193.875V161.688H2604.61H2636.8V193.875V226.062V258.25V290.438V322.625H2604.61H2572.43ZM2443.68 322.625H2411.49H2379.3V290.438V258.25V226.062V193.875V161.688H2411.49H2443.68V193.875V226.062V258.25V290.438V322.625ZM2572.43 161.688H2540.24H2508.05H2475.86H2443.68V129.5V97.3125H2475.86H2508.05H2540.24H2572.43V129.5V161.688ZM3008.89 387H2976.7V354.812V322.625V290.438V258.25V226.062V193.875V161.688H3008.89H3041.07V193.875V226.062V258.25V290.438V322.625V354.812V387H3008.89ZM2783.57 387H2751.39V354.812V322.625V290.438V258.25V226.062V193.875V161.688V129.5V97.3125H2783.57H2815.76H2847.95H2880.14H2912.32H2944.51H2976.7V129.5V161.688H2944.51H2912.32H2880.14H2847.95H2815.76V193.875V226.062V258.25V290.438V322.625V354.812V387H2783.57ZM3284.41 387H3252.23H3220.04H3187.85H3155.66V354.812V322.625H3187.85H3220.04H3252.23H3284.41H3316.6V354.812V387H3284.41ZM3316.6 322.625V290.438V258.25H3348.79H3380.98V290.438V322.625H3348.79H3316.6ZM3316.6 258.25H3284.41H3252.23H3220.04V226.062V193.875H3252.23H3284.41H3316.6V226.062V258.25ZM3220.04 193.875H3187.85H3155.66V161.688V129.5H3187.85H3220.04V161.688V193.875ZM3348.79 129.5H3316.6H3284.41H3252.23H3220.04V97.3125V65.125H3252.23H3284.41H3316.6H3348.79H3380.98V97.3125V129.5H3348.79Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/FileSaver.js:
--------------------------------------------------------------------------------
  1 | var _global = typeof window === 'object' && window.window === window
  2 |   ? window : typeof self === 'object' && self.self === self
  3 |   ? self : typeof global === 'object' && global.global === global
  4 |   ? global
  5 |   : this
  6 | 
  7 | function bom (blob, opts) {
  8 |   if (typeof opts === 'undefined') opts = { autoBom: false }
  9 |   else if (typeof opts !== 'object') {
 10 |     console.warn('Deprecated: Expected third argument to be a object')
 11 |     opts = { autoBom: !opts }
 12 |   }
 13 | 
 14 |   // prepend BOM for UTF-8 XML and text/* types (including HTML)
 15 |   // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
 16 |   if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
 17 |     return new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type })
 18 |   }
 19 |   return blob
 20 | }
 21 | 
 22 | function download (url, name, opts) {
 23 |   var xhr = new XMLHttpRequest()
 24 |   xhr.open('GET', url)
 25 |   xhr.responseType = 'blob'
 26 |   xhr.onload = function () {
 27 |     saveAs(xhr.response, name, opts)
 28 |   }
 29 |   xhr.onerror = function () {
 30 |     console.error('could not download file')
 31 |   }
 32 |   xhr.send()
 33 | }
 34 | 
 35 | function corsEnabled (url) {
 36 |   var xhr = new XMLHttpRequest()
 37 |   // use sync to avoid popup blocker
 38 |   xhr.open('HEAD', url, false)
 39 |   try {
 40 |     xhr.send()
 41 |   } catch (e) {}
 42 |   return xhr.status >= 200 && xhr.status <= 299
 43 | }
 44 | 
 45 | // `a.click()` doesn't work for all browsers (#465)
 46 | function click (node) {
 47 |   try {
 48 |     node.dispatchEvent(new MouseEvent('click'))
 49 |   } catch (e) {
 50 |     var evt = document.createEvent('MouseEvents')
 51 |     evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80,
 52 |                           20, false, false, false, false, 0, null)
 53 |     node.dispatchEvent(evt)
 54 |   }
 55 | }
 56 | 
 57 | // Detect WebView inside a native macOS app by ruling out all browsers
 58 | // We just need to check for 'Safari' because all other browsers (besides Firefox) include that too
 59 | // https://www.whatismybrowser.com/guides/the-latest-user-agent/macos
 60 | var isMacOSWebView = _global.navigator && /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent)
 61 | 
 62 | var saveAs = _global.saveAs || (
 63 |   // probably in some web worker
 64 |   (typeof window !== 'object' || window !== _global)
 65 |     ? function saveAs () { /* noop */ }
 66 | 
 67 |   // Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView
 68 |   : ('download' in HTMLAnchorElement.prototype && !isMacOSWebView)
 69 |   ? function saveAs (blob, name, opts) {
 70 |     var URL = _global.URL || _global.webkitURL
 71 |     // Namespace is used to prevent conflict w/ Chrome Poper Blocker extension (Issue #561)
 72 |     var a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
 73 |     name = name || blob.name || 'download'
 74 | 
 75 |     a.download = name
 76 |     a.rel = 'noopener' // tabnabbing
 77 | 
 78 |     // TODO: detect chrome extensions & packaged apps
 79 |     // a.target = '_blank'
 80 | 
 81 |     if (typeof blob === 'string') {
 82 |       // Support regular links
 83 |       a.href = blob
 84 |       if (a.origin !== location.origin) {
 85 |         corsEnabled(a.href)
 86 |           ? download(blob, name, opts)
 87 |           : click(a, a.target = '_blank')
 88 |       } else {
 89 |         click(a)
 90 |       }
 91 |     } else {
 92 |       // Support blobs
 93 |       a.href = URL.createObjectURL(blob)
 94 |       setTimeout(function () { URL.revokeObjectURL(a.href) }, 4E4) // 40s
 95 |       setTimeout(function () { click(a) }, 0)
 96 |     }
 97 |   }
 98 | 
 99 |   // Use msSaveOrOpenBlob as a second approach
100 |   : 'msSaveOrOpenBlob' in navigator
101 |   ? function saveAs (blob, name, opts) {
102 |     name = name || blob.name || 'download'
103 | 
104 |     if (typeof blob === 'string') {
105 |       if (corsEnabled(blob)) {
106 |         download(blob, name, opts)
107 |       } else {
108 |         var a = document.createElement('a')
109 |         a.href = blob
110 |         a.target = '_blank'
111 |         setTimeout(function () { click(a) })
112 |       }
113 |     } else {
114 |       navigator.msSaveOrOpenBlob(bom(blob, opts), name)
115 |     }
116 |   }
117 | 
118 |   // Fallback to using FileReader and a popup
119 |   : function saveAs (blob, name, opts, popup) {
120 |     // Open a popup immediately do go around popup blocker
121 |     // Mostly only available on user interaction and the fileReader is async so...
122 |     popup = popup || open('', '_blank')
123 |     if (popup) {
124 |       popup.document.title =
125 |       popup.document.body.innerText = 'downloading...'
126 |     }
127 | 
128 |     if (typeof blob === 'string') return download(blob, name, opts)
129 | 
130 |     var force = blob.type === 'application/octet-stream'
131 |     var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari
132 |     var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent)
133 | 
134 |     if ((isChromeIOS || (force && isSafari) || isMacOSWebView) && typeof FileReader !== 'undefined') {
135 |       // Safari doesn't allow downloading of blob URLs
136 |       var reader = new FileReader()
137 |       reader.onloadend = function () {
138 |         var url = reader.result
139 |         url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;')
140 |         if (popup) popup.location.href = url
141 |         else location = url
142 |         popup = null // reverse-tabnabbing #460
143 |       }
144 |       reader.readAsDataURL(blob)
145 |     } else {
146 |       var URL = _global.URL || _global.webkitURL
147 |       var url = URL.createObjectURL(blob)
148 |       if (popup) popup.location = url
149 |       else location.href = url
150 |       popup = null // reverse-tabnabbing #460
151 |       setTimeout(function () { URL.revokeObjectURL(url) }, 4E4) // 40s
152 |     }
153 |   }
154 | )
155 | 
156 | _global.saveAs = saveAs.saveAs = saveAs
157 | 
158 | if (typeof module !== 'undefined') {
159 |   module.exports = saveAs;
160 | }


--------------------------------------------------------------------------------
/preloader.css:
--------------------------------------------------------------------------------
  1 | .preloader{
  2 |     z-index: 999999;
  3 |     width: 100%;
  4 |     height: 100vh;
  5 |     position: fixed;
  6 |     background-color: #0a0611;
  7 |     top: 0;
  8 |     display: flex;
  9 |     align-items: center;
 10 |     justify-content: center;
 11 |     --border-color: #27272a;
 12 |     --nav-color-one: #0d0d179a;
 13 |     --nav-color-two: #0d0618;
 14 |     --body-color: #0a0611;
 15 |     --dark-text: #101010;
 16 |     --light-text: #ffffff;
 17 |     --light-text-secondary: #b9b9b9;
 18 |     --light-text-desc: #d8d8d8;
 19 |     --primary-theme-color: #7937e8;
 20 |     --secondary-theme-color: #ae8bfd;
 21 | }
 22 | .loader {
 23 |     width: 120px;
 24 |     aspect-ratio: 1;
 25 |     background: #0a0611;
 26 |     border-radius: 50%;
 27 |     position: relative;
 28 |     padding: 4px;
 29 |   }
 30 |   
 31 |   .loader .dots-container {
 32 |     width: 100%;
 33 |     height: 100%;
 34 |     position: relative;
 35 |   }
 36 |   
 37 |   .loader .dots-container .dot-row {
 38 |     position: absolute;
 39 |     top: 50%;
 40 |     transform: translateY(-50%) rotate(0deg);
 41 |     transform-origin: right center;
 42 |     width: 50%;
 43 |     height: 5px;
 44 |     display: flex;
 45 |     align-items: center;
 46 |     justify-content: space-between;
 47 |   }
 48 |   
 49 |   .loader .dots-container .dot-row > * {
 50 |     animation: blink 2s linear infinite;
 51 |   }
 52 |   
 53 |   .loader .dots-container .dot-row .dot {
 54 |     width: 4%;
 55 |     aspect-ratio: 1;
 56 |     background: #411391;
 57 |     border-radius: 50%;
 58 |     box-shadow: 0px 0px 5px 0px rgb(255, 255, 255);
 59 |   }
 60 |   
 61 |   .loader .dots-container .dot-row:nth-child(1) {
 62 |     transform: translateY(-50%) rotate(0deg);
 63 |   }
 64 |   
 65 |   .loader .dots-container .dot-row:nth-child(1) .dot {
 66 |     animation-delay: 0s;
 67 |   }
 68 |   
 69 |   .loader .dots-container .dot-row:nth-child(2) {
 70 |     transform: translateY(-50%) rotate(8deg);
 71 |   }
 72 |   
 73 |   .loader .dots-container .dot-row:nth-child(2) .dot {
 74 |     animation-delay: 0.0444444444s;
 75 |   }
 76 |   
 77 |   .loader .dots-container .dot-row:nth-child(3) {
 78 |     transform: translateY(-50%) rotate(16deg);
 79 |   }
 80 |   
 81 |   .loader .dots-container .dot-row:nth-child(3) .dot {
 82 |     animation-delay: 0.0888888889s;
 83 |   }
 84 |   
 85 |   .loader .dots-container .dot-row:nth-child(4) {
 86 |     transform: translateY(-50%) rotate(24deg);
 87 |   }
 88 |   
 89 |   .loader .dots-container .dot-row:nth-child(4) .dot {
 90 |     animation-delay: 0.1333333333s;
 91 |   }
 92 |   
 93 |   .loader .dots-container .dot-row:nth-child(5) {
 94 |     transform: translateY(-50%) rotate(32deg);
 95 |   }
 96 |   
 97 |   .loader .dots-container .dot-row:nth-child(5) .dot {
 98 |     animation-delay: 0.1777777778s;
 99 |   }
100 |   
101 |   .loader .dots-container .dot-row:nth-child(6) {
102 |     transform: translateY(-50%) rotate(40deg);
103 |   }
104 |   
105 |   .loader .dots-container .dot-row:nth-child(6) .dot {
106 |     animation-delay: 0.2222222222s;
107 |   }
108 |   
109 |   .loader .dots-container .dot-row:nth-child(7) {
110 |     transform: translateY(-50%) rotate(48deg);
111 |   }
112 |   
113 |   .loader .dots-container .dot-row:nth-child(7) .dot {
114 |     animation-delay: 0.2666666667s;
115 |   }
116 |   
117 |   .loader .dots-container .dot-row:nth-child(8) {
118 |     transform: translateY(-50%) rotate(56deg);
119 |   }
120 |   
121 |   .loader .dots-container .dot-row:nth-child(8) .dot {
122 |     animation-delay: 0.3111111111s;
123 |   }
124 |   
125 |   .loader .dots-container .dot-row:nth-child(9) {
126 |     transform: translateY(-50%) rotate(64deg);
127 |   }
128 |   
129 |   .loader .dots-container .dot-row:nth-child(9) .dot {
130 |     animation-delay: 0.3555555556s;
131 |   }
132 |   
133 |   .loader .dots-container .dot-row:nth-child(10) {
134 |     transform: translateY(-50%) rotate(72deg);
135 |   }
136 |   
137 |   .loader .dots-container .dot-row:nth-child(10) .dot {
138 |     animation-delay: 0.4s;
139 |   }
140 |   
141 |   .loader .dots-container .dot-row:nth-child(11) {
142 |     transform: translateY(-50%) rotate(80deg);
143 |   }
144 |   
145 |   .loader .dots-container .dot-row:nth-child(11) .dot {
146 |     animation-delay: 0.4444444444s;
147 |   }
148 |   
149 |   .loader .dots-container .dot-row:nth-child(12) {
150 |     transform: translateY(-50%) rotate(88deg);
151 |   }
152 |   
153 |   .loader .dots-container .dot-row:nth-child(12) .dot {
154 |     animation-delay: 0.4888888889s;
155 |   }
156 |   
157 |   .loader .dots-container .dot-row:nth-child(13) {
158 |     transform: translateY(-50%) rotate(96deg);
159 |   }
160 |   
161 |   .loader .dots-container .dot-row:nth-child(13) .dot {
162 |     animation-delay: 0.5333333333s;
163 |   }
164 |   
165 |   .loader .dots-container .dot-row:nth-child(14) {
166 |     transform: translateY(-50%) rotate(104deg);
167 |   }
168 |   
169 |   .loader .dots-container .dot-row:nth-child(14) .dot {
170 |     animation-delay: 0.5777777778s;
171 |   }
172 |   
173 |   .loader .dots-container .dot-row:nth-child(15) {
174 |     transform: translateY(-50%) rotate(112deg);
175 |   }
176 |   
177 |   .loader .dots-container .dot-row:nth-child(15) .dot {
178 |     animation-delay: 0.6222222222s;
179 |   }
180 |   
181 |   .loader .dots-container .dot-row:nth-child(16) {
182 |     transform: translateY(-50%) rotate(120deg);
183 |   }
184 |   
185 |   .loader .dots-container .dot-row:nth-child(16) .dot {
186 |     animation-delay: 0.6666666667s;
187 |   }
188 |   
189 |   .loader .dots-container .dot-row:nth-child(17) {
190 |     transform: translateY(-50%) rotate(128deg);
191 |   }
192 |   
193 |   .loader .dots-container .dot-row:nth-child(17) .dot {
194 |     animation-delay: 0.7111111111s;
195 |   }
196 |   
197 |   .loader .dots-container .dot-row:nth-child(18) {
198 |     transform: translateY(-50%) rotate(136deg);
199 |   }
200 |   
201 |   .loader .dots-container .dot-row:nth-child(18) .dot {
202 |     animation-delay: 0.7555555556s;
203 |   }
204 |   
205 |   .loader .dots-container .dot-row:nth-child(19) {
206 |     transform: translateY(-50%) rotate(144deg);
207 |   }
208 |   
209 |   .loader .dots-container .dot-row:nth-child(19) .dot {
210 |     animation-delay: 0.8s;
211 |   }
212 |   
213 |   .loader .dots-container .dot-row:nth-child(20) {
214 |     transform: translateY(-50%) rotate(152deg);
215 |   }
216 |   
217 |   .loader .dots-container .dot-row:nth-child(20) .dot {
218 |     animation-delay: 0.8444444444s;
219 |   }
220 |   
221 |   .loader .dots-container .dot-row:nth-child(21) {
222 |     transform: translateY(-50%) rotate(160deg);
223 |   }
224 |   
225 |   .loader .dots-container .dot-row:nth-child(21) .dot {
226 |     animation-delay: 0.8888888889s;
227 |   }
228 |   
229 |   .loader .dots-container .dot-row:nth-child(22) {
230 |     transform: translateY(-50%) rotate(168deg);
231 |   }
232 |   
233 |   .loader .dots-container .dot-row:nth-child(22) .dot {
234 |     animation-delay: 0.9333333333s;
235 |   }
236 |   
237 |   .loader .dots-container .dot-row:nth-child(23) {
238 |     transform: translateY(-50%) rotate(176deg);
239 |   }
240 |   
241 |   .loader .dots-container .dot-row:nth-child(23) .dot {
242 |     animation-delay: 0.9777777778s;
243 |   }
244 |   
245 |   .loader .dots-container .dot-row:nth-child(24) {
246 |     transform: translateY(-50%) rotate(184deg);
247 |   }
248 |   
249 |   .loader .dots-container .dot-row:nth-child(24) .dot {
250 |     animation-delay: 1.0222222222s;
251 |   }
252 |   
253 |   .loader .dots-container .dot-row:nth-child(25) {
254 |     transform: translateY(-50%) rotate(192deg);
255 |   }
256 |   
257 |   .loader .dots-container .dot-row:nth-child(25) .dot {
258 |     animation-delay: 1.0666666667s;
259 |   }
260 |   
261 |   .loader .dots-container .dot-row:nth-child(26) {
262 |     transform: translateY(-50%) rotate(200deg);
263 |   }
264 |   
265 |   .loader .dots-container .dot-row:nth-child(26) .dot {
266 |     animation-delay: 1.1111111111s;
267 |   }
268 |   
269 |   .loader .dots-container .dot-row:nth-child(27) {
270 |     transform: translateY(-50%) rotate(208deg);
271 |   }
272 |   
273 |   .loader .dots-container .dot-row:nth-child(27) .dot {
274 |     animation-delay: 1.1555555556s;
275 |   }
276 |   
277 |   .loader .dots-container .dot-row:nth-child(28) {
278 |     transform: translateY(-50%) rotate(216deg);
279 |   }
280 |   
281 |   .loader .dots-container .dot-row:nth-child(28) .dot {
282 |     animation-delay: 1.2s;
283 |   }
284 |   
285 |   .loader .dots-container .dot-row:nth-child(29) {
286 |     transform: translateY(-50%) rotate(224deg);
287 |   }
288 |   
289 |   .loader .dots-container .dot-row:nth-child(29) .dot {
290 |     animation-delay: 1.2444444444s;
291 |   }
292 |   
293 |   .loader .dots-container .dot-row:nth-child(30) {
294 |     transform: translateY(-50%) rotate(232deg);
295 |   }
296 |   
297 |   .loader .dots-container .dot-row:nth-child(30) .dot {
298 |     animation-delay: 1.2888888889s;
299 |   }
300 |   
301 |   .loader .dots-container .dot-row:nth-child(31) {
302 |     transform: translateY(-50%) rotate(240deg);
303 |   }
304 |   
305 |   .loader .dots-container .dot-row:nth-child(31) .dot {
306 |     animation-delay: 1.3333333333s;
307 |   }
308 |   
309 |   .loader .dots-container .dot-row:nth-child(32) {
310 |     transform: translateY(-50%) rotate(248deg);
311 |   }
312 |   
313 |   .loader .dots-container .dot-row:nth-child(32) .dot {
314 |     animation-delay: 1.3777777778s;
315 |   }
316 |   
317 |   .loader .dots-container .dot-row:nth-child(33) {
318 |     transform: translateY(-50%) rotate(256deg);
319 |   }
320 |   
321 |   .loader .dots-container .dot-row:nth-child(33) .dot {
322 |     animation-delay: 1.4222222222s;
323 |   }
324 |   
325 |   .loader .dots-container .dot-row:nth-child(34) {
326 |     transform: translateY(-50%) rotate(264deg);
327 |   }
328 |   
329 |   .loader .dots-container .dot-row:nth-child(34) .dot {
330 |     animation-delay: 1.4666666667s;
331 |   }
332 |   
333 |   .loader .dots-container .dot-row:nth-child(35) {
334 |     transform: translateY(-50%) rotate(272deg);
335 |   }
336 |   
337 |   .loader .dots-container .dot-row:nth-child(35) .dot {
338 |     animation-delay: 1.5111111111s;
339 |   }
340 |   
341 |   .loader .dots-container .dot-row:nth-child(36) {
342 |     transform: translateY(-50%) rotate(280deg);
343 |   }
344 |   
345 |   .loader .dots-container .dot-row:nth-child(36) .dot {
346 |     animation-delay: 1.5555555556s;
347 |   }
348 |   
349 |   .loader .dots-container .dot-row:nth-child(37) {
350 |     transform: translateY(-50%) rotate(288deg);
351 |   }
352 |   
353 |   .loader .dots-container .dot-row:nth-child(37) .dot {
354 |     animation-delay: 1.6s;
355 |   }
356 |   
357 |   .loader .dots-container .dot-row:nth-child(38) {
358 |     transform: translateY(-50%) rotate(296deg);
359 |   }
360 |   
361 |   .loader .dots-container .dot-row:nth-child(38) .dot {
362 |     animation-delay: 1.6444444444s;
363 |   }
364 |   
365 |   .loader .dots-container .dot-row:nth-child(39) {
366 |     transform: translateY(-50%) rotate(304deg);
367 |   }
368 |   
369 |   .loader .dots-container .dot-row:nth-child(39) .dot {
370 |     animation-delay: 1.6888888889s;
371 |   }
372 |   
373 |   .loader .dots-container .dot-row:nth-child(40) {
374 |     transform: translateY(-50%) rotate(312deg);
375 |   }
376 |   
377 |   .loader .dots-container .dot-row:nth-child(40) .dot {
378 |     animation-delay: 1.7333333333s;
379 |   }
380 |   
381 |   .loader .dots-container .dot-row:nth-child(41) {
382 |     transform: translateY(-50%) rotate(320deg);
383 |   }
384 |   
385 |   .loader .dots-container .dot-row:nth-child(41) .dot {
386 |     animation-delay: 1.7777777778s;
387 |   }
388 |   
389 |   .loader .dots-container .dot-row:nth-child(42) {
390 |     transform: translateY(-50%) rotate(328deg);
391 |   }
392 |   
393 |   .loader .dots-container .dot-row:nth-child(42) .dot {
394 |     animation-delay: 1.8222222222s;
395 |   }
396 |   
397 |   .loader .dots-container .dot-row:nth-child(43) {
398 |     transform: translateY(-50%) rotate(336deg);
399 |   }
400 |   
401 |   .loader .dots-container .dot-row:nth-child(43) .dot {
402 |     animation-delay: 1.8666666667s;
403 |   }
404 |   
405 |   .loader .dots-container .dot-row:nth-child(44) {
406 |     transform: translateY(-50%) rotate(344deg);
407 |   }
408 |   
409 |   .loader .dots-container .dot-row:nth-child(44) .dot {
410 |     animation-delay: 1.9111111111s;
411 |   }
412 |   
413 |   .loader .dots-container .dot-row:nth-child(45) {
414 |     transform: translateY(-50%) rotate(352deg);
415 |   }
416 |   
417 |   .loader .dots-container .dot-row:nth-child(45) .dot {
418 |     animation-delay: 1.9555555556s;
419 |   }
420 |   
421 |   .loader .center-div {
422 |     position: absolute;
423 |     top: 50%;
424 |     left: 50%;
425 |     transform: translate(-50%, -50%);
426 |     width: 36%;
427 |     aspect-ratio: 1;
428 |     border-radius: 50%;
429 |     display: grid;
430 |     place-content: center;
431 |     background: var(--primary-theme-color);
432 |     box-shadow: 0px 14px 56px -11px var(--primary-theme-color);
433 |     border-right: 1px solid var(--primary-theme-color);
434 |     border-bottom: 1px solid var(--primary-theme-color);
435 |   }
436 |   
437 |   .loader .center-div .svg {
438 |     width: 15px;
439 |     fill: var(--primary-theme-color);
440 |   }
441 |   
442 |   .loader .glass {
443 |     position: absolute;
444 |     height: 50%;
445 |     width: 80%;
446 |     top: 0;
447 |     left: 50%;
448 |     transform: translateX(-50%) rotate(-45deg);
449 |     transform-origin: bottom center;
450 |     background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.425) 100%);
451 |     border-radius: inherit;
452 |     border-radius: 51% 49% 51% 49%/59% 60% 40% 41%;
453 |   }
454 |   
455 |   @keyframes blink {
456 |     0% {
457 |       background: white;
458 |       box-shadow: 0px 0px 2px rgb(255, 255, 255);
459 |     }
460 |   
461 |     20% {
462 |       background: white;
463 |     }
464 |   
465 |     70% {
466 |       background: grey;
467 |       box-shadow: 0px 0px 2px rgba(255, 255, 255, 0);
468 |     }
469 |   }


--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
  1 | 
  2 | /* 
  3 | ██╗░░░██╗██╗███╗░░██╗░█████╗░██████╗░
  4 | ██║░░░██║██║████╗░██║██╔══██╗██╔══██╗
  5 | ╚██╗░██╔╝██║██╔██╗██║██║░░██║██║░░██║
  6 | ░╚████╔╝░██║██║╚████║██║░░██║██║░░██║
  7 | ░░╚██╔╝░░██║██║░╚███║╚█████╔╝██████╔╝
  8 | ░░░╚═╝░░░╚═╝╚═╝░░╚══╝░╚════╝░╚═════╝░
  9 | ░░░░░██╗░█████╗░███╗░░██╗░██████╗░██╗██████╗░
 10 | ░░░░░██║██╔══██╗████╗░██║██╔════╝░██║██╔══██╗
 11 | ░░░░░██║███████║██╔██╗██║██║░░██╗░██║██║░░██║
 12 | ██╗░░██║██╔══██║██║╚████║██║░░╚██╗██║██║░░██║
 13 | ╚█████╔╝██║░░██║██║░╚███║╚██████╔╝██║██████╔╝
 14 | ░╚════╝░╚═╝░░╚═╝╚═╝░░╚══╝░╚═════╝░╚═╝╚═════╝░ */
 15 | @font-face {
 16 |     font-family: 'Minecraft';
 17 |     src: url('assets/fonts/minecraft-font/MinecraftRegular-Bmg3.otf') format('truetype');
 18 |     font-weight: 1 1000;
 19 |     font-style: oblique 0deg; 
 20 |   }
 21 | * {
 22 |     box-sizing: border-box;
 23 |     margin: 0;
 24 |     padding: 0;
 25 | }
 26 | 
 27 | *::selection {
 28 |     background-color: rgba(128, 128, 128, 0);
 29 | }
 30 | 
 31 | *::-moz-selection {
 32 |     background: rgba(128, 128, 128, 0);
 33 | }
 34 |  
 35 | 
 36 | * {
 37 |     -webkit-tap-highlight-color: transparent;
 38 |     text-rendering: optimizeLegibility;
 39 |     -webkit-font-smoothing: antialiased;
 40 | }
 41 | 
 42 | html {
 43 |     font-size: 62.5%;
 44 |     scroll-behavior: smooth;
 45 |     font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
 46 |     
 47 | }
 48 | 
 49 | ::-webkit-scrollbar{
 50 |     width: 10px;
 51 | }
 52 | ::-webkit-scrollbar-track {
 53 |     background: #0a0a1002;
 54 | }
 55 | ::-webkit-scrollbar-thumb{
 56 |    background-color: var(--primary-theme-color);
 57 |    border-radius: 2px;
 58 | 
 59 | }
 60 | :root{
 61 |     
 62 |     cursor:default;
 63 |     --border-color: #27272a;
 64 |     --nav-color-one: #0d0d179a;
 65 |     --nav-color-two: #0d0618;
 66 |     --body-color: #0a0611;
 67 |     --dark-text: #101010;
 68 |     --light-text: #ffffff;
 69 |     --light-text-secondary: #b9b9b9;
 70 |     --light-text-desc: #d8d8d8;
 71 |     --primary-theme-color: #7937e8;
 72 |     --secondary-theme-color: #ae8bfd;
 73 | }
 74 | 
 75 | body{
 76 |     background-color: var(--body-color);
 77 |     transition: all .3s;
 78 |     position: relative;
 79 |     color: var(--light-text);
 80 |     overflow: hidden;
 81 | }
 82 | .scroll-enable{
 83 |     overflow: unset;
 84 | }
 85 | .lightcolors{
 86 |     --body-color: #f6f6f2;
 87 |     --dark-text: #fff;
 88 |     --light-text: #101010;
 89 |     --nav-color-two: #f6f6f2;
 90 |     --nav-color-one: #f1f1f17e;
 91 |     --border-color: #ddd;
 92 |     --light-text-secondary: #464853;
 93 |     --light-text-desc: #020202;
 94 | }
 95 | 
 96 | a{
 97 |     text-decoration: none;
 98 | }
 99 | header{
100 |     position: fixed;
101 |     width: 100%;
102 |     top: 0;
103 |     z-index: 9999;
104 | }
105 | .navbar{
106 |     display: flex;
107 |     align-items: center;
108 |     justify-content: space-between;
109 |     width: 100%;
110 |     height: 65px;
111 |     background:linear-gradient(to bottom, var(--nav-color-one) , var(--nav-color-two) );
112 |     padding: 0px 30px;
113 |     border-bottom: 1px solid var(--border-color);
114 |     transition: all .3s;
115 |     backdrop-filter: blur(5px);
116 | }
117 | .logo{
118 |     width: fit-content;
119 |     height: 100%;
120 |     display: flex;
121 |     align-items: center;
122 |     justify-content: center;
123 | }
124 | #logo-text svg path{
125 |     fill: var(--light-text);
126 |  
127 | }
128 | .right-nav-button-container{
129 |     display: flex;
130 |     align-items: center;
131 |     justify-content: center;
132 |     width: fit-content;
133 |     height: 100%;
134 |     gap: 20px;
135 | }
136 | .star-on-github-button{
137 |     width: fit-content;
138 |     height: 40px;
139 |     border-radius: 10px;
140 |     color: var(--light-text);
141 |     display: flex;
142 |     align-items: center;
143 |     justify-content: center;
144 |     font-size: 1.6rem;
145 |     padding: 0px 20px;
146 |     gap: 10px;
147 |     font-weight: 500;
148 |     transition: all .3s;
149 | }
150 | .star-on-github-button svg{
151 |     width: 1.6rem;
152 | }
153 | .star-on-github-button svg path{
154 |     fill: var(--light-text-secondary);
155 | }
156 | .star-on-github-button:hover{
157 |     color: var(--primary-theme-color)
158 | }
159 | 
160 | #visual-toggle-button{
161 |     width: 40px;
162 |     height: 40px;
163 |     display: flex;
164 |     align-items: center;
165 |     justify-content: center;
166 |     position: relative;
167 |     border: 1px solid var(--border-color);
168 |     border-radius: 5px;
169 |     cursor: pointer;
170 | }
171 | /* checkbox */
172 | #visual-toggle{
173 |     appearance: none;
174 |     display: none;
175 | }
176 | .svgIcon-toggle{
177 |     width: 25px;
178 | }
179 | .moon-svg{
180 |     width: 13px;
181 |     position: absolute;
182 |     transition: all .3s;
183 | }
184 | .sun-svg{
185 |     opacity: 0;
186 |     transition: all .3s;
187 | }
188 | .lightmode .sun-svg{
189 |     transform: rotate(180deg);
190 |     opacity: 1;
191 | }
192 | .lightmode .moon-svg{
193 |     opacity: 0;
194 | }
195 | .animate .moon-svg{
196 |     transform: rotate(360deg);
197 |     transition: all .3s;
198 | }
199 | 
200 | main{
201 |     width: 100%;
202 |     margin-top: 65px;
203 |     font-family: Whitney, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
204 | }
205 | .landingContainer{
206 |     width: 100%;
207 |     height: calc(100vh - 65px);
208 |     display: flex;
209 |     align-items: center;
210 |     justify-content: flex-start;
211 | }
212 | .left-container{
213 |     width: 50%;
214 |     height: 100%;
215 |     padding: 80px;
216 |     display: flex;
217 |     flex-direction: column;
218 |     gap: 30px;
219 | }
220 | 
221 | .MainHeading{
222 |     font-size: 7rem;
223 |     line-height: 80px;
224 |     letter-spacing: 0.5px;
225 | }
226 | .main-desc{
227 |     display: flex;
228 |     font-size: 2rem;
229 |     color: var(--light-text-secondary);
230 |     letter-spacing: 0.5px;
231 |     font-weight: 400;
232 | 
233 | }
234 | .main-desc:first-child{
235 |     font-family: minecraft;
236 | }
237 | 
238 | .landing-button-container{
239 |     width: 100%;
240 |     height: fit-content;
241 |     display: flex;
242 |     align-items: center;
243 |     justify-content: flex-start;
244 |     margin-top: 20px;
245 |     gap: 20px;
246 | }
247 | .Download-button {
248 |     width: 180px;
249 |     height: fit-content;
250 |     display: flex;
251 |     align-items: center;
252 |     justify-content: center;
253 |     font-family: inherit;
254 |     font-weight: 500;
255 |     font-size: 2rem;
256 |     padding: 15px 30px;
257 |     color: white;
258 |     background: var(--primary-theme-color);
259 |     background: linear-gradient(to right,var(--primary-theme-color),var(--secondary-theme-color));
260 |     box-shadow: 0px 14px 56px -11px var(--primary-theme-color);
261 |     border: none;
262 |     letter-spacing: 0.05em;
263 |     border-radius: 8px;
264 |     cursor: pointer;
265 |     position: relative;
266 |     letter-spacing: 0.5px;
267 | 
268 |   }
269 |   
270 |   .Download-button svg {
271 |     margin-right: 8px;
272 |     width: 25px;
273 |   }
274 |   
275 |   .Download-button:hover {
276 |     box-shadow: 0 0.5em 1.5em -0.5em rgba(88, 71, 116, 0.627);
277 |   }
278 |   
279 |   .Download-button:active {
280 |     box-shadow: 0 0.3em 1em -0.5em rgba(88, 71, 116, 0.627);
281 |   }
282 |   
283 |   .right-container{
284 |     height: 100%;
285 |     width: 50%;
286 |     display: flex;
287 |     align-items: center;
288 |     justify-content: flex-start;
289 | }
290 |   .right-container img{
291 |     width: 80%;
292 |   }
293 | 
294 | /* landing container style ends */
295 | 
296 | .content-container{
297 |     width: 100%;
298 |     height: fit-content;
299 |     margin-top: 65px;
300 |     display: flex;
301 |     flex-direction: column;
302 |     align-items: center;
303 |     justify-content: flex-start;
304 |     padding: 100px;
305 |     gap: 20px;
306 |     padding-bottom: 0;
307 | }
308 | 
309 | .content-container-heading{
310 |     font-size: 4.5rem;
311 |     color: var(--light-text);
312 |     text-align: center;
313 | }
314 | .content-container-subheading{
315 |     font-size: 2rem;
316 |     color: var(--light-text-secondary);
317 |     text-align: center;
318 | }
319 | .all-icons-wrapper{
320 |     width: 100%;
321 |     height: fit-content;
322 |     display: grid;
323 |     grid-template-columns: 1fr 1fr 1fr 1fr;
324 |     gap: 20px;
325 |     margin-top: 30px;
326 |     transition: all .3s;
327 | }
328 | .icon-wrapper{
329 |     width: 100%;
330 |     display: flex;
331 |     align-items: center;
332 |     justify-content: center;
333 |     border:1px solid var(--border-color);
334 |     position: relative;
335 |     padding: 20px 0;
336 |     /* border-radius: 20px; */
337 |     transition: all .3s;
338 | }
339 | .icon-image{
340 |     width: 100px;
341 |     /* filter: hue-rotate(95deg)brightness(0.9); */
342 | }
343 | .download-icon{
344 |     position: absolute;
345 |     width: 95%;
346 |     height: 35px;
347 |     background-color: var(--light-text);
348 |     color: var(--dark-text);
349 |     box-shadow: 0px 14px 56px -11px #a3a3a38c;
350 |     background-size: 150%;
351 |     background-position: left;
352 |     border: none;
353 |     cursor: pointer;
354 |     transition: all .5s;
355 |     opacity: 0;
356 |     bottom: 10px;
357 | }
358 | .display-container{
359 |     width: 100%;
360 |     height: 100%;
361 |     display: flex;
362 |     align-items: center;
363 |     flex-direction: column;
364 |     justify-content: center;
365 |     transition: all .3s;
366 | }
367 | .icon-wrapper:hover .display-container{
368 |     filter: brightness(0.5);
369 | }
370 | .icon-wrapper:hover .download-icon{
371 |     transition: all .5s;
372 |     opacity: 1;
373 |     animation: download-button .3s linear;
374 | 
375 | }
376 | @keyframes download-button {
377 |     from{
378 |         transform: translateY(10px);
379 |     }
380 |     to{
381 |         transform: translateY(0px);
382 |     }
383 | }
384 | .download-icon:hover{
385 |     background-position: right;
386 |     box-shadow: 0px 14px 56px -11px #919191;
387 | }
388 | .icon-name{
389 |     font-size: 2rem;
390 |     font-weight: 400;
391 |     width:100%;
392 |     text-align: center;
393 |     transition: all .3s;
394 | }
395 | 
396 | 
397 | .how-to-use{
398 |     margin-top: 65px;
399 |     padding: 0 200px 0 200px;
400 | }
401 | 
402 | .how-to-use-button{
403 |     font-size: 2rem;
404 |     width: 180px;
405 |     height: fit-content;
406 |     border-radius: 10px;
407 |     display: flex;
408 |     align-items: center;
409 |     justify-content: center;
410 |     padding: 15px 30px;
411 |     border: 1px solid var(--border-color);
412 |     color: var(--light-text);
413 |     font-weight: 500;
414 |     background-color: var(--body-color);
415 |     transition: all .3s;
416 | }
417 | .how-to-use-button:hover{
418 |     
419 |     filter: invert(1);
420 | }
421 | .how-to-use ul{
422 |     margin-top: 30px;
423 |     display: flex;
424 |     flex-direction: column;
425 |     gap: 20px;
426 |     width: 100%;
427 | 
428 | }
429 | 
430 | .how-to-use ul li strong{
431 |     font-weight: 700;
432 |     color: var(--light-text);
433 |     padding-right: 10px;
434 | }
435 | .how-to-use ul li{
436 |     font-size: 2rem;
437 |     padding-left: 20px;
438 |     font-weight: 400;
439 |     color: var(--light-text-desc);
440 | }
441 | /* footer */
442 | 
443 | .footerContainer{
444 |     height: 20vh;
445 |     width: 100%;
446 |     display: flex;
447 |     align-items: center;
448 |     justify-content: center;
449 |     border-top: 1px solid var(--border-color);
450 |     margin-top: 100px;
451 |     transition: all .3s;
452 |     
453 |   }
454 |   .footerContainer p{
455 |     color: var(--light-text);
456 |     font-size: 1.7rem;
457 |     letter-spacing: 1px;
458 |     transition: all .3s;
459 |   }
460 |   .footerContainer a{
461 |     text-decoration: none;
462 |     color: var(--secondary-theme-color);
463 |     transition: all .3s;
464 |   }
465 |   .fa-copyright{
466 |     font-size: 1.3rem;
467 |     color: var(--light-text);
468 |   }
469 | /* footer */
470 | 
471 | 
472 | 
473 | /* responsive code below*/
474 | @media screen and (max-width:1920px) {
475 |     html {
476 |         font-size: 60%;
477 |     }
478 | }
479 | 
480 | @media screen and (max-width:1200px) {
481 |     html {
482 |         font-size: 60%;
483 |     }
484 |     .download-icon{
485 |         width: 100%;
486 |         bottom: 0;
487 |     }
488 | }
489 | 
490 | @media screen and (max-width:998px) {
491 |     html {
492 |         font-size: 55%;
493 |     }
494 |     main{
495 |         display: flex;
496 |         flex-direction: column;
497 |         gap: 10px;
498 |     }
499 |     .landingContainer{
500 |         flex-direction: column;
501 |         height: fit-content;
502 |     }
503 |     .left-container{
504 |         width: 100%;
505 |     }
506 |     .right-container{
507 |         width: 100%;
508 |         display: flex;
509 |         align-items: center;
510 |         justify-content: center;
511 |     }
512 |     .right-container img{
513 |         width: 60%;
514 |     }
515 |     .all-icons-wrapper{
516 |         grid-template-columns: 1fr 1fr 1fr;
517 |     }
518 | }
519 | 
520 | @media screen and (max-width:768px) {
521 |     html {
522 |         font-size: 50%;
523 |     }
524 |     .left-container{
525 |         padding: 40px;
526 |     }
527 |     .content-container{
528 |         padding: 40px;
529 |     }
530 |  
531 | }
532 | 
533 | @media screen and (max-width:500px) {
534 |     html {
535 |         font-size: 45%;  
536 |     }
537 |     .star-on-github-button{
538 |         display: none;
539 |     }
540 |     .landingContainer{
541 |         height: 100vh;
542 |     }
543 |     .left-container{
544 |         padding: 40px;
545 |         padding-top: 50px;
546 |         gap: 20px;
547 |     }
548 |     .landing-button-container{
549 |         margin-top: 0;
550 |     }
551 |     .right-container{
552 |         padding: 40px;
553 |         padding-top: 0;
554 |         justify-content: flex-start;
555 |     }
556 |     .right-container img{
557 |         width: 100%;
558 |     }
559 |     .MainHeading{
560 |         line-height: unset;
561 |         font-size: 5rem;
562 |     }
563 |     .main-desc{
564 |         font-size: 1.8rem;
565 |     }
566 |     .content-container{
567 |        margin-top: 50px;
568 |        padding-bottom: 0;
569 |     }
570 |     .Download-button{
571 |         font-size: 1.8rem;
572 |         padding: 10px 20px;
573 |     }
574 |     .how-to-use-button{
575 |         font-size: 1.8rem;
576 |         padding: 10px 20px;
577 |     }
578 | 
579 |     .how-to-use ul{
580 |         gap: 10px;
581 |         margin-top: 0;
582 |     }
583 |     .how-to-use ul li{
584 |         margin-left: 10px;
585 |         padding-left: 10px;
586 |         line-height: 1.6em;
587 |     }
588 |     .footerContainer{
589 |         height: 10vh;
590 |     }
591 |     .footerContainer p{
592 |         font-size: 1.3rem;
593 |     }
594 | 
595 | }
596 | 
597 | @media screen and (max-width:450px) {
598 |     html {
599 |         font-size: 43%;
600 |     }
601 |     .all-icons-wrapper{
602 |         grid-template-columns: 1fr 1fr;
603 |     }
604 |     .landing-button-container{
605 |         flex-direction: column;
606 |         align-items: flex-start;
607 |     }
608 |  
609 | }
610 | 
611 | @media screen and (max-width:375px) {
612 |     html {
613 |         font-size: 40%;
614 |     }
615 |     .all-icons-wrapper{
616 |         grid-template-columns: 1fr;
617 |     }
618 | }
619 | @media screen and (max-width:300px) {
620 |     html {
621 |         font-size: 40%;
622 |     }
623 | }
624 | 
625 | 
626 | /* height media  */
627 | @media screen and (min-height:700px) {
628 |     .left-container {
629 |         justify-content: center;
630 |     }
631 | }
632 | 
633 | 
634 | @media screen and (max-width: 600px) and (min-height: 700px) {
635 | 
636 |     .left-container {
637 |         justify-content: center;
638 |     }
639 |   
640 |     .right-container {
641 |         align-items: flex-start;
642 |         padding-bottom: 0;
643 |     }
644 | 
645 |     .content-container{
646 |         margin-top: 0;
647 |     }
648 | }
649 | 
650 | /* responsive code above */
651 | 
652 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | <head>
   4 |     <meta charset="UTF-8">
   5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   6 |     <title>Pexelicons: Custom Folder Icons</title>
   7 |     <link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon">
   8 |     
   9 |     <link rel="stylesheet" href="preloader.css">
  10 |     <link rel="stylesheet" href="index.css">
  11 |     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  12 | </head>
  13 | <body>
  14 |     <div class="preloader" id="preloader">
  15 |         <!-- Copyright - 2024 Smit-Prajapati 
  16 | Copyright - 2024 Smit-Prajapati (Smit Prajapati) 
  17 | Copyright - 2024 Smit-Prajapati (Smit Prajapati) 
  18 | 
  19 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  20 | 
  21 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  22 | 
  23 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -->
  24 | 
  25 | 
  26 |         <div class="loader">
  27 |             <div class="dots-container">
  28 |                 <div class="dot-row">
  29 |                     <div class="dot"></div>
  30 |                     <div class="dot"></div>
  31 |                     <div class="dot"></div>
  32 |                     <div class="dot"></div>
  33 |                     <div class="dot"></div>
  34 |                     <div class="dot"></div>
  35 |                     <div class="dot"></div>
  36 |                     <div class="dot"></div>
  37 |                     <div class="dot"></div>
  38 |                     <div class="dot"></div>
  39 |                 </div>
  40 |                 <div class="dot-row">
  41 |                     <div class="dot"></div>
  42 |                     <div class="dot"></div>
  43 |                     <div class="dot"></div>
  44 |                     <div class="dot"></div>
  45 |                     <div class="dot"></div>
  46 |                     <div class="dot"></div>
  47 |                     <div class="dot"></div>
  48 |                     <div class="dot"></div>
  49 |                     <div class="dot"></div>
  50 |                     <div class="dot"></div>
  51 |                 </div>
  52 |                 <div class="dot-row">
  53 |                     <div class="dot"></div>
  54 |                     <div class="dot"></div>
  55 |                     <div class="dot"></div>
  56 |                     <div class="dot"></div>
  57 |                     <div class="dot"></div>
  58 |                     <div class="dot"></div>
  59 |                     <div class="dot"></div>
  60 |                     <div class="dot"></div>
  61 |                     <div class="dot"></div>
  62 |                     <div class="dot"></div>
  63 |                 </div>
  64 |                 <div class="dot-row">
  65 |                     <div class="dot"></div>
  66 |                     <div class="dot"></div>
  67 |                     <div class="dot"></div>
  68 |                     <div class="dot"></div>
  69 |                     <div class="dot"></div>
  70 |                     <div class="dot"></div>
  71 |                     <div class="dot"></div>
  72 |                     <div class="dot"></div>
  73 |                     <div class="dot"></div>
  74 |                     <div class="dot"></div>
  75 |                 </div>
  76 |                 <div class="dot-row">
  77 |                     <div class="dot"></div>
  78 |                     <div class="dot"></div>
  79 |                     <div class="dot"></div>
  80 |                     <div class="dot"></div>
  81 |                     <div class="dot"></div>
  82 |                     <div class="dot"></div>
  83 |                     <div class="dot"></div>
  84 |                     <div class="dot"></div>
  85 |                     <div class="dot"></div>
  86 |                     <div class="dot"></div>
  87 |                 </div>
  88 |                 <div class="dot-row">
  89 |                     <div class="dot"></div>
  90 |                     <div class="dot"></div>
  91 |                     <div class="dot"></div>
  92 |                     <div class="dot"></div>
  93 |                     <div class="dot"></div>
  94 |                     <div class="dot"></div>
  95 |                     <div class="dot"></div>
  96 |                     <div class="dot"></div>
  97 |                     <div class="dot"></div>
  98 |                     <div class="dot"></div>
  99 |                 </div>
 100 |                 <div class="dot-row">
 101 |                     <div class="dot"></div>
 102 |                     <div class="dot"></div>
 103 |                     <div class="dot"></div>
 104 |                     <div class="dot"></div>
 105 |                     <div class="dot"></div>
 106 |                     <div class="dot"></div>
 107 |                     <div class="dot"></div>
 108 |                     <div class="dot"></div>
 109 |                     <div class="dot"></div>
 110 |                     <div class="dot"></div>
 111 |                 </div>
 112 |                 <div class="dot-row">
 113 |                     <div class="dot"></div>
 114 |                     <div class="dot"></div>
 115 |                     <div class="dot"></div>
 116 |                     <div class="dot"></div>
 117 |                     <div class="dot"></div>
 118 |                     <div class="dot"></div>
 119 |                     <div class="dot"></div>
 120 |                     <div class="dot"></div>
 121 |                     <div class="dot"></div>
 122 |                     <div class="dot"></div>
 123 |                 </div>
 124 |                 <div class="dot-row">
 125 |                     <div class="dot"></div>
 126 |                     <div class="dot"></div>
 127 |                     <div class="dot"></div>
 128 |                     <div class="dot"></div>
 129 |                     <div class="dot"></div>
 130 |                     <div class="dot"></div>
 131 |                     <div class="dot"></div>
 132 |                     <div class="dot"></div>
 133 |                     <div class="dot"></div>
 134 |                     <div class="dot"></div>
 135 |                 </div>
 136 |                 <div class="dot-row">
 137 |                     <div class="dot"></div>
 138 |                     <div class="dot"></div>
 139 |                     <div class="dot"></div>
 140 |                     <div class="dot"></div>
 141 |                     <div class="dot"></div>
 142 |                     <div class="dot"></div>
 143 |                     <div class="dot"></div>
 144 |                     <div class="dot"></div>
 145 |                     <div class="dot"></div>
 146 |                     <div class="dot"></div>
 147 |                 </div>
 148 |                 <div class="dot-row">
 149 |                     <div class="dot"></div>
 150 |                     <div class="dot"></div>
 151 |                     <div class="dot"></div>
 152 |                     <div class="dot"></div>
 153 |                     <div class="dot"></div>
 154 |                     <div class="dot"></div>
 155 |                     <div class="dot"></div>
 156 |                     <div class="dot"></div>
 157 |                     <div class="dot"></div>
 158 |                     <div class="dot"></div>
 159 |                 </div>
 160 |                 <div class="dot-row">
 161 |                     <div class="dot"></div>
 162 |                     <div class="dot"></div>
 163 |                     <div class="dot"></div>
 164 |                     <div class="dot"></div>
 165 |                     <div class="dot"></div>
 166 |                     <div class="dot"></div>
 167 |                     <div class="dot"></div>
 168 |                     <div class="dot"></div>
 169 |                     <div class="dot"></div>
 170 |                     <div class="dot"></div>
 171 |                 </div>
 172 |                 <div class="dot-row">
 173 |                     <div class="dot"></div>
 174 |                     <div class="dot"></div>
 175 |                     <div class="dot"></div>
 176 |                     <div class="dot"></div>
 177 |                     <div class="dot"></div>
 178 |                     <div class="dot"></div>
 179 |                     <div class="dot"></div>
 180 |                     <div class="dot"></div>
 181 |                     <div class="dot"></div>
 182 |                     <div class="dot"></div>
 183 |                 </div>
 184 |                 <div class="dot-row">
 185 |                     <div class="dot"></div>
 186 |                     <div class="dot"></div>
 187 |                     <div class="dot"></div>
 188 |                     <div class="dot"></div>
 189 |                     <div class="dot"></div>
 190 |                     <div class="dot"></div>
 191 |                     <div class="dot"></div>
 192 |                     <div class="dot"></div>
 193 |                     <div class="dot"></div>
 194 |                     <div class="dot"></div>
 195 |                 </div>
 196 |                 <div class="dot-row">
 197 |                     <div class="dot"></div>
 198 |                     <div class="dot"></div>
 199 |                     <div class="dot"></div>
 200 |                     <div class="dot"></div>
 201 |                     <div class="dot"></div>
 202 |                     <div class="dot"></div>
 203 |                     <div class="dot"></div>
 204 |                     <div class="dot"></div>
 205 |                     <div class="dot"></div>
 206 |                     <div class="dot"></div>
 207 |                 </div>
 208 |                 <div class="dot-row">
 209 |                     <div class="dot"></div>
 210 |                     <div class="dot"></div>
 211 |                     <div class="dot"></div>
 212 |                     <div class="dot"></div>
 213 |                     <div class="dot"></div>
 214 |                     <div class="dot"></div>
 215 |                     <div class="dot"></div>
 216 |                     <div class="dot"></div>
 217 |                     <div class="dot"></div>
 218 |                     <div class="dot"></div>
 219 |                 </div>
 220 |                 <div class="dot-row">
 221 |                     <div class="dot"></div>
 222 |                     <div class="dot"></div>
 223 |                     <div class="dot"></div>
 224 |                     <div class="dot"></div>
 225 |                     <div class="dot"></div>
 226 |                     <div class="dot"></div>
 227 |                     <div class="dot"></div>
 228 |                     <div class="dot"></div>
 229 |                     <div class="dot"></div>
 230 |                     <div class="dot"></div>
 231 |                 </div>
 232 |                 <div class="dot-row">
 233 |                     <div class="dot"></div>
 234 |                     <div class="dot"></div>
 235 |                     <div class="dot"></div>
 236 |                     <div class="dot"></div>
 237 |                     <div class="dot"></div>
 238 |                     <div class="dot"></div>
 239 |                     <div class="dot"></div>
 240 |                     <div class="dot"></div>
 241 |                     <div class="dot"></div>
 242 |                     <div class="dot"></div>
 243 |                 </div>
 244 |                 <div class="dot-row">
 245 |                     <div class="dot"></div>
 246 |                     <div class="dot"></div>
 247 |                     <div class="dot"></div>
 248 |                     <div class="dot"></div>
 249 |                     <div class="dot"></div>
 250 |                     <div class="dot"></div>
 251 |                     <div class="dot"></div>
 252 |                     <div class="dot"></div>
 253 |                     <div class="dot"></div>
 254 |                     <div class="dot"></div>
 255 |                 </div>
 256 |                 <div class="dot-row">
 257 |                     <div class="dot"></div>
 258 |                     <div class="dot"></div>
 259 |                     <div class="dot"></div>
 260 |                     <div class="dot"></div>
 261 |                     <div class="dot"></div>
 262 |                     <div class="dot"></div>
 263 |                     <div class="dot"></div>
 264 |                     <div class="dot"></div>
 265 |                     <div class="dot"></div>
 266 |                     <div class="dot"></div>
 267 |                 </div>
 268 |                 <div class="dot-row">
 269 |                     <div class="dot"></div>
 270 |                     <div class="dot"></div>
 271 |                     <div class="dot"></div>
 272 |                     <div class="dot"></div>
 273 |                     <div class="dot"></div>
 274 |                     <div class="dot"></div>
 275 |                     <div class="dot"></div>
 276 |                     <div class="dot"></div>
 277 |                     <div class="dot"></div>
 278 |                     <div class="dot"></div>
 279 |                 </div>
 280 |                 <div class="dot-row">
 281 |                     <div class="dot"></div>
 282 |                     <div class="dot"></div>
 283 |                     <div class="dot"></div>
 284 |                     <div class="dot"></div>
 285 |                     <div class="dot"></div>
 286 |                     <div class="dot"></div>
 287 |                     <div class="dot"></div>
 288 |                     <div class="dot"></div>
 289 |                     <div class="dot"></div>
 290 |                     <div class="dot"></div>
 291 |                 </div>
 292 |                 <div class="dot-row">
 293 |                     <div class="dot"></div>
 294 |                     <div class="dot"></div>
 295 |                     <div class="dot"></div>
 296 |                     <div class="dot"></div>
 297 |                     <div class="dot"></div>
 298 |                     <div class="dot"></div>
 299 |                     <div class="dot"></div>
 300 |                     <div class="dot"></div>
 301 |                     <div class="dot"></div>
 302 |                     <div class="dot"></div>
 303 |                 </div>
 304 |                 <div class="dot-row">
 305 |                     <div class="dot"></div>
 306 |                     <div class="dot"></div>
 307 |                     <div class="dot"></div>
 308 |                     <div class="dot"></div>
 309 |                     <div class="dot"></div>
 310 |                     <div class="dot"></div>
 311 |                     <div class="dot"></div>
 312 |                     <div class="dot"></div>
 313 |                     <div class="dot"></div>
 314 |                     <div class="dot"></div>
 315 |                 </div>
 316 |                 <div class="dot-row">
 317 |                     <div class="dot"></div>
 318 |                     <div class="dot"></div>
 319 |                     <div class="dot"></div>
 320 |                     <div class="dot"></div>
 321 |                     <div class="dot"></div>
 322 |                     <div class="dot"></div>
 323 |                     <div class="dot"></div>
 324 |                     <div class="dot"></div>
 325 |                     <div class="dot"></div>
 326 |                     <div class="dot"></div>
 327 |                 </div>
 328 |                 <div class="dot-row">
 329 |                     <div class="dot"></div>
 330 |                     <div class="dot"></div>
 331 |                     <div class="dot"></div>
 332 |                     <div class="dot"></div>
 333 |                     <div class="dot"></div>
 334 |                     <div class="dot"></div>
 335 |                     <div class="dot"></div>
 336 |                     <div class="dot"></div>
 337 |                     <div class="dot"></div>
 338 |                     <div class="dot"></div>
 339 |                 </div>
 340 |                 <div class="dot-row">
 341 |                     <div class="dot"></div>
 342 |                     <div class="dot"></div>
 343 |                     <div class="dot"></div>
 344 |                     <div class="dot"></div>
 345 |                     <div class="dot"></div>
 346 |                     <div class="dot"></div>
 347 |                     <div class="dot"></div>
 348 |                     <div class="dot"></div>
 349 |                     <div class="dot"></div>
 350 |                     <div class="dot"></div>
 351 |                 </div>
 352 |                 <div class="dot-row">
 353 |                     <div class="dot"></div>
 354 |                     <div class="dot"></div>
 355 |                     <div class="dot"></div>
 356 |                     <div class="dot"></div>
 357 |                     <div class="dot"></div>
 358 |                     <div class="dot"></div>
 359 |                     <div class="dot"></div>
 360 |                     <div class="dot"></div>
 361 |                     <div class="dot"></div>
 362 |                     <div class="dot"></div>
 363 |                 </div>
 364 |                 <div class="dot-row">
 365 |                     <div class="dot"></div>
 366 |                     <div class="dot"></div>
 367 |                     <div class="dot"></div>
 368 |                     <div class="dot"></div>
 369 |                     <div class="dot"></div>
 370 |                     <div class="dot"></div>
 371 |                     <div class="dot"></div>
 372 |                     <div class="dot"></div>
 373 |                     <div class="dot"></div>
 374 |                     <div class="dot"></div>
 375 |                 </div>
 376 |                 <div class="dot-row">
 377 |                     <div class="dot"></div>
 378 |                     <div class="dot"></div>
 379 |                     <div class="dot"></div>
 380 |                     <div class="dot"></div>
 381 |                     <div class="dot"></div>
 382 |                     <div class="dot"></div>
 383 |                     <div class="dot"></div>
 384 |                     <div class="dot"></div>
 385 |                     <div class="dot"></div>
 386 |                     <div class="dot"></div>
 387 |                 </div>
 388 |                 <div class="dot-row">
 389 |                     <div class="dot"></div>
 390 |                     <div class="dot"></div>
 391 |                     <div class="dot"></div>
 392 |                     <div class="dot"></div>
 393 |                     <div class="dot"></div>
 394 |                     <div class="dot"></div>
 395 |                     <div class="dot"></div>
 396 |                     <div class="dot"></div>
 397 |                     <div class="dot"></div>
 398 |                     <div class="dot"></div>
 399 |                 </div>
 400 |                 <div class="dot-row">
 401 |                     <div class="dot"></div>
 402 |                     <div class="dot"></div>
 403 |                     <div class="dot"></div>
 404 |                     <div class="dot"></div>
 405 |                     <div class="dot"></div>
 406 |                     <div class="dot"></div>
 407 |                     <div class="dot"></div>
 408 |                     <div class="dot"></div>
 409 |                     <div class="dot"></div>
 410 |                     <div class="dot"></div>
 411 |                 </div>
 412 |                 <div class="dot-row">
 413 |                     <div class="dot"></div>
 414 |                     <div class="dot"></div>
 415 |                     <div class="dot"></div>
 416 |                     <div class="dot"></div>
 417 |                     <div class="dot"></div>
 418 |                     <div class="dot"></div>
 419 |                     <div class="dot"></div>
 420 |                     <div class="dot"></div>
 421 |                     <div class="dot"></div>
 422 |                     <div class="dot"></div>
 423 |                 </div>
 424 |                 <div class="dot-row">
 425 |                     <div class="dot"></div>
 426 |                     <div class="dot"></div>
 427 |                     <div class="dot"></div>
 428 |                     <div class="dot"></div>
 429 |                     <div class="dot"></div>
 430 |                     <div class="dot"></div>
 431 |                     <div class="dot"></div>
 432 |                     <div class="dot"></div>
 433 |                     <div class="dot"></div>
 434 |                     <div class="dot"></div>
 435 |                 </div>
 436 |                 <div class="dot-row">
 437 |                     <div class="dot"></div>
 438 |                     <div class="dot"></div>
 439 |                     <div class="dot"></div>
 440 |                     <div class="dot"></div>
 441 |                     <div class="dot"></div>
 442 |                     <div class="dot"></div>
 443 |                     <div class="dot"></div>
 444 |                     <div class="dot"></div>
 445 |                     <div class="dot"></div>
 446 |                     <div class="dot"></div>
 447 |                 </div>
 448 |                 <div class="dot-row">
 449 |                     <div class="dot"></div>
 450 |                     <div class="dot"></div>
 451 |                     <div class="dot"></div>
 452 |                     <div class="dot"></div>
 453 |                     <div class="dot"></div>
 454 |                     <div class="dot"></div>
 455 |                     <div class="dot"></div>
 456 |                     <div class="dot"></div>
 457 |                     <div class="dot"></div>
 458 |                     <div class="dot"></div>
 459 |                 </div>
 460 |                 <div class="dot-row">
 461 |                     <div class="dot"></div>
 462 |                     <div class="dot"></div>
 463 |                     <div class="dot"></div>
 464 |                     <div class="dot"></div>
 465 |                     <div class="dot"></div>
 466 |                     <div class="dot"></div>
 467 |                     <div class="dot"></div>
 468 |                     <div class="dot"></div>
 469 |                     <div class="dot"></div>
 470 |                     <div class="dot"></div>
 471 |                 </div>
 472 |                 <div class="dot-row">
 473 |                     <div class="dot"></div>
 474 |                     <div class="dot"></div>
 475 |                     <div class="dot"></div>
 476 |                     <div class="dot"></div>
 477 |                     <div class="dot"></div>
 478 |                     <div class="dot"></div>
 479 |                     <div class="dot"></div>
 480 |                     <div class="dot"></div>
 481 |                     <div class="dot"></div>
 482 |                     <div class="dot"></div>
 483 |                 </div>
 484 |                 <div class="dot-row">
 485 |                     <div class="dot"></div>
 486 |                     <div class="dot"></div>
 487 |                     <div class="dot"></div>
 488 |                     <div class="dot"></div>
 489 |                     <div class="dot"></div>
 490 |                     <div class="dot"></div>
 491 |                     <div class="dot"></div>
 492 |                     <div class="dot"></div>
 493 |                     <div class="dot"></div>
 494 |                     <div class="dot"></div>
 495 |                 </div>
 496 |                 <div class="dot-row">
 497 |                     <div class="dot"></div>
 498 |                     <div class="dot"></div>
 499 |                     <div class="dot"></div>
 500 |                     <div class="dot"></div>
 501 |                     <div class="dot"></div>
 502 |                     <div class="dot"></div>
 503 |                     <div class="dot"></div>
 504 |                     <div class="dot"></div>
 505 |                     <div class="dot"></div>
 506 |                     <div class="dot"></div>
 507 |                 </div>
 508 |                 <div class="dot-row">
 509 |                     <div class="dot"></div>
 510 |                     <div class="dot"></div>
 511 |                     <div class="dot"></div>
 512 |                     <div class="dot"></div>
 513 |                     <div class="dot"></div>
 514 |                     <div class="dot"></div>
 515 |                     <div class="dot"></div>
 516 |                     <div class="dot"></div>
 517 |                     <div class="dot"></div>
 518 |                     <div class="dot"></div>
 519 |                 </div>
 520 |                 <div class="dot-row">
 521 |                     <div class="dot"></div>
 522 |                     <div class="dot"></div>
 523 |                     <div class="dot"></div>
 524 |                     <div class="dot"></div>
 525 |                     <div class="dot"></div>
 526 |                     <div class="dot"></div>
 527 |                     <div class="dot"></div>
 528 |                     <div class="dot"></div>
 529 |                     <div class="dot"></div>
 530 |                     <div class="dot"></div>
 531 |                 </div>
 532 |                 <div class="dot-row">
 533 |                     <div class="dot"></div>
 534 |                     <div class="dot"></div>
 535 |                     <div class="dot"></div>
 536 |                     <div class="dot"></div>
 537 |                     <div class="dot"></div>
 538 |                     <div class="dot"></div>
 539 |                     <div class="dot"></div>
 540 |                     <div class="dot"></div>
 541 |                     <div class="dot"></div>
 542 |                     <div class="dot"></div>
 543 |                 </div>
 544 |                 <div class="dot-row">
 545 |                     <div class="dot"></div>
 546 |                     <div class="dot"></div>
 547 |                     <div class="dot"></div>
 548 |                     <div class="dot"></div>
 549 |                     <div class="dot"></div>
 550 |                     <div class="dot"></div>
 551 |                     <div class="dot"></div>
 552 |                     <div class="dot"></div>
 553 |                     <div class="dot"></div>
 554 |                     <div class="dot"></div>
 555 |                 </div>
 556 |                 <div class="dot-row">
 557 |                     <div class="dot"></div>
 558 |                     <div class="dot"></div>
 559 |                     <div class="dot"></div>
 560 |                     <div class="dot"></div>
 561 |                     <div class="dot"></div>
 562 |                     <div class="dot"></div>
 563 |                     <div class="dot"></div>
 564 |                     <div class="dot"></div>
 565 |                     <div class="dot"></div>
 566 |                     <div class="dot"></div>
 567 |                 </div>
 568 |             </div>
 569 |             <div class="center-div">
 570 |                 <svg class="svg" viewBox="0 0 420 561" fill="none" xmlns="http://www.w3.org/2000/svg">
 571 |                     <path d="M346.665 504H314.478V471.812V439.625V407.438V375.25V343.062V310.875V278.688V246.5V214.312H346.665H378.853V246.5V278.688V310.875V343.062V375.25V407.438V439.625V471.812V504H346.665ZM346.665 182.125H314.478V149.938V117.75H346.665H378.853V149.938V182.125H346.665Z" fill="white"/>
 572 |                     <rect x="314" y="117" width="65" height="65" fill="white"/>
 573 |                     <path d="M32.1875 505.562H0V473.375V441.188V409V376.812V344.625V312.438V280.25V248.062V215.875V183.688V151.5V119.312H32.1875H64.375V151.5V183.688H96.5625H128.75V215.875V248.062H96.5625H64.375V280.25V312.438H96.5625H128.75H160.938H193.125H225.312V344.625V376.812H193.125H160.938H128.75H96.5625H64.375V409V441.188V473.375V505.562H32.1875ZM225.312 312.438V280.25V248.062V215.875V183.688H257.5H289.688V215.875V248.062V280.25V312.438H257.5H225.312ZM225.312 183.688H193.125H160.938H128.75V151.5V119.312H160.938H193.125H225.312V151.5V183.688Z" fill="white"/>
 574 |                     </svg>
 575 |                     
 576 |             </div>
 577 |             <div class="glass"></div>
 578 |         </div>
 579 |     </div>
 580 |     <header role="header">
 581 |         <nav class="navbar">
 582 |             <div class="logo" >
 583 |                 <a href="https://vinodjangid07.github.io/Pexelicons" id="logo-text"><svg width="150" viewBox="0 0 3381 387" fill="none" xmlns="http://www.w3.org/2000/svg">
 584 |                     <path d="M32.1875 387H0V354.812V322.625V290.438V258.25V226.062V193.875V161.688V129.5V97.3125V65.125V32.9375V0.75H32.1875H64.375H96.5625H128.75H160.938H193.125H225.312H257.5V32.9375V65.125H289.688H321.875V97.3125V129.5H289.688H257.5V97.3125V65.125H225.312H193.125H160.938H128.75H96.5625H64.375V97.3125V129.5H96.5625H128.75H160.938H193.125H225.312H257.5V161.688V193.875H225.312H193.125H160.938H128.75H96.5625H64.375V226.062V258.25V290.438V322.625V354.812V387H32.1875ZM661.775 387H629.587H597.4H565.212H533.025H500.837V354.812V322.625H533.025H565.212H597.4H629.587V290.438H661.775H693.962V322.625V354.812V387H661.775ZM500.837 322.625H468.65H436.462V290.438V258.25V226.062V193.875V161.688H468.65H500.837V129.5V97.3125H533.025H565.212H597.4H629.587H661.775H693.962V129.5V161.688V193.875V226.062H661.775H629.587V258.25H597.4H565.212H533.025H500.837V290.438V322.625ZM597.4 193.875H629.587V161.688H597.4H565.212H533.025H500.837V193.875H533.025H565.212H597.4ZM1098.24 387H1066.05V354.812V322.625H1098.24H1130.42V354.812V387H1098.24ZM840.737 387H808.55V354.812V322.625H840.737H872.925V354.812V387H840.737ZM1066.05 322.625H1033.86H1001.67V290.438V258.25H1033.86H1066.05V290.438V322.625ZM872.925 322.625V290.438V258.25H905.112H937.3V290.438V322.625H905.112H872.925ZM1001.67 258.25H969.487H937.3V226.062V193.875H969.487H1001.67V226.062V258.25ZM1001.67 193.875V161.688V129.5H1033.86H1066.05V161.688V193.875H1033.86H1001.67ZM937.3 193.875H905.112H872.925V161.688V129.5H905.112H937.3V161.688V193.875ZM1066.05 129.5V97.3125V65.125H1098.24H1130.42V97.3125V129.5H1098.24H1066.05ZM872.925 129.5H840.737H808.55V97.3125V65.125H840.737H872.925V97.3125V129.5ZM1470.32 387H1438.14H1405.95H1373.76H1341.57H1309.39V354.812V322.625H1341.57H1373.76H1405.95H1438.14V290.438H1470.32H1502.51V322.625V354.812V387H1470.32ZM1309.39 322.625H1277.2H1245.01V290.438V258.25V226.062V193.875V161.688H1277.2H1309.39V129.5V97.3125H1341.57H1373.76H1405.95H1438.14H1470.32H1502.51V129.5V161.688V193.875V226.062H1470.32H1438.14V258.25H1405.95H1373.76H1341.57H1309.39V290.438V322.625ZM1405.95 193.875H1438.14V161.688H1405.95H1373.76H1341.57H1309.39V193.875H1341.57H1373.76H1405.95ZM1649.29 387H1617.1V354.812V322.625V290.438V258.25V226.062V193.875V161.688V129.5V97.3125V65.125V32.9375V0.75H1649.29H1681.47V32.9375V65.125V97.3125V129.5V161.688V193.875V226.062V258.25V290.438V322.625V354.812V387H1649.29ZM1828.25 387H1796.06V354.812V322.625V290.438V258.25V226.062V193.875V161.688V129.5V97.3125H1828.25H1860.44V129.5V161.688V193.875V226.062V258.25V290.438V322.625V354.812V387H1828.25ZM1828.25 65.125H1796.06V32.9375V0.75H1828.25H1860.44V32.9375V65.125H1828.25ZM2168.15 387H2135.96H2103.78H2071.59H2039.4V354.812V322.625H2071.59H2103.78H2135.96H2168.15H2200.34V354.812V387H2168.15ZM2200.34 322.625V290.438V258.25H2232.53H2264.71V290.438V322.625H2232.53H2200.34ZM2039.4 322.625H2007.21H1975.03V290.438V258.25V226.062V193.875V161.688H2007.21H2039.4V193.875V226.062V258.25V290.438V322.625ZM2232.53 226.062H2200.34V193.875V161.688H2232.53H2264.71V193.875V226.062H2232.53ZM2200.34 161.688H2168.15H2135.96H2103.78H2071.59H2039.4V129.5V97.3125H2071.59H2103.78H2135.96H2168.15H2200.34V129.5V161.688ZM2540.24 387H2508.05H2475.86H2443.68V354.812V322.625H2475.86H2508.05H2540.24H2572.43V354.812V387H2540.24ZM2572.43 322.625V290.438V258.25V226.062V193.875V161.688H2604.61H2636.8V193.875V226.062V258.25V290.438V322.625H2604.61H2572.43ZM2443.68 322.625H2411.49H2379.3V290.438V258.25V226.062V193.875V161.688H2411.49H2443.68V193.875V226.062V258.25V290.438V322.625ZM2572.43 161.688H2540.24H2508.05H2475.86H2443.68V129.5V97.3125H2475.86H2508.05H2540.24H2572.43V129.5V161.688ZM3008.89 387H2976.7V354.812V322.625V290.438V258.25V226.062V193.875V161.688H3008.89H3041.07V193.875V226.062V258.25V290.438V322.625V354.812V387H3008.89ZM2783.57 387H2751.39V354.812V322.625V290.438V258.25V226.062V193.875V161.688V129.5V97.3125H2783.57H2815.76H2847.95H2880.14H2912.32H2944.51H2976.7V129.5V161.688H2944.51H2912.32H2880.14H2847.95H2815.76V193.875V226.062V258.25V290.438V322.625V354.812V387H2783.57ZM3284.41 387H3252.23H3220.04H3187.85H3155.66V354.812V322.625H3187.85H3220.04H3252.23H3284.41H3316.6V354.812V387H3284.41ZM3316.6 322.625V290.438V258.25H3348.79H3380.98V290.438V322.625H3348.79H3316.6ZM3316.6 258.25H3284.41H3252.23H3220.04V226.062V193.875H3252.23H3284.41H3316.6V226.062V258.25ZM3220.04 193.875H3187.85H3155.66V161.688V129.5H3187.85H3220.04V161.688V193.875ZM3348.79 129.5H3316.6H3284.41H3252.23H3220.04V97.3125V65.125H3252.23H3284.41H3316.6H3348.79H3380.98V97.3125V129.5H3348.79Z" fill="white"/>
 585 |                     </svg>
 586 |                     </a>
 587 |             </div>
 588 |             <div class="right-nav-button-container">
 589 |                 <a href="https://github.com/vinodjangid07/Pexelicons" target="_blank" class="star-on-github-button"  data-aos="fade-up"
 590 |                 data-aos-offset="10"
 591 |                 data-aos-delay="50"
 592 |                 data-aos-duration="1000"
 593 |                 data-aos-easing="ease-in-out"
 594 |                 data-aos-mirror="true"
 595 |                 data-aos-once="true">
 596 |                     <svg class="star-svg" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
 597 |                          viewBox="0 0 217.929 217.929" xml:space="preserve">
 598 |                     <g>
 599 |                         <path d="M212.39,101.703c5.023-4.897,6.797-12.083,4.629-18.755s-7.827-11.443-14.769-12.452l-52.969-7.697
 600 |                             c-0.097-0.014-0.18-0.075-0.223-0.162L125.371,14.64C122.267,8.349,115.98,4.44,108.964,4.44S95.662,8.349,92.558,14.64
 601 |                             L68.87,62.637c-0.043,0.087-0.126,0.147-0.223,0.162l-52.968,7.697c-6.942,1.009-12.601,5.78-14.769,12.452
 602 |                             s-0.394,13.858,4.629,18.755l38.328,37.361c0.07,0.068,0.102,0.166,0.085,0.262l-9.048,52.755
 603 |                             c-1.186,6.914,1.604,13.771,7.279,17.894c5.676,4.125,13.059,4.657,19.268,1.393l47.376-24.907c0.086-0.046,0.19-0.045,0.276,0
 604 |                             l47.376,24.907c2.701,1.42,5.623,2.121,8.531,2.121c3.777,0,7.53-1.184,10.736-3.514c5.675-4.123,8.464-10.98,7.279-17.895
 605 |                             l-9.048-52.754c-0.017-0.096,0.016-0.194,0.085-0.262L212.39,101.703z M156.235,142.368l9.048,52.754
 606 |                             c0.024,0.14,0.031,0.182-0.118,0.29c-0.149,0.108-0.187,0.088-0.312,0.022l-47.377-24.908c-5.33-2.801-11.695-2.801-17.027,0
 607 |                             l-47.376,24.907c-0.125,0.065-0.163,0.086-0.312-0.022c-0.149-0.108-0.142-0.15-0.118-0.289l9.048-52.755
 608 |                             c1.018-5.936-0.949-11.989-5.262-16.194L18.103,88.813c-0.101-0.099-0.132-0.128-0.075-0.303c0.057-0.175,0.099-0.181,0.239-0.202
 609 |                             l52.968-7.697c5.961-0.866,11.111-4.607,13.776-10.008l23.688-47.998c0.063-0.126,0.081-0.165,0.265-0.165s0.203,0.039,0.265,0.165
 610 |                             l23.688,47.998c2.666,5.401,7.815,9.143,13.776,10.008l52.968,7.697c0.14,0.021,0.182,0.027,0.239,0.202
 611 |                             c0.057,0.175,0.026,0.205-0.075,0.303l-38.328,37.361C157.185,130.378,155.218,136.432,156.235,142.368z"/>
 612 |                     </g>
 613 |                     </svg>Star on GitHub</a>
 614 |                 <label for="visual-toggle" id="visual-toggle-button" onclick="visualMode()" data-aos="fade-up"
 615 |                 data-aos-offset="10"
 616 |                 data-aos-delay="150"
 617 |                 data-aos-duration="1000"
 618 |                 data-aos-easing="ease-in-out"
 619 |                 data-aos-mirror="true"
 620 |                 data-aos-once="true">
 621 |                     <svg xmlns="http://www.w3.org/2000/svg" class="svgIcon-toggle sun-svg" viewBox="0 0 24 24"><g fill="#f1bd00"><circle r="5" cy="12" cx="12"></circle><path d="m21 13h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm-17 0h-1a1 1 0 0 1 0-2h1a1 1 0 0 1 0 2zm13.66-5.66a1 1 0 0 1 -.66-.29 1 1 0 0 1 0-1.41l.71-.71a1 1 0 1 1 1.41 1.41l-.71.71a1 1 0 0 1 -.75.29zm-12.02 12.02a1 1 0 0 1 -.71-.29 1 1 0 0 1 0-1.41l.71-.66a1 1 0 0 1 1.41 1.41l-.71.71a1 1 0 0 1 -.7.24zm6.36-14.36a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm0 17a1 1 0 0 1 -1-1v-1a1 1 0 0 1 2 0v1a1 1 0 0 1 -1 1zm-5.66-14.66a1 1 0 0 1 -.7-.29l-.71-.71a1 1 0 0 1 1.41-1.41l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.29zm12.02 12.02a1 1 0 0 1 -.7-.29l-.66-.71a1 1 0 0 1 1.36-1.36l.71.71a1 1 0 0 1 0 1.41 1 1 0 0 1 -.71.24z"></path></g></svg>
 622 |     
 623 |                     <svg xmlns="http://www.w3.org/2000/svg" class="svgIcon-toggle moon-svg" fill="#f9ba48" viewBox="0 0 384 512"><path d="m223.5 32c-123.5 0-223.5 100.3-223.5 224s100 224 223.5 224c60.6 0 115.5-24.2 155.8-63.4 5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6-96.9 0-175.5-78.8-175.5-176 0-65.8 36-123.1 89.3-153.3 6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"></path></svg>
 624 |                     <input type="checkbox" class="visual-toggle" id="visual-toggle">
 625 |                 </label>
 626 |             </div>
 627 |             
 628 |         </nav>
 629 |     </header>
 630 |     <main role="main" >
 631 |         <div class="landingContainer">
 632 |             <div class="left-container">
 633 |                 <h1 class="MainHeading" data-aos="fade-up"
 634 |                 data-aos-offset="200"
 635 |                 data-aos-delay="500"
 636 |                 data-aos-duration="1000"
 637 |                 data-aos-easing="ease-in-out"
 638 |                 data-aos-mirror="true"
 639 |                 data-aos-once="true">Get Custom <br>Folder Icons For <br>Your PC!</h1>
 640 |                 <p class="main-desc" data-aos="fade-up"
 641 |                 data-aos-offset="200"
 642 |                 data-aos-delay="600"
 643 |                 data-aos-duration="1000"
 644 |                 data-aos-easing="ease-in-out"
 645 |                 data-aos-mirror="true"
 646 |                 data-aos-once="true">Pexelicons: A world of personalized file folder icons to transform your PC into a reflection of your style.</p>
 647 |                 <div class="landing-button-container">
 648 |                 <a href="#content-container" class="Download-button" data-aos="fade-up"
 649 |                 data-aos-offset="200"
 650 |                 data-aos-delay="700"
 651 |                 data-aos-duration="1000"
 652 |                 data-aos-easing="ease-in-out"
 653 |                 data-aos-mirror="true"
 654 |                 data-aos-once="true">
 655 |                     <svg
 656 |                       xmlns="http://www.w3.org/2000/svg"
 657 |                       height="16"
 658 |                       width="20"
 659 |                       viewBox="0 0 640 512"
 660 |                     >
 661 |                       <path
 662 |                         d="M144 480C64.5 480 0 415.5 0 336c0-62.8 40.2-116.2 96.2-135.9c-.1-2.7-.2-5.4-.2-8.1c0-88.4 71.6-160 160-160c59.3 0 111 32.2 138.7 80.2C409.9 102 428.3 96 448 96c53 0 96 43 96 96c0 12.2-2.3 23.8-6.4 34.6C596 238.4 640 290.1 640 352c0 70.7-57.3 128-128 128H144zm79-167l80 80c9.4 9.4 24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-39 39V184c0-13.3-10.7-24-24-24s-24 10.7-24 24V318.1l-39-39c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9z"
 663 |                         fill="white"
 664 |                       ></path>
 665 |                     </svg>
 666 |                     <span>Download</span>
 667 |                 </a>
 668 |                 <a href="#how-to-use" class="how-to-use-button" data-aos="fade-up"
 669 |                 data-aos-offset="200"
 670 |                 data-aos-delay="800"
 671 |                 data-aos-duration="1000"
 672 |                 data-aos-easing="ease-in-out"
 673 |                 data-aos-mirror="true"
 674 |                 data-aos-once="true">How To Use</a>
 675 |                 </div>
 676 |             </div>
 677 |             <div class="right-container">
 678 |                 <img src="assets/images/Mac Studio.png" alt="" data-aos="fade-up"
 679 |                 data-aos-offset="200"
 680 |                 data-aos-delay="900"
 681 |                 data-aos-duration="1000"
 682 |                 data-aos-easing="ease-in-out"
 683 |                 data-aos-mirror="true"
 684 |                 data-aos-once="true">
 685 |             </div>
 686 | 
 687 |            
 688 |               
 689 |             
 690 |         </div>
 691 | 
 692 |         <div class="content-container" id="content-container">
 693 |           <h1 class="content-container-heading"  data-aos="fade-up"
 694 |           data-aos-offset="50"
 695 |           data-aos-delay="0"
 696 |           data-aos-duration="1000"
 697 |           data-aos-easing="ease-in-out"
 698 |           data-aos-mirror="true"
 699 |           data-aos-once="true">Yellow Theme Icons</h1>
 700 |           <p class="content-container-subheading" data-aos="fade-up"
 701 |           data-aos-offset="50"
 702 |           data-aos-delay="0"
 703 |           data-aos-duration="1000"
 704 |           data-aos-easing="ease-in-out"
 705 |           data-aos-mirror="true"
 706 |           data-aos-once="true">Yellow theme folder icons are inspired from Microsoft windows 11.</p>
 707 | 
 708 |           <div class="all-icons-wrapper">
 709 |             <div class="icon-wrapper" data-aos="fade-up"
 710 |             data-aos-offset="50"
 711 |             data-aos-delay="0"
 712 |             data-aos-duration="1000"
 713 |             data-aos-easing="ease-in-out"
 714 |             data-aos-mirror="true"
 715 |             data-aos-once="true">
 716 |                 <div class="display-container" >
 717 |                     <img src="./assets/Icons/Yellow/CodingYellow.ico" alt="custom-icons" class="icon-image" id="image">
 718 |                     <h5 class="icon-name">Coding</h5>
 719 |                 </div>
 720 |                 <button class="download-icon">Download</button>
 721 |             </div>
 722 | 
 723 |             <div class="icon-wrapper"data-aos="fade-up"
 724 |             data-aos-offset="50"
 725 |             data-aos-delay="0"
 726 |             data-aos-duration="1000"
 727 |             data-aos-easing="ease-in-out"
 728 |             data-aos-mirror="true"
 729 |             data-aos-once="true">
 730 |                 <div class="display-container">
 731 |                     <img src="./assets/Icons/Yellow/DesktopYellow.ico" alt="custom-icons" class="icon-image">
 732 |                     <h5 class="icon-name">Desktop</h5>
 733 |                 </div>
 734 |                 <button class="download-icon">Download</button>
 735 |             </div>
 736 | 
 737 |             <div class="icon-wrapper"data-aos="fade-up"
 738 |             data-aos-offset="50"
 739 |             data-aos-delay="0"
 740 |             data-aos-duration="1000"
 741 |             data-aos-easing="ease-in-out"
 742 |             data-aos-mirror="true"
 743 |             data-aos-once="true">
 744 |                 <div class="display-container">
 745 |                     <img src="./assets/Icons/Yellow/DocumentsYellow.ico" alt="custom-icons" class="icon-image">
 746 |                     <h5 class="icon-name">Documents</h5>
 747 |                 </div>
 748 |                 <button class="download-icon">Download</button>
 749 |             </div>
 750 | 
 751 |             <div class="icon-wrapper"data-aos="fade-up"
 752 |             data-aos-offset="50"
 753 |             data-aos-delay="0"
 754 |             data-aos-duration="1000"
 755 |             data-aos-easing="ease-in-out"
 756 |             data-aos-mirror="true"
 757 |             data-aos-once="true">
 758 |                 <div class="display-container">
 759 |                     <img src="./assets/Icons/Yellow/DownloadsYellow.ico" alt="custom-icons" class="icon-image">
 760 |                     <h5 class="icon-name">Downloads</h5>
 761 |                 </div>
 762 |                 <button class="download-icon">Download</button>
 763 |             </div>
 764 | 
 765 |             <div class="icon-wrapper"data-aos="fade-up"
 766 |             data-aos-offset="50"
 767 |             data-aos-delay="0"
 768 |             data-aos-duration="1000"
 769 |             data-aos-easing="ease-in-out"
 770 |             data-aos-mirror="true"
 771 |             data-aos-once="true">
 772 |                 <div class="display-container">
 773 |                     <img src="./assets/Icons/Yellow/EditingYellow.ico" alt="custom-icons" class="icon-image">
 774 |                     <h5 class="icon-name">Editing</h5>
 775 |                 </div>
 776 |                 <button class="download-icon">Download</button>
 777 |             </div>
 778 | 
 779 |             <div class="icon-wrapper"data-aos="fade-up"
 780 |             data-aos-offset="50"
 781 |             data-aos-delay="0"
 782 |             data-aos-duration="1000"
 783 |             data-aos-easing="ease-in-out"
 784 |             data-aos-mirror="true"
 785 |             data-aos-once="true">
 786 |                 <div class="display-container">
 787 |                     <img src="./assets/Icons/Yellow/GamesYellow.ico" alt="custom-icons" class="icon-image">
 788 |                     <h5 class="icon-name">Games</h5>
 789 |                 </div>
 790 |                 <button class="download-icon">Download</button>
 791 |             </div>
 792 | 
 793 |             <div class="icon-wrapper"data-aos="fade-up"
 794 |             data-aos-offset="50"
 795 |             data-aos-delay="0"
 796 |             data-aos-duration="1000"
 797 |             data-aos-easing="ease-in-out"
 798 |             data-aos-mirror="true"
 799 |             data-aos-once="true">
 800 |                 <div class="display-container">
 801 |                     <img src="./assets/Icons/Yellow/MusicYellow.ico" alt="custom-icons" class="icon-image">
 802 |                     <h5 class="icon-name">Music</h5>
 803 |                 </div>
 804 |                 <button class="download-icon">Download</button>
 805 |             </div>
 806 | 
 807 |             <div class="icon-wrapper"data-aos="fade-up"
 808 |             data-aos-offset="50"
 809 |             data-aos-delay="0"
 810 |             data-aos-duration="1000"
 811 |             data-aos-easing="ease-in-out"
 812 |             data-aos-mirror="true"
 813 |             data-aos-once="true">
 814 |                 <div class="display-container">
 815 |                     <img src="./assets/Icons/Yellow/PhotosYellow.ico" alt="custom-icons" class="icon-image">
 816 |                     <h5 class="icon-name">Photos</h5>
 817 |                 </div>
 818 |                 <button class="download-icon">Download</button>
 819 |             </div>
 820 | 
 821 |             <div class="icon-wrapper"data-aos="fade-up"
 822 |             data-aos-offset="50"
 823 |             data-aos-delay="0"
 824 |             data-aos-duration="1000"
 825 |             data-aos-easing="ease-in-out"
 826 |             data-aos-mirror="true"
 827 |             data-aos-once="true">
 828 |                 <div class="display-container">
 829 |                     <img src="./assets/Icons/Yellow/Photos2Yellow.ico" alt="custom-icons" class="icon-image">
 830 |                     <h5 class="icon-name">Photos 2</h5>
 831 |                 </div>
 832 |                 <button class="download-icon">Download</button>
 833 |             </div>
 834 | 
 835 |             <div class="icon-wrapper"data-aos="fade-up"
 836 |             data-aos-offset="50"
 837 |             data-aos-delay="0"
 838 |             data-aos-duration="1000"
 839 |             data-aos-easing="ease-in-out"
 840 |             data-aos-mirror="true"
 841 |             data-aos-once="true">
 842 |                 <div class="display-container">
 843 |                     <img src="./assets/Icons/Yellow/VideoYellow.ico" alt="custom-icons" class="icon-image">
 844 |                     <h5 class="icon-name">Video</h5>
 845 |                 </div>
 846 |                 <button class="download-icon">Download</button>
 847 |             </div>
 848 | 
 849 |             <div class="icon-wrapper"data-aos="fade-up"
 850 |             data-aos-offset="50"
 851 |             data-aos-delay="0"
 852 |             data-aos-duration="1000"
 853 |             data-aos-easing="ease-in-out"
 854 |             data-aos-mirror="true"
 855 |             data-aos-once="true">
 856 |                 <div class="display-container">
 857 |                     <img src="./assets/Icons/Yellow/Video2Yellow.ico" alt="custom-icons" class="icon-image">
 858 |                     <h5 class="icon-name">Video 2</h5>
 859 |                 </div>
 860 |                 <button class="download-icon">Download</button>
 861 |             </div>
 862 | 
 863 |             <div class="icon-wrapper"data-aos="fade-up"
 864 |             data-aos-offset="50"
 865 |             data-aos-delay="0"
 866 |             data-aos-duration="1000"
 867 |             data-aos-easing="ease-in-out"
 868 |             data-aos-mirror="true"
 869 |             data-aos-once="true">
 870 |                 <div class="display-container">
 871 |                     <img src="./assets/Icons/Yellow/Recyle Bin Empty.ico" alt="custom-icons" class="icon-image">
 872 |                     <h5 class="icon-name">Recycle Bin Empty</h5>
 873 |                 </div>
 874 |                 <button class="download-icon">Download</button>
 875 |             </div>
 876 | 
 877 |             <div class="icon-wrapper"data-aos="fade-up"
 878 |             data-aos-offset="50"
 879 |             data-aos-delay="0"
 880 |             data-aos-duration="1000"
 881 |             data-aos-easing="ease-in-out"
 882 |             data-aos-mirror="true"
 883 |             data-aos-once="true">
 884 |                 <div class="display-container">
 885 |                     <img src="./assets/Icons/Yellow/Recyle Bin Full.ico" alt="custom-icons" class="icon-image">
 886 |                     <h5 class="icon-name">Recycle Bin Full</h5>
 887 |                 </div>
 888 |                 <button class="download-icon">Download</button>
 889 |             </div>
 890 | 
 891 |             <div class="icon-wrapper"data-aos="fade-up"
 892 |             data-aos-offset="50"
 893 |             data-aos-delay="0"
 894 |             data-aos-duration="1000"
 895 |             data-aos-easing="ease-in-out"
 896 |             data-aos-mirror="true"
 897 |             data-aos-once="true">
 898 |                 <div class="display-container">
 899 |                     <img src="./assets/Icons/Yellow/This PC.ico" alt="custom-icons" class="icon-image">
 900 |                     <h5 class="icon-name">This PC</h5>
 901 |                 </div>
 902 |                 <button class="download-icon">Download</button>
 903 |             </div>
 904 |             
 905 | 
 906 |             <div class="icon-wrapper"data-aos="fade-up"
 907 |             data-aos-offset="50"
 908 |             data-aos-delay="0"
 909 |             data-aos-duration="1000"
 910 |             data-aos-easing="ease-in-out"
 911 |             data-aos-mirror="true"
 912 |             data-aos-once="true">
 913 |                 <div class="display-container">
 914 |                     <img src="./assets/Icons/Yellow/This PC 2.ico" alt="custom-icons" class="icon-image">
 915 |                     <h5 class="icon-name">This PC 2</h5>
 916 |                 </div>
 917 |                 <button class="download-icon">Download</button>
 918 |             </div>
 919 | 
 920 | 
 921 |           </div>
 922 |         </div>
 923 |         <!-- yellow ends -->
 924 | 
 925 |         <!-- purple starts -->
 926 |         <div class="content-container " id="content-container">
 927 |             <h1 class="content-container-heading"data-aos="fade-up"
 928 |             data-aos-offset="50"
 929 |             data-aos-delay="0"
 930 |             data-aos-duration="1000"
 931 |             data-aos-easing="ease-in-out"
 932 |             data-aos-mirror="true"
 933 |             data-aos-once="true">Purple Theme Icons</h1>
 934 |             <p class="content-container-subheading"data-aos="fade-up"
 935 |             data-aos-offset="50"
 936 |             data-aos-delay="0"
 937 |             data-aos-duration="1000"
 938 |             data-aos-easing="ease-in-out"
 939 |             data-aos-mirror="true"
 940 |             data-aos-once="true">Explore our unique purple theme folder icons for a fresh and vibrant desktop experience.</p>
 941 |   
 942 |             <div class="all-icons-wrapper">
 943 |                 <div class="icon-wrapper"data-aos="fade-up"
 944 |                 data-aos-offset="50"
 945 |                 data-aos-delay="0"
 946 |                 data-aos-duration="1000"
 947 |                 data-aos-easing="ease-in-out"
 948 |                 data-aos-mirror="true"
 949 |                 data-aos-once="true">
 950 |                     <div class="display-container">
 951 |                         <img src="./assets/Icons/Purple/Coding.ico" alt="custom-icons" class="icon-image" id="image">
 952 |                         <h5 class="icon-name">Coding</h5>
 953 |                     </div>
 954 |                     <button class="download-icon">Download</button>
 955 |                 </div>
 956 | 
 957 |                 <div class="icon-wrapper"data-aos="fade-up"
 958 |                 data-aos-offset="50"
 959 |                 data-aos-delay="0"
 960 |                 data-aos-duration="1000"
 961 |                 data-aos-easing="ease-in-out"
 962 |                 data-aos-mirror="true"
 963 |                 data-aos-once="true">
 964 |                     <div class="display-container">
 965 |                         <img src="./assets/Icons/Purple/Default.ico" alt="custom-icons" class="icon-image" id="image">
 966 |                         <h5 class="icon-name">Default</h5>
 967 |                     </div>
 968 |                     <button class="download-icon">Download</button>
 969 |                 </div>
 970 | 
 971 |   
 972 |               <div class="icon-wrapper"data-aos="fade-up"
 973 |               data-aos-offset="50"
 974 |               data-aos-delay="0"
 975 |               data-aos-duration="1000"
 976 |               data-aos-easing="ease-in-out"
 977 |               data-aos-mirror="true"
 978 |               data-aos-once="true">
 979 |                   <div class="display-container">
 980 |                       <img src="./assets/Icons/Purple/Desktop.ico" alt="custom-icons" class="icon-image">
 981 |                       <h5 class="icon-name">Desktop</h5>
 982 |                   </div>
 983 |                   <button class="download-icon">Download</button>
 984 |               </div>
 985 |   
 986 |               <div class="icon-wrapper"data-aos="fade-up"
 987 |               data-aos-offset="50"
 988 |               data-aos-delay="0"
 989 |               data-aos-duration="1000"
 990 |               data-aos-easing="ease-in-out"
 991 |               data-aos-mirror="true"
 992 |               data-aos-once="true">
 993 |                   <div class="display-container">
 994 |                       <img src="./assets/Icons/Purple/Documents.ico" alt="custom-icons" class="icon-image">
 995 |                       <h5 class="icon-name">Documents</h5>
 996 |                   </div>
 997 |                   <button class="download-icon">Download</button>
 998 |               </div>
 999 |   
1000 |               <div class="icon-wrapper"data-aos="fade-up"
1001 |               data-aos-offset="50"
1002 |               data-aos-delay="0"
1003 |               data-aos-duration="1000"
1004 |               data-aos-easing="ease-in-out"
1005 |               data-aos-mirror="true"
1006 |               data-aos-once="true">
1007 |                   <div class="display-container">
1008 |                       <img src="./assets/Icons/Purple/Download.ico" alt="custom-icons" class="icon-image">
1009 |                       <h5 class="icon-name">Downloads</h5>
1010 |                   </div>
1011 |                   <button class="download-icon">Download</button>
1012 |               </div>
1013 |   
1014 |               <div class="icon-wrapper"data-aos="fade-up"
1015 |               data-aos-offset="50"
1016 |               data-aos-delay="0"
1017 |               data-aos-duration="1000"
1018 |               data-aos-easing="ease-in-out"
1019 |               data-aos-mirror="true"
1020 |               data-aos-once="true">
1021 |                   <div class="display-container">
1022 |                       <img src="./assets/Icons/Purple/Editing.ico" alt="custom-icons" class="icon-image">
1023 |                       <h5 class="icon-name">Editing</h5>
1024 |                   </div>
1025 |                   <button class="download-icon">Download</button>
1026 |               </div>
1027 |   
1028 |               <div class="icon-wrapper"data-aos="fade-up"
1029 |               data-aos-offset="50"
1030 |               data-aos-delay="0"
1031 |               data-aos-duration="1000"
1032 |               data-aos-easing="ease-in-out"
1033 |               data-aos-mirror="true"
1034 |               data-aos-once="true">
1035 |                   <div class="display-container">
1036 |                       <img src="./assets/Icons/Purple/Game.ico" alt="custom-icons" class="icon-image">
1037 |                       <h5 class="icon-name">Games</h5>
1038 |                   </div>
1039 |                   <button class="download-icon">Download</button>
1040 |               </div>
1041 |   
1042 |               <div class="icon-wrapper"data-aos="fade-up"
1043 |               data-aos-offset="50"
1044 |               data-aos-delay="0"
1045 |               data-aos-duration="1000"
1046 |               data-aos-easing="ease-in-out"
1047 |               data-aos-mirror="true"
1048 |               data-aos-once="true">
1049 |                   <div class="display-container">
1050 |                       <img src="./assets/Icons/Purple/Music.ico" alt="custom-icons" class="icon-image">
1051 |                       <h5 class="icon-name">Music</h5>
1052 |                   </div>
1053 |                   <button class="download-icon">Download</button>
1054 |               </div>
1055 |   
1056 |               <div class="icon-wrapper"data-aos="fade-up"
1057 |               data-aos-offset="50"
1058 |               data-aos-delay="0"
1059 |               data-aos-duration="1000"
1060 |               data-aos-easing="ease-in-out"
1061 |               data-aos-mirror="true"
1062 |               data-aos-once="true">
1063 |                   <div class="display-container">
1064 |                       <img src="./assets/Icons/Purple/Photos.ico" alt="custom-icons" class="icon-image">
1065 |                       <h5 class="icon-name">Photos</h5>
1066 |                   </div>
1067 |                   <button class="download-icon">Download</button>
1068 |               </div>
1069 |   
1070 |               <div class="icon-wrapper"data-aos="fade-up"
1071 |               data-aos-offset="50"
1072 |               data-aos-delay="0"
1073 |               data-aos-duration="1000"
1074 |               data-aos-easing="ease-in-out"
1075 |               data-aos-mirror="true"
1076 |               data-aos-once="true">
1077 |                   <div class="display-container">
1078 |                       <img src="./assets/Icons/Purple/Video.ico" alt="custom-icons" class="icon-image">
1079 |                       <h5 class="icon-name">Video</h5>
1080 |                   </div>
1081 |                   <button class="download-icon">Download</button>
1082 |               </div>
1083 |               
1084 |               <div class="icon-wrapper"data-aos="fade-up"
1085 |               data-aos-offset="50"
1086 |               data-aos-delay="0"
1087 |               data-aos-duration="1000"
1088 |               data-aos-easing="ease-in-out"
1089 |               data-aos-mirror="true"
1090 |               data-aos-once="true">
1091 |                 <div class="display-container">
1092 |                     <img src="./assets/Icons/Purple/Recycle Bin Empty.ico" alt="custom-icons" class="icon-image">
1093 |                     <h5 class="icon-name">Recycle Bin Empty</h5>
1094 |                 </div>
1095 |                 <button class="download-icon">Download</button>
1096 |             </div>
1097 |              
1098 |             <div class="icon-wrapper"data-aos="fade-up"
1099 |             data-aos-offset="50"
1100 |             data-aos-delay="0"
1101 |             data-aos-duration="1000"
1102 |             data-aos-easing="ease-in-out"
1103 |             data-aos-mirror="true"
1104 |             data-aos-once="true">
1105 |                 <div class="display-container">
1106 |                     <img src="./assets/Icons/Purple/Recyle Bin Full.ico" alt="custom-icons" class="icon-image">
1107 |                     <h5 class="icon-name">Recycle Bin Full</h5>
1108 |                 </div>
1109 |                 <button class="download-icon">Download</button>
1110 |             </div>
1111 | 
1112 |             <div class="icon-wrapper"data-aos="fade-up"
1113 |             data-aos-offset="50"
1114 |             data-aos-delay="0"
1115 |             data-aos-duration="1000"
1116 |             data-aos-easing="ease-in-out"
1117 |             data-aos-mirror="true"
1118 |             data-aos-once="true">
1119 |                 <div class="display-container">
1120 |                     <img src="./assets/Icons/Purple/This PC.ico" alt="custom-icons" class="icon-image">
1121 |                     <h5 class="icon-name">This PC</h5>
1122 |                 </div>
1123 |                 <button class="download-icon">Download</button>
1124 |             </div>
1125 | 
1126 |             
1127 |             <div class="icon-wrapper"data-aos="fade-up"
1128 |             data-aos-offset="50"
1129 |             data-aos-delay="0"
1130 |             data-aos-duration="1000"
1131 |             data-aos-easing="ease-in-out"
1132 |             data-aos-mirror="true"
1133 |             data-aos-once="true">
1134 |                 <div class="display-container">
1135 |                     <img src="./assets/Icons/Purple/This PC 2.ico" alt="custom-icons" class="icon-image">
1136 |                     <h5 class="icon-name">This PC 2</h5>
1137 |                 </div>
1138 |                 <button class="download-icon">Download</button>
1139 |             </div>
1140 |             
1141 | 
1142 |             <div class="icon-wrapper"data-aos="fade-up"
1143 |             data-aos-offset="50"
1144 |             data-aos-delay="0"
1145 |             data-aos-duration="1000"
1146 |             data-aos-easing="ease-in-out"
1147 |             data-aos-mirror="true"
1148 |             data-aos-once="true">
1149 |                 <div class="display-container">
1150 |                     <img src="./assets/Icons/Purple/This PC 3.ico" alt="custom-icons" class="icon-image">
1151 |                     <h5 class="icon-name">This PC 3</h5>
1152 |                 </div>
1153 |                 <button class="download-icon">Download</button>
1154 |             </div>
1155 |               
1156 |             </div>
1157 |           </div>
1158 | 
1159 | 
1160 |           <!-- purple ends -->
1161 | 
1162 |         <div class="content-container how-to-use" id="how-to-use">
1163 |             <h1 class="content-container-heading"data-aos="fade-up"
1164 |             data-aos-offset="50"
1165 |             data-aos-delay="0"
1166 |             data-aos-duration="1000"
1167 |             data-aos-easing="ease-in-out"
1168 |             data-aos-mirror="true"
1169 |             data-aos-once="true">How to Use?</h1>
1170 |             <p class="content-container-subheading"data-aos="fade-up"
1171 |             data-aos-offset="50"
1172 |             data-aos-delay="0"
1173 |             data-aos-duration="1000"
1174 |             data-aos-easing="ease-in-out"
1175 |             data-aos-mirror="true"
1176 |             data-aos-once="true">Pexelicons is provoding you 'ico' files to manually Change Folder Icon</p>
1177 |             <ul>
1178 |                 <li data-aos="fade-up"
1179 |                 data-aos-offset="50"
1180 |                 data-aos-delay="0"
1181 |                 data-aos-duration="1000"
1182 |                 data-aos-easing="ease-in-out"
1183 |                 data-aos-mirror="true"
1184 |                 data-aos-once="true">
1185 |                     <strong>Download a Custom Icon:</strong>Download a custom icon (ICO file) that you want to use for your folder. Icons are provided in ICO format, ensuring compatibility with Windows systems.
1186 |                 </li>
1187 |                 <li data-aos="fade-up"
1188 |                 data-aos-offset="50"
1189 |                 data-aos-delay="0"
1190 |                 data-aos-duration="1000"
1191 |                 data-aos-easing="ease-in-out"
1192 |                 data-aos-mirror="true"
1193 |                 data-aos-once="true">
1194 |                     <strong>Copy the ICO File to the Folder:</strong>Copy the custom ICO file to the folder for which you want to change the icon.
1195 |                 </li>
1196 |                 <li data-aos="fade-up"
1197 |                 data-aos-offset="50"
1198 |                 data-aos-delay="0"
1199 |                 data-aos-duration="1000"
1200 |                 data-aos-easing="ease-in-out"
1201 |                 data-aos-mirror="true"
1202 |                 data-aos-once="true">
1203 |                     <strong>
1204 |                         Right-click on the Folder:
1205 |                     </strong>
1206 |                     Right-click on the folder, and select "Properties" from the context menu.
1207 |                 </li>
1208 |                 <li data-aos="fade-up"
1209 |                 data-aos-offset="50"
1210 |                 data-aos-delay="0"
1211 |                 data-aos-duration="1000"
1212 |                 data-aos-easing="ease-in-out"
1213 |                 data-aos-mirror="true"
1214 |                 data-aos-once="true"><strong>
1215 |                     Go to the "Customize" Tab:
1216 |                 </strong>
1217 |                 In the folder properties window, go to the "Customize" tab.</li>
1218 |                 <li data-aos="fade-up"
1219 |                 data-aos-offset="50"
1220 |                 data-aos-delay="0"
1221 |                 data-aos-duration="1000"
1222 |                 data-aos-easing="ease-in-out"
1223 |                 data-aos-mirror="true"
1224 |                 data-aos-once="true"><strong>Click on "Change Icon":</strong>Look for the "Change Icon" button and click on it.</li>
1225 |                 <li data-aos="fade-up"
1226 |                 data-aos-offset="50"
1227 |                 data-aos-delay="0"
1228 |                 data-aos-duration="1000"
1229 |                 data-aos-easing="ease-in-out"
1230 |                 data-aos-mirror="true"
1231 |                 data-aos-once="true"><strong>Browse for the Custom ICO File:</strong>Browse to the location where you copied the custom ICO file and select it.</li>
1232 |                 <li data-aos="fade-up"
1233 |                 data-aos-offset="50"
1234 |                 data-aos-delay="0"
1235 |                 data-aos-duration="1000"
1236 |                 data-aos-easing="ease-in-out"
1237 |                 data-aos-mirror="true"
1238 |                 data-aos-once="true"><strong>Apply and OK:</strong>Apply the changes, and then click "OK" to close the properties window.</li>
1239 |                 
1240 |             </ul>
1241 |         </div>
1242 |     </main>
1243 |     <footer><div class="footerContainer">
1244 |         <p>Design & Built by <a href="https://github.com/vinodjangid07">@Vinodjangid07 </a>| <i class="far fa-copyright"></i> twentytwentyfour</p>
1245 |     </div></footer>
1246 |     <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
1247 |     <script>
1248 |       AOS.init();
1249 |     </script>
1250 |     <script src="script.js"></script>
1251 |     <script src="FileSaver.js"></script>
1252 | </body>
1253 | </html>


--------------------------------------------------------------------------------