Design a Responsive Restaurant Website Using HTML and CSS

A responsive restaurant website is not only focused on promoting a variety of the menu and services but also helps you to provide solutions for an efficient ordering and reservations system. If your restaurant's website design is on point, it becomes one of the primary reasons customers book your restaurant.

Here, you will learn to create a responsive website for a restaurant using HTML and CSS from scratch.

Reasons to Create Restaurant Website

• Increased Visibility ? It also makes it easier for the potential customer to locate your restaurant from the internet.
• Convenience ? Anyone can observe your menu, order food or book a table straight from your website, all easily.
• Branding ? A website is a convenient place to proclaim and demonstrate your individual dining style and ambiance.
• Customer Engagement ? A website allows you to share news, offers, and changes with your audience.
• Cost-Effective ? A website can be cheaper than traditional ads while providing the additional advantage of the Internet outreach.

Prerequires to Build a Restaurant Website

To build a simple restaurant website, you'll need ?

• HTML (Hypertext Markup Language) ? The skeleton from where your website is going to be created and how you are planning to arrange your content.
• CSS (Cascading Style Sheets) ? To style your HTML elements, to match the design of your restaurant.
• Images ? Photo of the food you have prepared, the restaurant and your logo to be posted.
• Text Content ? Fundamental content which includes your food listing, your contacts and information about your restaurant.
• A Code Editor ? The codes can be written in the software such as Visual Studio Code, Sublime Text. You can choose any code editor from the list of HTML editors. You may also use our Online HTML Compiler to run and debug your code.

Methodology to Create Restaurant Website

• Plan the Website Layout ? Decide what sections/pages you need, e.g., Home, About Us, Our Menu, Reservation, Order Online, and Contact us.
• Create the Structure Using HTML ? To structure each section and page, use the HTML code to create its form. Place links which can be clicked on to bring up other sections of the website on the page from where they are required.
• Design the Layout with CSS ? When designing, make use of CSS in the decoration of the HTML elements. Make sure to use appropriate font type, color scheme and format which is consistent with the restaurant.
• Home Page Setup ? Highlight your restaurants' strengths, add images, slogan, and a limited call to action such as "Get Your Food Online Now" or "Book a Table".
• About Us Page ? Tell the story of your restaurant. Basic information about your business that should be on your website include when your business was established, why your business has a certain type of food and drinks menu among other unique features of your restaurant.
• Menu Page ? This is why for instance; you should create a separate page that can be specifically meant for a menu. It can be done by categories like appetizers, dinner, supper, and dessert menus, non-alcoholic and alcoholic beverages.
• Reservations Page ? According to this idea, the company should permit customers to make table reservations. Add a page where customers fill in their desired date, time and number of guests they plan to invite.
• Order Now Page ? A website should include an order form by which customers can choose their orders, input delivery information and proceed with the order placement.
• Contact Us Page ? Include specific information on your restaurant such as your restaurant's street address, telephone number and business hours. You can also include a contact page, on which is possible to have a contact form for any kind of requests.
• Test and Optimize ? After designing your website, it is recommended that the website you develop should be tested on different web browsers and different devices.

Website Layout: Different Pages for Restaurant Website

Home Page

Home page should contain appealing and quality images, short description about the restaurant, and the CTA button leading to the option to order food or book a table online.

About Us Page

A plain and informative page that describes the restaurant, its purpose, and possibly things that won't be found in any other similar restaurant.

Menus

When presenting your menu to your clients, ensure that you have clear Menu Item Descriptions, Prices, and Pictures. This page is one of the most important for advertising your meals and dishes.

Page for Reservations

An engaging and easy to fill form through which customers can make a booking of a table. When created, it should require information such as date, time, number of guests, contact information, and so on.

Option for Order Now

An order form in which the user enters the food selection, his/her contact and delivery information and submits an order on the website.

Contact Us Page

Always add a contact form with the number to call, an address to email and the physical address for your restaurant. The clients should not have a challenge when contacting the staff to ask anything that they may have in mind.

HTML and CSS Code to Design Responsive Restaurant Website

Here is the source code (HTML and CSS) to design the website for a restaurant.

File: index.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>VIRAT RESTAURANT</title>
<link rel="stylesheet" href="./CSS/style.css">
</head>
<body>

<!-- Nav Section Start -->
<section class="navBar">
   <div class="topNav">
      <div class="logo">
         <a href="#welcome"><span>VIRAT RESTAURANT</span> Delight</a>
      </div>

      <div class="navItems">
         <a href="#welcome">Home</a>
         <a href="#about">About Us</a>
         <a href="#menu">Menu</a>
         <a href="#reservations">Reservations</a>
      </div>
   </div>
