Welcome to Day 03 of the 100 Days CSS Challenge! This project, "The Pyramide," recreates a visually engaging animation of a pyramid and its shadow using pure CSS. While not as challenging as building the real pyramids in Egypt, creating the shadow path is a tricky part of this challenge.
Check out the live preview of the project:
To get a local copy of this project up and running, follow these steps:
- Clone the repository:
git clone https://github.com/Yashi-Singh-1/Day-03-The-Pyramide.git - Navigate to the project directory:
cd Day-03-The-Pyramide - Open the
index.htmlfile in your preferred browser:open index.html
Once you have the project up and running, you can view the pyramid animation. The animation simulates a day and night cycle, showing the transition of the sky color, the movement of the sun, and the shadow cast by the pyramid.
The HTML structure is simple and consists of a main container with nested div elements representing different parts of the scene (sky, sun, pyramid sides, ground, and shadow).
The CSS handles the visual representation and animations of the elements. Keyframes are used to create smooth transitions for the sky, sun, ground, pyramid shades, and shadow.
- Name: Day 03: The Pyramide
- Description: Not as challenging as the real pyramids in Egypt, but the shadow path is not easy.
- Challenge URL: 100 Days CSS - Day 03
This challenge focuses on mastering CSS animations and transformations. By completing this challenge, you will gain a deeper understanding of CSS properties such as clip-path, keyframes, and cubic-bezier timing functions.
- GitHub: Yashi Singh
- LinkedIn: Yashi Singh : https://www.linkedin.com/in/yashi-singh-b4143a246/
Feel free to reach out if you have any questions or suggestions!
This project is part of the 100 Days CSS Challenge. Special thanks to the creators of the challenge for providing a platform to improve CSS skills through fun and engaging projects.