Creating your own website can be an exciting and rewarding project, especially if you’re a beginner looking to start learning web development. It thoroughly introduces HTML and CSS, allowing you to express your creativity and build a valuable portfolio piece.
In this blog post, I’ll guide you through the steps to create a beautiful, responsive coffee-themed website using HTML and CSS. The website will include multiple sections such as Home, About, Services, Why Us, Gallery, Contact, and a Footer. One of the best features of this website is its full responsiveness, ensuring that it looks great on mobile devices and desktops.
Especially on mobile devices, we will add a hamburger menu to the header to toggle the mobile navigation menu when clicked. This will be achieved using HTML checkbox input with label elements, without relying on JavaScript.
Here are the brief details of different sections of our coffee website:
- Home: A welcoming section with an introduction to your coffee shop and includes a navigation menu.
- About: Information about your coffee shop’s history and mission.
- Services: Details about the products and services you offer.
- Why Us: Reasons why customers should choose your coffee shop.
- Gallery: A showcase of your coffee shop’s ambiance and offerings.
- Contact: A form or contact information for visitors to get in touch.
- Footer: Additional links and information, such as social media profiles.
Demo of Responsive Coffee Website in HTML & CSS
Steps to Create Responsive Coffee Website HTML & CSS
To create a responsive coffee website using HTML and CSS only, follow these simple step-by-step instructions:
- First, create a folder with any name you like, e.g.,
coffee-website. Then, create the necessary files inside it. - Create a file namedÂ
index.html. This will serve as the main HTML file for your project.
Create a file namedÂstyle.css. This file will contain all the CSS code for styling your website. - Finally, download the Images folder and place it in your project directory. This folder contains all the images required for this coffee website project.
To start, add the following HTML codes to your index.html file: This code contains essential HTML markup with different semantic tags for different sections like <header>,<nav>, <ul>, <li>, <a>, <section>, <footer> , etc. to create our website layout or structure.
<!DOCTYPE html>
<!-- Coding by CodingNepal - youtube.com/@codingnepal -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coffee Website | CodingNepal</title>
<!-- Swiper JS CSS Link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<!-- FontAwesome Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>
<!-- CSS Link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header & Navbar Section -->
<header class="header" id="header">
<nav class="nav">
<a href="#" class="nav-logo">
<h2 class="logo-text">Coffee</h2>
</a>
<ul class="nav-menu">
<i id="close-menu-button" class="fa-solid fa-xmark"></i>
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item"><a href="#menu" class="nav-link">Menu</a></li>
<li class="nav-item"><a href="#testimonial" class="nav-link">Testimonial</a></li>
<li class="nav-item"><a href="#gallery" class="nav-link">Gallery</a></li>
<li class="nav-item"><a href="#contact" class="nav-link">Contact Us</a></li>
</ul>
<i id="open-menu-button" class="fa-solid fa-bars"></i>
</nav>
</header>
<!-- Hero Section -->
<section class="hero-section">
<div class="section-container">
<div class="hero-container">
<div class="hero-details">
<h2 class="hero-title">Best Coffee</h2>
<h3 class="hero-subtitle">Make your day great with our special coffee!</h3>
<p class="hero-description">Welcome to our coffee paradise, where every bean tells a story and every cup sparks joy.</p>
<div class="hero-buttons">
<button class="button order-now-button">Order Now</button>
<button class="button contact-us-button">Contact Us</button>
</div>
</div>
<div class="hero-image-wrapper">
<img src="images/coffee-hero-section.png" alt="Coffee" class="hero-image">
</div>
</div>
</div>
</section>
<!-- About Us Section -->
<section class="about-us" id="about">
<div class="section-container">
<div class="about-container">
<div class="about-image-wrapper"></div>
<div class="about-text-wrapper">
<h2 class="section-title">About Us</h2>
<p class="about-description">
We at Coffee House, located in Berndorf, Germany, are one of the favorite hangouts for coffee and conversations. Our goal is to offer the best experience to our guests, ensuring an authentic coffee drinking experience in a warm, friendly, and relaxed environment. We aim to bring a sense of relaxation to the city with our cozy space, complete with comfortable couches to lounge in while you enjoy your coffee.
</p>
</div>
</div>
</div>
</section>
<!-- Our Menu Section -->
<section class="menu-section" id="menu">
<h2 class="section-title">Our Menu</h2>
<div class="section-container">
<div class="menu-container">
<div class="menu-items">
<img src="images/hot-beverages.png" alt="Hot Beverages" class="menu-image">
<div class="menu-text">
<h3 class="menu-heading">Hot Beverages</h3>
<p class="menu-description">Wide range of Steaming hot coffee to make you fresh and light.</p>
</div>
</div>
<div class="menu-items">
<img src="images/cold beverages.png" alt="Cold Beverages" class="menu-image">
<div class="menu-text">
<h3 class="menu-heading">Cold Beverages</h3>
<p class="menu-description">Creamy and frothy cold coffee to make you cool.</p>
</div>
</div>
<div class="menu-items">
<img src="images/refreshment.png" alt="Refreshment" class="menu-image">
<div class="menu-text">
<h3 class="menu-heading">Refreshment</h3>
<p class="menu-description">Fruit and icy refreshing drink to make feel refresh.</p>
</div>
</div>
<div class="menu-items">
<img src="images/special-combo.png" alt="Special Combos" class="menu-image">
<div class="menu-text">
<h3 class="menu-heading">Special Combos</h3>
<p class="menu-description">Your favorite eating and drinking combations</p>
</div>
</div>
<div class="menu-items">
<img src="images/desserts.png" alt="Dessert" class="menu-image">
<div class="menu-text">
<h3 class="menu-heading">Dessert</h3>
<p class="menu-description">Satiate your palate and take you on a culinary treat.</p>
</div>
</div>
<div class="menu-items">
<img src="images/burger-frenchfries.png" alt="burger & French Fries" class="menu-image">
<div class="menu-text">
<h3 class="menu-heading">Burger & French Fries</h3>
<p class="menu-description">Quick bites to satisfy your small size hunger.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonial Section -->
<section class="testimonial" id="testimonial">
<h2 class="section-title">Testimonial</h2>
<div class="section-container">
<div class="testimonial-container swiper">
<div class="slide-wrapper">
<div class="card-list swiper-wrapper">
<div class="card-item swiper-slide">
<img src="images/user-1.jpg" alt="User" class="user-image">
<h3 class="user-name">Sarah Johnson</h3>
<p class="user-thoughts">"Loved the French roast. Perfectly balanced and rich. Will order again!"</p>
</div>
<div class="card-item swiper-slide">
<img src="images/user-2.jpg" alt="User" class="user-image">
<h3 class="user-name">James Wilson</h3>
<p class="user-thoughts">"Great espresso blend! Smooth and bold flavor. Fast shipping too!"</p>
</div>
<div class="card-item swiper-slide">
<img src="images/user-3.jpg" alt="User" class="user-image">
<h3 class="user-name">Michael Brown</h3>
<p class="user-thoughts">"Fantastic mocha flavor. Fresh and aromatic. Quick shipping!"</p>
</div>
<div class="card-item swiper-slide">
<img src="images/user-4.jpg" alt="User" class="user-image">
<h3 class="user-name">Emily Harris</h3>
<p class="user-thoughts">"Excellent quality! Fresh beans and quick delivery. Highly recommend."</p>
</div>
<div class="card-item swiper-slide">
<img src="images/user-5.jpg" alt="User" class="user-image">
<h3 class="user-name">Anthony Thompson</h3>
<p class="user-thoughts">"Best decaf I've tried! Smooth and flavorful. Arrived promptly."</p>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-slider-btn swiper-button-prev"></div>
<div class="swiper-slider-btn swiper-button-next"></div>
</div>
</div>
</div>
</section>
<!-- Gallery Section -->
<section class="gallery" id="gallery">
<h2 class="section-title">Gallery</h2>
<div class="section-container">
<div class="gallery-list">
<div class="gallery-items">
<img src="images/gallery-1.png" alt="Gallery Image" class="gallery-image">
</div>
<div class="gallery-items">
<img src="images/gallery-2.png" alt="Gallery Image" class="gallery-image">
</div>
<div class="gallery-items">
<img src="images/gallery-3.png" alt="Gallery Image" class="gallery-image">
</div>
<div class="gallery-items">
<img src="images/gallery-4.png" alt="Gallery Image" class="gallery-image">
</div>
<div class="gallery-items">
<img src="images/gallery-5.png" alt="Gallery Image" class="gallery-image">
</div>
<div class="gallery-items">
<img src="images/gallery-6.png" alt="Gallery Image" class="gallery-image">
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section class="contact" id="contact">
<h2 class="section-title">Contact Us</h2>
<div class="section-container">
<div class="contact-container">
<div class="contact-details">
<div class="contact-item">
<i class="fa-solid fa-location-crosshairs"></i>
<p>123 Campsite Avenue, Wilderness, CA 98765</p>
</div>
<div class="contact-item">
<i class="fa-regular fa-envelope"></i>
<p>[email protected]</p>
</div>
<div class="contact-item">
<i class="fa-solid fa-phone"></i>
<p>(123) 456-78909</p>
</div>
<div class="contact-item">
<i class="fa-regular fa-clock"></i>
<p>Monday - Friday: 9:00 AM - 5:00 PM</p>
</div>
<div class="contact-item">
<i class="fa-regular fa-clock"></i>
<p>Saturday: 10:00 AM - 3:00 PM</p>
</div>
<div class="contact-item">
<i class="fa-regular fa-clock"></i>
<p>Sunday: Closed</p>
</div>
<div class="contact-item">
<i class="fa-solid fa-globe"></i>
<p>www.codingnepalweb.com</p>
</div>
</div>
<div class="contact-form">
<form action="#">
<input type="text" placeholder="Your name" required>
<input type="email" placeholder="Your email" required>
<textarea placeholder="Your message" required></textarea>
<button type="submit" class="button form-button">Submit</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<footer class="footer">
<div class="section-container">
<div class="footer-section">
<div class="footer-copyright">
<p>© 2024 Coffee Shop</p>
</div>
<div class="footer-social-media">
<div class="social-icon">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
</div>
</div>
<div class="footer-policies">
<a href="#">Privacy policy</a>
<span>•</span>
<a href="#">Refund policy</a>
</div>
</div>
</div>
</footer>
<!-- Linking Swiper JS Link -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Linking custoom script -->
<script src="script.js"></script>
</body>
</html>
Next, add the following CSS codes to your style.css file to make your website functional and visually appealing. Feel free to experiment with different CSS properties, such as colors, fonts, backgrounds, etc., to make your coffee website even more attractive.
/* Google Fonts Link */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Miniver&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
:root {
/* Colors */
--white-color: #fff;
--dark-color: #252525;
--primary-color: #3b141c;
--secondary-color: #f3961c;
--light-gray-color: #f2f2f2;
--medium-gray-color: #ccc;
/* Font weight */
--font-weight-n: 400;
--font-weight-m: 500;
--font-weight-s: 600;
--font-weight-b: 700;
/* Font Size */
--font-size-s: 1rem;
--font-size-m: 1.13rem;
--font-size-l: 1.5rem;
--font-size-xl: 2.16rem;
--font-size-xxl: 2.25rem;
/* Border Radius */
--border-radius-s: 8px;
--border-radius-m: 30px;
--border-radius-circle: 50%;
/* Site max width */
--site-max-width: 1300px;
}
html {
scroll-behavior: smooth;
}
body {
background: var(--white-color);
}
/* Setting for the whole website */
a {
text-decoration: none;
}
ul {
list-style: none;
}
.section-container {
margin: 0 auto;
padding: 0 20px;
max-width: var(--site-max-width);
}
.section-title {
text-align: center;
padding: 60px 0 100px;
font-size: var(--font-size-xl);
text-transform: uppercase;
}
.section-title::after {
content: '';
width: 80px;
background: var(--secondary-color);
height: 5px;
display: block;
margin: 7px auto 0;
border-radius: var(--border-radius-s);
}
/* Styling for the header section */
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 5;
background: var(--primary-color);
}
.nav {
max-width: var(--site-max-width);
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
margin: 0 auto;
}
.nav .nav-logo .logo-text {
color: var(--white-color);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-s);
}
.nav .nav-menu {
display: flex;
gap: 10px;
}
.nav .nav-menu .nav-item .nav-link {
display: block;
padding: 10px 20px;
color: var(--white-color);
font-weight: var(--font-weight-n);
font-size: var(--font-size-m);
border-radius: var(--border-radius-m);
transition: 0.3s ease;
}
.nav .nav-menu .nav-item .nav-link:hover {
background: var(--secondary-color);
color: var(--primary-color);
}
#open-menu-button, #close-menu-button {
font-size: var(--font-size-l);
color: var(--white-color);
cursor: pointer;
display: none;
}
/* Hero Section */
.hero-section {
min-height: 100vh;
background: var(--primary-color);
}
.hero-container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 20px 0;
padding-top: 85.12px;
min-height: calc(100vh - 85.12px);
}
.hero-container .hero-details .hero-title {
font-size: var(--font-size-xxl);
color: var(--secondary-color);
font-family: "Miniver", sans-serif;
}
.hero-container .hero-details .hero-subtitle {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-s);
color: var(--white-color);
margin-top: 8px;
max-width: 70%;
}
.hero-container .hero-details .hero-description {
font-size: var(--font-size-m);
font-weight: var(--font-weight-n);
color: var(--white-color);
margin: 24px 0 40px;
max-width: 70%;
}
.hero-container .hero-buttons {
display: flex;
gap: 24px;
}
.hero-container .hero-buttons .button {
padding: 8px 28px;
border: 2.08px solid transparent;
outline: none;
cursor: pointer;
border-radius: var(--border-radius-m);
background: var(--secondary-color);
color: var(--primary-color);
font-size: var(--font-size-m);
font-weight: var(--font-weight-s);
transition: 0.3s ease;
}
.hero-container .hero-buttons .contact-us-button {
color: var(--white-color);
border-color: var(--white-color);
background: none;
}
.hero-container .hero-buttons .contact-us-button:hover {
color: var(--primary-color);
border-color: var(--secondary-color);
background: var(--secondary-color);
}
.hero-container .hero-buttons .order-now-button:hover {
color: var(--white-color);
border-color: var(--white-color);
background: none;
}
.hero-container .hero-image-wrapper {
max-width: 38%;
}
.hero-container .hero-image-wrapper .hero-image {
width: 100%;
}
/* About Us Section */
.about-us {
padding: 100px 20px 120px;
background: var(--light-gray-color);
}
.about-container {
display: flex;
gap: 20px;
margin-top: 50px;
justify-content: space-between;
}
.about-container .about-image-wrapper {
width: 400px;
height: 400px;
border-radius: var(--border-radius-circle);
background: url("images/about-image.png") no-repeat center/cover;
}
.about-container .about-text-wrapper {
max-width: 50%;
}
.about-container .about-text-wrapper .section-title {
padding: 32px 0;
}
.about-container .about-text-wrapper .about-description {
font-size: var(--font-size-m);
font-weight: var(--font-weight-m);
letter-spacing: 0.96px;
line-height: 30.08px;
text-align: center;
}
/* Menu Section */
.menu-section {
background: var(--dark-color);
color: var(--white-color);
padding: 100px 20px 120px;
}
.menu-section .menu-container {
display: flex;
gap: 120px;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.menu-container .menu-items .menu-image {
width: 85%;
aspect-ratio: 1;
margin-bottom: 15px;
object-fit: contain;
}
.menu-container .menu-items {
width: calc(100% / 3 - 120px);
}
.menu-items .menu-text {
text-align: center;
}
.menu-items .menu-text .menu-heading {
margin: 12px 0;
font-weight: var(--font-weight-s);
font-size: var(--font-size-l);
}
.menu-items .menu-text .menu-description {
font-size: var(--font-size-m);
}
/* Testimonial Section */
.testimonial {
padding: 60px 20px 60px;
background: var(--light-gray-color);
}
.testimonial .section-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
}
.slide-wrapper {
overflow: hidden;
max-width: 1300px;
margin: 0 60px 50px;
}
.testimonial .card-list .card-item {
user-select: none;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.testimonial .card-list .card-item .user-image {
width: 150px;
height: 150px;
border-radius: var(--border-radius-circle);
margin-bottom: 50px;
}
.testimonial .card-list .card-item .user-name {
font-size: var(--font-size-m);
margin-bottom: 16px;
}
.testimonial .card-list .card-item .user-thoughts {
font-weight: var(--font-weight-m);
}
.slide-wrapper .swiper-pagination-bullet {
width: 15px;
height: 15px;
background: var(--secondary-color);
opacity: 1;
}
.slide-wrapper .swiper-slider-btn {
color: var(--secondary-color);
margin-top: -50px;
transition: 0.3s ease;
}
.slide-wrapper .swiper-slider-btn:hover {
color: var(--primary-color);
}
/* Gallery Section */
.gallery {
padding: 60px 20px 120px;
}
.gallery .gallery-list {
display: flex;
gap: 32px;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.gallery .gallery-list .gallery-items {
overflow: hidden;
width: calc(100% / 3 - 32px);
}
.gallery .gallery-list .gallery-image {
width: 100%;
cursor: zoom-in;
border-radius: var(--border-radius-s);
transition: 0.3s ease;
}
.gallery-list .gallery-items:hover .gallery-image {
transform: scale(1.3);
}
/* Contact Section */
.contact {
padding: 60px 20px 120px;
background: var(--light-gray-color);
}
.contact-container {
display: flex;
gap: 48px;
align-items: center;
justify-content: space-between;
}
.contact-container .contact-details .contact-item {
display: flex;
gap: 20px;
margin: 20px 0;
font-weight: var(--font-weight-n);
}
.contact-container .contact-details .contact-item i {
font-size: var(--font-size-l);
}
.contact-container .contact-form {
max-width: 50%;
width: 100%;
}
.contact-container .contact-form input {
width: 100%;
height: 50px;
padding: 0 12px;
outline: none;
margin-bottom: 16px;
font-size: var(--font-size-s);
border-radius: var(--border-radius-s);
border: 1px solid var(--medium-gray-color);
}
.contact-container .contact-form textarea {
width: 100%;
height: 100px;
padding: 12px;
outline: none;
font-size: var(--font-size-s);
border-radius: var(--border-radius-s);
border: 1px solid var(--medium-gray-color);
resize: vertical;
}
.contact-container .contact-form :where(input, textarea):focus {
border-color: var(--secondary-color);
}
.contact-container .contact-form .button {
padding: 8px 28px;
border: 1px solid transparent;
outline: none;
cursor: pointer;
border-radius: var(--border-radius-m);
background: var(--primary-color);
color: var(--white-color);
font-size: var(--font-size-m);
font-weight: var(--font-weight-s);
margin-top: 16px;
transition: 0.3s ease;
}
.contact-container .contact-form .button:hover {
color: var(--primary-color);
background: transparent;
border-color: var(--primary-color);
}
/* Footer Section */
.footer {
background: #1b1b1b;
color: var(--white-color);
padding: 30px 20px;
}
.footer-section {
display: flex;
justify-content: space-between;
font-style: var(--font-size-m);
}
.footer-section a {
color: var(--white-color);
}
.footer-section a:hover {
color: var(--secondary-color);
}
.footer-section .social-icon {
display: flex;
gap: 25px;
}
.footer-section .social-icon i {
cursor: pointer;
font-size: var(--font-size-l);
transition: 0.3s ease;
}
.footer-section .social-icon i:hover {
color: var(--secondary-color);
}
.footer-section .footer-policies {
display: flex;
align-items: center;
gap: 8px;
}
.footer-section .footer-policies i {
font-size: 10px;
}
/* Responsive Media Query code for max-width: 1024px */
@media screen and (max-width: 1024px) {
body.show-mobile-menu {
overflow-y: hidden;
}
body.show-mobile-menu .header::before {
content: '';
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
backdrop-filter: blur(5px);
background: rgba(0, 0, 0, 0.2);
}
.nav {
padding: 15px 20px;
}
#open-menu-button {
display: block;
}
#close-menu-button {
position: absolute;
top: 20px;
right: 20px;
font-size: var(--font-size-m);
display: block;
color: #000;
}
.nav .nav-menu {
position: fixed;
top: 0;
left: -300px;
width: 300px;
height: 100%;
padding-top: 96px;
flex-direction: column;
background: var(--white-color);
transition: 0.2s ease;
}
body.show-mobile-menu .nav .nav-menu {
left: 0;
}
.nav .nav-menu .nav-item {
display: block;
padding: 8px 12px;
margin: 0 auto;
}
.nav .nav-menu .nav-item .nav-link {
color: var(--dark-color);
}
.hero-container {
flex-direction: column-reverse;
align-items: center;
}
.hero-container .hero-image-wrapper {
max-width: 100%;
text-align: center;
}
.hero-container .hero-image-wrapper .hero-image {
width: 75%;
margin-top: 50px;
}
.hero-container .hero-details {
max-width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-container .hero-details .hero-subtitle,
.hero-container .hero-details .hero-description {
max-width: 100%;
}
.about-container {
flex-direction: column-reverse;
align-items: center;
gap: 50px;
}
.about-container .about-image-wrapper {
width: 300px;
height: 300px;
}
.about-container .about-text-wrapper {
max-width: 100%;
}
.menu-section .menu-container {
gap: 50px;
}
.menu-container .menu-items {
width: calc(100% / 2 - 50px);
}
.gallery .gallery-list {
justify-content: center;
}
.gallery .gallery-list .gallery-items {
width: calc(100% / 2 - 50px);
}
.contact-container {
flex-direction: column-reverse;
}
.contact-container .contact-details .contact-item {
margin: 25px 0;
}
.contact-container .contact-form {
max-width: 100%;
}
.footer-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
}
}
/* Responsive Media Query code for max-width: 768px */
@media screen and (max-width: 768px) {
.slide-wrapper {
margin: 0 10px 30px;
}
.slide-wrapper .swiper-slider-btn {
display: none;
}
}
/* Responsive Media Query code for max-width: 576px */
@media screen and (max-width: 576px) {
.section-title {
padding: 32px 0;
}
.nav .nav-logo .logo-text {
font-size: 30px;
}
.hero-container {
justify-content: space-evenly;
}
.hero-container .hero-details .hero-title {
font-size: 30px;
}
.hero-container .hero-details .hero-subtitle {
font-size: var(--font-size-m);
}
.hero-container .hero-details .hero-description {
font-size: var(--font-size-s);
}
.hero-container .hero-buttons .contact-us-button,
.hero-container .hero-buttons .order-now-button {
padding: 10px 20px;
font-size: 15.04px;
}
.hero-container .hero-image-wrapper .hero-image {
margin-top: 0;
}
.menu-container .menu-items {
width: 100%;
text-align: center;
}
.menu-section .menu-container {
gap: 60px;
}
.menu-container .menu-items .menu-image {
max-width: 80%;
}
.testimonial .card-list .card-item {
padding: 8px 0;
}
.gallery .gallery-list .gallery-items {
width: 100%;
}
.footer .section-container {
padding: 0;
}
.footer-section .footer-policies {
gap: 8px;
}
}
In your script.js file, add JavaScript code to make your coffee website interactive and functional. This code will initialize the Swiper slider and toggle the nav menu on mobile devices.
const navbarLinks = document.querySelectorAll(".nav-menu .nav-item");
const openMenuButton = document.getElementById("open-menu-button");
const closeMenuButton = document.getElementById("close-menu-button");
openMenuButton.addEventListener('click', () => {
// Toggle mobile menu visibility
document.body.classList.toggle('show-mobile-menu');
});
navbarLinks.forEach(link => {
// Close menu when a link is clicked
link.addEventListener("click", () => openMenuButton.click());
});
// Close menu when the close button is clicked
closeMenuButton.addEventListener('click', () => openMenuButton.click());
/* Swiper JS */
let swiper = new Swiper('.slide-wrapper', {
loop: true,
grabCursor: true,
spaceBetween: 25,
// Pagination bullets
pagination: {
el: '.swiper-pagination',
clickable: true,
dynamicBullets: true,
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
/* Responsive breakpoints */
breakpoints: {
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
1080: {
slidesPerView: 3,
},
}
});
That’s all, now simply open the index.html file in your favorite web browser to view and test your beautiful coffee website. Remember to experiment with the code and take this website to the next level with your creativity.
Conclusion and final words
In conclusion, creating a responsive coffee website using HTML and CSS is an excellent project for beginners in web development. By following the steps outlined in this blog post, I believe you’ve successfully created your beautiful and user-friendly coffee website. From home to footer, each website section provides hands-on experience to improve your HTML and CSS coding skills.
To further enhance your web development skills, try to recreate other beautiful website projects available on this website. This will give you a better understanding of how HTML, CSS, and JavaScript create stunning websites with different features such as sliders, scroll animation, and dark mode.
If you encounter any problems while creating your coffee website, you can download the source code files for this website project for free by clicking the Download button. Additionally, you can view a live demo of it by clicking the View Live button.
Can it be used for a commercial project
It’s Good and such a nice work .
God bless you with more knowledge to create
nice
hey where i can thiis Picture please
bro video show nahi ho rahi channel pr
Dear Sir your Youtube Video goes private?
Yes, it will be available soon on CodingNepal YouTube channel.
Nice Work bro ! Love From Bangladesh
Thank you, bro. Greetings to Bangladesh.
cool bro, you very help me to understand road map code and try to clone by myself with my own style
Glad to help you. Happy coding!
Excellent…
Thank you.
Thanks your tutorial, maybe I copy and download html dan css
Yes, you can!