Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Responsive Coffee Website in HTML and CSS
This article will show you how to Create A Responsive Coffee Website in HTML and CSS. We'll design sections such as a hero area, product list, and contact form while ensuring they look good on both desktops and mobile devices.
In this article, we will create A Responsive Coffee Website in HTML and CSS.
Create A Responsive Coffee Website in HTML and CSS
In this tutorial, we'll go through six simple steps to build a stylish, responsive coffee shop website.
- Understanding Responsive Web Design
- HTML Structure for the Coffee Website
- CSS for Styling and Responsiveness
Responsive Coffee Website Should Have
We will build a clean and stylish coffee shop website that adjusts to different screen sizes. The website will include:
- A hero section with an eye-catching welcome message.
- A product section showcasing a few coffee options with descriptions.
- A contact form for user inquiries.
- Responsive design so the website looks good on both desktop and mobile screens.
Understanding Responsive Web Design
Responsive design means that the website layout automatically adjusts to fit different screen sizes. For this coffee website, we'll use CSS media queries to make sure our website's layout changes smoothly on smaller screens, such as mobile phones.
Image Assets
To create a visually appealing coffee website, we will need several images:
- Hero Section Image: coffee-hero.jpg - A full-width, eye-catching coffee image for the hero section.
- Product Images: coffee1.jpg, coffee2.jpg, and coffee3.jpg - Images of various coffee types (like Espresso, Latte, and Cappuccino) to display in the product section.
HTML Structure for the Coffee Website
Let's begin with the basic HTML structure. We'll create a hero section, a product section, and a contact section in our HTML file.
<!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>
<link rel="stylesheet" href="style.css">
<script>
document.addEventListener("DOMContentLoaded", function() {
const faders = document.querySelectorAll(".about, .products, .contact");
const appearOptions = {
threshold: 0.2, // Trigger when 20% of the section is in view
rootMargin: "0px 0px -100px 0px"
};
const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add("appear");
appearOnScroll.unobserve(entry.target);
}
});
}, appearOptions);
faders.forEach(fader => {
appearOnScroll.observe(fader);
});
});
</script>
</head>
<body>
<!-- Header Section -->
<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>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="container hero-content">
<div class="hero-text">
<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>
</div>
</section>
<!-- About 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>
<!-- Products Section -->
<section id="products" class="products">
<div class="container">
<h2>Our Products</h2>
<div class="product-list">
<div class="product">
<img src="img/coffee1.jpg" alt="Espresso">
<h3>Espresso</h3>
<p>A rich and intense coffee experience.</p>
</div>
<div class="product">
<img src="img/coffee2.jpg" alt="Latte">
<h3>Latte</h3>
<p>A smooth and creamy delight.</p>
</div>
<div class="product">
<img src="img/coffee3.png" alt="Cappuccino">
<h3>Cappuccino</h3>
<p>The perfect blend of coffee and foam.</p>
</div>
</div>
</div>
</section>
<!-- Contact 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 Section -->
<footer>
<div class="container">
<p>© 2024 CoffeeHouse. All rights reserved.</p>
</div>
</footer>
</body>
</html>
CSS for Styling and Responsiveness
In our CSS file, we'll apply styles to give the website a clean look. We'll also add media queries to make the layout responsive for smaller screens.
/* Basic Reset */
* {
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 */
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
/* Header */
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);
animation: fadeIn 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}
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 Section */
.hero {
background: url('img/coffee-hero.jpg') no-repeat center center/cover;
height: 80vh;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
clip-path: ellipse(100% 60% at 50% 40%);
}
.hero-content {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
max-width: 1200px;
width: 100%;
}
.hero-text {
max-width: 50%;
text-align: left;
animation: fadeIn 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
animation-delay: 0.5s;
animation-fill-mode: backwards;
}
.hero h2 {
font-size: 42px;
font-weight: bold;
}
.hero p {
margin: 10px 0 20px;
font-size: 18px;
}
.hero .btn {
background-color: #f0a500;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 50px;
transition: background 0.3s, transform 0.3s;
}
.hero .btn:hover {
background-color: #e89b00;
transform: scale(1.05);
}
.btn {
background-color: #f0a500;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 50px;
transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.btn:hover {
background-color: #e89b00;
transform: scale(1.05);
}
/* Coffee Bag Image Styling */
.hero-image {
max-width: 40%;
display: flex;
justify-content: center;
}
.hero-image img {
width: 100%;
max-width: 300px;
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transition: transform 0.3s;
animation: scaleUp 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
animation-delay: 0.7s;
animation-fill-mode: backwards;
}
.hero-image img:hover {
transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
transform: scale(1.05);
}
/* Responsive Design for Hero Section */
@media (max-width: 768px) {
.hero-content {
flex-direction: column;
text-align: center;
}
.hero-text, .hero-image {
max-width: 100%;
}
.hero h2 {
font-size: 32px;
}
.hero p {
font-size: 16px;
}
}
/* About Section with cool shape */
.about {
padding: 60px 0;
text-align: center;
background-color: #fff;
clip-path: polygon(0 15%, 100% 0, 100% 85%, 0% 100%);
margin-top: -80px;
z-index: 1;
opacity: 0;
animation: fadeIn 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
animation-delay: 0.5s;
}
.about h2 {
font-size: 32px;
margin-bottom: 20px;
color: #f0a500;
}
.about p {
max-width: 700px;
margin: auto;
font-size: 18px;
}
/* Products Section */
/* Products Section */
.products {
padding: 60px 0;
text-align: center;
}
.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);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #fff;
cursor: pointer;
overflow: hidden;
text-align: center;
}
.product img {
width: 100%;
height: auto;
border-radius: 10px;
transition: transform 0.3s ease;
}
.product h3 {
font-size: 24px;
color: #333;
margin: 15px 0 5px;
transition: color 0.3s ease;
}
.product p {
color: #666;
font-size: 16px;
transition: color 0.3s ease;
}
/* Hover Effects */
.product:hover {
transform: translateY(-10px) scale(1.03);
/* Lift and scale effect */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
/* Stronger shadow on hover */
}
.product:hover img {
transform: scale(1.1);
/* Slight zoom effect on image */
}
.product:hover h3 {
color: #e89b00;
/* Change text color on hover */
}
.product:hover p {
color: #444;
/* Darken text color on hover */
}
/* Contact Section */
.contact {
padding: 40px 0;
text-align: center;
background-color: #333;
color: #fff;
position: relative;
clip-path: ellipse(100% 90% at 50% 10%);
opacity: 0;
animation: fadeIn 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
animation-delay: 0.3s;
}
.contact h2 {
font-size: 32px;
margin-bottom: 20px;
color: #f0a500;
}
.contact p {
font-size: 18px;
}
.contact .btn {
background-color: #f0a500;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 50px;
transition: background 0.3s, transform 0.3s;
}
.contact .btn:hover {
background-color: #e89b00;
transform: scale(1.05);
}
/* Footer */
footer {
background-color: #222;
color: #fff;
padding: 10px 0;
text-align: center;
font-size: 14px;
}
/* Responsive Design */
@media (max-width: 768px) {
header .container {
flex-direction: column;
}
header nav ul {
flex-direction: column;
gap: 10px;
}
.product-list {
flex-direction: column;
}
.hero h2 {
font-size: 32px;
}
.hero p {
font-size: 16px;
}
}
/* Fade-in Animation */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Slide-in Animation */
@keyframes slideIn {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* Scale Animation */
@keyframes scaleUp {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Sections that fade in on scroll */
.about, .products, .contact {
opacity: 0;
transform: translateY(40px);
transition: opacity 1.8s cubic-bezier(0.4, 0.0, 0.2, 1), transform 1.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.appear {
opacity: 1;
transform: translateY(0);
}
Explanation of Website Sections
This coffee website is organized into several key sections, each designed to enhance the user experience and guide visitors through the site.
Header and Hero Section
- The header includes a logo and navigation links that allow users to jump to different sections of the page, like "Products" and "Contact."
- The hero section includes a full-width background image (coffee-hero.jpg) that showcases a visually striking coffee image, welcoming users with a large, friendly title and a brief tagline.
About Section
- This optional section provides a brief description of the coffee shop. It's a chance to introduce the shop's unique qualities or specialty offerings, creating a personal connection with visitors.
Products Section
This section displays a selection of coffee offerings, such as Espresso, Latte, and Cappuccino, each with an image and description.
- Grid Layout: On desktop screens, the products are arranged in a grid, which gives each product equal visibility and makes the layout clean and organized.
- Responsive Layout: On smaller screens (like mobile devices), the grid layout switches to a single-column format, making the images and text easier to view.
Contact Section
- The contact section includes a form for users to fill out if they have questions or want to connect.
- The form typically includes fields like "Name," "Email," and "Message" with a call-to-action button to send the message. This section encourages user interaction and can help the coffee shop gather inquiries.
Footer Section
- The footer includes simple copyright information to give the website a professional finish.
- You may also add links to social media profiles or contact information here.
Complete Code (HTML and CSS)
Here's the complete code for our coffee website, combining the HTML and CSS code from the sections above.
<!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>
<!-- <link rel="stylesheet" href="style.css"> -->
<style>
/* Basic Reset */
* {
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 */
.container {
width: 90%;
max-width: 1200px;
margin: auto;
}
/* Header */
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);
animation: fadeIn 1.2s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}
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 Section */
.hero {
background: url('img/coffee-hero.jpg') no-repeat center center/cover;
height: 80vh;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
clip-path: ellipse(100% 60% at 50% 40%);
}
.hero-content {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
max-width: 1200px;
width: 100%;
}
.hero-text {
max-width: 50%;
text-align: left;
animation: fadeIn 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
animation-delay: 0.5s;
animation-fill-mode: backwards;
}
.hero h2 {
font-size: 42px;
font-weight: bold;
}
.hero p {
margin: 10px 0 20px;
font-size: 18px;
}
.hero .btn {
background-color: #f0a500;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 50px;
transition: background 0.3s, transform 0.3s;
}
.hero .btn:hover {
background-color: #e89b00;
transform: scale(1.05);
}
.btn {
background-color: #f0a500;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 50px;
transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), background-color 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.btn:hover {
background-color: #e89b00;
transform: scale(1.05);
}
/* Coffee Bag Image Styling */
.hero-image {
max-width: 40%;
display: flex;
justify-content: center;
}
.hero-image img {
width: 100%;
max-width: 300px;
border-radius: 8px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
transition: transform 0.3s;
animation: scaleUp 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
animation-delay: 0.7s;
animation-fill-mode: backwards;
}
.hero-image img:hover {
transition: transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);
transform: scale(1.05);
}
/* Responsive Design for Hero Section */
@media (max-width: 768px) {
.hero-content {
flex-direction: column;
text-align: center;
}
.hero-text,
.hero-image {
max-width: 100%;
}
.hero h2 {
font-size: 32px;
}
.hero p {
font-size: 16px;
}
}
/* About Section with cool shape */
.about {
padding: 60px 0;
text-align: center;
background-color: #fff;
clip-path: polygon(0 15%, 100% 0, 100% 85%, 0% 100%);
margin-top: -80px;
z-index: 1;
opacity: 0;
animation: fadeIn 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
animation-delay: 0.5s;
}
.about h2 {
font-size: 32px;
margin-bottom: 20px;
color: #f0a500;
}
.about p {
max-width: 700px;
margin: auto;
font-size: 18px;
}
/* Products Section */
/* Products Section */
.products {
padding: 60px 0;
text-align: center;
}
.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);
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #fff;
cursor: pointer;
overflow: hidden;
text-align: center;
}
.product img {
width: 100%;
height: auto;
border-radius: 10px;
transition: transform 0.3s ease;
}
.product h3 {
font-size: 24px;
color: #333;
margin: 15px 0 5px;
transition: color 0.3s ease;
}
.product p {
color: #666;
font-size: 16px;
transition: color 0.3s ease;
}
/* Hover Effects */
.product:hover {
transform: translateY(-10px) scale(1.03);
/* Lift and scale effect */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
/* Stronger shadow on hover */
}
.product:hover img {
transform: scale(1.1);
/* Slight zoom effect on image */
}
.product:hover h3 {
color: #e89b00;
/* Change text color on hover */
}
.product:hover p {
color: #444;
/* Darken text color on hover */
}
/* Contact Section */
.contact {
padding: 40px 0;
text-align: center;
background-color: #333;
color: #fff;
position: relative;
clip-path: ellipse(100% 90% at 50% 10%);
opacity: 0;
animation: fadeIn 1.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
animation-delay: 0.3s;
}
.contact h2 {
font-size: 32px;
margin-bottom: 20px;
color: #f0a500;
}
.contact p {
font-size: 18px;
}
.contact .btn {
background-color: #f0a500;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 50px;
transition: background 0.3s, transform 0.3s;
}
.contact .btn:hover {
background-color: #e89b00;
transform: scale(1.05);
}
/* Footer */
footer {
background-color: #222;
color: #fff;
padding: 10px 0;
text-align: center;
font-size: 14px;
}
/* Responsive Design */
@media (max-width: 768px) {
header .container {
flex-direction: column;
}
header nav ul {
flex-direction: column;
gap: 10px;
}
.product-list {
flex-direction: column;
}
.hero h2 {
font-size: 32px;
}
.hero p {
font-size: 16px;
}
}
/* Fade-in Animation */
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Slide-in Animation */
@keyframes slideIn {
0% {
opacity: 0;
transform: translateX(-40px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* Scale Animation */
@keyframes scaleUp {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* Sections that fade in on scroll */
.about,
.products,
.contact {
opacity: 0;
transform: translateY(40px);
transition: opacity 1.8s cubic-bezier(0.4, 0.0, 0.2, 1), transform 1.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.appear {
opacity: 1;
transform: translateY(0);
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const faders = document.querySelectorAll(".about, .products, .contact");
const appearOptions = {
threshold: 0.2, // Trigger when 20% of the section is in view
rootMargin: "0px 0px -100px 0px"
};
const appearOnScroll = new IntersectionObserver(function(entries, appearOnScroll) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add("appear");
appearOnScroll.unobserve(entry.target);
}
});
}, appearOptions);
faders.forEach(fader => {
appearOnScroll.observe(fader);
});
});
</script>
</head>
<body>
<!-- Header Section -->
<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>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="container hero-content">
<div class="hero-text">
<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>
</div>
</section>
<!-- About 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>
<!-- Products Section -->
<section id="products" class="products">
<div class="container">
<h2>Our Products</h2>
<div class="product-list">
<div class="product">
<img src="img/coffee1.jpg" alt="Espresso">
<h3>Espresso</h3>
<p>A rich and intense coffee experience.</p>
</div>
<div class="product">
<img src="img/coffee2.jpg" alt="Latte">
<h3>Latte</h3>
<p>A smooth and creamy delight.</p>
</div>
<div class="product">
<img src="img/coffee3.png" alt="Cappuccino">
<h3>Cappuccino</h3>
<p>The perfect blend of coffee and foam.</p>
</div>
</div>
</div>
</section>
<!-- Contact 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 Section -->
<footer>
<div class="container">
<p>© 2024 CoffeeHouse. All rights reserved.</p>
</div>
</footer>
</body>
</html>
Output
Here's what the final output will look like.
In this article, we created a Responsive Coffee Website using HTML and CSS. We designed a clean, user-friendly layout with sections for a hero banner, products, and contact form, ensuring it looks great on all screen sizes. This project demonstrates the basics of building responsive websites, providing a strong starting point for similar projects.
Updated on: 2024-11-07T11:01:06+05:30
938 Views
Advertisements