Amazon Frontend Clone

A static frontend clone of the Amazon.com homepage. This project replicates the core layout and visual styling of the desktop interface using HTML5 and vanilla CSS3. It focuses on Flexbox layouts, navigation structure, and component positioning.

✨ Features

• Responsive Navbar: Includes the logo, delivery location, search bar, language selector, and account options.
• Hero Section: Large featured background image with a "Call to Action" overlay.
• Product Grid: A multi-row flexible grid layout displaying various shopping categories (Health, Electronics, Clothing, etc.).
• Footer: A detailed four-part footer including "Back to Top", links, and language settings.
• Hover Effects: CSS hover states on navigation items and borders to mimic the interactive feel of the real site.
• Icons: Integrated Font Awesome for UI icons (Cart, Search lens, Menu bars).

🛠️ Tech Stack

• HTML5: Semantic structure.
• CSS3: Styling, Box Model, and Flexbox layout.
• Font Awesome: For icons (CDN link included in HTML).

🚀 Getting Started

To view this project on your local machine, follow these steps:

1. Prerequisites

You need a web browser (Chrome, Firefox, Edge, etc.) and a text editor (VS Code, Notepad++, etc.) if you wish to edit the code.

2. File & Image Setup

Important: This is a static site. For the images to load correctly, you must download images and save them with the exact filenames listed below in the same folder as your index.html.

Project Structure:

/Amazon-Clone
│
├── index.html        <-- Main HTML file
├── style.css         <-- Main CSS file
├── amazon_logo.png   <-- Transparent Amazon logo
├── heroimage.jpg     <-- Large banner background
├── flag.jpg          <-- Small US flag icon
├── box1.jpg          <-- Image for Health & Personal Care
├── box2.jpg          <-- Image for Home Decor
├── box3.png          <-- Image for Clothing (Note: .png extension)
├── box4.jpg          <-- Image for Electronics
├── box5.jpg          <-- Image for Toys
├── box6.jpg          <-- Image for Beauty Care
├── box7.jpg          <-- Image for Supplements
├── box8.jpg          <-- Image for Footwear
├── box9.jpg          <-- Image for Smartphones
├── box10.jpg         <-- Image for Stationary
├── box11.jpg         <-- Image for Amazon Pay
└── box12.jpg         <-- Image for MiniTv

3. Running the Project

1. Clone this repository or download the ZIP file.
2. Ensure all image assets listed above are present in the root directory.
3. Open index.html in your web browser.
4. (Optional) If using VS Code, use the Live Server extension for real-time updates.

🔮 Future Improvements

• Media Queries: Add @media rules to make the layout fully responsive for mobile and tablet devices.
• JavaScript: Add functionality to the search bar and image carousel.
• Dropdowns: Create actual dropdown menus for the "Sign in" and "Language" hover states.

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

---

Disclaimer: This project is for educational purposes only. All logos, trademarks, and design assets are property of Amazon.com, Inc.