Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qc20/solar-system
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
Last synced: 6 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/qc20/solar-system
- Owner: QC20
- Created: 2023-07-13T22:31:42.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-18T09:55:06.000Z (over 1 year ago)
- Last Synced: 2023-07-18T10:43:29.374Z (over 1 year ago)
- Language: HTML
- Homepage:
- Size: 1.95 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Solar System Animation
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
## Structure
The code is structured as follows:
- The HTML file (`index.html`) provides the basic structure of the webpage. It includes a `
` element with the class `container` that acts as the main container for the animation. Inside this container, there are three nested `` elements representing the sun, Earth, and moon.
- The CSS styles are defined in the `` section within the `<head>` of the HTML file. The styles define the appearance, positioning, and animation properties for each element.
## Special Features
1. **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.
2. **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.
3. **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.
## Usage
To use this code snippet, follow these steps:
1. Clone this repository to your local machine or download the `index.html` file directly.
2. Open the `index.html` file in a web browser.
3. 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.
## Credits
This code snippet was created by [your name].