One Brew Café ☕

A modern, elegant landing page for a boutique café — built with clean semantic HTML and a custom CSS design system inspired by warm coffee tones and minimal, premium styling.

This project was developed as Task 3 of my Web Development Internship at Saiket Systems.

Overview

One Brew Café is a single-page website showcasing a café's home, menu categories, about section, products, and contact areas. The focus of this task was crafting a distinctive visual identity through CSS alone — no frameworks, no changes to the existing HTML structure.

Features

• Sticky navigation bar with logo on the left and menu links on the right
• Smooth underline hover effects on navigation links
• Smooth scrolling between sections
• Alternating warm section backgrounds (ivory, cream, latte beige)
• Responsive card-style layout for the categories section
• Fully responsive design across mobile, tablet, and desktop
• Custom coffee-bean divider motif above each section
• Google Fonts pairing: Playfair Display (headings) + Poppins (body)

Color Palette

Name	Hex	Use
Espresso	#3B2A20	Headings, primary text
Mocha	#6F4931	Nav links, secondary accents
Caramel	#A9744F	Hover states, links
Latte	#D9BFA0	Alternate section background
Cream	#F6ECDD	Alternate section background
Ivory	#FFFbF6	Base background

Tech Stack

• HTML5
• CSS3 (custom properties, Flexbox, Grid, media queries)
• Google Fonts (Playfair Display, Poppins)

File Structure

one-brew-cafe/
├── index.html
├── styles.css
└── One-Brew_logo.png

Getting Started

1. Clone or download this repository
2. Make sure styles.css and the logo image sit in the same folder as index.html
3. Open index.html in any modern browser

Credits

Designed and developed by Noor as part of the Web Development Internship at Saiket Systems.