🍵 Tea House

A modern, fully responsive tea café landing page built from a Figma design using HTML5 and Tailwind CSS.

---

🌐 Live Demo

🔗 View Live Site

---

📋 Page Sections

Section	Description
🏠 Hero	Full-width banner with headline, tagline, and CTA button
🍃 Featured Products	4-column grid showcasing Milk Tea, Black Tea, Lemon Tea & Green Tea
🌿 Great Tea	Brand story with image layout and key selling points
💬 Client Reviews	Stacked testimonial cards with client avatars
📬 Footer	Quick links, tea menu, newsletter form & social media icons

---

✨ Features

• 🎨 Pixel-perfect Figma to HTML conversion
• 📱 Fully responsive — mobile-first with md: breakpoints
• 🌈 Custom gradient buttons, text gradients, and background gradients with Tailwind
• ⚡ Zero build tools — powered by Tailwind CSS CDN
• 🔤 Font Awesome 7 icons
• 🧼 Semantic, clean, and well-structured HTML5

---

🛠️ Tech Stack

Technology	Usage
HTML5	Structure & semantics
Tailwind CSS (CDN)	Styling & responsive layout
Font Awesome 7	Icons
Figma	Original UI/UX design

---

📁 Project Structure

Tea-House/
├── index.html           # Main HTML page
├── styles/
│   └── style.css        # Custom font & override styles
├── images/
│   ├── banner.png       # Hero section image
│   ├── tea-1.png        # Milk Tea
│   ├── tea-2.png        # Black Tea
│   ├── tea-3.png        # Lemon Tea
│   ├── tea-4.png        # Green Tea
│   ├── fresh-1.png      # Great Tea section — image 1
│   ├── fresh-2.png      # Great Tea section — image 2
│   ├── client.png       # Client avatar
│   ├── circles.png      # Decorative element
│   └── cup.png          # Footer logo
├── tea-house.fig        # Original Figma design file
└── README.md

---

🚀 Getting Started

No installation needed.

1. Clone the repository

git clone https://github.com/Mdboniamin/Tea-House.git

2. Open in browser

cd Tea-House
open index.html

Or use a local dev server:

npx serve .

---

🎨 Color Palette

Color	Hex	Used In
Red	#FF0000	Gradient start, CTA buttons
Orange	#FF8938	Gradient end
Light Gray	#D9D9D9	Section backgrounds
White	#FFFFFF	Cards, overlays

---

📱 Responsive Design

Breakpoint	Width	Layout
Mobile	< 768px	Single column, stacked
Desktop	≥ 768px (md:)	Multi-column, side-by-side

---

🧑‍💻 Author

Md. Boniamin

• GitHub: @Mdboniamin

---

📄 License

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

---

⭐ If you find this project helpful, give it a star!