Café Shop ☕🍰

🔗 Live Demo: https://cafe-shop-self.vercel.app/

Café Shop is a practice frontend project built using HTML and Tailwind CSS.
The project represents a modern café / coffee shop landing page featuring a hero section, featured products, customer reviews, news & events, and a responsive layout.

The primary goal of this project was to practice Tailwind CSS utility classes, responsive design, layout composition, and real-world UI sections commonly found in café, restaurant, and food-related websites.

---

🛠 Tech Stack

• HTML5
• Tailwind CSS (CDN)
• Google Fonts (Manrope)
• Font Awesome Icons
• CSS Grid & Flexbox (via Tailwind)
• Responsive Design (Mobile, Tablet & Desktop)

---

✨ Features

• Responsive hero section with call-to-action button
• Gradient-based primary buttons
• Featured products section with card layout
• Product grid using Tailwind Grid
• Image & text split layout section
• Customer reviews section with layered testimonial cards
• News & events section with blog-style cards
• Fully responsive footer with newsletter subscription UI
• Modern UI with shadows, gradients, and rounded corners
• Clean typography and spacing
• Fully responsive across all screen sizes

---

📱 Responsiveness

Desktop

• Multi-column grid layouts
• Side-by-side image & content sections
• Full-width testimonial design

Tablet

• Optimized grid spacing
• Balanced typography scaling

Mobile

• Single-column layout
• Stacked sections
• Scaled images and text for small screens

All images scale responsively while maintaining their aspect ratio.

---

📁 Project Structure

cafe-shop/
├── index.html
├── images/
│ ├── banner.png
│ ├── tea-1.png
│ ├── tea-2.png
│ ├── tea-3.png
│ ├── tea-4.png
│ ├── fresh-1.png
│ ├── fresh-2.png
│ ├── client.png
│ ├── news-1.png
│ ├── news-2.png
│ ├── news-3.png
│ └── cup.png
└── README.md

---

🚀 Usage

• Clone or download the repository
• Open index.html in any modern web browser

or

• Visit the live website using the link above

---

🎯 Purpose of This Project

This project was created purely for practice purposes to:

• Learn and practice Tailwind CSS
• Build responsive layouts using utility-first CSS
• Practice Flexbox & Grid layouts
• Design reusable card-based UI components
• Improve layout spacing, alignment, and typography
• Understand real-world café / landing page structure
• Strengthen frontend UI development skills

---

📝 Notes

• This is a static frontend project
• No backend or database is used
• No JavaScript logic is implemented
• Buttons and links are for UI/UX demonstration only
• Content and images are used for layout and design practice
• Not intended for production use

---

✅ Practice Project
📌 Frontend Only
💡 Learning-focused Implementation