A responsive, pixel-perfect frontend replica of the Amazon e-commerce homepage, built entirely with HTML5, CSS3, and FontAwesome — no frameworks, no build tools, just clean, vanilla web code.
| Feature | Description |
|---|---|
| 🧭 Responsive Navigation Bar | Dynamic logo, delivery-location selector, search bar with dropdown, account list, returns & orders, and cart icon |
| 🖼️ Hero Section | Full-width promotional banner that instantly captures user attention |
| 🗂️ Dynamic Product Grids | Multiple responsive category cards — Home Appliances, Electronics, Baby Care, Automotive, Home Essentials & more |
| 📄 Dedicated About Page | A polished about.html page detailing the project goals and design philosophy |
| 📱 Fully Responsive | Fluid layouts built with CSS Flexbox & Grid that adapt seamlessly across desktop, tablet, and mobile |
| 🎨 Modern UI/UX | Amazon-authentic color palette, hover micro-interactions, and consistent visual hierarchy |
| 🔍 Interactive Search Bar | Styled category dropdown + search input with a prominent search icon |
| 🦶 Detailed Footer | Multi-column link sections and standard policy links for a complete, professional look |
This project follows a monolithic static frontend architecture — every asset (HTML, CSS, images) is served directly to the browser, keeping it simple to understand, instantly deployable, and easy to extend later with a backend.
graph TD
User[👤 User Browser] -->|HTTP GET Request| Host[⚡ Static Host / CDN]
Host -->|Serves HTML, CSS & Images| User
subgraph Frontend_Application
HTML[index.html · about.html] -->|Structures| UI[🖥️ User Interface]
CSS[style.css] -->|Styles & Layout| UI
IMG[🖼️ Image Assets] -->|Renders visuals| UI
FA[🔤 FontAwesome CDN] -->|Provides icons| UI
end
subgraph Rendering_Flow
User -->|Layout: Flexbox + Grid| UI
UI -->|Responsive breakpoints| Devices[💻 Desktop · 📱 Tablet · 📲 Mobile]
end
Host --> Frontend_Application
| Layer | Technology | Purpose |
|---|---|---|
| Structure | HTML5 | Semantic, accessible page markup |
| Styling | CSS3 | Flexbox & Grid layouts, animations, responsive breakpoints |
| Icons | FontAwesome 7.0.1 (CDN) | Scalable vector icons for the UI |
| Hosting | Any static host (GitHub Pages, Netlify, Vercel) | Serves the static assets |
- No frameworks or build steps — zero dependencies beyond the FontAwesome CDN, so the project runs anywhere instantly.
- Component-based CSS classes (e.g.,
.box,.navbar,.panel) keep the codebase modular and reusable. - Fluid image grids reuse the same
.box-image/.itempattern for consistent product cards. - Ready for full-stack growth — the static structure can be wired to any backend (Node.js, Django, etc.) without restructuring.
├── index.html # Main landing page (Home)
├── about.html # About Us page
├── style.css # Global stylesheet (Flexbox & Grid)
├── image.png # Amazon logo
├── hero.jpg # Hero banner image
└── *.jpg # Product & category images (a–l, img5–img20, etc.)
- A modern web browser (Chrome, Firefox, Edge, Safari)
- Optional: VS Code with the Live Server extension for live reload
-
Clone the repository:
git clone https://github.com/harshimysarla/Frontend-Ecommerce-Project.git
-
Navigate into the project:
cd Frontend-Ecommerce-Project -
Open the app — pick one:
- Option A: Double-click
index.htmlto open it directly in your browser. - Option B: Right-click
index.html→ Open with Live Server (VS Code) for auto-reload while developing.
- Option A: Double-click
Contributions are always welcome! Here's how you can help:
- 🍴 Fork the repository.
- 🌿 Create a feature branch:
git checkout -b feature/amazing-feature - 💾 Commit your changes:
git commit -m "Add amazing feature" - 🚀 Push to the branch:
git push origin feature/amazing-feature - 🔀 Open a Pull Request.
Found a bug or have a feature idea? Open an issue.
This project is licensed under the MIT License — see the LICENSE file for details.
Built with 💛 using pure HTML, CSS & FontAwesome