Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS, JavaScript, React) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "Build & Deploy a Complete Coffee Shop Website Using HTML CSS JavaScript & Netlify", we will learn how to create it following these simple easy steps.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
- Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- EXTERNAL STYLESHEET -->
<link rel="stylesheet" href="style.css" />
<!-- REMIX ICONS -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.css"
/>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Coffee Shop | Wake Up with Fresh Coffee</title>
</head>
<body>
<!-- Header Section -->
<header class="header">
<a href="" class="logo">
<h1>Coffee <span>Shop</span></h1>
</a>
<nav class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#menu">Menu</a>
<a href="#products">Products</a>
<a href="#review">Review</a>
<a href="#contact">Contact</a>
<a href="#blogs">Blogs</a>
</nav>
<div class="icons">
<i class="ri-search-line" id="search-btn"></i>
<i class="ri-shopping-cart-line" id="cart-btn"></i>
<i class="ri-menu-line" id="menu-btn"></i>
</div>
<!-- SEARCH FORM -->
<div class="search-form">
<input
type="text"
autocomplete="off"
id="search-box"
placeholder="search here..."
/>
<label for="search-box" class="ri-search-line"></label>
</div>
<!-- CART CONTAINER -->
<div class="cart-items-container">
<div class="cart-item">
<i class="ri-close-large-line"></i>
<img src="./img/cart.jpg" alt="" />
<div class="content">
<h3>Cafe macchiato</h3>
<div class="price">$15.99/-</div>
</div>
</div>
<div class="cart-item">
<i class="ri-close-large-line"></i>
<img src="./img/cart.jpg" alt="" />
<div class="content">
<h3>Espresso</h3>
<div class="price">$15.99/-</div>
</div>
</div>
<div class="cart-item">
<i class="ri-close-large-line"></i>
<img src="./img/cart.jpg" alt="" />
<div class="content">
<h3>Cappuccino</h3>
<div class="price">$15.99/-</div>
</div>
</div>
<a href="#" class="btn">checkout now</a>
</div>
</header>
<!-- HERO SECTION -->
<section class="home" id="home">
<div class="content">
<h3>fresh coffee in the morning</h3>
<p>
Start your day with the rich aroma and bold taste of our signature
blends. Hand-picked, roasted to perfection, and brewed just for you.
</p>
<a href="#" class="btn">get yours now</a>
</div>
<div class="overlay"></div>
</section>
<section class="about" id="about">
<h1 class="heading"><span>about</span> us</h1>
<div class="row">
<div class="image">
<img src="./img/about.jpg" alt="" />
</div>
<div class="content">
<h3>what makes our coffee special?</h3>
<p>
Our coffee is sourced from the finest high-altitude plantations
where the beans ripen slowly, developing complex flavors.
</p>
<p>
We roast in small batches to ensure consistency and freshness in
every cup. Taste the difference of true craftsmanship.
</p>
<a href="#" class="btn">learn more</a>
</div>
</div>
</section>
<section class="menu" id="menu">
<h1 class="heading">our <span>menu</span></h1>
<div class="box-container">
<div class="box">
<img src="./img/menu-1.jpg" alt="" />
<h3>Caffè macchiato</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<img src="./img/menu-2.jpg" alt="" />
<h3>Cappuccino</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<img src="./img/menu-3.jpg" alt="" />
<h3>Espresso</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<img src="./img/menu-1.jpg" alt="" />
<h3>Caffè macchiato</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<img src="./img/menu-2.jpg" alt="" />
<h3>Cappuccino</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="box">
<img src="./img/menu-3.jpg" alt="" />
<h3>Espresso</h3>
<div class="price">$15.99 <span>20.99</span></div>
<a href="#" class="btn">add to cart</a>
</div>
</div>
</section>
<!-- PRODUCT SECTION -->
<section class="products" id="products">
<h1 class="heading">our <span>products</span></h1>
<div class="box-container">
<div class="box">
<div class="image">
<img src="./img/product-1.jpg" alt="" />
</div>
<div class="content">
<h3>Caffè macchiato</h3>
<div class="stars">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-half-fill"></i>
</div>
<div class="price">$15.99 <span>$20.99</span></div>
<div class="icons">
<a href="#"><i class="ri-shopping-cart-line"></i></a>
<a href="#"><i class="ri-heart-line"></i></a>
<a href="#"><i class="ri-eye-line"></i></a>
</div>
</div>
</div>
<div class="box">
<div class="image">
<img src="./img/product-2.jpg" alt="" />
</div>
<div class="content">
<h3>Cappuccino</h3>
<div class="stars">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-half-fill"></i>
</div>
<div class="price">$15.99 <span>$20.99</span></div>
<div class="icons">
<a href="#"><i class="ri-shopping-cart-line"></i></a>
<a href="#"><i class="ri-heart-line"></i></a>
<a href="#"><i class="ri-eye-line"></i></a>
</div>
</div>
</div>
<div class="box">
<div class="image">
<img src="./img/product-3.jpg" alt="" />
</div>
<div class="content">
<h3>Espresso</h3>
<div class="stars">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-half-fill"></i>
</div>
<div class="price">$15.99 <span>$20.99</span></div>
<div class="icons">
<a href="#"><i class="ri-shopping-cart-line"></i></a>
<a href="#"><i class="ri-heart-line"></i></a>
<a href="#"><i class="ri-eye-line"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- REVIEWS SECTION -->
<section class="review" id="review">
<h1 class="heading">customer's <span>review</span></h1>
<div class="box-container">
<div class="box">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nulla
sit libero nemo fuga sequi nobis? Necessitatibus aut laborum, nisi
quas eaque laudantium consequuntur iste.
</p>
<img src="./img/user-1.jpg" class="user" alt="" />
<h3>John Doe</h3>
<div class="stars">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
</div>
<div class="box">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nulla
sit libero nemo fuga sequi nobis? Necessitatibus aut laborum, nisi
quas eaque laudantium consequuntur iste.
</p>
<img src="./img/user-2.jpg" class="user" alt="" />
<h3>Alex Doe</h3>
<div class="stars">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
</div>
<div class="box">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi nulla
sit libero nemo fuga sequi nobis? Necessitatibus aut laborum, nisi
quas eaque laudantium consequuntur iste.
</p>
<img src="./img/user-3.jpg" class="user" alt="" />
<h3>Mike Smith</h3>
<div class="stars">
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
<i class="ri-star-fill"></i>
</div>
</div>
</div>
</section>
<!-- CONTACT SECTION -->
<section class="contact" id="contact">
<h1 class="heading"><span>contact</span> us</h1>
<div class="row">
<iframe
class="map"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30153.788252261566!2d72.82321484621745!3d19.141690214227783!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7b63aceef0c69%3A0x2aa80cf2287dfa3b!2sJogeshwari%20West%2C%20Mumbai%2C%20Maharashtra%20400047!5e0!3m2!1sen!2sin!4v1632137920043!5m2!1sen!2sin"
allowfullscreen=""
loading="lazy"
></iframe>
<form action="">
<h3>get in touch</h3>
<div class="inputBox">
<i class="ri-user-line"></i>
<input type="text" placeholder="Full Name" />
</div>
<div class="inputBox">
<i class="ri-mail-line"></i>
<input type="email" placeholder="Email Address" />
</div>
<div class="inputBox">
<i class="ri-phone-line"></i>
<input type="text" placeholder="Phone Number" />
</div>
<input type="submit" value="contact now" class="btn" />
</form>
</div>
</section>
<!-- BLOG SECTION -->
<section class="blogs" id="blogs">
<h1 class="heading">our <span>blogs</span></h1>
<div class="box-container">
<div class="box">
<div class="image">
<img src="./img/blog-1.jpg" alt="" />
</div>
<div class="content">
<a href="#" class="title">How to Brew the Perfect Cup of Coffee</a>
<span>by admin / 21st may, 2025</span>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
dicta.
</p>
<a href="#" class="btn">read more</a>
</div>
</div>
<div class="box">
<div class="image">
<img src="./img/blog-2.jpg" alt="" />
</div>
<div class="content">
<a href="#" class="title">Roasted & Toasted: Café Conversations</a>
<span>by admin / 21st may, 2025</span>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
dicta.
</p>
<a href="#" class="btn">read more</a>
</div>
</div>
<div class="box">
<div class="image">
<img src="./img/blog-3.jpg" alt="" />
</div>
<div class="content">
<a href="#" class="title"
>The Daily Drip: Fresh Brews & Hot Topics</a
>
<span>by admin / 21st may, 2025</span>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non,
dicta.
</p>
<a href="#" class="btn">read more</a>
</div>
</div>
</div>
</section>
<!-- FOOTER SECTION -->
<section class="footer">
<div class="share">
<i class="ri-facebook-circle-fill"></i>
<i class="ri-twitter-fill"></i>
<i class="ri-instagram-fill"></i>
<i class="ri-linkedin-box-fill"></i>
<i class="ri-pinterest-fill"></i>
</div>
<div class="links">
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#menu">menu</a>
<a href="#products">products</a>
<a href="#review">review</a>
<a href="#contact">contact</a>
<a href="#blogs">blogs</a>
</div>
<div class="credit">
created by <span>U-GINE MEDIA</span> | all rights reserved
</div>
</section>
<script src="script.js"></script>
</body>
</html>
Next, add the following CSS codes to your style.css file to make website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website.
CSS
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap");
:root {
--main-color: #d3ad7f;
--black: #13131a;
--bg: #010103;
--border: 0.1rem solid rgba(255, 255, 255, 0.3);
}
* {
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: 0.2s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
body {
background: var(--bg);
}
section {
padding: 2rem 7%;
}
.heading {
text-align: center;
color: #fff;
text-transform: uppercase;
padding-bottom: 3.5rem;
font-size: 4rem;
}
.heading span {
color: var(--main-color);
text-transform: uppercase;
}
.btn {
margin-top: 1rem;
display: inline-block;
padding: 1.2rem 3rem;
font-size: 1.7rem;
color: #fff;
background: var(--main-color);
cursor: pointer;
border-radius: 3px;
}
.btn:hover {
letter-spacing: 0.2rem;
}
/* HEADER */
.header {
background: var(--bg);
display: flex;
align-items: center;
justify-content: space-between;
padding: 2.5rem 7%;
border-bottom: var(--border);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
}
.header .logo {
font-size: 1.5rem;
text-decoration: none;
color: #fff;
}
.header .logo span {
color: var(--main-color);
}
.header .navbar a {
margin: 0 1rem;
font-size: 1.6rem;
color: #fff;
text-transform: uppercase;
}
.header .navbar a:hover {
color: var(--main-color);
border-bottom: 0.1rem solid var(--main-color);
padding-bottom: 0.5rem;
}
.header .icons i {
color: #fff;
cursor: pointer;
font-size: 2.5rem;
margin-left: 2rem;
}
.header .icons i:hover {
color: var(--main-color);
}
#menu-btn {
display: none;
}
/* SEARCH FORM */
.search-form {
position: absolute;
top: 115%;
right: -100%;
width: 50rem;
height: 5rem;
background: #fff;
display: flex;
align-items: center;
transform: scaleY(0);
transform-origin: top;
}
.search-form.active {
right: 7%;
transform: scaleY(1);
}
.search-form input {
height: 100%;
width: 100%;
font-size: 1.6rem;
color: var(--black);
padding: 1rem;
text-transform: none;
}
.search-form label {
cursor: pointer;
font-size: 2.2rem;
margin-right: 1.5rem;
color: var(--black);
}
/* CART ITEM */
.cart-items-container {
position: absolute;
top: 100%;
right: -100%;
height: calc(100vh - 9.5rem);
width: 35rem;
background: #fff;
padding: 0 1.5rem;
padding-top: 2rem;
}
.cart-items-container.active {
right: 0;
}
.cart-items-container .cart-item {
position: relative;
margin: 2rem 0;
display: flex;
align-items: center;
gap: 1.5rem;
cursor: pointer;
}
.cart-items-container .cart-item i {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2rem;
cursor: pointer;
color: var(--black);
}
.cart-items-container .cart-item img {
height: 7rem;
object-fit: cover;
}
.cart-items-container .cart-item .content h3 {
font-size: 2rem;
color: var(--black);
padding-bottom: 0.5rem;
}
.cart-items-container .cart-item .content .price {
font-size: 1.5rem;
color: var(--main-color);
}
.cart-items-container .btn {
width: 100%;
text-align: center;
}
/* HERO SECTION */
.home {
min-height: 100vh;
display: flex;
align-items: center;
background: url("./img/hero.jpg") no-repeat;
background-size: cover;
background-position: center;
}
.home .content {
max-width: 60rem;
z-index: 1;
}
.home .content h3 {
font-size: 6rem;
text-transform: uppercase;
color: #fff;
}
.home .content p {
font-size: 2rem;
font-weight: lighter;
line-height: 1.8;
padding: 1rem 0;
color: #eee;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
/* ABOUT */
.about {
margin-top: 100px;
}
.about .row {
display: flex;
align-items: center;
background: var(--black);
flex-wrap: wrap;
}
.about .row .image {
flex: 1 1 45rem;
}
.about .row .image img {
width: 100%;
}
.about .row .content {
flex: 1 1 45rem;
padding: 2.5rem;
}
.about .row .content h3 {
font-size: 3.5rem;
color: #fff;
}
.about .row .content p {
font-size: 1.6rem;
color: #ccc;
padding: 1rem 0;
line-height: 1.8;
}
/* MENU SECTION */
.menu {
margin-top: 100px;
}
.menu .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
gap: 3rem;
}
.menu .box-container .box {
padding: 5rem;
text-align: center;
border: var(--border);
border-radius: 2px;
width: 100%;
}
.menu .box-container .box:hover {
background: rgba(255, 255, 255, 0.3);
border-color: var(--main-color);
}
.menu .box-container .box:hover .price {
color: var(--main-color);
}
.menu .box-container .box img {
width: 100px;
height: 100px;
border: var(--border);
border-color: var(--main-color);
margin-bottom: 2rem;
border-radius: 50%;
}
.menu .box-container .box h3 {
color: #fff;
font-size: 2rem;
padding: 1rem 0;
}
.menu .box-container .box .price {
color: #fff;
font-size: 2.5rem;
padding: 0.5rem 0;
}
.menu .box-container .box .price span {
font-size: 1.5rem;
text-decoration: line-through;
font-weight: lighter;
}
/* PRODUCTS SECTION */
.products {
margin-top: 100px;
}
.products .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
gap: 3rem;
}
.products .box-container .box {
text-align: center;
border: var(--border);
padding-bottom: 5rem;
}
.products .box-container .box .image {
margin-bottom: 10px;
}
.products .box-container .box .image img {
width: 100%;
height: 50rem;
object-fit: cover;
object-position: center;
}
.products .box-container .box:hover .image img {
filter: grayscale(100%);
}
.products .box-container .box .content h3 {
color: #fff;
font-size: 2.5rem;
}
.products .box-container .box .content .stars {
padding: 1.5rem;
}
.products .box-container .box .content .stars i {
font-size: 2rem;
color: var(--main-color);
}
.products .box-container .box .content .price {
color: #fff;
font-size: 2.5rem;
}
.products .box-container .box .content .price span {
text-decoration: line-through;
font-weight: lighter;
font-size: 1.5rem;
}
.products .box-container .box .icons {
margin-top: 20px;
}
.products .box-container .box .icons a {
height: 5rem;
width: 5rem;
font-size: 2rem;
color: #fff;
margin: 0.3rem;
padding: 0.5rem;
background: var(--main-color);
border-radius: 2px;
}
.products .box-container .box .icons a:hover {
background: #fff;
color: var(--main-color);
}
/* REVIEWS SECTION */
.review {
margin-top: 100px;
}
.review .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 1.5rem;
}
.review .box-container .box {
border: var(--border);
text-align: center;
padding: 3rem 2rem;
border-radius: 5px;
}
.review .box-container .box:hover {
background: rgba(255, 255, 255, 0.1);
}
.review .box-container .box p {
font-size: 1.5rem;
line-height: 1.8;
color: #ccc;
padding: 2rem 0;
}
.review .box-container .box .user {
height: 7rem;
width: 7rem;
border-radius: 50%;
object-fit: cover;
}
.review .box-container .box h3 {
padding: 1rem 0;
font-size: 2rem;
color: #fff;
}
.review .box-container .box .stars i {
font-size: 2.5rem;
color: var(--main-color);
}
/* CONTACT */
.contact {
margin-top: 100px;
}
.contact .row {
display: flex;
background: var(--black);
flex-wrap: wrap;
gap: 1rem;
}
.contact .row .map {
flex: 1 1 45rem;
width: 100%;
object-fit: cover;
}
.contact .row form {
flex: 1 1 45rem;
padding: 5rem 2rem;
text-align: center;
}
.contact .row form h3 {
text-transform: uppercase;
font-size: 3.5rem;
color: #fff;
}
.contact .row form .inputBox {
display: flex;
align-items: center;
margin-top: 2rem;
margin-bottom: 2rem;
background: var(--bg);
border: var(--border);
}
.contact .row form .inputBox i {
color: #fff;
font-size: 2rem;
padding-left: 2rem;
}
.contact .row form .inputBox input {
width: 100%;
padding: 2rem;
font-size: 1.7rem;
color: #fff;
text-transform: none;
background: none;
}
.contact .row form input[type="submit"] {
width: 100%;
}
/* BLOGS SECTION */
.blogs {
margin-top: 100px;
}
.blogs .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 1.5rem;
}
.blogs .box-container .box {
border: var(--border);
}
.blogs .box-container .box .image {
height: 25rem;
width: 100%;
overflow: hidden;
}
.blogs .box-container .box .image img {
height: 100%;
width: 100%;
object-fit: cover;
}
.blogs .box-container .box:hover .image img {
transform: scale(1.2);
}
.blogs .box-container .box .content {
padding: 2rem;
}
.blogs .box-container .box .content .title {
font-size: 2.5rem;
line-height: 1.5;
color: #fff;
}
.blogs .box-container .box .content .title:hover {
color: var(--main-color);
}
.blogs .box-container .box .content span {
color: var(--main-color);
display: block;
font-size: 1.5rem;
}
.blogs .box-container .box .content p {
font-size: 1.6rem;
line-height: 1.8;
color: #ccc;
padding: 1rem 0;
margin-top: 20px;
}
/* FOOTER SECTION */
.footer {
background: var(--black);
text-align: center;
margin-top: 100px;
}
.footer .share {
padding: 1rem 0;
margin: 20px 0;
}
.footer .share i {
font-size: 2.5rem;
color: #fff;
margin: 0.3rem;
cursor: pointer;
}
.footer .share i:hover {
color: var(--main-color);
}
.footer .links {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 2rem 0;
gap: 1rem;
}
.footer .links a {
padding: 0.7rem 2rem;
color: #fff;
font-size: 2rem;
text-transform: uppercase;
}
.footer .links a:hover {
color: var(--main-color);
}
.footer .credit {
font-size: 2rem;
color: #fff;
font-weight: lighter;
padding: 1.5rem;
}
.footer .credit span {
color: var(--main-color);
cursor: pointer;
}
/* MEDIA QUERIES */
@media (max-width: 991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
section {
padding: 2rem;
}
}
@media (max-width: 768px) {
#menu-btn {
display: inline-block;
}
.header .navbar {
position: absolute;
top: 100%;
right: -100%;
background: #fff;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.header .navbar.active {
right: 0;
}
.header .navbar a {
color: var(--black);
display: block;
margin: 1.5rem;
padding: 0.5rem;
font-size: 2rem;
}
.search-form {
width: 90%;
right: 2rem;
}
}
Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.
JAVASCRIPT
let navbar = document.querySelector(".navbar");
let searchForm = document.querySelector(".search-form");
let cartItem = document.querySelector(".cart-items-container");
// MENU BUTTON
document.querySelector("#menu-btn").onclick = () => {
navbar.classList.toggle("active");
searchForm.classList.remove("active");
cartItem.classList.remove("active");
};
// SEARCH BUTTON
document.querySelector("#search-btn").onclick = () => {
searchForm.classList.toggle("active");
navbar.classList.remove("active");
cartItem.classList.remove("active");
};
// CART BUTTON
document.querySelector("#cart-btn").onclick = () => {
cartItem.classList.toggle("active");
navbar.classList.remove("active");
searchForm.classList.remove("active");
};
// LISTEN TO THE WINDOW SCROLL
window.onscroll = () => {
navbar.classList.remove("active");
searchForm.classList.remove("active");
cartItem.classList.remove("active");
};
Conclusion and Final word
Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can build and deploy a "Complete Coffee Shop Website Using HTML CSS JavaScript & Netlify". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.
Happy Coding Journey 🚀
0 Comments
We are happy to hear from you.