</section>

<!-- Nav Section End -->

<!-- Welcome Section Start -->

<section class="welcome" id="welcome">
   <div class="welcomeMain">
      <div class="welcomeLeft">
         <h1>Experience Fine Dining<br>Indulge in Culinary Excellence<br>With <span>VIRAT RESTAURANT</span> Delight</h1>

         <p>Savor the finest dishes crafted by expert chefs.<br>Experience a world of flavor like never before!</p>
         <button><a href="order.html">Order Now</a></button>
      </div>

      <div class="welcomeRight">
         <img src="./img/Group 8425.png" alt="Delicious Food">
      </div>
   </div>
</section>

<!-- Welcome Section End -->

<!-- About Section Start -->

<section class="about" id="about">

   <div class="aboutMain">
      <div class="aboutLeft">
         <img class="img-responsive" src="./img/Person Image.png" alt="Restaurant Owner">
      </div>

      <div class="aboutRight">
         <h1>About Us</h1>
         <p>Welcome to VIRAT RESTAURANT, where passion meets the plate. Our restaurant is known for delivering unforgettable dining experiences with a menu that celebrates both local and international cuisine. Every dish is made with the finest ingredients to guarantee freshness and flavor.</p>
         <button><a href="contact.html">Contact Us</a></button>
      </div>
   </div>

</section>

<!-- About Section End -->

<!-- Menu Section Start -->

<section class="recipies" id="menu">
   <div class="recipiesMain">
      <div class="recipiesHead">
         <h1 class="text-center">Our Menu</h1>
         <p class="text-center">Explore our selection of signature dishes, designed to delight your taste buds.</p>
      </div>

      <div class="recipieControl">
         <div class="recipiesBox">
            <div class="recBox">
               <img class="img-responsive" src="./img/Project Cover1.jpg" alt="Appetizers">

               <div class="imgDesc">
                  <h2>Appetizers</h2>
                  <p>Start your meal with our delicious appetizers, ranging from light salads to savory bites.</p>
               </div>
            </div>
         </div>

         <div class="recipiesBox">
            <div class="recBox">
               <img class="img-responsive" src="./img/Project Cover.png" alt="Main Course">

               <div class="imgDesc">
                  <h2>Main Course</h2>
                  <p>From steaks to pasta, every main course is prepared to perfection for a fulfilling dining experience.</p>
               </div>
            </div>
         </div>

         <div class="recipiesBox">
            <div class="recBox">
               <img class="img-responsive" src="./img/Project Cover1.jpg" alt="Desserts">

               <div class="imgDesc">
                  <h2>Desserts</h2>
                  <p>Indulge in our selection of homemade desserts, the perfect sweet ending to your meal.</p>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

<!-- Menu Section End -->

<!-- Status Bar Section Start -->

<section class="statusBar">
   <div class="statusMain">
      <div class="status1">
         <h1>5k+</h1>
         <p>Positive Reviews</p>
      </div>
      <div class="status2">
         <h1>1m</h1>
         <p>Happy Customers</p>
      </div>
      <div class="status3">
         <h1>100+</h1>
         <p>Signature Dishes</p>
      </div>
   </div>
</section>

<!-- Status Bar Section End -->

<!-- Food Section Start -->

<section class="foods" id="reservations">
   <div class="foodsMain">
      <div class="foodsHead">
         <h1 class="text-center">Reserve Your Table</h1>
      </div>

      <div class="foodArea">
         <div class="foodsControl">
            <div class="foodBox">
               <div class="foodContainerBox">
                  <img class="img-responsive" src="./img/Project Cover.png" alt="Pizza">
                  <div class="imgDesc">
                     <h2>Private Dining</h2>
                     <p>Book a table for a more intimate experience with friends and family.</p>
                     <button><a href="https://example.com/reserve.html">Reserve Now</a></button>
                  </div>
               </div>
            </div>

            <div class="foodsControl">
               <div class="foodBox">
                  <div class="foodContainerBox">
                     <img class="img-responsive" src="./img/Project Cover1.jpg" alt="Burger">
                     <div class="imgDesc">
                        <h2>Special Events</h2>
                        <p>Host your next event at Gourmet Delight and make it memorable.</p>
                        <button><a href="https://example.com/reserve.html">Reserve Now</a></button>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

<!-- Food Section End -->

<!-- Footer Section Start -->

<section class="footer">
   <h1 class="text-center"><span>VIRAT RESTAURANT</span> Delight</h1>
   <h3 class="text-center">@CopyRight 2024 | All Rights Reserved</h3>
</section>

<!-- Footer Section End -->

</body>
</html>

File: orders.htm

