Skip to content

Vishwajit-kamble/Amazon-clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

🛒 Amazon Clone Website

This is a front-end Amazon homepage clone created using pure HTML and CSS.
It was one of my early web development projects built to practice layouts, styling, flexbox, responsiveness, and UI design.

The project recreates the basic look and feel of Amazon’s homepage with navigation bars, search functionality UI, product sections, and footer components.


🚀 Features

  • Amazon-inspired homepage design
  • Responsive navigation bar
  • Search bar UI
  • Product cards section
  • Hero banner section
  • Footer section similar to Amazon
  • Hover effects and transitions
  • Flexbox-based layout
  • Beginner-friendly clean structure

🛠️ Technologies Used

  • HTML5
  • CSS3
  • Font Awesome Icons

📂 Project Structure

Amazon-Clone/
│── index.html
│── style.css
│── Photos/
│   ├── amazon_logo.png
│   ├── hero_image1.jpg
│   ├── box1_image.jpg
│   ├── box4_image.jpg
│   └── ...
│── README.md

🎨 Website Sections

🔹 Navigation Bar

Includes:

  • Amazon logo
  • Delivery location
  • Search bar
  • Sign in section
  • Returns & Orders
  • Shopping cart icon

🔹 Hero Section

A large banner section inspired by Amazon's homepage design.


🔹 Shopping/Product Section

Displays multiple product category cards like:

  • Clothes
  • Electronics
  • Gaming
  • Fashion
  • Office Furniture
  • Gadgets

🔹 Footer

Contains:

  • About links
  • Social links
  • Policies
  • Copyright section

📸 UI Highlights

✨ Hover Effects

Interactive hover animations are added on:

  • Navigation items
  • Product boxes
  • Footer links
  • Buttons

📱 Responsive Layout

The design uses Flexbox for proper alignment and structure.

🎯 Clean UI

Simple and beginner-friendly design inspired by Amazon.


⚙️ How to Run

1️⃣ Clone Repository

git clone https://github.com/your-username/amazon-clone.git

2️⃣ Open Project Folder

cd amazon-clone

3️⃣ Run Website

Open index.html in your browser.


📚 What I Learned

While building this project, I learned:

  • HTML page structuring
  • CSS styling
  • Flexbox layout system
  • Hover effects
  • Responsive UI basics
  • Website sectioning
  • Navbar and footer design
  • Using Font Awesome icons

🚀 Future Improvements

  • Add JavaScript functionality
  • Make the search bar functional
  • Add product pages
  • Add responsive mobile menu
  • Add shopping cart functionality
  • Connect backend/database
  • Improve responsiveness for all devices

👨‍💻 Author

Vishwajit Kamble

Passionate about:

  • Web Development
  • Python
  • Data Science
  • AI & Machine Learning

⚠️ Disclaimer

This project is made only for educational and practice purposes.
It is not affiliated with or endorsed by Amazon.


⭐ Support

If you like this project, consider giving it a ⭐ on GitHub!


About

I created a clone for amazon for practicing my skills in frontend development

Resources

Stars

1 star

Watchers

1 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors