This project is a simple and visually captivating representation of a city skyline that transitions between day and night, creating a dynamic and atmospheric effect. The project uses HTML and CSS to create a charming cityscape that changes colors and lighting as the day progresses.
-
citySkyline.html: This HTML file contains the structure of the city skyline, including the building layout and window configurations. -
citySkyline.css: The CSS file provides the styling for the city skyline. It defines the colors, shapes, and animations that create the day-night transition effect.
- Realistic day-night cycle effect with smooth color transitions.
- Creative use of CSS gradients and animations to simulate changing lighting conditions.
- Organized CSS code using custom properties (variables) for easy customization.
- Clone the repository to your local machine using Git or download the ZIP file.
- git clone (https://github.com/KhangMBui/City-Skyline.git)
- Open the project folder:
- cd changing-city-skyline
- Open the
citySkyline.htmlfile in your web browser to view the changing city skyline.
You can customize the city skyline by modifying the CSS file (citySkyline.css). Here are some customization options:
-
Adjust the colors of the sky, buildings, and windows by changing the CSS variables defined at the beginning of the CSS file.
-
Experiment with different building shapes and sizes to create your own unique cityscape.
-
Modify the animation timings and transitions to change the speed of the day-night cycle.
This project was created by Khang Bui, with the instruction of freeCodeCamp, as a creative exploration of HTML and CSS for web design.
Enjoy exploring the changing city skyline!