Fully Responsive Design
Adapts seamlessly across all screen sizes using CSS media queries and flexible layouts.
Project Overview
A complete frontend clone of the EatClub website, recreated from scratch without any CSS frameworks. This project focuses on mastering responsive web design, flexbox/grid layouts, and interactive UI elements using vanilla JavaScript. Every section — from the hero banner to the footer — was hand-coded to match the original design as closely as possible, serving as a deep-dive into professional web layout techniques.
🎯 Project Purpose
Built to sharpen responsive design skills by reverse-engineering a real-world food delivery platform. Focused on pixel-perfect layout recreation, mobile-first design, and clean semantic HTML.
🛍️ Project Checkouts (Key Highlights)
Pixel-Perfect Layout
Recreated every section of the original EatClub website with attention to spacing, typography, and color.
Interactive Elements
Smooth scrolling, hover effects, and dynamic navigation built with vanilla JavaScript.
Semantic HTML
Clean, accessible markup using proper HTML5 semantic elements throughout.
⭐ Why This Project Stands Out
- Responsive Mastery: Built mobile-first with fluid grids and breakpoints for every device.
- No Frameworks: Pure HTML/CSS/JS — no Bootstrap, Tailwind, or libraries used.
- Real-World Patterns: Explored professional e-commerce UI patterns, card layouts, and CTAs.
- Reverse Engineering: Strengthened ability to analyze and rebuild live production websites.