Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Create A Responsive Coffee Website in HTML and CSS
This article will show you how to create a responsive coffee website using HTML and CSS. We'll design sections including a hero area, product showcase, and contact form that adapt beautifully to both desktop and mobile devices.
Website Structure
Our coffee website will include the following key components
- A hero section with an eye-catching welcome message
- A product section showcasing coffee options with descriptions
- A contact section for user inquiries
- Responsive design that adapts to different screen sizes
Understanding Responsive Web Design
Responsive design ensures that the website layout automatically adjusts to fit different screen sizes. We'll use CSS media queries to make our coffee website's layout change smoothly on smaller screens like mobile phones.
Required Assets
For a visually appealing coffee website, you'll need these image files
- Hero Section: coffee-hero.jpg - A full-width coffee background image
- Product Images: coffee1.jpg, coffee2.jpg, coffee3.png - Images for Espresso, Latte, and Cappuccino
HTML Structure
Let's create the complete HTML structure with a header, hero section, about section, products section, and contact form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Coffee Website</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
line-height: 1.6;
color: #333;
}
html {
scroll-behavior: smooth;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
position: fixed;
width: 100%;
top: 0;
z-index: 10;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
header .container {
display: flex;
align-items: center;
justify-content: space-between;
}
header .logo {
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
}
header nav ul {
list-style-type: none;
display: flex;
gap: 20px;
}
header nav ul li a {
color: #fff;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
transition: background 0.3s;
}
header nav ul li a:hover {
background-color: #f0a500;
}
.hero {
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), #8B4513;
height: 80vh;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-top: 60px;
}
.hero h2 {
font-size: 42px;
font-weight: bold;
margin-bottom: 15px;
}
.hero p {
font-size: 18px;
margin-bottom: 20px;
}
.btn {
background-color: #f0a500;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 50px;
transition: background 0.3s, transform 0.3s;
}
.btn:hover {
background-color: #e89b00;
transform: scale(1.05);
}
.about {
padding: 60px 0;
text-align: center;
background-color: #fff;
}
.about h2 {
font-size: 32px;
margin-bottom: 20px;
color: #f0a500;
}
.about p {
max-width: 700px;
margin: auto;
font-size: 18px;
}
.products {
padding: 60px 0;
text-align: center;
background-color: #f8f9fa;
}
.products h2 {
font-size: 36px;
margin-bottom: 40px;
color: #333;
}
.product-list {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.product {
width: 280px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
background-color: #fff;
transition: transform 0.3s ease;
}
.product:hover {
transform: translateY(-10px);
}
.product img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 10px;
}
.product h3 {
font-size: 24px;
color: #333;
margin: 15px 0 5px;
}
.product p {
color: #666;
font-size: 16px;
}
.contact {
padding: 60px 0;
text-align: center;
background-color: #333;
color: #fff;
}
.contact h2 {
font-size: 32px;
margin-bottom: 20px;
color: #f0a500;
}
.contact p {
font-size: 18px;
margin-bottom: 20px;
}
footer {
background-color: #222;
color: #fff;
padding: 20px 0;
text-align: center;
}
@media (max-width: 768px) {
header .container {
flex-direction: column;
}
header nav ul {
flex-direction: column;
gap: 10px;
}
.hero h2 {
font-size: 32px;
}
.hero p {
font-size: 16px;
}
.product-list {
flex-direction: column;
align-items: center;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<h1 class="logo">CoffeeHouse</h1>
<nav>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#products">Products</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</header>
<section id="home" class="hero">
<div class="container">
<h2>Welcome to CoffeeHouse</h2>
<p>Experience the rich aroma and flavors of our carefully selected beans.</p>
<a href="#products" class="btn">Shop Now</a>
</div>
</section>
<section id="about" class="about">
<div class="container">
<h2>About Us</h2>
<p>At CoffeeHouse, we believe in providing the best coffee experience. Our beans are sourced from the finest farms around the world and roasted to perfection to deliver a bold, smooth taste with every sip.</p>
</div>
</section>
<section id="products" class="products">
<div class="container">
<h2>Our Products</h2>
<div class="product-list">
<div class="product">
<div style="width: 100%; height: 200px; background: linear-gradient(45deg, #8B4513, #D2691E); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold;">? Espresso</div>
<h3>Espresso</h3>
<p>A rich and intense coffee experience.</p>
</div>
<div class="product">
<div style="width: 100%; height: 200px; background: linear-gradient(45deg, #CD853F, #F4A460); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold;">? Latte</div>
<h3>Latte</h3>
<p>A smooth and creamy delight.</p>
</div>
<div class="product">
<div style="width: 100%; height: 200px; background: linear-gradient(45deg, #A0522D, #DEB887); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: bold;">? Cappuccino</div>
<h3>Cappuccino</h3>
<p>The perfect blend of coffee and foam.</p>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<h2>Contact Us</h2>
<p>Got questions? We'd love to hear from you!</p>
<a href="mailto:info@coffeehouse.com" class="btn">Email Us</a>
</div>
</section>
<footer>
<div class="container">
<p>© 2024 CoffeeHouse. All rights reserved.</p>
</div>
</footer>
</body>
</html>
A responsive coffee website with: - Fixed navigation header with logo and menu links - Hero section with coffee-themed background and call-to-action button - About section with company description - Products section displaying three coffee types with gradient placeholder images - Contact section with email link - Footer with copyright information - Mobile-responsive layout that stacks elements vertically on smaller screens
Key Features
Responsive Navigation
The header includes a fixed navigation bar that remains visible while scrolling. On mobile devices, the navigation links stack vertically for better usability.
Hero Section
The hero section features a coffee-themed gradient background with a welcoming message and call-to-action button that encourages users to explore the products.
Product Grid
The products section uses CSS Flexbox to create a responsive grid layout. Each product card includes hover effects that lift the card slightly, creating an interactive user experience.
Media Queries
The CSS includes media queries that trigger at 768px width, adjusting the layout for mobile devices by stacking navigation links and product cards vertically.
Conclusion
This responsive coffee website demonstrates modern web design principles using HTML and CSS. The combination of flexbox layouts, media queries, and hover effects creates an engaging user experience across all devices.
Updated on: 2026-03-15T18:17:21+05:30
2K+ Views
Advertisements