A modern, responsive, and visually appealing coffee shop website built using HTML, CSS, and JavaScript. This project showcases a clean UI, smooth animations, and interactive components, making it ideal for demonstrating front-end development skills.
✨ Fully Responsive Design
- Works seamlessly on desktop, tablet, and mobile devices
🎯 Modern UI/UX
- Clean layout with attractive typography and spacing
- Smooth hover effects and transitions
🧭 Smooth Navigation
- Scroll-based navigation with section linking
- Fixed navbar with offset handling
☕ Hero Section
- Engaging landing section with CTA buttons
📖 About Section
- Brand story with responsive layout
🍽️ Menu Section
- Grid-based menu cards
- Responsive layout (3 → 2 → 1 columns)
💬 Testimonial Slider
- Swiper.js powered carousel
- Autoplay, pagination, and responsive slides
- Center highlight + animations
🖼️ Gallery Section
- Responsive image grid
- Hover zoom effect
📩 Contact Form
- Form validation using JavaScript
- Error handling + user feedback
📱 Mobile Navigation
- Toggle menu with smooth interaction
🔚 Footer
- Social icons with hover effects
- Clean minimal design
- HTML5 – Structure
- CSS3 – Styling & Layout
- JavaScript – Interactivity
- Swiper.js – Testimonial slider
This project was built to practice and demonstrate:
- Responsive Web Design
- UI/UX Principles
- DOM Manipulation
- Form Validation
- Component-based layout structuring
https://coffee-website-peach-chi.vercel.app/
Add screenshots of your project here (Home, Menu, Gallery, Contact, etc.)
coffee-website/
│── index.html
│── styles.css
│── script.js
│── images/
- Clone the repository:
git clone https://github.com/Gauravsingh640/coffee-website.git- Open the project folder:
cd coffee-website- Run the project:
- Open
index.htmlin your browser
- Backend integration for contact form
- Authentication / Admin dashboard
- Online ordering system
- Dark mode 🌙
- Animations & micro-interactions enhancement
Gaurav Singh
If you like this project, consider giving it a ⭐ on GitHub!