<!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>Order Food</title>
<style>
*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: 'Quicksand', sans-serif;
}

body{
   height: 100vh;
   width: 100%;
}

.container{
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px 10px;
    
}

.contact-box{
   max-width: 850px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #fff;
   box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19);
   border-radius: 2%;
}

.left{
   background:  no-repeat center;
   background-size: cover;
   height: 100%;
}

.right{
   padding: 5px 10px;
}

h2{
   position: relative;
   padding: 0 0 10px;
   margin-bottom: 10px;
}


.field{
   width: 100%;
   border: 2px solid rgba(0, 0, 0, 0);
   outline: none;
   background-color: rgba(230, 230, 230, 0.6);
   padding: 0.5rem 1rem;
   font-size: 1.1rem;
   margin-bottom: 22px;
   transition: .3s;
}

.field:hover{
   background-color: rgba(0, 0, 0, 0.1);
}

textarea{
   min-height: 150px;
}

.btn{
   width: 100%;
   padding: 0.5rem 1rem;
   /* background-color: #2ecc71; */
   color: #fff;
   font-size: 1.1rem;
   border: none;
   outline: green;
   cursor: pointer;
   transition: .3s;
   -webkit-text-stroke: #27ae60 2px;
}

.btn:hover{
   /* border: 2px solid green; */
   background-color: aliceblue;
}

.field:focus{
   border: 2px solid rgba(30,85,250,0.47);
   background-color: #fff;
}
</style>
</head>
<body>
<body>
   <div class="container">
      <div class="contact-box">
         <div class="left"><img src="./img/pizza.jpg" alt="" srcset=""></div>
         <div class="right">
            <h2>Place Your Order</h2>
            <input type="text" class="field" placeholder="Food Id">
            <input type="number" name="" class="field"placeholder="Quantity" id="">
            <input type="text" class="field" placeholder="Your Email">
            <input type="text" class="field" placeholder="Phone">
            <textarea placeholder="Address" class="field"></textarea>
            <button class="btn">Order Now</button>
         </div>
      </div>
   </div>
</body>
</body>
</html>

File: contact.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>Contact Me</title>
<style>
*{
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   font-family: 'Quicksand', sans-serif;
}

body{
   height: 100vh;
   width: 100%;
   background-color: #f4f4f4;
}

.container{
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px 10px;
}

.contact-box{
   max-width: 850px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   justify-content: center;
   align-items: center;
   text-align: center;
   background-color: #fff;
   box-shadow: 0px 0px 19px 5px rgba(0,0,0,0.19);
   border-radius: 2%;
}

.left{
   background: url('./img/contact.png') no-repeat center;
   background-size: cover;
   height: 100%;
}

.right{
   padding: 5px 10px;
}

h2{
   position: relative;
   padding: 0 0 10px;
   margin-bottom: 10px;
}

.field{
   width: 100%;
   border: 2px solid rgba(0, 0, 0, 0);
   outline: none;
   background-color: rgba(230, 230, 230, 0.6);
   padding: 0.5rem 1rem;
   font-size: 1.1rem;
   margin-bottom: 22px;
   transition: .3s;
}

.field:hover{
   background-color: rgba(0, 0, 0, 0.1);
}

textarea{
   min-height: 150px;
}

.btn{
   width: 100%;
   padding: 0.5rem 1rem;
   background-color: #2ecc71;
   color: #fff;
   font-size: 1.1rem;
   border: none;
   cursor: pointer;
   transition: .3s;
}

.btn:hover{
   background-color: #27ae60;
}

.field:focus{
   border: 2px solid rgba(30,85,250,0.47);
   background-color: #fff;
}
</style>
</head>
<body>
   <div class="container">
       <div class="contact-box">
          <div class="left"></div>
          <div class="right">
             <h2>Contact Me</h2>
             <form action="mailto:your-email@example.com" method="POST">
                <input type="text" class="field" placeholder="Your Name" name="name" required>
                <input type="email" class="field" placeholder="Your Email" name="email" required>
                <input type="tel" class="field" placeholder="Phone" name="phone" required>
                <textarea placeholder="Message" class="field" name="message" required></textarea>
                <button class="btn" type="submit">Send</button>
             </form>
          </div>
       </div>
   </div>
</body>
</html>

CSS File (style.css)

/* Universal Start */

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   scroll-behavior: smooth;
}

.text-center{
   text-align: center;
}

.secondary{
   color: orange;
}

img-responsive{
   width: 100%;
}

