How to Create a Restaurant Website Using HTML and CSS
| Youtube : | https://youtu.be/jwhz5PnlRLg |
| Views : | 797 |
| Skills : | html,css |
| Category : | Web Design |
| Tag : | Restaurant Website,Food Website |
In this tutorial, we are learning how To create responsive restaurant website using HTML and CSS with source code. In this website we are not going to use javascript or jquery. This website is going to be pure HTML and CSS.
Section we are going to design in responsive restaurant website using HTML and CSS
In our website, we are going to design three main section : Header section, Main Body And Footer section
In this tutorial we are going to design these three section with the help of their subsections. Subsections are created as per the website content.
Header
- Logo
- Main menu
- Book Table Button
Main Body
- Slider section
- Banner Section
- Food Menu Section
- Advertisement
Footer
- About Us
- Quick link
- Opening Timing
- Contact information
Video Tutorial
You can also watch video of creating How To Design responsive restaurant Website Using HTML And CSS to understand easily. You can watch the complete video tutorial below.
Let's Start The Coding
Firstly, create the folder on desktop, my folder name is : restaurant-website Inside restaurant-website folder, create two sub folder : - 1) css and 2) images
Inside the CSS folder, we will save the css file, which we will use on this website.
Inside the images folder, we will save all images which we will use on this website.
Inside restaurant-website folder, I am creating one HTML file file name - index.html
Inside css folder, I am creating one CSS file - file name - style.css
Let's start design with writing basic HTML 5 code in index.html, and link style.css file to index.html file
Meta html code. Copy And paste the code in index.html
<!----------META HTML STARTS----->
<>
<>
<>
<>Restaurant Website Using HTML And CSS<>
<>
<>
<>
<>
<!----------META HTML ENDS----->
Common CSS code. Copy And paste the below code in style.css
* {
font-family Roboto, sans-serif, arial;
box-sizing:border-box;
margin:0px;
padding:0px;
}
a {
text-decoration:none;
}
:target {
display:block!important;
}
.container {
width:100%;
max-width:1200px;
margin: 0 auto;
padding:0px 10px;
}
2) Now, we will design Header of restaurant website HTML code free.
In our top header section, we are logo on left side, nav bar in center and book table button on right side.
For creating logo, we are using img tag, for designing nav bar we are using ul>li tag, and to design book table button we are using anchor tag.
For responsive restaurant website HTML code free please copy and paste the below code to design header section.
Header section HTML code. Copy this code and paste in index.html file
<!----------HEADER HTML STARTS----->
<>
<>
<>
<><><>
<>
<>
<> <>✕<>
<>
<>Home<>
<>About Us<>
<>Category<>
<>Menu<>
<>Blog<>
<>Contact Us<>
<>
<>
<>
<>
<>
<>
<><>Book Table<><>
<><>☰<><>
<>
<>
<>
<>
<>
<!----------HEADER HTML ENDS----->
Header section CSS code . Copy the code and paste in style.css
/**********START HEADER SECTION**********/
header {
display: flex;
position: relative;
background:#ffcb01;
}
.header {
margin:5px 0px;
display:flex;
}
.logo {
max-width:30%;
min-width:150px;
}
.menu {
margin:0px auto;
text-align:center;
}
.menu ul {
display: flex;
list-style: none;
gap: 20px;
margin:12px 0px 0px 0px;
}
.menu li {
color:brown;
font-weight:600;
}
.book ul {
display: flex;
list-style: none;
gap: 20px;
margin-top:10px;
}
.book a {
font-size: 14px;
border: none;
padding: 8px 15px;
border-radius: 5px;
color: #fff;
background:red;
}
.menuicon {
display:none;
}
.closeicon {
display:none;
float:right;
font-size: 28px;
color: black;
}
/*For Mobile And Ipad Version*/
@media screen and (max-width: 768px) {
.menuicon, .closeicon {
display:unset;
}
#menu {
position: fixed;
left: 0px;
background: #00000094;
width: 100%;
height: 100%;
top: 0px;
text-align: left;
display: none;
}
.menu-inner {
background: #fff5ce;
height: 100%;
top: 0px;
left: 0px;
width: 70%;
position: absolute;
padding: 20px;
border-right: 2px solid red;
}
#menu ul {
display: block;
margin-top: 45px;
}
#menu ul li {
margin-bottom:30px;
}
}
/**********END HEADER SECTION**********/
Output Of Top Header
3) Now, we will design slider section.
In our slider section, we are having full width image. For designing slider section we are using img>src tag to show image in html.
Please copy and paste the below code to design slider section
Slider section HTML code. Copy this code and paste in index.html
<!----------SLIDER HTML STARTS----->
<>
<>
<>
<!----------SLIDER HTML ENDS----->
Slider section CSS code. Copy this code and paste in style.css file
/**********START SLIDER SECTION**********/
.w-100 {
width:100%;
}
.slider {
object-fit: cover;
width: 100%;
height:700px;
}
@media screen and (max-width: 768px) {
.slider {
height:400px;
}
}
@media screen and (max-width: 480px) {
.slider {
height:220px;
}
}
/**********END SLIDER SECTION**********/
Output Of Slider
4) Now, we will design banner section.
In our Banner section, we are having two images. For designing banner section we are using img>src tag to show image in html.
Please copy and paste the below code to design banner section
Banner section HTML code. Copy this code and paste in index.html file
<!----------BANNER HTML STARTS----->
<>
<>
<>
<>
<>
<>
<!----------BANNER HTML ENDS----->
Banner section CSS code. Copy this code and paste in style.css file
/**********START BANNER SECTION**********/
.banner {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
display: grid;
gap: 10px;
margin:30px 0px;
}
/**********END BANNER SECTION**********/
Output Of Banner
5) Now, we will design food menu listing section.
In our top header section, we are having product image, product name, sales price and order now button.
For showing product image, we are using img>src tag and h2 tag for showing product name.
Please copy and paste the below code to design food menu listing section
Food Menu Listing section HTML code. Copy this code and paste in index.html file
<!----------PRODUCT HTML STARTS----->
<>
<>Most Ordered <>Food Menu<><>
<>Top Picks from Our Customers..<>
<>
<> <>
<>Product Name Here<>
<><>$19.99<> <>$10.99<> <>
<>Order Now<> <>
<> <>
<>Product Name Here<>
<><>$19.99<> <>$10.99<> <>
<>Order Now<> <>
<> <>
<>Product Name Here<>
<><>$19.99<> <>$10.99<> <>
<>Order Now<> <>
<> <>
<>Product Name Here<>
<><>$19.99<> <>$10.99<> <>
<>Order Now<> <>
<> <>
<>Product Name Here<>
<><>$19.99<> <>$10.99<> <>
<>Order Now<> <>
<> <>
<>Product Name Here<>
<><>$19.99<> <>$10.99<> <>
<>Order Now<> <>
<> <>
<>Product Name Here<>
<><>$19.99<> <>$10.99<> <>
<>Order Now<> <>
<> <>
<>Product Name Here<>
<><>$19.99<> <>$10.99<> <>
<>Order Now<> <>
<> <>
<>Product Name Here<>
<><>$19.99<> <>$10.99<> <>
<>Order Now<> <>
<> <>
<>Product Name Here<>
<><>$19.99<> <>$10.99<> <>
<>Order Now<> <>
<> <>
<>Product Name Here<>
<><>$19.99<> <>$10.99<> <>
<>Order Now<> <>
<> <>
<>Product Name Here<>
<><>$19.99<> <>$10.99<> <>
<>Order Now<> <>
<>
<>
<!----------PRODUCT HTML ENDS----->
Food Menu Listing section CSS code. Copy this code and paste in style.css file
/**********START PRODUCT SECTION**********/
.heading {
text-align: center;
font-size:32px;
padding: 0px;
margin: 80px 0px 0px 0px;
}
.heading span {
color: #F9A825;
}
.subhead {
text-align: center;
font-size: 18px;
padding: 0px;
margin: 5px 0px 40px 0px;
}
.products {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
display: grid;
gap: 15px;
margin:0px 0px 80px 0px;
}
.pro {
border: 1px solid #fc9800;
margin-bottom: 20px;
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 0px 5px 20px 5px;
text-align:center
}
.pro h6 {
font-size: 20px;
margin: 20px 0px 5px 0px;
}
.pro b {
font-size: 26px;
margin-right: 5px;
color: red;
}
.pro strike {
font-size:16px;
}
.pro a {
text-align: center;
background: #fc9800;
color: white;
padding: 10px 12px;
border-radius: 25px;
font-size: 16px;
width:200px;
margin:0px auto;
margin-top: 20px;
}
/**********END PRODUCT SECTION**********/
Output Of Food Menu Listing
6) Now, we will design advertisement section.
In our advertisement section, we are having ads section on left side and ads dummy content on right side. For designing ads section we are using img>src tag to show ads image in html.
Please copy and paste the below code to design advertisement section
Adversitement section HTML code. Copy this code and paste in index.html file
<!----------ADVERSITEMENT HTML STARTS----->
<>
<>
<>
<>
<>
<>On Call Delivery<>
<><>Hot Delicious <> <> Pizza<>
<>Top Italian pizza at your home<>
<>Home Delivery Only In <>20 Mintue<><>
<>Call Now<> <>
<>
<>
<>
<!----------ADVERSITEMENT HTML ENDS----->
Adversitement section CSS code. Copy this code and paste in style.css file
/**********START ADVERSITEMENT SECTION**********/
.ads-section {
background: #fffbf4;
padding:20px 0px;
}
.ads {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
display: grid;
gap: 50px;
margin:20px 0px;
}
.ads div{
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.ads i {
padding-top: 50px;
color: red;
}
.ads h2 {
font-size:60px;
}
.ads span {
color: red;
}
.ads h3 {
font-size:24px;
padding: 10px 0px 10px 0px;
font-weight:500
}
.ads p {
font-size: 18px;
padding-top:5px;
}
.ads a{
margin-top: 20px;
background: red;
padding: 12px 30px;
border-radius: 10px;
color: white;
font-size: 20px;
max-width: fit-content;
}
/**********END ADVERSITEMENT SECTION**********/
Output Of Advertisement
6) Now, we will design footer section.
In our footer section, we are having about us, quick link, opening timing, contact information.
Please copy and paste the below code to design footer section
Footer section HTML code. Copy this code and paste in index.html
<!----------FOOTER HTML STARTS----->
<>
<>
<>
<>
<>About Us<>
<>If you are going to use of Lorem Ipsum need to be sure there isn't hidden of text. If you are going to use of Lorem Ipsum need to be sure there isn't hidden of text. <>
<>
<>
<>Quick Links<>
<>
<>Home<>
<>Cart<>
<>About Us<>
<>Menu<>
<>Category <>
<>Blog<>
<>Show Now<>
<>Contact Us<>
<>
<>
<>
<>Opening Timing<>
<>
<>
<>Mon-Fri.....<>
<>10:00 AM - 10:00 PM<>
<>
<>
<>Saturday...<>
<>10:00 AM - 06:00 PM<>
<>
<>
<>Sunday......<>
<>Closed<>
<>
<>
<>
<>
<>Contact Us<>
<>
<>3A-25 Ring road North-east, <>
Delhi, India, 462001<>
<>info@restaurant.com<>
<>+0 123 456 7890<>
<>
<>
<>
<>
<>
<!----------FOOTER HTML ENDS----->
<>
<>
Footer CSS code. Copy And paste the below code in style.css
/**********START FOOTER SECTION**********/
footer {
border-top: 3px solid red;
background: #fff5ce;
padding: 40px 0px;
}
.foot {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
display: grid;
gap: 10px;
padding:30px 0px 50px 0px;
margin:0px auto;
}
footer h2 {
font-size:20px;
margin-bottom:25px;
}
footer p{
text-align:justify;
padding-right:60px;
line-height:28px;
}
footer ul{
padding-left:10px;
}
footer table td{
padding:10px 0px;
}
footer li {
margin-bottom:15px;
line-height:26px;
list-style-type: disclosure-closed;
width:46%;
float:left;
margin-left:2%;
}
.contactus li{
width:90%;
}
/**********END FOOTER SECTION**********/
Output Of Footer
Introduction : HTML code for creating a web page for restaurant
A well-designed website is crucial for any restaurant to establish a strong online presence. It serves as a digital storefront, helping potential customers explore the menu, location, ambiance, and special offers before visiting. By using HTML and CSS, you can create a visually appealing and functional restaurant website that enhances user experience and attracts more customers.
When developing a restaurant website project in HTML, it is essential to have a well-organized structure. The HTML code for creating a web page for a restaurant typically includes a navigation bar, a hero section, a menu, and a contact section. Using clean and semantic HTML code improves accessibility and search engine rankings. Combining HTML with CSS ensures a visually appealing and responsive design that enhances the user experience.
Restaurant Website Project Source Code
This article will guide you through a restaurant website project in HTML and its essential elements. If you are working on a restaurant website project using HTML and CSS, having access to the restaurant website project source code can be beneficial. A well-structured source code ensures an efficient and clean design, making the website easier to maintain and update. Many open-source platforms provide templates that can be customized according to specific restaurant needs.
Conclusion
A restaurant website project using HTML and CSS plays a crucial role in marketing and customer engagement. By focusing on aesthetics, functionality, and user experience, restaurants can create a digital presence that drives traffic, enhances credibility, and ultimately increases business success. A well-structured restaurant website project in HTML acts as a powerful tool to attract and retain customers in a competitive food industry.
A restaurant website designed with HTML and CSS plays a crucial role in marketing and customer engagement. By focusing on aesthetics, functionality, and user experience, restaurants can create a digital presence that drives traffic, enhances credibility, and ultimately increases business success. A well-structured website acts as a powerful tool to attract and retain customers in a competitive food industry. A well-structured restaurant website project in HTML acts as a powerful tool to attract and retain customers in a competitive food industry.
Best tutorial on e commerce website html and css code. Very good
great article to understand how to create website for food business
great to have restaurant website using html css and javascript with source code
very easy to understand restaurant website html code free download nice work.
great to have restaurant website html code free download :) :) . You help me a lot
Thank you so much for providing html code for creating a web page for restaurant website using html and css