A responsive SpaceX website clone built using HTML, CSS, and minimal JavaScript, focusing on clean UI, smooth layouts, and responsive design across devices.
This project demonstrates my understanding of frontend fundamentals, modern CSS techniques, and real-world website cloning skills.
Note: Preview image is stored inside the
screenshot-previewfolder.
- HTML5 – Semantic and accessible markup
- CSS3 – Flexbox, Grid, Media Queries
- JavaScript (Basic) – Countdown timer functionality
- Responsive Design – Mobile, Tablet & Desktop friendly
- Pixel-inspired SpaceX UI clone
- Fully responsive layout
- Multiple pages:
- Home
- Launches
- Mars
- Custom media queries for different sections
- Countdown timer using JavaScript
- Clean and organized project structure
SpaceX-clone/ │ ├── assets_spacex/ │ └── (images & assets) │ ├── screenshot-preview/ │ └── asset_0.jpeg │ ├── index.html ├── launches.html ├── mars.html │ ├── style.css ├── media-quary.css ├── launches.css ├── launches_media-query.css ├── mars.css ├── mars_media-quary.css │ ├── README.md ├── LICENSE
The website is optimized for:
- 📱 Mobile Devices
- 💻 Laptops & Desktops
- 🖥️ Large Screens
Each section uses separate media query files to maintain clean and scalable CSS.
- Improved HTML semantic structure
- Mastery of CSS Flexbox & Grid
- Practical use of media queries
- Real-world website cloning experience
- Better project organization & readability
- Add smooth animations using CSS / JS
- Improve accessibility (ARIA roles)
- Convert project into React version
- Optimize images for performance
Wednesday
Frontend Developer
- 📧 Email: ronitkumarsoni.cg@gmail.com
- 🌐 Portfolio:
- 💼 LinkedIn:
⭐ If you like this project, feel free to star the repository!