Simple Coffee Shop Website Homepage Design || Full Coding

Hello friends, in this blog you will know know how to create a simple and minimal homepage design for a coffee shop. For the demonstration purpose I have gave it a name of Coffee-Mania which is an imaginary name. This blog contains the source code for the tutorial I made in YouTube for this website homepage. First of all, let me clear that this source is completely free to use and anyone can use it without any of copyright issues. You can copy and paste the code from this blog or just download the source code file from my GitHub repository whose link is given at the end of this blog post. This homepage design consist of minimal and clean design.

In this simple coffee shop homepage design, I have use fonts from google fonts. This is just a homepage and isn't responsive. You can always edit the source code in order to create your own product and make it responsive. This is just a simple homepage design which contains an image as a background some nav-links and a contact button with animated hover effect.

In order to use this homepage design in your own project, you just need to follow some steps mentioned below.

Step 1:

First of all, you will need to create an index.html file in the required directory. Then you will just need to paste the code from the code box into your IDE and save the changes.

<!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>Coffee Mania - The Best Coffee Ever!</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link rel="stylesheet" href="./style.css">
</head>
<body>
<nav>
<div class="logo">
<h3>Coffee Mania</h3>
</div>
<ul class="nav-list">
<li class="na-items"><a href="#">Home</a></li>
<li class="na-items"><a href="#">About</a></li>
<li class="na-items"><a href="#">Services</a></li>
<li class="na-items"><a href="#">Contact</a></li>
</ul>
</nav>
<section>
<h3 class="main-text">Go Get Some Coffee!</h3>
<p class="body-text">The Coffee Never Got So Much Better Than Today! Just Grab A Cup Of Coffee With Coffee Mania and Be Creative.</p>
<button class="mail">Get Coffee</button>
</section>
</body>
</html>{codeBox}

Step 2:

After you are done with index.html file, you will need to create an style.css file in the same directory and paste the code from the code box and save the changes.

*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
}
body{
height: 100vh;
background-image: url(./bg.jpg);
background-size: cover;
background-position-y: 70%;
font-family: sans-serif;
color: #5a5648;
}
nav{
display: flex;
margin-top: 2%;
}
.logo{
width: 30%;
margin-left: 10%;
font-size: 33px;
}
.nav-list{
display: flex;
margin-left: 7%;
}
.na-items{
list-style: none;
margin-left: 20%;
font-size: 24px;
}
.na-items a{
text-decoration: none;
color: #5a5648;
transition: color .4s;
}
.na-items a:hover{
color: rgb(0, 0, 0);
}
.main-text{
font: 36px;
margin-left: 50%;
margin-top: 15%;
letter-spacing: 8px;
}
.body-text{
font-size: 16px;
width: 36%;
margin-left: 50%;
letter-spacing: 8px;
}
.mail{
background-color: transparent;
outline: none;
border: 4px solid #706c5f;
width: 90px;
height: 40px;
border-radius: 10px;
margin-left: 79%;
margin-top: 4%;
transition: .5s;
}
.mail:hover{
background-color: #706c5f;
color: aliceblue;
}{codeBox}

This website doesn't contain any of the JavaScript code. If you want to add JavaScript then you can always add an script.js file and link into the index.html file.

In order to make the website completely same as the documentation, you will need to download image and add as "bg.jpg". Or if you don't want to do any other work, you can just download source code file from GitHub.

{getButton} $text={Download Source Code} $icon={download}

Simple Coffee Shop Website Homepage Design || Full Coding | HTML&CSS || Free Source Code

Step 1:

Step 2:

Post a Comment

Contact Form