A responsive Amazon.in homepage clone using HTML & CSS
A responsive clone of the Amazon India landing page using only HTML and CSS
This project is a static clone of the Amazon website's landing page built using HTML and CSS. It replicates the layout and design aesthetics of Amazon’s homepage, including navigation bars, search bar, product sections, and footer. The purpose of the project is to understand web page structuring, CSS styling, responsive layouts, and how real-world websites are visually and functionally organized.
To replicate the Amazon landing page interface using HTML5 and CSS3 while mastering core frontend development concepts like layout structuring, responsiveness, and visual hierarchy. This project simulates how large-scale eCommerce UIs are structured without relying on JavaScript.
This project recreates a simplified version of Amazon's Indian homepage with a professional and responsive layout. It includes:
- Navigation bar with logo, search, and user/cart sections
- Hero section with banner background
- A 4-box grid displaying product categories
- Reusable UI components
- Fully responsive layout using Flexbox
This is an ideal portfolio project that showcases attention to design detail, pixel-perfect layouting, and strong foundational knowledge of web technologies.
📌 This Amazon Landing Page Clone was built with a focus on HTML structure, CSS styling, and responsive layouts using Flexbox. No frameworks or libraries were used — everything was written from scratch.
- 📦 Structured and semantic HTML5
- 🎨 CSS-only design (no JS!)
- 📱 Mobile-friendly responsiveness
- 🖥️ Desktop-friendly fluid layout
| Feature | Description |
|---|---|
| 🔎 Navigation Bar | Logo, search bar, cart, sign-in, and location block |
| 🖼️ Hero Section | Background image banner mimicking Amazon’s promotional UI |
| 🧱 Product Grid Boxes | 4-category sections for product types with images |
| 🧰 Footer Section | Multiple link lists just like real Amazon footers |
| 📱 Responsive Layout | Works well on both desktop and mobile views |
| ♻️ Reusable UI Elements | Components can be used across other projects (great for practice!) |
- Showcases real-world layout replication skills
- Demonstrates attention to visual design & UI fidelity
- Can be extended into a React/JS-enabled version
- Perfect base for adding interactivity & animation
- Indicates clean code practices and frontend discipline
Feature Description
🧭 Navigation Bar - Fully styled navbar with logo, search, and cart
🖼️ Hero Section Large - promotional background with engaging visuals
📦 Product Grid - 4-section grid with category titles and images
📱 Responsive Design - Flexbox-based responsiveness for mobile/tablet compatibility
🧩 Reusable Components - Clean modular structure for reuse in future projects
🎨 CSS-Only Styling - Designed with only HTML & CSS (no JavaScript or frameworks used)
| Technology | Purpose |
|---|---|
| HTML5 | Structuring the webpage |
| CSS3 | Styling & responsiveness |
| Flexbox | Layout management |
| VS Code | Code editor |
| GitHub | Code hosting & versioning |
=
🏁 Conclusion The Amazon Landing Page Clone is more than just a static site — it's a demonstration of frontend engineering discipline, UI/UX precision, and layout mastery using pure HTML and CSS. It represents your ability to mimic enterprise-level interfaces, think in design systems, and implement them using clean, maintainable code