h2{
   font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

p{
   font-family: Verdana, Geneva, Tahoma, sans-serif;
   color: gray;
}

button{
   color: #fff;
   padding: 2.5%;
   background-image: linear-gradient(to right, orange ,rgb(243, 70, 70));
   border-radius: 25px;
   cursor: pointer;
   border: transparent;
}

button:hover{
   background-image: linear-gradient(to left, orange ,rgb(243, 70, 70));
}

button a{
   text-decoration: none;
   color: #fff;
}

/* Universal End*/
/* <!-- -- 
----
------
--------
----------- --> */
/* <!-- Nav Section Start --> */

.navBar{
   position: sticky;
   top: 0;
   background-color: rgba(221, 205, 150, 0.5);
   padding-bottom: 1%;
 }

.topNav{
   display: flex;
   justify-content: space-between;
   padding: 2%;
   height: 10vh;
}

.navBar a{
   text-decoration: none;
   font-weight: 800;
}

.topNav .logo a{
   color: #111;
   font-weight: 900;
   letter-spacing: 0.1em;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.topNav .logo a span{
   color: orange;
}

.topNav .navItems{
   margin-right: 1%;
}

.topNav .navItems a{
   margin-right: 1em;
   color: #111;
}

.topNav .navItems a:hover{
   color: orange;
}

/* <!-- Nav Section End --> */
/* <!-- -- 
----
------
--------
----------- -- !> */
/* Welcome Section Start */

.welcomeMain{
   display: flex;
   /* border: 2px solid; */
   margin: 0 5%;
}

.welcomeMain .welcomeLeft{
   padding-top: 10%; 
   width: 50%;
} 

.welcomeMain .welcomeRight{
   width: 50%;
}

.welcomeMain .welcomeRight img{
   max-width: 100%;
   max-height: 80vh;
} 

.welcomeLeft h1{
   font-size: 2em;
   padding-bottom: 3%;
   letter-spacing: 2px;
   font-weight: 800;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.welcomeLeft h1 span{
   color: orange;
}

.welcomeLeft p{
   color: gray;
   padding-bottom: 7%;
}

/* Welcome Section End */
/* <!-- -- 
----
------
--------
----------- -- !> */
/* About Section Start */

section.about{
   background-image: url('../img/7.png');
   background-repeat: no-repeat;
   /* background-position: center; */
   /* width: 100vw; */
   /* border: 2px solid; */
   background-size: cover;
}

.aboutMain{
   display: flex;
   /* border: 2px solid; */
   margin: 0 5%;
   margin-top: 10%;
}

.aboutMain .aboutLeft{
   width: 50%;
   margin-top: 10%;
}

.aboutMain .aboutRight{
   width: 50%;
   margin-top: 10%;
}

.aboutMain .aboutRight h1{
   padding-bottom: 4%;
}

.aboutMain .aboutRight p{
   padding-bottom: 10%;
}

.aboutMain .aboutLeft img {
   max-width: 100%;
   max-height: 80vh;
   /* width: 100px; */
}

/* About Section End */
/* <!-- -- 
----
------
--------
----------- -- !> */
/* Recipies Section Start */

.recipies{
   margin-top: 5%;
}

.recipieControl{
   display: flex;
}

.recBox{
   /* border: 2px solid; */
   padding: 5%;
   margin: 5%;
   box-shadow:5px 10px 10px 5px rgba(0, 0, 0, 0.1) ;
   border-radius: 4%;
}

.recBox img{
   max-width: 100%;
   margin-bottom: 20%;
}

/* Recipies Section End */
/* <!-- -- 
----
------
--------
----------- -- !> */
/* Status Bar Start */

.statusBar{
   /* border: 2px solid; */
   margin: 4% 2%;
   padding: 3%;
   box-shadow:10px 10px 10px 10px  rgba(0, 0, 0, 0.2) ;
   border-radius: 20px;
}

.statusMain{
   display: flex;
   justify-content: space-between;
}

/* Status Bar End */
/* <!-- -- 
----
------
--------
----------- -- !> */
/* Food Setcion Start */

.foods{
   margin-top: 5%;
}

.foodArea{
   display: flex;
}

.foodBox{
   /* border: 2px solid; */
   padding: 5%;
   margin: 5%;
   box-shadow:5px 10px 10px 5px rgba(0, 0, 0, 0.1) ;
   border-radius: 4%;
   border: 2px solid;
}

.foodBox img{
   max-width: 100%;
}

.imgDesc h2 {
   width: 100%;
   font-size: 20px;
   font-weight: 900;
   padding-bottom: 2%;
}


/* Food Setcion End */
/* footer Start */
section.footer{
   background-color: #111;
   margin-top: 5%;
}

.footer h1 span{
   color: orange;
}

.footer h1{
   color: gray;
   padding-top: 3%;
}

.footer h3{
   color: #fff;
   padding: 2% 0;
}

/* footer end */

Output