This Milky Way Galaxy and Solar System project is an interactive front-end web development showcase created by Kashish Jain. Built using HTML5 and CSS3, the project focuses on bringing astronomy concepts to life through smooth visual motion—utilizing CSS Transform and Transition properties to simulate planetary orbits, hover rotations, scale expansions, and interactive spatial cards.
HTML establishes the structured blueprint of the application, organizing key sections such as galactic introductions, planetary specs, celestial scale comparisons, and orbit pathways. CSS handles the visual styling, using dynamic properties like transform: rotate(), scale(), translate(), and transition: all to deliver a lively, engaging learning experience that helps users understand planetary motion and cosmic structures.
Detailed Platform Structure & Content Sections :
1. Header & Navigation Hub
Features the platform branding alongside a sticky navigation menu (Home, Milky Way, Planets, Orbital Mechanics, and Exploration) for quick section jumping across the site.
2. Hero & Cosmic Entrance
Serves as the main welcome banner, featuring full-bleed space visuals, a call-to-action prompt, and interactive elements that scale and rotate on hover to immerse visitors in the universe immediately.
3. Milky Way Galaxy Section
Outlines the structure, scale, and origin of our home galaxy—explaining its spiral arms, galactic core, billions of stellar systems, and the position of our Solar System within the Orion Arm.
4. Solar System & Planetary Showcase
Highlights the Sun and eight primary planets (Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune) in an organized, card-based grid layout. Each planet card utilizes CSS transforms to zoom, elevate, or spin when hovered over.
5. Orbital Mechanics & Interactive Motion
Demonstrates planetary rotation and orbital movement using CSS keyframes and transform origins, providing a visual model of how celestial bodies move around the Sun under gravity.
6. Contact & Educational Footer
Provides access to reference links, space agency resources (NASA/ISRO), copyright details, and social links to connect visitors with further learning tools.