28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/[ Day 36 ] - Animated Compress File Button/script.js:
--------------------------------------------------------------------------------
1 | // Select all elements with the class 'button'
2 | document.querySelectorAll(".button").forEach((button) => {
3 | // Add a 'click' event listener to each button
4 | button.addEventListener(
5 | "click",
6 | (event) => {
7 | // Check if the button does not have the class 'compress'
8 | if (!button.classList.contains("compress")) {
9 | // Add the 'compress' class to initiate the compression animation
10 | button.classList.add("compress");
11 |
12 | // Set a timeout to remove the 'compress' class after 4 seconds (4000 milliseconds)
13 | setTimeout(() => {
14 | button.classList.remove("compress");
15 | }, 4000);
16 | }
17 |
18 | // Prevent the default action of the event (useful if the button is within a form)
19 | event.preventDefault();
20 | },
21 | { passive: true }
22 | ); // The event listener does not call preventDefault, so it's marked as passive for potential performance benefits
23 | });
24 |
--------------------------------------------------------------------------------
/[ Day 18 ] - Animated Neumorphism Loader/script.js:
--------------------------------------------------------------------------------
1 | // Selecting the loading number element by its ID
2 | const loadingNumber = document.querySelector("#loadingNumber");
3 |
4 | // Selecting the loading circle element by its class
5 | const loadingCircle = document.querySelector(".loading-circle");
6 |
7 | // Initializing the load variable to 0
8 | let load = 0;
9 |
10 | // Setting up an interval to call the updateLoader function every 150 milliseconds
11 | setInterval(updateLoader, 150);
12 |
13 | // Function to update the loader
14 | function updateLoader() {
15 | // Incrementing load by 1 if it's less than 100
16 | load += load < 100;
17 |
18 | // Updating the innerHTML of the loading number element with the current load value
19 | loadingNumber.innerHTML = load;
20 |
21 | // Updating the background of the loading circle with a conic gradient based on the current load value
22 | loadingCircle.style.background =
23 | "conic-gradient(from 0deg at 50% 50%, rgba(111, 123, 247, 1) 0%, rgba(155, 248, 244, 1) " +
24 | load +
25 | "%, #101012 " +
26 | load +
27 | "%)";
28 | }
29 |
--------------------------------------------------------------------------------
/[ Day 40 ] - Animated Loader/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Animated Loader
8 |
9 |
10 |
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/[ Day 3 ] - Animated Radio Button/README.md:
--------------------------------------------------------------------------------
1 | # Animated Radio Button
2 |
3 | This project showcases an animated radio button selection interface implemented using HTML and CSS. It's part of the #100DaysOfCode Challenge.
4 |
5 | ## Preview
6 |
7 |
8 |
9 |
10 |
11 | This preview showcases the animated tab bar in action.
12 |
13 | ## Features
14 |
15 | - Selection of different options with animated transitions.
16 | - Responsive design for compatibility across various devices.
17 | - Dark mode support for improved visibility.
18 |
19 | ## Usage
20 |
21 | To use this project, simply clone or download the source code. You can also access the code via the Telegram channel [CodeWithAarzoo](https://t.me/CodeWithAarzoo).
22 |
23 | ## Connect with Me
24 |
25 | - Connect with me on [Bento](https://bento.me/withaarzoo) to stay updated on my projects and activities.
26 |
27 | ## Credits
28 |
29 | This project was created as part of the #100DaysOfCode Challenge by [Aarzoo](https://bento.me/withaarzoo).
30 |
31 | ## License
32 |
33 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
34 |
--------------------------------------------------------------------------------
/[ Day 1 ] - Animated Tab Bar/image/github.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/[ Day 31 ] - Animated Pencil Loader/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | Animated Pencil Loader
17 |
18 |
19 |
20 |
21 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/[ Day 7 ] - Animated Rocket Loader/README.md:
--------------------------------------------------------------------------------
1 | # Animated Rocket Loader
2 |
3 | This project is part of day 6 of the #100DaysOfCode Challenge, aimed at enhancing coding skills and exploring new techniques. It features an animated rocket loader created using HTML and CSS.
4 |
5 | ## Description
6 |
7 | The Animated Rocket Loader project showcases a visually appealing loader animation consisting of a rocket surrounded by clouds. The rocket spins while the clouds move dynamically, providing an engaging loading experience for users.
8 |
9 | ## Preview
10 |
11 |
12 |
13 |
14 |
15 | This preview showcases the animated rocket loader in action.
16 |
17 | ## Installation
18 |
19 | To use this project, you can download the full source code from the [Telegram channel](https://t.me/CodeWithAarzoo).
20 |
21 | ## Usage
22 |
23 | 1. Clone or download the project files.
24 | 2. Open the HTML file in a web browser.
25 | 3. Experience the animated rocket loader in action.
26 |
27 | ## Credits
28 |
29 | This project was created by [Aarzoo](https://bento.me/withaarzoo) as part of the #100DaysOfCode Challenge.
30 |
31 | ## Contact
32 |
33 | For any inquiries or feedback, feel free to contact the creator via [Bento](https://bento.me/withaarzoo).
34 |
35 | Thank you for checking out the Animated Rocket Loader project! 🚀🌟
36 |
--------------------------------------------------------------------------------
/[ Day 11 ] - Smiley Preloader/README.md:
--------------------------------------------------------------------------------
1 | # Smiley Preloader Animation
2 |
3 | 
4 |
5 | This project is part of Day 11 of my #100DaysOfCode Challenge. It features a smiley preloader animation created using SVG and CSS animations.
6 |
7 | ## Preview
8 |
9 |
10 |
11 |
12 |
13 | This preview showcases the animated loader in action.
14 |
15 | ## Download Full Source Code
16 |
17 | You can download the full source code for this project from the following link: [Download Source Code](https://t.me/CodeWithAarzoo)
18 |
19 | ## How to Use
20 |
21 | 1. Clone the repository to your local machine using Git:
22 |
23 | ```bash
24 | git clone https://github.com/yourusername/smiley-preloader.git
25 | ```
26 |
27 | 2. Open the `index.html` file in your preferred web browser to view the smiley preloader animation.
28 |
29 | ## Contact Me
30 |
31 | If you have any questions, feedback, or just want to say hi, feel free to reach out to me:
32 |
33 | - [Personal Website](https://bento.me/withaarzoo)
34 | - Twitter: [@yourtwitterhandle](https://twitter.com/yourtwitterhandle)
35 | - Email:
36 | - [My Agency](https://dgisight.com)
37 |
38 | Thank you for checking out my project! Don't forget to follow me on my coding journey with #100DaysOfCode. Happy coding! 😊🚀
39 |
--------------------------------------------------------------------------------
/[ Day 19 ] - Animated Sleeping Cat/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Animated Sleeping Cat
15 |
16 |
17 |
18 |
19 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/[ Day 10 ] - Animated Loader/README.md:
--------------------------------------------------------------------------------
1 | # Animated Loader Project
2 |
3 | This project is part of Day 9 of the #100DaysOfCode Challenge, aimed at improving coding skills by committing to code daily for 100 days. The Animated Loader is a simple yet visually appealing loader created using HTML and CSS animations.
4 |
5 | ## Overview
6 |
7 | The Animated Loader utilizes SVG elements and CSS animations to create an eye-catching loading animation. It consists of a circular ring with a worm-like shape moving along its path. The animation is smooth and captivating, making it suitable for various web applications and projects.
8 |
9 | ## Preview
10 |
11 |
12 |
13 |
14 |
15 | This preview showcases the animated loader in action.
16 |
17 | ## Getting Started
18 |
19 | To explore and use the Animated Loader, you can download the full source code from [this link](https://t.me/CodeWithAarzoo).
20 |
21 | ## Usage
22 |
23 | 1. Clone or download the source code from the provided link.
24 | 2. Incorporate the HTML and CSS files into your web project.
25 | 3. Customize the loader's appearance or integrate it into your existing user interface.
26 |
27 | ## Support and Contact
28 |
29 | For any inquiries or assistance regarding this project, feel free to reach out to the developer, Aarzoo, via [Bento](https://bento.me/withaarzoo).
30 |
31 | ---
32 |
33 | **Note:** This project is a part of the #100DaysOfCode Challenge. To stay updated with the developer's progress and other projects, follow along on [Twitter](https://twitter.com/CodeWithAarzoo).
34 |
--------------------------------------------------------------------------------
/[ Day 15 ] - Animated Preloader/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Animated Preloader
9 |
10 |
11 |
12 |
13 |
32 |
33 | Loading..
34 |
35 |
36 |
--------------------------------------------------------------------------------
/[ Day 36 ] - Animated Compress File Button/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Animated Compress File Button
15 |
16 |
17 |
18 |
19 |
43 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/[ Day 29 ] - Animated Doraemon/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | Animated Doraemon
14 |
15 |
16 |
17 |
18 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/[ Day 12 ] - Animated Eevee Pokemon/README.md:
--------------------------------------------------------------------------------
1 | # Animated Eevee Pkemon
2 |
3 | ## Description
4 |
5 | This project showcases an animated eevee pokemon created using HTML and CSS. The animation includes various elements such as blinking eyes, wagging tail, and moving ears to bring the eevee to life.
6 |
7 | ## Preview
8 |
9 |
10 |
11 |
12 |
13 | This preview showcases the animated eevee in action.
14 |
15 | ## Features
16 |
17 | - Eye blinking animation
18 | - Tail wagging animation
19 | - Ear shaking animation
20 | - Mouth movement animation
21 | - Body shaking animation
22 | - Neck shaking animation
23 |
24 | ## Intended Use
25 |
26 | This project can be used as a fun addition to websites or applications that involve animations. It's a great way to add personality and charm to your digital creations.
27 |
28 | ## Installation
29 |
30 | 1. Clone the repository:
31 |
32 | ```
33 | git clone https://github.com/withaarzoo/Animated-Eevee-Pokemon.git
34 | ```
35 |
36 | 2. Open the `index.html` file in your web browser.
37 |
38 | ## Usage
39 |
40 | - Simply open the HTML file in a web browser to view the animated cute puppy.
41 | - Customize the animations or add more features according to your preferences by modifying the CSS file.
42 |
43 | ## License
44 |
45 | This project is licensed under the [License Name] License - see the [LICENSE](LICENSE) file for details.
46 |
47 | ---
48 |
49 | Feel free to customize the README according to your project's specific details and requirements. You can also include links to your social media profiles or personal website for contact or further information.
50 |
--------------------------------------------------------------------------------
/[ Day 6 ] - Animated Navigation Tab Menu/README.md:
--------------------------------------------------------------------------------
1 | # Animated Navigation Tab Menu
2 |
3 | This project is part of Day 6 of the #100DaysOfCode Challenge, designed to improve your coding skills by coding for at least an hour every day for 100 days straight.
4 |
5 | ## Description
6 |
7 | This project features an animated navigation tab menu built with HTML, CSS, and JavaScript. It provides an interactive and visually appealing way to navigate through different sections of a web application or website.
8 |
9 | ## Preview
10 |
11 |
12 |
13 |
14 |
15 | This preview showcases the animated tab bar in action.
16 |
17 | ## Features
18 |
19 | - Interactive navigation menu with animated transitions.
20 | - Each tab has an icon and text for easy identification.
21 | - Active tab is highlighted with a distinctive style.
22 | - Smooth animations enhance user experience.
23 |
24 | ## Installation
25 |
26 | You can download the full source code of this project from [here](https://t.me/CodeWithAarzoo).
27 |
28 | ## Usage
29 |
30 | 1. Clone the repository or download the source code.
31 | 2. Open the HTML file in your web browser.
32 | 3. Click on the navigation tabs to switch between sections.
33 |
34 | ## Contributing
35 |
36 | Contributions are welcome! If you find any bugs or want to suggest improvements, feel free to open an issue or create a pull request.
37 |
38 | ## Contact
39 |
40 | For any inquiries or further information, you can contact the project creator, Aarzoo, via [Bento](https://bento.me/withaarzoo).
41 |
42 | ## License
43 |
44 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
45 |
--------------------------------------------------------------------------------
/[ Day 21 ] - Totro Toggle Switch/README.md:
--------------------------------------------------------------------------------
1 | # Totoro Toggle Switch
2 |
3 | Welcome to the Totoro Toggle Switch project, a fun and interactive way to implement a toggle switch using HTML and CSS. This project is part of Day 21 of the #100DaysOfCode Challenge.
4 |
5 | ## Preview
6 |
7 |
8 |
9 |
10 |
11 | This preview showcases the totoro toggle switch in action.
12 |
13 | ## Download Full Source Code
14 |
15 | You can download the full source code for this project from the following link: [Download Source Code](https://t.me/CodeWithAarzoo)
16 |
17 | ## Description
18 |
19 | The Totoro Toggle Switch project showcases a cute Totoro character that serves as a toggle switch. When toggled, Totoro moves and performs animated actions, providing a delightful user experience.
20 |
21 | ## Installation
22 |
23 | To get started with this project, you can download the full source code from [here](https://t.me/CodeWithAarzoo).
24 |
25 | ## Usage
26 |
27 | 1. Clone or download the source code from the provided link.
28 | 2. Open the `index.html` file in your preferred web browser.
29 | 3. Toggle the switch to see Totoro's animated actions.
30 |
31 | ## License
32 |
33 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
34 |
35 | ## Support and Contact
36 |
37 | For any inquiries or assistance regarding this project, feel free to reach out to the developer, Aarzoo, via [Bento](https://bento.me/withaarzoo).
38 |
39 | Enjoy coding and have fun with your totoro toggle switch 🐶✨
40 |
41 | ---
42 |
43 | Enjoy using the totoro toggle switch! If you have any questions or suggestions, please feel free to reach out.
44 |
--------------------------------------------------------------------------------
/[ Day 10 ] - Animated Loader/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Animated Loader
15 |
16 |
17 |
18 |
19 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/[ Day 13 ] - Animated Cat Loader/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Animated Cat Loader
11 |
12 |
13 |
14 |
15 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/[ Day 9 ] - Animated Cute Puppy/README.md:
--------------------------------------------------------------------------------
1 | # Animated Cute Puppy
2 |
3 | ## Description
4 |
5 | This project showcases an animated cute puppy created using HTML and CSS. The animation includes various elements such as blinking eyes, wagging tail, and moving ears to bring the puppy to life.
6 |
7 | ## Preview
8 |
9 |
10 |
11 |
12 |
13 | This preview showcases the animated rocket loader in action.
14 |
15 | ## Features
16 |
17 | - Eye blinking animation
18 | - Tail wagging animation
19 | - Ear shaking animation
20 | - Mouth movement animation
21 | - Body shaking animation
22 | - Paw pressing animation
23 | - Neck shaking animation
24 |
25 | ## Intended Use
26 |
27 | This project can be used as a fun addition to websites or applications that involve animations. It's a great way to add personality and charm to your digital creations.
28 |
29 | ## Installation
30 |
31 | 1. Clone the repository:
32 |
33 | ```
34 | git clone https://github.com/yourusername/animated-cute-puppy.git
35 | ```
36 |
37 | 2. Open the `index.html` file in your web browser.
38 |
39 | ## Usage
40 |
41 | - Simply open the HTML file in a web browser to view the animated cute puppy.
42 | - Customize the animations or add more features according to your preferences by modifying the CSS file.
43 |
44 | ## Credits
45 |
46 | - This project is inspired by [author's name] and their original work [link to original project].
47 |
48 | ## License
49 |
50 | This project is licensed under the [License Name] License - see the [LICENSE](LICENSE) file for details.
51 |
52 | ---
53 |
54 | Feel free to customize the README according to your project's specific details and requirements. You can also include links to your social media profiles or personal website for contact or further information.
55 |
--------------------------------------------------------------------------------
/[ Day 25 ] - Animated Send Button With Paper Plane Animation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Animated Send Button With Paper Plane Animation
12 |
13 |
14 |
15 |
16 |
39 |
40 |
41 |
42 |
43 |
46 |
47 |
--------------------------------------------------------------------------------
/[ Day 21 ] - Totro Toggle Switch/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Totro Toggle Switch
13 |
14 |
15 |
16 |
17 |
52 |
53 |
54 |
--------------------------------------------------------------------------------
/[ Day 8 ] - Dynamic Island of iPhone/README.md:
--------------------------------------------------------------------------------
1 | # Dynamic Island of iPhone
2 |
3 | Welcome to the Island Popup project, part of Day 8 of the #100DaysOfCode Challenge! This project aims to create an interactive island popup using HTML, CSS, and JavaScript. Below, you'll find information on how to get started with the project, where to download the full source code, and how to get in touch with the creator.
4 |
5 | ## Preview
6 |
7 |
8 |
9 |
10 |
11 | This preview showcases the animated rocket loader in action.
12 |
13 | ### Getting Started
14 |
15 | To get started with this project, follow these steps:
16 |
17 | 1. **Clone the Repository**: Clone this GitHub repository to your local machine using the following command:
18 |
19 | ```
20 | git clone
21 | ```
22 |
23 | 2. **Navigate to Project Directory**: Enter the project directory:
24 |
25 | ```
26 | cd island-popup
27 | ```
28 |
29 | 3. **Open in Browser**: Open the `index.html` file in your preferred web browser.
30 |
31 | ### Project Structure
32 |
33 | The project structure is as follows:
34 |
35 | - **index.html**: Contains the HTML structure of the project.
36 | - **style.css**: Contains the CSS styles for styling the project.
37 | - **script.js**: Contains the JavaScript code for adding interactivity to the project.
38 | - **img.jpg**: Placeholder image used in the project.
39 | - **bg.jpg**: Background image used in the project.
40 | - **ionicons**: External library for icons.
41 |
42 | ### Download Full Source Code
43 |
44 | You can download the full source code of this project from [here](https://t.me/CodeWithAarzoo).
45 |
46 | ### Contact
47 |
48 | If you have any questions, feedback, or suggestions regarding this project, feel free to reach out to the creator, Aarzoo, via [Bento](https://bento.me/withaarzoo).
49 |
50 | Thank you for checking out this project! Happy coding! 🚀
51 |
--------------------------------------------------------------------------------
/[ Day 2 ] - Animated Toggle Button/README.md:
--------------------------------------------------------------------------------
1 | # Animated Toogle Switch
2 |
3 | Welcome to my #100DaysOfCode challenge project! In this project, I've implemented a custom checkbox toggle with associated text, utilizing HTML and CSS.
4 |
5 | ## Preview
6 |
7 |
8 |
9 |
10 | This preview showcases the animated tab bar in action.
11 |
12 | ## Overview
13 |
14 | This project focuses on creating a visually appealing checkbox toggle with accompanying text options. The toggle design incorporates custom styling, including animations and transitions, to enhance user interaction.
15 |
16 | ## Features
17 |
18 | - Custom checkbox toggle design
19 | - Smooth transitions and animations
20 | - Responsive layout
21 |
22 | ## Project Structure
23 |
24 | The project consists of HTML and CSS files:
25 |
26 | - `index.html`: Contains the HTML structure for the checkbox toggle and associated text.
27 | - `styles.css`: Defines the custom styles for the checkbox toggle, including colors, shadows, and animations.
28 |
29 | ## Usage
30 |
31 | To use the custom checkbox toggle in your project:
32 |
33 | 1. Clone or download the project repository.
34 | 2. Copy the HTML code from `index.html` and integrate it into your HTML file.
35 | 3. Copy the CSS code from `styles.css` and integrate it into your CSS file or style section.
36 |
37 | ## Support and Connect
38 |
39 | For more updates on my #100DaysOfCode challenge and other coding projects, you can:
40 |
41 | - [Join my Telegram channel](https://t.me/CodeWithAarzoo) for the latest source code updates.
42 | - [Connect with me on Twitter](https://t.co/3ZmX6pBLnv) for discussions and collaborations.
43 |
44 | Let's connect and code together!
45 |
46 | ## License
47 |
48 | This project is licensed under the [MIT License](LICENSE).
49 |
50 | ---
51 |
52 | Thank you for checking out my #100DaysOfCode project! If you have any questions or suggestions, feel free to reach out. Happy coding!
53 |
--------------------------------------------------------------------------------
/[ Day 37 ] - Animated 3D Tree Loader/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | body {
8 | display: flex;
9 | align-items: center;
10 | justify-content: center;
11 | min-height: 100vh;
12 | background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
13 | }
14 |
15 | .tree {
16 | position: relative;
17 | width: 50px;
18 | height: 50px;
19 | transform-style: preserve-3d;
20 | transform: rotateX(-20deg) rotateY(30deg);
21 | animation: treeAnimate 5s linear infinite;
22 | }
23 |
24 | @keyframes treeAnimate {
25 | 0% {
26 | transform: rotateX(-20deg) rotateY(360deg);
27 | }
28 |
29 | 100% {
30 | transform: rotateX(-20deg) rotateY(0deg);
31 | }
32 |
33 | }
34 |
35 | .tree div {
36 | position: absolute;
37 | top: -50px;
38 | left: 0;
39 | width: 100%;
40 | height: 100%;
41 | transform-style: preserve-3d;
42 | transform: translateY(calc(25px * var(--x))) translateZ(0px);
43 | }
44 |
45 | .tree div.branch span {
46 | position: absolute;
47 | top: 0;
48 | left: 0;
49 | width: 100%;
50 | height: 100%;
51 | background: linear-gradient(90deg, #69c069, #77dd77);
52 | clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
53 | border-bottom: 5px solid #00000019;
54 | transform-origin: bottom;
55 | transform: rotateY(calc(90deg * var(--i))) rotateX(30deg) translateZ(28.5px);
56 | }
57 |
58 | .tree div.stem span {
59 | position: absolute;
60 | top: 110px;
61 | left: calc(50% - 7.5px);
62 | width: 15px;
63 | height: 50%;
64 | background: linear-gradient(90deg, #bb4622, #df7214);
65 | border-bottom: 5px solid #00000019;
66 | transform-origin: bottom;
67 | transform: rotateY(calc(90deg * var(--i))) translateZ(7.5px);
68 | }
69 |
70 | .shadow {
71 | position: absolute;
72 | top: 0;
73 | left: 0;
74 | width: 100%;
75 | height: 100%;
76 | background: rgba(0, 0, 0, 0.4);
77 | filter: blur(20px);
78 | transform-style: preserve-3d;
79 | transform: rotateX(90deg) translateZ(-65px);
80 | }
--------------------------------------------------------------------------------
/[ Day 26 ] - Animated Eye Toggle Switch/README.md:
--------------------------------------------------------------------------------
1 | # Animated Eye Toggle
2 |
3 | This project is part of Day 26 of the #100DaysOfCode Challenge.
4 |
5 | This project showcases an animated eye toggle created using HTML and CSS. The toggle switch features an eye that opens and closes as the switch is toggled on and off.
6 |
7 | ## Preview
8 |
9 |
10 |
11 |
12 |
13 | This preview showcases the animated eye toggle switch in action.
14 |
15 | ## Download Full Source Code
16 |
17 | You can download the full source code for this project from the following link: [Download Source Code](https://t.me/CodeWithAarzoo)
18 |
19 | ## Features
20 |
21 | - Interactive eye toggle switch
22 | - Smooth animations and transitions
23 | - Stylish design with gradient backgrounds and shadow effects
24 |
25 | ## Installation
26 |
27 | 1. Clone the repository: `git clone https://github.com/withaarzoo/100-Days-of-Code/tree/main/%5B%20Day%2026%20%5D%20-%20Animated%20Eye%20Toggle%20Switch.git`
28 | 2. Open `index.html` in your web browser
29 |
30 | ## Usage
31 |
32 | Simply click on the eye toggle switch to see the eye open and close. The animation is triggered by toggling the switch on and off.
33 |
34 | ## Customization
35 |
36 | - Modify the CSS variables in the `style.css` file to change the size and colors of the eye toggle.
37 | - Experiment with different animations and effects by adjusting the keyframes in the CSS file.
38 |
39 | ## License
40 |
41 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
42 |
43 | ## Credits
44 |
45 | This code snippet has been crafted by [Aarzoo](https://twitter.com/withaarzoo).
46 |
47 | ## Support and Contact
48 |
49 | For any inquiries or assistance regarding this project, feel free to reach out to the developer, Aarzoo, via [Bento](https://bento.me/withaarzoo).
50 |
51 | Enjoy coding and have fun with your animated eye toggle switch 👁️✨
52 |
53 | ---
54 |
55 | Enjoy using the animated eye toggle switch! If you have any questions or suggestions, please feel free to reach out.
56 |
--------------------------------------------------------------------------------
/[ Day 35 ] - Animated Cube Wheel Loader/README.md:
--------------------------------------------------------------------------------
1 | # Animated Cube Wheel Loader
2 |
3 | This project is part of day 35 of the #100DaysOfCode Challenge.
4 |
5 | This is a simple HTML and CSS project that demonstrates an animated cube wheel loader. The project can be used as a preloader on websites, applications, and other digital products to indicate loading progress.
6 |
7 | ## Preview
8 |
9 |
10 |
11 |
12 |
13 | This preview showcases the animated cube wheel loader in action.
14 |
15 | ## Download Full Source Code
16 |
17 | You can download the full source code for this project from the following link: [Download Source Code](https://t.me/CodeWithAarzoo)
18 |
19 | ## Usage
20 |
21 | You can use this project in your web development projects to indicate loading progress. You can easily incorporate it into your website or application by adding the HTML and CSS code.
22 |
23 | To use the project:
24 |
25 | - Clone the project or download the ZIP file.
26 | - Extract the files to a folder on your computer.
27 | - Open the `index.html` file in your web browser to see the animated cube wheel loader.
28 |
29 | ## Customization
30 |
31 | You can customize the project to suit your needs by modifying the CSS code. You can change the color of the loader, adjust the size of the cubes, and modify the animation duration and timing function.
32 |
33 | ## License
34 |
35 | This project is licensed under the MIT License. See the LICENSE file for details.
36 |
37 | I hope this README provides a clear and informative overview of the animated cube loader code!
38 |
39 | ## Credits
40 |
41 | This code snippet has been crafted by [Aarzoo](https://twitter.com/withaarzoo).
42 |
43 | ## Support and Contact
44 |
45 | For any inquiries or assistance regarding this project, feel free to reach out to the developer, Aarzoo, via [Bento](https://bento.me/withaarzoo).
46 |
47 | Enjoy coding and have fun with your animated cube wheel loader ⚙️✨
48 |
49 | ---
50 |
51 | Enjoy using the animated cube wheel loader ! If you have any questions or suggestions, please feel free to reach out.
52 |
--------------------------------------------------------------------------------
/[ Day 19 ] - Animated Sleeping Cat/README.md:
--------------------------------------------------------------------------------
1 | # Animated Sleeping Cat
2 |
3 | This project is part of Day 19 of the #100DaysOfCode Challenge.
4 |
5 | This project showcases an animated sleeping cat created using HTML and CSS. It's a fun and creative way to explore front-end development and animation techniques.
6 |
7 | ## Preview
8 |
9 |
10 |
11 |
12 |
13 | This preview showcases the animated sleeping cat in action.
14 |
15 | ## Download Full Source Code
16 |
17 | You can download the full source code for this project from the following link: [Download Source Code](https://t.me/CodeWithAarzoo)
18 |
19 | ## Features
20 |
21 | - **HTML Structure**: The HTML file provides the structure for the sleeping cat, including its ears, eyes, nose, mouth, body, tail, and speech bubble.
22 | - **CSS Styling**: The CSS file contains styles for each element of the cat, including positioning, colors, and animations for a realistic sleeping effect.
23 | - **Animations**: Various animations are applied to elements such as the mouth, body, speech bubble, and shadow to create a lively and engaging scene.
24 |
25 | ## Usage
26 |
27 | To use this project:
28 |
29 | 1. Clone or download the source code from [here](https://t.me/CodeWithAarzoo).
30 | 2. Open the HTML file in a web browser to view the animated sleeping cat.
31 | 3. Feel free to customize the code to create your own variations or incorporate it into your projects.
32 |
33 | ## Contributing
34 |
35 | Feel free to contribute to this project by opening issues or creating pull requests. Your contributions are welcome!
36 |
37 | ## License
38 |
39 | This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
40 |
41 | ## Support and Contact
42 |
43 | For any inquiries or assistance regarding this project, feel free to reach out to the developer, Aarzoo, via [Bento](https://bento.me/withaarzoo).
44 |
45 | Enjoy coding and have fun with your animated sleeping cat 😺💤✨
46 |
47 | ---
48 |
49 | Enjoy using the Neumorphism Loader! If you have any questions or suggestions, please feel free to reach out.
50 |
--------------------------------------------------------------------------------
/[ Day 9 ] - Animated Cute Puppy/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Animated Cute Puppy
10 |
11 |
12 |
13 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/[ Day 5 ] - Hand Scanning Animation/README.md:
--------------------------------------------------------------------------------
1 | # Hand Scanning Animation Project
2 |
3 | This project is part of the Day 5 challenge of the #100DaysOfCode initiative by **[Aarzoo](https://bento.me/withaarzoo)**. It demonstrates an animated hand scanning effect using HTML and CSS. You can find the source code for this project on **[CodeWithAarzoo Telegram Channel](https://t.me/CodeWithAarzoo)**.
4 |
5 | ## Overview
6 |
7 | The hand scanning animation project is a simple yet visually appealing demonstration of CSS animations. It creates an illusion of a hand scanning process with lines moving up and down, representing the progress of the scan.
8 |
9 | ## Preview
10 |
11 |
12 |
13 |
14 |
15 | This preview showcases the animated tab bar in action.
16 |
17 | ## Features
18 |
19 | - Realistic hand scanning animation effect.
20 | - Utilizes CSS animations for smooth and engaging visuals.
21 | - Minimalistic HTML structure for easy understanding.
22 |
23 | ## Usage
24 |
25 | To use this project, simply clone or download the source code from the **[CodeWithAarzoo Telegram Channel](https://t.me/CodeWithAarzoo)**. You can then open the `index.html` file in your web browser to view the animation.
26 |
27 | ```bash
28 | git clone https://t.me/CodeWithAarzoo.git
29 | ```
30 |
31 | ## Project Structure
32 |
33 | - **index.html:** Contains the HTML structure of the webpage.
34 | - **style.css:** Contains the CSS styles and animations for the hand scanning effect.
35 | - **hand_01.png:** Image asset used for the hand scanning animation.
36 | - **hand_02.png:** Image asset used for the hand scanning animation.
37 | - **lines.png:** Image asset used for the scanning lines animation.
38 | - **points.png:** Image asset used for the scanning points animation.
39 |
40 | ## Contributing
41 |
42 | Contributions to this project are welcome! If you have any suggestions, improvements, or feature requests, feel free to create an issue or submit a pull request.
43 |
44 | ## Contact
45 |
46 | For any inquiries or feedback regarding this project, you can contact Aarzoo through **[bento.me](https://bento.me/withaarzoo)**.
47 |
48 | Let's continue learning and coding together! 🚀
49 |
--------------------------------------------------------------------------------
/[ Day 39 ] - Glassmorphism Loader/style.css:
--------------------------------------------------------------------------------
1 | /* Reset default margin, padding, and box-sizing */
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | }
7 |
8 | /* Styling for the body */
9 | body {
10 | /* Background gradient */
11 | background: #000046;
12 | /* fallback for old browsers */
13 | background: -webkit-linear-gradient(to right, #1CB5E0, #000046);
14 | /* Chrome 10-25, Safari 5.1-6 */
15 | background: linear-gradient(to right, #1CB5E0, #000046);
16 | /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
17 | /* Centering content vertically and horizontally */
18 | height: 100vh;
19 | display: flex;
20 | justify-content: center;
21 | align-items: center;
22 | }
23 |
24 | /* Styling for the loader container */
25 | .loader {
26 | /* Centering content vertically and horizontally */
27 | position: relative;
28 | display: flex;
29 | justify-content: center;
30 | align-items: center;
31 | }
32 |
33 | /* Styling for the loader pseudo-element */
34 | .loader::before {
35 | content: "";
36 | /* Glassmorphism effect */
37 | background: rgba(255, 255, 255, 0);
38 | backdrop-filter: blur(8px);
39 | position: absolute;
40 | width: 140px;
41 | height: 55px;
42 | z-index: 20;
43 | border-radius: 0 0 10px 10px;
44 | border: 1px solid rgba(255, 255, 255, 0.274);
45 | border-top: none;
46 | box-shadow: 0 15px 20px rgba(0, 0, 0, 0.082);
47 | animation: anim2 2s infinite;
48 | }
49 |
50 | /* Styling for the loader circles */
51 | .loader div {
52 | background: rgb(228, 228, 228);
53 | border-radius: 50%;
54 | width: 25px;
55 | height: 25px;
56 | z-index: -1;
57 | animation: anim 2s infinite linear;
58 | animation-delay: calc(-0.3s * var(--i));
59 | transform: translateY(5px);
60 | margin: 0.2em;
61 | }
62 |
63 | /* Keyframe animation for loader circles */
64 | @keyframes anim {
65 |
66 | 0%,
67 | 100% {
68 | transform: translateY(5px);
69 | }
70 |
71 | 50% {
72 | transform: translateY(-65px);
73 | }
74 | }
75 |
76 | /* Keyframe animation for loader pseudo-element */
77 | @keyframes anim2 {
78 |
79 | 0%,
80 | 100% {
81 | transform: rotate(-10deg);
82 | }
83 |
84 | 50% {
85 | transform: rotate(10deg);
86 | }
87 | }
--------------------------------------------------------------------------------
/[ Day 32 ] - Animated Pencil Loader2/README.md:
--------------------------------------------------------------------------------
1 | # Pencil Loader
2 |
3 | This project is part of Day 32 of the #100DaysOfCode Challenge.
4 |
5 | This is an HTML and CSS code for a pencil loader animation. The loader consists of a pencil with three different-colored circular bodies, an eraser, and a point.
6 |
7 | ## Preview
8 |
9 |
10 |
11 |
12 |
13 | This preview showcases the animated pencil loader in action.
14 |
15 | ## Download Full Source Code
16 |
17 | You can download the full source code for this project from the following link: [Download Source Code](https://t.me/CodeWithAarzoo)
18 |
19 | ## Prerequisites
20 |
21 | To run this code, you will need a web browser that supports SVGs.
22 |
23 | ## Installing
24 |
25 | You can download the source code directly or clone the repository using the following command:
26 |
27 | ``` bash
28 | git clone https://github.com/withaarzoo/100-Days-of-Code/tree/main/%5B%20Day%2032%20%5D%20-%20Animated%20Pencil%20Loader2.git
29 | ```
30 |
31 | ## Usage
32 |
33 | To use the pencil loader, simply open the index.html file in your web browser. You can also copy and paste the code into your own HTML and CSS files and modify it as necessary.
34 |
35 | ## Customization
36 |
37 | You can customize the size of the loader by modifying the width and height properties in the .pencil CSS class. You can also change the colors of the loader by modifying the stroke and fill properties in the .pencil__body1, .pencil__body2, .pencil__body3, .pencil__eraser-skew, .pencil__point, and .pencil__stroke CSS classes.
38 |
39 | ## License
40 |
41 | This code is provided under the MIT License. Feel free to use and modify it for your own projects. See the [LICENSE](LICENSE) file for more details.
42 |
43 | ## Credits
44 |
45 | This code snippet has been crafted by [Aarzoo](https://twitter.com/withaarzoo).
46 |
47 | ## Support and Contact
48 |
49 | For any inquiries or assistance regarding this project, feel free to reach out to the developer, Aarzoo, via [Bento](https://bento.me/withaarzoo).
50 |
51 | Enjoy coding and have fun with your animated pencil loader ✏️✨
52 |
53 | ---
54 |
55 | Enjoy using the animated pencil loader! If you have any questions or suggestions, please feel free to reach out.
56 |
--------------------------------------------------------------------------------
/[ Day 1 ] - Animated Tab Bar/readme.md:
--------------------------------------------------------------------------------
1 | # Animated Tab Bar
2 |
3 | This project features an animated tab bar developed by Aarzoo as part of the 100 Days of Code challenge. It creates a visually appealing tab interface with dynamic animations using HTML and CSS.
4 |
5 | ## Preview
6 |
7 |
8 |
9 |
10 |
11 | This preview showcases the animated tab bar in action.
12 |
13 | ## How to Use
14 |
15 | 1. Clone or download the repository.
16 | 2. Open the `index.html` file in a web browser.
17 |
18 | ## File Structure
19 |
20 | - `index.html`: Contains the HTML structure for the animated tab bar.
21 | - `style.css`: Includes the CSS styles for the tab bar animations and appearance.
22 | - `image/`: Directory containing SVG images used as icons for the tab labels.
23 |
24 | ## HTML Structure
25 |
26 | - The `index.html` file consists of a basic HTML structure with a viewport meta tag and a link to the external CSS file (`style.css`).
27 | - Inside the `` tag, there's a container `
` with the class `phone`, representing the phone frame.
28 | - Within the phone container, there are radio input elements (``) for tab selection, labeled with icons using `
9 | 
25 |