🥤 Pepsi Website Clone

A responsive, multi-page front-end clone of the Pepsi website — built with pure HTML5 and CSS3 to practice modern layout techniques, animations, and UI design.

🔗 Live Demo

https://muhammadabuhurair.github.io/pepsi-clone/

📸 Preview

✨ Features

• Multi-page structure — Home, Products, About, and Contact pages with consistent navigation
• Responsive design — Adapts across desktop, tablet, and mobile using CSS media queries
• Custom animations — Hover lifts on product cards, rotating icon circles, glassmorphism effects on forms and cards
• Contact page — Working form UI, embedded Google Map, FAQ section, and newsletter signup
• About page — Brand story section with stats counters and feature highlights
• Custom typography — Anton (display) + Montserrat (body) via @font-face and Google-style font pairing
• Icon integration — Font Awesome icons throughout (social links, feature checkmarks, category icons)

🗂️ Project Structure

pepsi-clone/
├── index.html
├── products.html
├── about.html
├── contact.html
├── css/
│   ├── style.css
│   ├── products.css
│   ├── about.css
│   └── contact.css
├── fonts/
│   └── Anton-Regular.ttf
├── images/
│   ├── logo.png
│   ├── hero_banner.png
│   ├── about-banner.jpg
│   ├── contact-banner.png
│   ├── product-banner.png
│   └── products/
│       ├── pepsi.png
│       ├── zero-sugar-pepsi.png
│       └── diet-pepsi.png
├── videos/
│   └── pepsi-video.mp4
└── README.md

🚀 Getting Started

1. Clone the repository

   git clone https://github.com/muhammadabuhurair/pepsi-clone.git

2. Navigate into the project folder

   cd pepsi-clone

3. Open index.html in your browser — no build tools or dependencies required.

🛠️ Built With

• HTML5 — Semantic markup
• CSS3 — Flexbox, Grid, media queries, custom @font-face
• Font Awesome 6 — Icon library (via CDN)

📋 Roadmap / Known Improvements

• Unify base font strategy across all pages (body text vs. display headings)
• Standardize background theme across pages
• Extract shared styles (@font-face, header, footer) into a single base.css
• Add form validation and submit handling (currently front-end only)
• Add real image assets and optimize for web (WebP, lazy loading)

⚠️ Disclaimer

This project is a fan-made clone built strictly for educational and portfolio purposes. Pepsi, the Pepsi logo, and related trademarks are the property of PepsiCo, Inc. This project is not affiliated with, endorsed by, or connected to PepsiCo in any way.

👨‍💻 Author

Muhammad Abuhuraira

• GitHub: @muhammadabuhurair
• LinkedIn: abuhurairakhan-dev

📄 License

This project is open source and available under the MIT License.

---

⭐ If you found this project helpful or interesting, consider giving it a star!