neon-universe
Kanwar VeerCreate a 5-page website about the "History of the Universe" with modern UI/UX design. Include a navigation bar consistent across all pages. ## Page Structure: ### Page 1: Home (Index) - Hero section with animated cosmic background - Title: "History of the Universe" - Tagline: "From the Big Bang to the End of Time" - Brief overview of the cosmic journey (50 words) - CTA buttons: "Start Journey" β links to Page 2 - Featured image/video of deep space - Quick stats: 13.8 billion years, 200 billion galaxies, 1 septillion stars ### Page 2: The Beginning (Big Bang & Early Universe) - Timeline: 13.8 billion years ago - Subtopics: - The Singularity - Cosmic Inflation (first 10^-32 seconds) - Formation of first particles (quarks, electrons) - Recombination & Cosmic Microwave Background - Interactive infographic: Timeline slider showing first 380,000 years - Fun fact cards (3 cards with hover effects) - Image: CMB map (WMAP/Planck style) ### Page 3: Cosmic Dawn (First Stars, Galaxies & Our Solar System) - Timeline: 400 million years ago to 4.6 billion years ago - Subtopics: - First stars (Population III stars) - First galaxies & black holes - Reionization era - Formation of the Milky Way - Birth of our Solar System - Image gallery (carousel or grid): Nebulas, early galaxies (James Webb images) - Sidebar: "Did you know?" facts ### Page 4: Life & Humans - Timeline: 3.7 billion years ago to present - Subtopics: - First life (prokaryotes) - Great Oxygenation Event - Cambrian Explosion - Dinosaurs rise & fall - Human evolution (Australopithecus β Homo Sapiens) - Agricultural Revolution to Modern Day - Visual: Evolutionary tree diagram (simplified) - Quote section: Carl Sagan, Neil deGrasse Tyson, or Brian Cox ### Page 5: The Future & End - Timeline: Present to 10^100 years from now - Subtopics: - Near future (next 1 billion years: Sun's evolution) - Heat Death of the Universe (Big Freeze) - Alternative theories: Big Rip, Big Crunch, Big Bounce - Proton decay & Black Hole era - Interactive slider: See the universe age at different future milestones - Poetic closing statement + "Our place in the cosmos" reflection - Share buttons for each theory (Twitter, LinkedIn) ## Navigation Requirements: - Fixed top navbar with logo (cosmic icon) + links to all 5 pages - Active page highlight - Breadcrumb navigation on each page (except home) - Footer with copyright, sources, and "Back to Top" button ## Visual Design Requirements (All Pages): - Dark theme background (deep space gradient: #0a0a2a to #1a1a3a) - Glassmorphism cards (backdrop-filter: blur, semi-transparent) - Subtle animated stars (CSS or canvas) - Smooth page transitions (fade effect when navigating) - Responsive layout (mobile + desktop) - Typography: Modern sans-serif (Inter, Poppins, or Space Grotesk) - Accent colors: Cosmic purple (#9b59b6), Nebula pink (#e84393), Starry gold (#f1c40f) ## Interactive Elements (Per Page): - Page 2: Scroll-triggered timeline - Page 3: Image lightbox on click - Page 4: Accordion for each evolutionary stage - Page 5: Interactive cosmic calendar (1 year = universe history) ## Technical Requirements: - HTML5, TailwindCSS (or plain modular CSS) - Vanilla JavaScript (no heavy frameworks) - Font Awesome or similar icon library - Intersection Observer for fade-in animations - Local storage for dark mode preference (optional) ## UX Requirements: - Loading spinner between page transitions - 404 page (custom cosmic-themed) - Sitemap page or footer links - Estimated reading time per page (displayed at top) - Print-friendly CSS (optional) ## Content Sources to Cite: - NASA, ESA, James Webb Space Telescope - Carl Sagan's "Cosmos" - Stephen Hawking's "A Brief History of Time" Deliver fully functional HTML/CSS/JS code in separate files (index.html, beginning.html, cosmic-dawn.html, life-and-humans.html, future.html) or as a single multi-page setup with routing. All links must work properly.
Comments (0)
Sign in to leave a comment
Architecture
No Services Diagrams Yet
Journey Through the Cosmos
Explore the History and Future of the Universe
Galaxy Map
Navigate the cosmos β click a star to explore
Hover over a star to discover its secrets
Journey Through the Cosmos
Explore the staggering scale of our universe, from the birth of time to the infinite frontier that awaits.
Years Since the Big Bang
Our universe began with an unimaginable explosion of energy and matter
Galaxies in the Observable Universe
Each one containing billions of stars, planets, and cosmic wonders
Stars in the Milky Way
Our home galaxy alone hosts hundreds of billions of stellar bodies
Infinite Possibilities
The future of the cosmos stretches endlessly before us
Explore the Universe
Five chapters spanning billions of years of cosmic history
Home
Your gateway to the cosmos and universe exploration
Beginning
The Big Bang and the birth of space and time
Cosmic Dawn
First stars, galaxies, and the light of creation
Life & Humans
From single cells to civilizations across Earth
Future & End
Dark energy, heat death, and the fate of all things
Explore the Universe Your Way
Hands-on tools to discover cosmic history through timelines, galleries, evolutionary trees, and more.
Timeline Slider
Slide through 13.8 billion years of cosmic history, from the Big Bang to the present day.
Nebula Gallery
Explore stunning imagery of nebulas, galaxies, and deep space captured across the cosmos.
Evolutionary Tree
Trace the branches of life from single-celled organisms to complex modern species.
Cosmic Calendar
Experience the entire history of the universe compressed into a single calendar year.
Design Philosophy & Features
Every detail is crafted to deliver an immersive cosmic journey, blending cutting-edge design with accessible, scientifically rich content.
Glassmorphism Design
Experience a frosted-glass aesthetic with translucent surfaces, subtle blurs, and layered depth that brings the cosmos to life on every screen.
Visual ExcellenceCosmic Animations
Immerse yourself in twinkling stars, rotating galaxies, and nebula pulsations crafted with smooth CSS keyframes and micro-interactions.
InteractiveResponsive Layout
Seamlessly adapts from desktop to mobile with fluid grids and touch-friendly navigation, ensuring an optimal experience on every device.
Mobile-FirstAccessible & Educational
WCAG 2.1 compliant with print-friendly views, keyboard navigation, and scientifically sourced content from NASA and ESA research.
WCAG 2.1Your Cosmic Journey Awaits
Whether you teach, learn, or simply wonder β the universe has something incredible waiting for you.
General User
Cosmic Explorer
Curious about the universe? Dive into an immersive journey from the Big Bang to the far future. Explore interactive visuals, share discoveries, and uncover the story of everything.
Start ExploringβEducator
Teaching Pioneer
Bring the cosmos into your classroom. Access scientifically sourced content from NASA and ESA, print-friendly layouts, and rich visuals perfect for engaging lectures and lesson plans.
View ResourcesβStudent
Knowledge Seeker
Working on a project or just fascinated by the stars? Interactive timelines, evolutionary trees, and cosmic calendars make complex concepts easy to understand and fun to explore.
Begin LearningβNavigate the History of the Universe
Follow the path from the Big Bang to the far future across five immersive chapters of cosmic discovery.
Home
Begin your cosmic journey with an interactive galaxy map and overview of the universe.
ExploreβThe Beginning
Explore the Big Bang, cosmic inflation, and the first 380,000 years of existence.
ExploreβCosmic Dawn
Witness the birth of first stars, galaxies, and our Solar System through stunning imagery.
ExploreβLife & Humans
Trace evolution from the first prokaryotes through the Cambrian Explosion to modern humans.
ExploreβThe Future & End
Peer into the far future: the Sun's demise, Heat Death, and alternative cosmic endings.
ExploreβQuick Navigation
Jump directly to any chapter of the cosmic story or access useful features
Start Your Journey Through the Cosmos
From the first spark of the Big Bang to the infinite possibilities of the far future β explore billions of years of cosmic history in one immersive experience.
No comments yet. Be the first!