Space_X_Clone

• 

**Inspiration

I have always been inspired by SpaceX’s futuristic design, missions, and UI style. Their website has a clean, cinematic, high-contrast look, and I wanted to challenge myself to recreate that feel using only pure HTML, CSS, and JavaScript.

This project helped me understand how modern landing pages use full-screen hero sections, animations, smooth scrolling, and responsive layouts to create an immersive experience.

**How I Built It

The project is structured into:

/css → Styling (main.css + animations) /js → Interactivity (smooth scroll, menu toggle) /img → Backgrounds + rockets + mission images index.html falcon9.html falcon-heavy.html dragon.html

**Key features:

Fullscreen hero sections with cinematic background images

Smooth scroll navigation

SpaceX-inspired typography and dark theme

Multiple pages for Falcon 9, Falcon Heavy, and Dragon

Responsive layout for desktops and mobile devices

I did not use any UI frameworks — the goal was to learn raw front-end development.

**What I Learned

Structuring multi-page static websites

Creating SpaceX-style minimal UI

Using high-quality media responsibly for performance

Smooth scrolling and subtle animations

Organizing assets into css / js / img folders

Designing landing pages with hero sections + overlaid text

**Challenges I Faced

Getting full-screen background images to work correctly across devices

Making the text readable while maintaining the dark cinematic aesthetic

Keeping pages responsive without using Bootstrap or Tailwind

Managing image optimization so the site loads quickly

**Next Steps

Add animations using GSAP / ScrollTrigger

Add product detail pages for rockets

Deploy the site using GitHub Pages / Vercel

Create a 3D rocket animation using Three.js

Built With

• css3
• design
• html5
• javascript
• space-themed
• ui/ux
• web