Table of Contents
Introduction – Restaurant Website
Hello guys, today we are going to Create an Restaurant Website in HTML, CSS. Which is the one of the most Advance Topic for every frontend developer or HTML, CSS Developer. Because in this you cover every part of CSS to make a Amazing Restaurant Website. And the Most important thing is this is One Page Website – which teaches you how create a one Page Website.
Sections Made in Website
We make 5 Section in our Restaurant Website to make a fully comfortable for our client. Here are the names of the sections.
- Home Section
- About Section
- Menu Section
- Services Section
- Contact Section
Output – Restaurant Website
HTML Codes – Restaurant Website
HTML Codes define the structure of our Restaurant Website. In this HTML Code snippet we use Font Awesome to write Beautiful and Amazing Fonts our Website. And write codes of HTML in Seven (7) different Section to clear where the Codes exist of our special topic or page.
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>
<header>
<!-- Restaurant Logo -->
<a href="#" class="logo">Pizza Restau</a>
<!-- Web Navigation -->
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#menus">Menus</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section class="home" id="home">
<div class="home-title">
<h1>Enjoy the taste</h1>
<h2>What do you want to eat today ?.</h2>
<a href="#" class="btn">Explore the menu</a>
</div>
<div class="home-image">
<img src="Home Section Image.png" alt="Hero Section Logo">
</div>
</section>
<!-- About -->
<section class="about" id="about">
<div class="about-image">
<img src="about section.png" alt="About Us Image">
</div>
<div class="about-description">
<span>About</span>
<h2>We're here</h2>
<p></p>
<a href="#" class="btn">Learn more</a>
</div>
</section>
<!-- Menus -->
<section class="menus" id="menus">
<div class="menu-heading">
<span>Our Menus</span>
<h2>We have 200+ Pizza Types</h2>
<ul class="filter">
<li class="filter-btn active">
<h3>All</h3>
</li>
<li class="filter-btn">
<h3>Pizza</h3>
</li>
<li class="filter-btn">
<h3>Coldrink</h3>
</li>
<li class="filter-btn">
<h3>Snacks</h3>
</li>
<li class="filter-btn">
<h3>Chips</h3>
</li>
</ul>
</div>
<div class="menu-container">
<div class="box">
<img src="Pizza Img.png" alt="pizza">
<h3>Cheese Pizza</h3>
<div class="star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="price">$15.00</div>
<a href="#"><button class="box-btn">Order now</button></a>
</div>
<div class="box">
<img src="Coldrink.png" alt="coldrink">
<h3>Coldrink</h3>
<div class="star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class "fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="price">$15.00</div>
<a href="#"><button class="box-btn">Order now</button></a>
</div>
<div class="box">
<img src="Snacks.png" alt="Snacks">
<h3>Snacks</h3>
<div class="star">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="price">$15.00</div>
<a href="#"><button class="box-btn">Order now</button></a>
</div>
</section>
<!-- Services -->
<section class="services" id="services">
<div class="heading">
<span>Services</span>
<h2>We Provide Best Quality Fast-Food</h2>
</div>
<div class="services-container">
<div class="services-box">
<div class="order">
<img src="order.png" alt="order">
<h3>Order</h3>
<p>Order Your Food</p>
</div>
</div>
<div class="services-box">
<div class="shipping">
<img src="Deliver.png" alt="shipping">
<h3>Shipping</h3>
<p>Coming...</p>
</div>
</div>
<div class="services-box">
<div class="delivery">
<img src="Shipping.png" alt="delivery">
<h3>Delivery</h3>
<p>Ooo... You get it </p>
</div>
</div>
</div>
</section>
<!-- Contact Us -->
<section class="contact" id="contact">
<div class="reservation">
<div class="form-title">
<p>Book your table now and have a great meal!</p>
</div>
<div class="main-form">
<form action="" method="">
<div>
<span>Full name<span class="required">*</span></span>
<input type="text" name="name" id="name" placeholder="Write your name here..." required>
</div>
<div>
<span>Email<span class="required">*</span></span>
<input type="email" name="email" id="email" placeholder="Write your email here..." required>
</div>
<div>
<span>How many people ?<span class="required">*</span></span>
<select name="people" id="people" required>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>
<span>Time<span class="required">*</span></span>
<input type="time" name="time" id="time" placeholder="time" required>
</div>
<div>
<span>Date<span class="required">*</span></span>
<input type="date" name="date" id="date" placeholder="date" required>
</div>
<div>
<span>Phone Number<span class="required">*</span></span>
<input type="number" name="number" id="number" placeholder="Write your number here..." required>
</div>
<div id="submit">
<input type="submit" value="SUBMIT" id="submit-btn">
</div>
</form>
</div>
</div>
</section>
<footer>
<section class="container">
<div class="footer-left">
<a href="#" class="title">Pizza Restau</a>
<p><strong>Pizza Restau</strong> is the One and only Fast Food, which is care also of you health.</p>
</div>
<div class="footer-center">
<i class="fa fa-phone"></i>
<p>+91 9779174183</p>
<div>
<i class="fa fa-envelope"></i>
<p>fukmecode@gail.com</p>
</div>
<div>
<i class="fa fa-map-marker" aria-hidden="true"></i>
<p><a href="#">Bela Town - Punajb</a></p>
</div>
</div>
<div class="footer-right">
<h4>NEWSLETTER</h4>
<p>Subscribe now so you don't miss attractive promotions</p>
<input type="email">
<button type="submit">Subscribe</button>
<ul class="social-media">
<li><a href="#"><i class="fa fa-globe"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
<hr>
</section>
<p class="copyright">Copyright © 2023 <strong>Pizza Restau</strong> All rights reserved</p>
</footer>
CSS Codes – Restaurant Website
CSS Codes is used to design our website – In this CSS Code Snippet you can clear all doubts how animation things easily works in CSS. And you learn how hover animation works and how make a One Page Website with HTML, CSS.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
list-style: none;
text-decoration: none;
}
:root {
--main-color: #ff702a;
--text-color: #fff;
--bg-color: #1e1c2a;
--big-font: 5rem;
--h2-font: 2.25rem;
--p-font: 0.9rem;
}
*::selection {
background-color: var(--main-color);
color: #fff;
}
body {
color: var(--text-color);
background: var(--bg-color);
}
/* Hero Section */
header {
position: relative;
top: 0;
right: 0;
width: 100%;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 105px;
background: var(--bg-color);
}
.logo {
color: var(--main-color);
font-weight: 600;
font-size: 2.4rem;
}
nav ul {
display: flex;
}
nav a {
color: var(--text-color);
font-size: 1.1rem;
padding: 10px 20px;
font-weight: 500;
}
nav a:hover {
color: var(--main-color);
transition: 0.4s;
}
/* Hero Section */
section {
padding: 70px 17%;
}
.home {
width: 100%;
min-height: 90vh;
display: grid;
grid-template-columns: repeat (2, 1fr);
grid-gap: 1.5rem;
align-items: center;
}
.home-image img {
max-width: 100%;
width: 600px;
height: auto;
}
.home-title h1 {
font-size: var(--big-font);
color: var(--main-color);
}
.home-title h2 {
font-size: var(--h2-font);
margin: 0.1rem 0 2rem;
}
.btn {
display: inline-block;
padding: 10px 20px;
background: var(--main-color);
color: #ffffff;
border-radius: 0.5rem;
}
.btn:hover {
transform: scale(1.2) translateY(10px);
transition: 0.4s;
}
/* About Us Section */
.about {
display: grid;
grid-template-columns: repeat (2, 2fr);
grid-gap: 1.5rem;
align-items: center;
background: #feeee7;
}
.about-image img {
max-width: 100%;
width: 480px;
height: auto;
}
.about-image img[alt] {
color: #000000;
}
.about-description span {
color: #000000;
font-weight: 600;
}
.about-description h2 {
color: var(--main-color);
font-size: var(--h2-font);
margin: 0.1rem 0 2rem;
}
.about-description p {
color: #000000;
margin: 0.8rem 0 1.8rem;
line-height: 1.7;
}
/* Menus Section */
.menu-heading {
text-align: center;
}
.menu-heading span {
color: var(--main-color);
font-size: 2em;
font-weight: 600;
}
.menu-heading h2 {
font-size: var(--h2-color);
margin-bottom: 25px;
}
.menu-heading .filter {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
padding: 1rem 0;
border-top: 0.3rem dashed #3f71ea;
border-bottom: 0.3rem dashed #3f71ea;
}
.filter-btn {
border: 1px solid #feeee7;
border-radius: 5rem;
margin-top: 1rem;
padding: 25px;
background: none;
outline: none;
cursor: pointer;
margin: 0.2em;
}
.filter-btn.active {
background-color: var(--main-color);
}
.filter-btn:hover {
background-color: #3f71ea;
}
.box-btn {
border: 2px solid var(--main-color);
border-radius: 5rem;
margin-top: 1rem;
padding: 10px;
background: none;
color: #000000;
cursor: pointer;
}
.menu-container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.menu-container .box {
background: #ffffff;
width: 15rem;
padding: 1.5rem;
margin: 1.5rem;
border-radius: 1rem;
box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.2);
text-align: center;
}
.menu-container .box img {
height: 20rem;
width: 100%;
object-fit: cover;
}
.menu-container .box h3 {
color: #333333;
font-size: 1.5rem;
font-weight: normal;
}
.menu-container .box .star {
color: yellow;
font-size: 1.7rem;
padding: 1rem 0.1rem;
}
.menu-container .box .price {
color: #333333;
font-size: 1.4rem;
}
.menu-container .box:hover {
transform: scale(1.02);
box-shadow: 0 1rem 1rem blur rgba(0, 0, 0, 0.2);
}
/* Services Section */
.services {
background: #feeee7;
}
.heading {
text-align: center;
}
.heading span {
color: var(--main-color);
font-weight: 600;
}
.heading h2 {
color: #000000;
}
.services-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, auto));
grid-gap: 1.5rem;
margin-top: 4rem;
}
.services-box {
text-align: center;
padding: 20px 30px;
}
.services-box img {
width: 200px;
}
.services-box h3 {
margin: 4px 0 10px;
color: var(--main-color);
font-size: 1.2rem;
}
.services-box p {
color: #000000;
line-height: 1.7;
}
/* Contact Section */
.contact {
margin: 0 auto;
max-width: 1280px;
height: 800px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.reservation {
width: 650px;
}
.form-title {
text-align: center;
margin: 0 0 40px 0;
}
.form-title h1 {
color: #fff;
font-size: 40px;
margin-bottom: 20px;
}
.form-title p {
color: #fff;
font-size: large;
}
.form-title h1 span img {
margin: 0 10px;
}
.main-form div {
margin: 10px 10px;
width: 300px;
display: inline-block;
}
.main-form div input {
margin-top: 10px;
width: 100%;
background: none;
border: 1px solid #ffca00;
font-size: 20px;
color: #fff;
outline: none;
padding: 3px 0 3px 10px;
}
.main-form div select {
margin-top: 10px;
width: 104%;
background: none;
border: 1px solid #ffca00;
font-size: 20px;
color: #fff;
outline: none;
padding: 3px 0 3px 10px;
}
.main-form div span {
width: 100%;
font-size: 25px;
color: #fff;
}
.main-form div span .required {
color: red;
margin-left: 2.5px;
}
#submit {
width: 100%;
text-align: center;
}
#submit input {
width: 200px;
background-color: yellow !important;
color: black !important;
transition: all 0.3s;
}
#submit input:hover {
width: 200px;
background-color: black !important;
color: #fff !important;
}
#submit input:active {
font-size: 19px;
background-color: rgb(46, 20, 5) !important;
color: #fff !important;
}
/* Footer Section */
footer {
width: 100%;
position: relative;
bottom: 0;
font-size: 13px;
line-height: 20px;
}
.container {
background-color: #2d2a30;
box-sizing: border-box;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-basis: 25%;
align-items: flex-start;
justify-content: space-between;
text-align: left;
font: bold 16px sans-serif;
padding: 10px;
margin: auto;
}
.footer-left .footer-center .footer-right {
display: inline-block;
vertical-align: top;
}
.footer-left {
width: 30%;
}
.title {
color: var(--main-color);
font-weight: 600;
font-size: 2.4rem;
width: 210px;
}
.footer-center {
width: 35%;
}
.footer-center i {
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}
.footer-center i.fa-envelope {
font-size: 17px;
line-height: 38px;
}
.footer-center p {
max-width: 240px;
}
.footer-center p {
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin: 0;
}
.footer-center p a {
color: var(--main-color);
}
.footer-right {
width: 35%;
}
.footer-right h4 {
color: var(--main-color);
margin-top: 15px;
}
.footer-right p {
font-size: 12px;
}
.footer-right input {
margin-top: 10px;
height: 40px;
width: 17vw;
padding: 0 15px;
outline: none;
}
.footer-right button {
height: 40px;
width: 5rem;
outline: none;
color: var(--main-color);
background-color: var(--bg-color);
border: none;
cursor: pointer;
}
.footer-right button:hover {
color: #feeee7;
background-color: #3f71ea;
}
.social-media {
margin-top: 25px;
display: flex;
}
.social-media a {
display: block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin: 0 8px;
}
.social-media a:hover {
background-color: #3f71ea;
}
.container hr {
width: 100%;
border: 0;
border-bottom: 1px solid #ccc;
margin-top: 20px;
}
/* Copyright */
.copyright {
background-color: #2d2a30;
text-align: center;
}
Complete Codes
More Things Get in Website
In our website you get more things like Free E-books and Free Hand-Written Notes and also you can play quiz to get certificate from us.