Today In this article, we’ll show you how to create Coffee Shop / Cafe Website Page Design Using HTML, CSS & JavaScript. This type of Cafe/ Coffee Shop Website is used on websites For Coffee Shop Or Cafe. This kind of coffee shop Website Design looks attractive on websites.
Responsive coffee shop website using HTML, CSS & JavaScript
Html: HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It is used to structure and format content on the web, and to add interactive features like buttons, forms, and other elements.
Css: Cascading Style Sheets (CSS) is a stylesheet language used for describing the look and formatting of a document written in HTML. CSS is used to control the style of a web page, including colors, fonts, layout, and other design elements.
Js: JavaScript (JS) is a programming language that is primarily used to create interactive web pages and web applications. It is a client-side language, meaning that it is executed by the web browser on the user's computer, rather than on a server.
Coffee: Coffee is a popular beverage made from the roasted seeds of the Coffea plant. The seeds, also known as coffee beans, are ground and brewed to create coffee. Coffee has a rich, complex flavour and is known for its caffeine content, which can provide a boost of energy. It is enjoyed by people all over the world and is often consumed as a daily staple. There are many different ways to prepare coffee, including brewing it as a hot beverage or using it as an ingredient in cold drinks such as iced coffee or frappuccinos. There are also many types of coffee, including espresso, cappuccino, and lattes, which are made with different ratios of coffee, milk, and other ingredients.
Some Information About This Cafe / Coffee Shop Website
On this site [Coffee Shop Website], there are six sections on one page – Home, About, Menu, Gallery, Team and Contact, and each section is attractive and eye-catching. On the home page of this site, on the top, there is a sticky navigation bar with a logo on the left side and some navigation links are on the right side. On the left side of the home page, there is text about the Coffee Shop, and a button labelled as “About Us” as you can see in the background coffee image. In this website Home page you can see two different images at different times. One image for mobile devices and another image for desktop.
Cafe / Coffee Shop Website | Source Codes
To create this website (Coffee Shop Website). First, you need to create three files, one HTML, CSS and another one is a JS File. After creating these files just paste the following codes in your file.
After creating an HTML file with the name of index.html and copy and paste the given codes in your HTML file. Remember, you’ve to create a file with the .html extension. You’ve to download files from the given download button to use.
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete Responsive Coffee Shop Website Design || Codewithzan</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- header section starts -->
<header class="header">
<section class="flex">
<a href="#home" class="logo"><img src="images/logo.jpg" alt=""></a>
<nav class="navbar">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#menu">Menu</a>
<a href="#gallery">Gallery</a>
<a href="#team">Team</a>
<a href="#contact">Contact</a>
</nav>
<div id="menu-btn" class="fas fa-bars"></div>
</section>
</header>
<!-- header section ends -->
<!-- home section starts -->
<div class="home-bg">
<section class="home" id="home">
<div class="content">
<h3>coffee heaven</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut officia, accusantium mollitia laudantium dolorum dolore.</p>
<a href="#about" class="btn">about us</a>
</div>
</section>
</div>
<!-- home section ends -->
<!-- about section starts -->
<section class="about" id="about">
<div class="heading">
<img src="images/heading-img.png" alt="">
<h3>About Us</h3>
</div>
<div class="about-us">
<div class="image">
<img src="images/about-img.png" alt="">
</div>
<div class="content">
<h3>A cup of coffee can complete your day</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam suscipit sunt repellendus, dolorum recusandae placeat quae. Iste eaque aspernatur, animi deleniti voluptas, sunt molestias eveniet sint consectetur facere a ex.</p>
<a href="#menu" class="btn">our menu</a>
</div>
</div>
</section>
<!-- about section ends -->
<!-- facility section starts -->
<section class="facility">
<div class="heading">
<img src="images/heading-img.png" alt="">
<h3>Our Facility</h3>
</div>
<div class="box-container">
<div class="box">
<img src="images/icon-1.png" alt="">
<h3>varieties of coffees</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, adipisci!</p>
</div>
<div class="box">
<img src="images/icon-2.png" alt="">
<h3>coffee beans</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, adipisci!</p>
</div>
<div class="box">
<img src="images/icon-3.png" alt="">
<h3>breakfast and sweets</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, adipisci!</p>
</div>
<div class="box">
<img src="images/icon-4.png" alt="">
<h3>read to go coffee</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, adipisci!</p>
</div>
</div>
</section>
<!-- facility section ends -->
<!-- menu section starts -->
<section class="menu" id="menu">
<div class="heading">
<img src="images/heading-img.png" alt="">
<h3>Popular Coffee</h3>
</div>
<div class="box-container">
<div class="box">
<img src="images/menu-1.jpg" alt="">
<h3>love you coffee</h3>
</div>
<div class="box">
<img src="images/menu-2.jpeg" alt="">
<h3>Cappuccino</h3>
</div>
<div class="box">
<img src="images/menu-3.webp" alt="">
<h3>Mocha coffee</h3>
</div>
<div class="box">
<img src="images/menu-4.jpg" alt="">
<h3>Frappuccino</h3>
</div>
<div class="box">
<img src="images/menu-5.jpeg" alt="">
<h3>black coffee</h3>
</div>
<div class="box">
<img src="images/menu-6.jpg" alt="">
<h3>love heart coffee</h3>
</div>
</div>
</section>
<!-- menu section ends -->
<!-- gallery section starts -->
<section class="gallery" id="gallery">
<div class="heading">
<img src="images/heading-img.png" alt="">
<h3>Our Gallery</h3>
</div>
<div class="box-container">
<img src="images/gallery-1.jpg" alt="">
<img src="images/gallery-2.jpg" alt="">
<img src="images/gallery-3.jpg" alt="">
<img src="images/gallery-4.jpg" alt="">
<img src="images/gallery-5.jpg" alt="">
<img src="images/gallery-6.jpeg" alt="">
</div>
</section>
<!-- gallery section ends -->
<!-- team section starts -->
<section class="team" id="team">
<div class="heading">
<img src="images/heading-img.png" alt="">
<h3>Our Team</h3>
</div>
<div class="box-container">
<div class="box">
<img src="images/our-team-1.jpg" alt="">
<h3>Amelia</h3>
</div>
<div class="box">
<img src="images/our-team-2.jpg" alt="">
<h3>William</h3>
</div>
<div class="box">
<img src="images/our-team-3.jpg" alt="">
<h3>James</h3>
</div>
<div class="box">
<img src="images/our-team-4.jpg" alt="">
<h3>Alice</h3>
</div>
<div class="box">
<img src="images/our-team-5.jpg" alt="">
<h3>Charlotte</h3>
</div>
<div class="box">
<img src="images/our-team-6.jpg" alt="">
<h3>John</h3>
</div>
</div>
</section>
<!-- team section ends -->
<!-- contact section starts -->
<section class="contact" id="contact">
<div class="heading">
<img src="images/heading-img.png" alt="">
<h3>Contact Us</h3>
</div>
<div class="row">
<div class="image">
<img src="images/contact-img.png" alt="">
</div>
<form action="" method="post">
<h3>Book a Table</h3>
<input type="text" name="name" required class="box" maxlength="20" placeholder="Enter your name">
<input type="number" name="number" required class="box" maxlength="20" placeholder="Enter your number" min="0" max="9999999999">
<input type="number" name="guests" required class="box" maxlength="20" placeholder="How many guests" min="0" max="99">
<input type="submit" name="send" value="send message" class="btn">
</form>
</div>
</section>
<!-- contact section ends -->
<!-- footer section starts -->
<section class="footer">
<div class="box-container">
<div class="box">
<i class="fas fa-envelope"></i>
<h3>Our Email</h3>
<p>contactinfo.cafe.com</p>
</div>
<div class="box">
<i class="fas fa-clock"></i>
<h3>opening hours</h3>
<p>06:30am to 08:30pm</p>
</div>
<div class="box">
<i class="fas fa-map-marker-alt"></i>
<h3>shop location</h3>
<p>Kathmandu, Nepal, 44600</p>
</div>
<div class="box">
<i class="fas fa-phone"></i>
<h3>our number</h3>
<p>+123-456-7890</p>
<p>+155-654-890</p>
</div>
</div>
<div class="credit"> © copyright @ 2022 by <span>Codewithzan</span> | all rights reserved! </div>
</section>
<!-- footer section ends -->
<!-- custom js file link -->
<script src="js/script.js"></script>
</body>
</html>
Aftet that Create a Css file with the name of style.css and copy and paste in your css file. Remember, you’ve to create a file with the .css extension.
Css:
@import url('https://fonts.googleapis.com/css2?family=Merienda+One&family=Nunito:wght@200;300;400;500;600&display=swap');
*{
font-family: 'Nunito', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
text-decoration: none;
}
*::selection{
background-color:#be9c79;;
color:#fff;
}
::-webkit-scrollbar{
height: .5rem;
width: 1rem;
}
::-webkit-scrollbar-track{
background-color: transparent;
}
::-webkit-scrollbar-thumb{
background-color:#be9c79;;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 6.5rem;
}
section{
padding:3rem 2rem;
max-width: 1200px;
margin:0 auto;
}
.heading{
text-align: center;
margin-bottom: 3rem;
}
.heading img{
height: 4rem;
margin-bottom: 1rem;
}
.heading h3{
font-size:4rem;
color:#333;
font-family: 'Merienda One', cursive;
}
.btn{
display: inline-block;
margin-top: 1rem;
background-color: rgb(57,40,254);
cursor: pointer;
color:#fff;
font-size: 1.8rem;
padding:1rem 3rem;
text-transform: capitalize;
border-radius: 1.2rem;
}
.btn:hover{
background-color:#333;
}
.header{
position: sticky;
height: 8rem;
top:0; left: 0; right:0;
background-color:#fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
z-index: 1000;
}
.header .flex{
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding:1.5rem 10rem;
}
.header .flex .logo img{
height: 4.5rem;
}
.header .flex .navbar a{
margin-left: 2rem;
font-size: 2.8rem;
color:#333;
}
.header .flex .navbar a:hover{
color: rgb(255,107,0);
border: 1px solid rgb(255,107,0);
padding: 8px 14px;
}
#menu-btn{
display: none;
font-size: 4.5rem;
color:#333;
cursor: pointer;
}
.home-bg{
background:linear-gradient(50deg,#ffffff, transparent 100%), url(../images/home-bg.jpg) no-repeat;
background-size: cover;
background-position: center;
}
.home-bg .home{
min-height: 70rem;
display: flex;
align-items: center;
}
.home-bg .home .content{
width: 50rem;
text-align: center;
}
.home-bg .home .content h3{
font-size: 6rem;
text-transform: capitalize;
color:#333;
font-family: 'Merienda One', cursive;
}
.home-bg .home .content p{
padding:1rem 0;
font-size: 1.6rem;
color:#000000;
line-height: 2;
}
.about .about-us{
display: flex;
align-items: center;
flex-wrap: wrap;
gap:4rem;
}
.about .image{
flex:1 1 40rem;
}
.about .image img{
width: 100%;
}
.about .content{
flex:1 1 40rem;
}
.about .content h3{
font-size: 4.5rem;
color:#333;
font-family: 'Merienda One', cursive;
padding-bottom: 1rem;
}
.about .content p{
padding:1rem 0;
line-height: 2;
color:#666;
font-size: 1.5rem;
}
.facility .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, 40rem);
gap:4.5rem;
align-items: flex-start;
justify-content: center;
}
.facility .box-container .box{
text-align: center;
}
.facility .box-container .box img{
height: 25rem;
width: 40rem;
margin-bottom: .5rem;
}
.facility .box-container .box h3{
font-size: 2rem;
color:#333;
margin:1rem 0;
}
.facility .box-container .box p{
line-height: 2;
font-size: 1.5rem;
color:#666;
}
.menu .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, 40rem);
gap:2rem;
align-items: flex-start;
justify-content: center;
}
.menu .box-container .box{
text-align: center;
}
.menu .box-container .box img{
height: 30rem;
width: 40rem;
margin-bottom: 1rem;
}
.menu .box-container .box h3{
font-size: 2rem;
color:#333;
}
.gallery .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, 40rem);
gap:2.5rem;
justify-content: center;
}
.gallery .box-container img{
height: 35rem;
width: 40rem;
object-fit: cover;
}
.team .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, 40rem);
gap:2.5rem;
justify-content: center;
}
.team .box-container .box{
text-align: center;
}
.team .box-container .box img{
height: 40rem;
width: 40rem;
object-fit: cover;
margin-bottom: .5rem;
}
.team .box-container .box h3{
font-size: 2rem;
color:#333;
}
.contact .row{
display: flex;
align-items: center;
flex-wrap: wrap;
gap:2rem;
}
.contact .row .image{
flex:1 1 50rem;
}
.contact .row .image img{
width: 100%;
}
.contact .row form{
flex:1 1 30rem;
border:.2rem solid#333;
padding:2rem;
text-align: center;
}
.contact .row form h3{
font-size: 2.5rem;
margin-bottom: 1rem;
color:#333;
}
.contact .row form .box{
width: 100%;
padding:1.4rem;
font-size: 1.8rem;
color:#333;
border-bottom: 1px solid #000000;
margin:1rem 0;
}
.footer{
background-color: #000;
color: #ffffff;
}
.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, 30rem);
gap:2.5rem;
align-items: flex-start;
justify-content: center;
}
.footer .box-container .box{
text-align: center;
}
.footer .box-container .box i{
font-size: 2.5rem;
line-height: 8.5rem;
height: 8rem;
width: 8rem;
border-radius: 50%;
background-color:#be9c79;;
color:#fff;
margin-bottom: 1rem;
}
.footer .box-container .box h3{
margin:1rem 0;
font-size: 2rem;
color:#333;
}
.footer .box-container .box p{
line-height: 2;
font-size: 1.6rem;
color:#666;
}
.footer .credit{
text-align: center;
margin-top: 3rem;
padding-top: 2.5rem;
border-top:.2rem solid#333;
font-size: 2rem;
color:#333;
}
.footer .credit span{
color:#be9c79;
}
/* media queries */
@media (max-width:768px){
#menu-btn{
display: inline-block;
transition: .2s linear;
}
#menu-btn.fa-times{
transform: rotate(180deg);
}
.header .flex .navbar{
position: absolute;
top:99%; left: 0; right: 0;
background-color: rgb(4,4,4);
color: #be9c79;
border-top:.2rem solid#333;
border-bottom:.2rem solid#333;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
transition: .2s linear;
}
.header .flex .navbar.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
.header .flex .navbar a{
display: block;
text-align: center;
margin:2rem;
font-size: 3.5rem;
font-weight: 1000;
}
.home-bg{
background:linear-gradient(50deg,#ffffff, transparent 100%), url(../images/home-bg.jpeg) no-repeat;
background-size: cover;
background-position: center;
background-position: center;
height: 70vh;
}
.home-bg .home{
justify-content: center;
}
.home-bg .home .content h3{
font-size: 4rem;
}
.about .content h3{
font-size: 3rem;
}
}
@media (max-width:450px){
html{
font-size: 50%;
}
.heading img{
height: 3rem;
}
.heading h3{
font-size: 3rem;
}
}
Finally at the last Create Js file with the name of script.js and copy and paste in your Js file. Remember, you've to create a file with the.js extension.
Js:
let menu = document.querySelector('#menu-btn');
let navbar = document.querySelector('.header .flex .navbar');
menu.onclick = () =>{
menu.classList.toggle('fa-times');
navbar.classList.toggle('active');
}
window.onscroll = () =>{
menu.classList.remove('fa-times');
navbar.classList.remove('active');
}
Finally You Build your Responsive coffee Shop Website With html css and js. You can modify your code to give batter look on your website. I hope you like it. Enjoy your wonderful coffee shop Website Design with in a time.
You can also download the source code Directly to click on download button below. Click here download button it take some few seconds and automatic redirect GitHub and you can easily download code here.
Conclusion:
HTML, CSS, and JavaScript are the three main technologies used to create and design modern web pages and web applications. HTML is a markup language used to structure and format content on the web. CSS is a stylesheet language used to control the appearance of a web page. JavaScript is a programming language used to add interactivity and behaviour to web pages. Together, these technologies form the foundation of the World Wide Web and are essential tools for web developers.
Thank you.