Interactive css astronomy visualization with celestial objects

Interactive css astronomy visualization with celestial objects is the website designed. HTML is the standard markup language for creating the structure and content of web pages. It defines the elements and their relationships within the page. CSS is a style sheet language used to describe the presentation and formatting of a document written in HTML. It is responsible for the visual appearance of elements on the web page.Text Editor A text editor or integrated development environment (IDE) is used to write and edit the HTML and CSS code. Popular examples include Visual Studio Code, Sublime Text, Atom, and WebStorm. Web Browser To view the final result of the HTML and CSS code, a web browser is required. Browsers such as Google Chrome, Mozilla Firefox, Safari, or Microsoft Edge render the HTML, apply the CSS styles, and display the web page. By using these tools and technologies and making changes to the CSS styles, the following visual changes will occur on the web page are Background Color: The background-color property sets the background color of the body element to black (#000000).
Sun Styling: The sun class is applied to a div element that represents the sun. It has a width and height of 100 pixels, a yellow background color (#ffdd00), and is positioned in the center of the page using position: absolute and transform: translate(-50%, -50%). It also has a spinning animation effect using animation: spin.
Planet Styling: Each planet (Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune) is represented by a div element with a corresponding class. They are positioned in the center of the page and have different sizes and background colors. Each planet has an animation that simulates its orbit around the sun using animation: orbit-X, where X is the name of the orbit animation specific to each planet.
Orbit Styling: The orbits of the planets are represented by div elements with the class orbit. They have a width and height of 200 pixels, a dashed white border, and are positioned in the center of the page. The planets’ animations make them appear to move along these orbits.
Animation Keyframes: Keyframe animations (@keyframes) are used to define the rotation and orbit animations