This repository contains a simple HTML and CSS code snippet that creates an animated representation of the solar system. It displays the sun, Earth, and a moon orbiting around it, along with a larger planet resembling Jupiter.
https://github.com/QC20/Solar-System/assets/36644388/b4281bc9-f147-4d8f-947f-635c84e013eb
The code is structured as follows:
The HTML file (index.html) provides the basic structure of the webpage. It includes a <div> element with the class container that acts as the main container for the animation. Inside this container, there are three nested <div> elements representing the sun, Earth, and moon.
The CSS styles are defined in the <style> section within the <head> of the HTML file. The styles define the appearance, positioning, and animation properties for each element.
Animation: The solar system animation is achieved using CSS keyframe animations. The Earth orbits around the sun, and the moon orbits around the Earth. The animation is set to loop infinitely and rotates the elements to give a sense of motion.
Realistic Design: The sizes and colors of the elements are chosen to represent the relative scale of the sun, Earth, and moon in a simplified manner. The sun is depicted as a yellow circle, while the Earth is a larger aqua-colored circle with a smaller silver-colored circle representing the moon.
Responsiveness: The animation is designed to be responsive and adapt to different screen sizes. The container element is centered on the screen using flexbox, and its dimensions are defined using relative units to ensure proper scaling.
To use this code snippet, follow these steps:
Clone this repository to your local machine or download the index.html file directly.
Open the index.html file in a web browser.
The animation should start automatically, displaying the solar system with the Earth and moon orbiting around the sun.
Feel free to modify the code and customize it according to your needs. You can adjust the sizes, colors, animation duration, or add more elements to the animation.
This code snippet was created by [your name].