https://github.com/yashi-singh-1/day-03-the-pyramide

The Pyramide: Not as challenging as the real pyramids in Egypt, but the shadow path is not easy.
https://github.com/yashi-singh-1/day-03-the-pyramide

animation css css3 front-end front-end-challenge frontend frontend-challenge frontend-development html html5 keyframes

Last synced: 4 days ago
JSON representation

The Pyramide: Not as challenging as the real pyramids in Egypt, but the shadow path is not easy.

• Host: GitHub
• URL: https://github.com/yashi-singh-1/day-03-the-pyramide
• Owner: Yashi-Singh-1
• Created: 2024-06-14T18:26:18.000Z (5 months ago)
• Default Branch: main
• Last Pushed: 2024-06-14T18:29:20.000Z (5 months ago)
• Last Synced: 2024-06-14T19:44:12.162Z (5 months ago)
• Topics: animation, css, css3, front-end, front-end-challenge, frontend, frontend-challenge, frontend-development, html, html5, keyframes
• Language: CSS
• Homepage:
• Size: 24.4 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Day 03: The Pyramide


Description

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.


Table of Contents



    
Description

    
Preview

    
Installation

    
Usage

    
Challenge Details

    
Author

    
Credits



Preview

Check out the live preview of the project:



Installation

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.html file in your preferred browser:

        
open index.html

    



Usage

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.


HTML Structure

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).


CSS Styling

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.


Challenge Details



    


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.


Author



    


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!


Credits

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.