Hello, Friends. In this article, you will learn how to create a restaurant website landing page using only HTML and CSS.
You can develop this type of fantastic Restaurant Website landing pages using simply HTML and CSS, and this is the best practise for creating landing pages and improving your HTML and CSS skills. If you're a beginner, you may easily develop this type of stunning and appealing landing page.
I hope now you have a general idea of what the project entails. In our article, we will go over this project step by step.
Step1: Setting Up the Structure (HTML)
Let us begin by establishing the project. Create a new index.html file in a new subdirectory to house the game's layout.
<!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" />
<link rel="stylesheet" href="style.css" />
<title>Foodie</title>
</head>
<body>
<link rel="preconnect" href="https://fonts.googleapis.com">
<div class="container">
<header>
<nav id="navbar">
<div class="logo"><span>Foodie</span></div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">About</a></li>
<li><a href="#order">Order</a></li>
</ul>
</nav>
<div id="mobile">
<div class="logo1"><span>Foodie</span></div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#menu">Menu</a></li>
<li><a href="#about">About</a></li>
<li><a href="#order">Order</a></li>
</ul>
</div>
<div class="overlay">
<section id="home">
<h1 class="h-primary">Welcome to Foodie</h1>
<br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis dolorum numquam minus. </p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
<button class="btn">Order Now</button>
</section>
</div>
</header>
<div id="menu">
<div class="heading">
<h1>Menu</h1>
<h3>Today's Special</h3>
</div>
<div class="card">
<img
src="https://images.unsplash.com/photo-1626074353765-517a681e40be?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80">
<div class="details">
<div class="details-sub">
<h5>Lorem, ipsum.</h5>
<h5 class="price"> $10 </h5>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit reiciendis nam non quia! Earum eveniet
minus. Facilis explicabo natus nihil voluptatem eveniet pariatur.</p>
<button>Add To Cart</button>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1593179241557-bce1eb92e47e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
alt="">
<div class="details">
<div class="details-sub">
<h5>Lorem, ipsum.</h5>
<h5 class="price"> $10 </h5>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit dolor sit amet consectetur adipisicing
elit.</p>
<button>Add To Cart</button>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1606491956689-2ea866880c84?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1921&q=80"
alt="">
<div class="details">
<div class="details-sub">
<h5>Lorem, ipsum.</h5>
<h5 class="price"> $8 </h5>
</div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Doloribus quibusdam facilis, magni
consectetur necessitatibus.</p>
<button>Add To Cart</button>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1513104890138-7c749659a591?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
alt="">
<div class="details">
<div class="details-sub">
<h5>Lorem, ipsum.</h5>
<h5 class="price"> $12 </h5>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit lorem ipsum, dolor sit amet consectetur
adipisicing elit</p>
<button>Add To Cart</button>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1899&q=80"
alt="">
<div class="details">
<div class="details-sub">
<h5>Lorem, ipsum.</h5>
<h5 class="price"> $15 </h5>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae doloremque fugit sequi quidem
eveniet?</p>
<button>Add To Cart</button>
</div>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1603894584373-5ac82b2ae398?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80"
alt="">
<div class="details">
<div class="details-sub">
<h5>Lorem, ipsum.</h5>
<h5 class="price"> $14 </h5>
</div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Delectus reiciendis nam non quia! Earum
eveniet quia.</p>
<button>Add To Cart</button>
</div>
</div>
</div>
<div id="about">
<h1 class="title">About us</h1>
<div class="about_row">
<div class="about_column">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam voluptate aperiam id saepe
natus tempore adipisci neque incidunt vel nam, distinctio, eos labore cupiditate assumenda
doloremque. Assumenda illo delectus aliquid libero, quisquam vero facere molestias neque
similique, aperiam dolores ex mollitia nobis nostrum blanditiis autem qui itaque quos, nisi
dolore.</p>
<button id="btn1">learn more</button>
</div>
<div class="about_column">
<img src="https://img.freepik.com/free-photo/chef-making-ok-sign-white-background_1368-2804.jpg?w=2000
" alt="">
</div>
</div>
</div>
<div id="order">
<h1 class="title1">order</h1>
<form action="">
<input type="text" class="inp_box" placeholder="Name">
<input type="email" class="inp_box" placeholder="Email">
<textarea type="text" class="inp_box text_area" placeholder="Adress"></textarea>
<button class="btn2">Order Now</button>
</div>
</form>
</div>
<footer>
<div>
©copyright 2022
<p>
Designed by Sonika
</p>
</div>
</footer>
</div>
</body>
</html>
Every website has three sections: the header, the main body, and the footer. In our project, we will use the same procedure; we will build a header section where we will add the heading, and we will add the main content inside the main section.
Header Section
First and foremost, we will design the main container for our foodie website. Then, using the element, we'll add a navbar to our header. Using the tag in the header, we will add a logo to our gourmet website. Then, utilising the unordered list, we'll make a list of menu items to put to the navbar. We will construct two nabars, one for large screens like desktops and one for small screens like mobiles.
On our website, we will also include an overlay (the first content following the navbar). We will add a primary heading and a welcome phrase to our culinary webpage by using the div with class overlay inside our div tag and the h1 tag. Then, using the
, we'll put a lorem ipsum text that you can customise to your liking.
Main Content Section
We organised our body into two divisions in the major material of our website. The first area is all about what we provide, which includes a meal menu, and the second portion is all about us. Why do we have the internet website and everything else?
Menu Section:
We will use the h1 tag to give our menu card a heading, and the h3 tag to add a sub-heading to our menu section.
Then, in a div with the class "card," we'll include a multiples card with various food items, as well as the price tag and a brief description of the food, as well as an option to add the item to the cart. To make those food cards, we'll start with an image of a specific food item, then use h5 and p to add details about the food item, and finally, we'll use the button tag to create a button for the "add to cart" button.
Similarly, we will add five more meal cards to our website. So we can test that within our HTML code.
About Section:
We'll use the h1 tag to add a heading to "About us," and the div tag to create a brief introduction to our website. We'll use the paragraph tag to introduce the website, and the button> tag to add the "Learn More" button for more information.
We'll use the form tag to add an input for the name and email, as well as a textarea. We can give the order through the form by using the button tag.
Footer Section:
We will build a footer section with the footer tag and a div section with the div tag. We will add the copyright icon and copyright content using the © tag, and the name of the person who designed the website using the p tag.
Let's have a look at our webpage now that we've added structure.
Step2: Styling the Restaurant Website (CSS)
Let's concentrate on how we can style our game. I'll highlight some key points to remember when styling.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Baloo Bhai 2", cursive;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #262626;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
overflow: hidden;
}
/* #navbar{
position:fixed;
top:0;
left:0;
} */
ul {
display: flex;
list-style: none;
/* text-align: center; */
color: #fff;
gap: 2rem;
position: fixed;
right: 0;
padding-right: 15px;
}
nav a {
color: white;
text-decoration: none;
}
a:hover {
background-color: rgb(22, 22, 94);
border-radius: 10px;
padding: 10px;
}
.logo {
justify-content: flex-start;
align-items: flex-start;
font-size: 2rem;
color: #fff;
margin-right: 700px;
}
.btn {
margin-top: 30px;
color: white;
cursor: pointer;
border-radius: 25px;
padding: 1rem 2rem;
}
img {
width: 100%;
object-fit: cover;
object-position: center;
}
header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
url(https://images.unsplash.com/photo-1589302168068-964664d93dc0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);
background-position: center;
background-size: cover;
height: 100vh;
}
#home {
display: flex;
text-align: center;
flex-direction: column;
padding: 220px 200px;
color: #fff;
justify-content: center;
align-items: center;
text-align: center;
}
.overlay {
background: rgb(0, 0, 0, -5);
height: 100vh;
}
#mobile {
display: none;
height: 70px;
line-height: 40px;
/* background-color: rgba(0, 0, 0, 0.200); */
background-color: #262626;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
overflow: hidden;
}
#mobile ul li {
justify-content: flex-end;
padding: -25px 5px;
margin: -38px 0;
font-size: 1rem;
color: white;
}
#mobile ul li a {
display: flex;
text-decoration: none;
color: white;
}
@media screen and (max-width: 768px) {
#mobile {
display: block;
}
#navbar {
display: none;
}
#home {
display: flex;
margin-top: 20px;
text-align: center;
color: #fff;
justify-content: center;
align-items: center;
text-align: center;
}
.logo1 {
justify-content: flex-start;
align-items: flex-start;
font-size: 1.8rem;
color: #fff;
margin-left: 20px;
margin-right: 500px;
margin-top: 15px;
}
a:hover {
background-color: rgb(22, 22, 94);
border-radius: 16px;
padding: 6px 8px 6px 8px;
margin: -7px;
}
header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
url(https://images.unsplash.com/photo-1589302168068-964664d93dc0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);
background-position: center;
background-size: cover;
height: 180vh;
}
}
.title {
text-align: center;
width: 100%;
color: yellow;
}
#menu {
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 20px 40px;
background: rgb(245, 242, 242);
min-height: 100vh;
/* margin-bottom: 20px; */
}
.heading {
background: rgb(245, 242, 242);
color: #373333;
margin-bottom: 30px;
padding: 60px 0 30px 0;
grid-column: 1/-1;
text-align: center;
}
.heading > h3 {
font-weight: 600;
font-size: 22px;
letter-spacing: 5px;
}
.card {
display: grid;
position: relative;
grid-template-rows: auto 1fr;
border-radius: 15px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
margin: 10px 20px;
}
.card img {
position: relative;
width: 100%;
height: 50vh;
border-radius: 15px 15px 0 0;
}
.details {
padding: 20px 10px;
display: grid;
grid-template-rows: auto 1fr 50px;
grid-row-gap: 15px;
}
.details-sub {
display: grid;
grid-template-columns: auto auto;
}
.details-sub h5 {
font-weight: 600;
font-size: 18px;
}
.price {
text-align: right;
}
.details p {
color: #6f6f6f;
font-size: 15px;
line-height: 25px;
align-self: stretch;
}
.details button {
/* background-color: #cb202d; */
border: none;
color: #ffffff;
font-size: 16px;
font-weight: 600;
border-radius: 7px;
width: 180px;
}
#about {
padding: 25px 0;
}
.about_row {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 0 100px;
}
.about_column {
flex: 1;
}
#btn1 {
margin-top: 20px;
padding: 10px 10px;
border-radius: 15px;
}
.about_column img {
width: 500px;
height: 500px;
border-radius: 50%;
object-fit: fill;
margin: auto;
}
.title {
color: #373333;
margin-bottom: 30px;
padding: 50px 0 30px 0;
text-align: center;
}
#order {
background: rgb(245, 242, 242);
color: white;
min-height: 100vh;
}
.title1 {
color: #373333;
margin-bottom: 30px;
padding: 50px 0 30px 0;
text-align: center;
}
form {
width: 450px;
background-color: white;
box-shadow: 0 0 20px 0 rgb(213, 212, 210);
margin: auto;
margin-top: -20px;
margin-bottom: 10px;
border-radius: 20px;
}
.inp_box {
width: 350px;
height: 37px;
/* margin-top: 20px; */
margin: 25px 45px 0 45px;
padding: 0 10px;
border-radius: 14px;
border: 1px solid #777;
outline: none;
}
.text_area {
height: 160px;
padding-top: 10px;
}
.btn2 {
border-radius: 20px;
margin: 20px 45px;
padding: 0 10px;
/* margin: auto; */
width: 30%;
}
textarea {
height: 150px;
padding-top: 10px;
}
.btn2 {
border-radius: 15px;
color: #fff;
margin-top: 18px;
padding: 10px;
}
button {
background-color: rgb(22, 22, 94);
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: rgb(94, 158, 61);
}
footer {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 2rem;
width: 100%;
background-color: #262626;
color: white;
}
Using the universal selector, we will change the webpage's default padding and margin to "zero," and we will set the box size to "border-box" using the box-sizing property.
We will set the display to flex using the nav tag selector, and the content to "space-between" using the justify content attribute. We add a 1 rem padding to our navabar and use the background colour attribute to set the background to "black" and the position to "fixed."
Using the header we will add a linear background to our header and using the background-size we will set to cover so that it cover the whole header section.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Baloo Bhai 2", cursive;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #262626;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
overflow: hidden;
}
/* #navbar{
position:fixed;
top:0;
left:0;
} */
ul {
display: flex;
list-style: none;
/* text-align: center; */
color: #fff;
gap: 2rem;
position: fixed;
right: 0;
padding-right: 15px;
}
nav a {
color: white;
text-decoration: none;
}
a:hover {
background-color: rgb(22, 22, 94);
border-radius: 10px;
padding: 10px;
}
.logo {
justify-content: flex-start;
align-items: flex-start;
font-size: 2rem;
color: #fff;
margin-right: 700px;
}
.btn {
margin-top: 30px;
color: white;
cursor: pointer;
border-radius: 25px;
padding: 1rem 2rem;
}
img {
width: 100%;
object-fit: cover;
object-position: center;
}
header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
url(https://images.unsplash.com/photo-1589302168068-964664d93dc0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);
background-position: center;
background-size: cover;
height: 100vh;
}
#home {
display: flex;
text-align: center;
flex-direction: column;
padding: 220px 200px;
color: #fff;
justify-content: center;
align-items: center;
text-align: center;
}
.overlay {
background: rgb(0, 0, 0, -5);
height: 100vh;
}
#mobile {
display: none;
height: 70px;
line-height: 40px;
/* background-color: rgba(0, 0, 0, 0.200); */
background-color: #262626;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
overflow: hidden;
}
#mobile ul li {
justify-content: flex-end;
padding: -25px 5px;
margin: -38px 0;
font-size: 1rem;
color: white;
}
#mobile ul li a {
display: flex;
text-decoration: none;
color: white;
}
@media screen and (max-width: 768px) {
#mobile {
display: block;
}
#navbar {
display: none;
}
#home {
display: flex;
margin-top: 20px;
text-align: center;
color: #fff;
justify-content: center;
align-items: center;
text-align: center;
}
.logo1 {
justify-content: flex-start;
align-items: flex-start;
font-size: 1.8rem;
color: #fff;
margin-left: 20px;
margin-right: 500px;
margin-top: 15px;
}
a:hover {
background-color: rgb(22, 22, 94);
border-radius: 16px;
padding: 6px 8px 6px 8px;
margin: -7px;
}
header {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2)),
url(https://images.unsplash.com/photo-1589302168068-964664d93dc0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80);
background-position: center;
background-size: cover;
height: 180vh;
}
}
.title {
text-align: center;
width: 100%;
color: yellow;
}
Using the media query, we will make our navbar responsive and add styling to our webpage. Simply go through the code and attempt to add some fresh styling on your own.
We will set the padding to zero and the display to "grid" using the id selector (#menu). We will add the repeat and a grip-gap of 20px using the grid-template-column attribute. We will use the minimum height property to add a minimum height of 100vh.
Using the class selector, we will style our menu card so that it looks like a menu card and specify the width and height. We will colourize our menu card by using the backdrop colour.
#menu {
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 20px 40px;
background: rgb(245, 242, 242);
min-height: 100vh;
/* margin-bottom: 20px; */
}
.heading {
background: rgb(245, 242, 242);
color: #373333;
margin-bottom: 30px;
padding: 60px 0 30px 0;
grid-column: 1/-1;
text-align: center;
}
.heading > h3 {
font-weight: 600;
font-size: 22px;
letter-spacing: 5px;
}
.card {
display: grid;
position: relative;
grid-template-rows: auto 1fr;
border-radius: 15px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
margin: 10px 20px;
}
.card img {
position: relative;
width: 100%;
height: 50vh;
border-radius: 15px 15px 0 0;
}
.details {
padding: 20px 10px;
display: grid;
grid-template-rows: auto 1fr 50px;
grid-row-gap: 15px;
}
.details-sub {
display: grid;
grid-template-columns: auto auto;
}
.details-sub h5 {
font-weight: 600;
font-size: 18px;
}
.price {
text-align: right;
}
.details p {
color: #6f6f6f;
font-size: 15px;
line-height: 25px;
align-self: stretch;
}
.details button {
/* background-color: #cb202d; */
border: none;
color: #ffffff;
font-size: 16px;
font-weight: 600;
border-radius: 7px;
width: 180px;
}
We will now set the display to flex using the id selector, and we will justify the content to the centre using the justify content property. Similarly, we will style the image and set its width and height before aligning it to the right of the text.
We'll also give our order form some styling and a different background color.
#about {
padding: 25px 0;
}
.about_row {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 0 100px;
}
.about_column {
flex: 1;
}
#btn1 {
margin-top: 20px;
padding: 10px 10px;
border-radius: 15px;
}
.about_column img {
width: 500px;
height: 500px;
border-radius: 50%;
object-fit: fill;
margin: auto;
}
.title {
color: #373333;
margin-bottom: 30px;
padding: 50px 0 30px 0;
text-align: center;
}
#order {
background: rgb(245, 242, 242);
color: white;
min-height: 100vh;
}
.title1 {
color: #373333;
margin-bottom: 30px;
padding: 50px 0 30px 0;
text-align: center;
}
form {
width: 450px;
background-color: white;
box-shadow: 0 0 20px 0 rgb(213, 212, 210);
margin: auto;
margin-top: -20px;
margin-bottom: 10px;
border-radius: 20px;
}
.inp_box {
width: 350px;
height: 37px;
/* margin-top: 20px; */
margin: 25px 45px 0 45px;
padding: 0 10px;
border-radius: 14px;
border: 1px solid #777;
outline: none;
}
.text_area {
height: 160px;
padding-top: 10px;
}
.btn2 {
border-radius: 20px;
margin: 20px 45px;
padding: 0 10px;
/* margin: auto; */
width: 30%;
}
textarea {
height: 150px;
padding-top: 10px;
}
.btn2 {
border-radius: 15px;
color: #fff;
margin-top: 18px;
padding: 10px;
}
button {
background-color: rgb(22, 22, 94);
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: rgb(94, 158, 61);
}
We wil set the display as "flex" with justify content to the center property and using the align item proeprty we will aling the items to the center and the width is set to the 100% and the background color is set as dark black and the font color is set as "White".
footer {
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 2rem;
width: 100%;
background-color: #262626;
color: white;
}
Now we've completed our restaurant website using HTML , CSS . I hope you understood the whole project.
Now We have Successfully created our Restaurant Website using HTML , CSS. You can use this project directly by copying into your IDE. WE hope you understood the project , If you any doubt feel free to comment!!
If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
follow : codewithrandom
Written By : Arun
Code By: Sonika
Top comments (0)