This repository hosts Cosmic Chronicles, a single-page website tracing the history, missions, and future vision of space exploration, from the first satellite to the dream of interstellar travel.
Cosmic Chronicles serves as an interactive timeline and gallery showcasing humanity's greatest achievements in space. It is designed to be fully responsive and visually striking, using a dark, gold-accented theme inspired by the cosmos.
Hero Section: A full-height, visually immersive header setting the tone for cosmic discovery.
Space Exploration Timeline: A responsive, alternating-side timeline marking crucial milestones from Sputnik to the James Webb Space Telescope.
Iconic Missions: A gallery of significant space missions (Apollo 11, Voyager 1, Chandrayaan 3) featuring interactive hover effects.
Legendary Astronauts: Dedicated cards highlighting the pioneers who ventured beyond Earth, including Yuri Gagarin, Kalpana Chawla, and Sunita Williams.
Future Frontier: Sections detailing upcoming goals like Mars Colonization and Asteroid Mining.
Pure CSS Smooth Scroll: Ensures smooth transitions between sections without relying on JavaScript.
This project is built using foundational web technologies, emphasizing clean, efficient code within a single HTML file.
HTML5: For semantic structure and content organization.
CSS3 (Inline <style>): For all styling, layout, and responsiveness.
Google Fonts: Utilizing Playfair Display (for titles) and Montserrat (for body text).
Font Awesome: Used for all decorative icons ().
This project is best viewed via its live Netlify or GitHub Pages deployment:
Live Demo URL: https://cosmic-chronicles-spy-in-shadows.netlify.app/ OR https://spy-in-shadows.github.io/Cosmic_Chronicles/
To view and edit the project locally:
Clone the repository:
git clone https://github.com/spy-in-shadows/Cosmic_Chronicles.git
Navigate to the project folder:
cd Cosmic_Chronicles
Open the file: Simply open the index.html file in your preferred web browser.
The design prioritizes a dark, high-contrast, professional aesthetic. All styling is contained within the style.css file. Responsive media queries ensure an optimal viewing experience across desktop, tablet, and mobile devices.
Feedback, suggestions, or contributions to enhance the timeline, mission data, or visual design are welcome! Please feel free to open an issue or submit a pull request.