Responsive Food And Restaurant Website Using Bootstrap 5 (Part-2).

June 6, 2021

Hello Dear Readers, Today In this Post, You will learn How to Create Amazing Responsive Food And Restaurant Website Using Bootstrap 5 (Part-2). Earlier I have shared an Amazing Responsive Food And Restaurant Website Using Bootstrap 5 (Part-1). and now it’s time to amazing Responsive Food And Restaurant Website Using Bootstrap 5 (Part-2).

This is a part of one website As you already know Complete Responsive Website is the most popular that is displayed our information properly to locate the page or file that the user requests. For those who aren’t familiar with how it looks, have you seen a page like this before? Looking at the default page, you can imagine how cringe-worthy it would feel like as a user to suddenly drop on an empty page like this.

So I decided to create this amazing Complete Responsive Website I hope you will like it, Include a set of links to popular pages on your site and try to tempt a lost visitor to continue browsing. Otherwise, they’ll have to go all the way back from the homepage and rummage through the site’s contents to find what they are looking for.

If you create a truly unique, engaging, page, visitors will want to tell the world. This can be a great source of new links. There you are, surfing in your favorite search engine when you happen upon just the thing you’re looking for.

People who land on your website are looking for its content, usually via a link. They would have clicked that link expecting one thing, so why show them a hand-drawn panda? Instead, your Complete Responsive Website should get them to where they need to be. Keeping these things in mind, I created this page.

Play Video

If you like this program, and you want to use this on your websites, projects, and wherever you want then you have to do some basic changes on codes according to your website layout or this is enough good for you and you don’t need to change then you don’t need to change anything.

Catch your user’s attention with a beautiful Complete Responsive Website created with only CSS and Bootstrap 5. Today’s tutorial will show you how to create a Complete Responsive landing page Website using only HTML and CSS.

If you’re a beginner you can use this Awesome design in your project and websites. I believe this UI design code will help you a lot. Or if you have some knowledge of Bootstrap 5 you can add some great design in this format and use it according to your requirements.

If you like this article and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects, websites, and HTML pages.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="Description" content="Enter your description here" />
  <title>Foodies</title>
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
 
  
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/responsive-style.css">
</head>

<body>
  
  <header>
    <nav class="navbar navbar-expand-lg navigation-wrap">
      <div class="container">
        <a class="navbar-brand" href="#"><img decoding="async" src="images/logo.png"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
          aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fas fa-stream navbar-toggler-icon"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#explore-food">Explore Foods</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#testimonial">Reviews</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#faq">FAQ</a>
            </li>
            <li><button class="main-btn">1200 345 123</button></li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
   
  
  <section id="home">
    <div class="container-fluid px-0 top-banner">
      <div class="container">
        <div class="row">
          <div class="col-lg-5 col-md-6">
            <h1>Good food choices are good investments.</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a odio finibus bibendum amet leo.
            </p>
            <div class="mt-4">
              <button class="main-btn">Order now <i class="fas fa-shopping-basket ps-3"></i></button>
              <button class="white-btn ms-lg-4 mt-lg-0 mt-4">Order now <i class="fas fa-angle-right ps-3"></i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

<section id="counter">
    <section class="counter-section">
      <div class="container">
        <div class="row text-center">
          <div class="col-md-3 mb-lg-0 mb-md-0 mb-5">
            <h2>
              <span id="count1"></span>+
            </h2>
            <p>SAVINGS</p>
          </div>
          <div class="col-md-3 mb-lg-0 mb-md-0 mb-5">
            <h2>
              <span id="count2"></span>+
            </h2>
            <p>PHOTOS</p>
          </div>
          <div class="col-md-3 mb-lg-0 mb-md-0 mb-5">
            <h2>
              <span id="count3"></span>+
            </h2>
            <p>ROCKETS</p>
          </div>
          <div class="col-md-3 mb-lg-0 mb-md-0 mb-5">
            <h2>
              <span id="count4"></span>+
            </h2>
            <p>GLOBES</p>
          </div>
        </div>
      </div>
    </section>
  </section>

<section id="about">
     <div class="about-section wrapper">
       <div class="container">
         <div class="row align-items-center">
           <div class="col-lg-7 col-md-12 mb-lg-0 mb-5">
             <div class="card border-0">
               <img decoding="async" src="images/img/img-1.png" class="img-fluid">
             </div>
           </div>
           <div class="col-lg-5 col-md-12 text-sec">
            <h2>We pride ourselves on making real food from the best ingredients.</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a odio finibus bibendum in sit
              amet leo. Mauris feugiat erat tellus.</p>
              <button class="main-btn mt-4">Learn More</button>
           </div>
         </div>
       </div>
       <div class="container food-type">
         <div class="row align-items-center">
           <div class="col-lg-5 col-md-12 text-sec mb-lg-0 mb-5">
            <h2>We make everything by hand with the best possible ingredients.</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a odio finibus bibendum in sit
              amet leo. Mauris feugiat erat tellus.Far far away, behind the word mountains, far from the countries
              Vokalia and Consonantia, there live the blind texts.</p>
            <ul class="list-unstyled py-3">
              <li>Etiam sed dolor ac diam volutpat.</li>
              <li>Erat volutpat aliquet imperdiet.</li>
              <li>purus a odio finibus bibendum.</li>
            </ul> 
            <button class="main-btn mt-4">Learn More</button>
           </div>
           <div class="col-lg-7 col-md-12">
             <div class="card border-0">
               <img decoding="async" src="images/img/img-2.png" class="img-fluid">
             </div>
           </div>
         </div>
       </div>
     </div>
   </section>

<section id="story">
     <div class="story-section">
       <div class="container">
         <div class="row">
           <div class="col-sm-12">
             <div class="text-content">
              <h2>When a man's stomach is full it makes no
                difference whether he is rich or poor.</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a odio
                finibus bibendum in sit amet leo. Mauris feugiat erat tellus.</p>
                <button class="main-btn mt-3">Read More</button>
             </div>
           </div>
         </div>
       </div>
     </div>
   </section>

<section id="explore-food">
     <div class="explore-food wrapper">
       <div class="container">
         <div class="row">
           <div class="col-sm-12">
             <div class="text-content text-center">
              <h2>Explore Our Foods</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a odio finibus bibendum in sit
                amet leo. Mauris feugiat erat tellus. Far far away, behind the word mountains, far from the countries
                Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove.</p>
             </div>
           </div>
         </div>
         <div class="row pt-5">
           <div class="col-lg-4 col-md-6 mb-lg-0 mb-5">
             <div class="card">
               <img decoding="async" src="images/img/img-3.jpg" class="img-fluid">
               <div class="pt-3">
                <h4>Rainbow Vegetable Sandwich</h4>
                <p>Time: 15 - 20 Minutes | Serves: 1</p>
                <span>$10.50 <del>$11.70</del></span>
                <button class="mt-4 main-btn">Order Now</button>
              </div>
             </div>
           </div>
           <div class="col-lg-4 col-md-6 mb-lg-0 mb-5">
            <div class="card">
              <img decoding="async" src="images/img/img-4.jpg" class="img-fluid">
              <div class="pt-3">
                <h4>Vegetarian Burger</h4>
                <p>Time: 30 - 45 Minutes | Serves: 1</p>
                <span>$9.20<del>$10.50</del></span>
                <button class="mt-4 main-btn">Order Now</button>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 mb-lg-0 mb-5">
            <div class="card">
              <img decoding="async" src="images/img/img-5.jpg" class="img-fluid">
              <div class="pt-3">
                <h4>Raspberry Stuffed French Toast</h4>
                <p>Time: 10 - 15 Minutes | Serves: 1</p>
                <span>$12.50<del>$13.20</del></span>
                <button class="mt-4 main-btn">Order Now</button>
              </div>
            </div>
          </div>
         </div>
       </div>
     </div>
   </section>

<section id="testimonial">
     <div class="wrapper testimonial-section">
       <div class="container text-center">
         <div class="text-center pb-4">
           <h2>Testimonial</h2>
         </div>
         <div class="row">
          <div class="col-sm-12 col-lg-10 offset-lg-1">
            <div id="carouselExampleDark" class="carousel slide" data-bs-ride="carousel">
              <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
                  aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
                  aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
                  aria-label="Slide 3"></button>
              </div>
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <div class="carousel-caption">
                    <img decoding="async" src="images/review/review-1.jpg">
                    <p>"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there
                      live the blind texts. "</p>
                    <h5>Johnthan Doe - UX Designer</h5>
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="carousel-caption">
                    <img decoding="async" src="images/review/review-2.jpg">
                    <p>"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there
                      live the blind texts. "</p>
                    <h5>Maccy Doe - Front End</h5>
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="carousel-caption">
                    <img decoding="async" src="images/review/review-1.jpg">
                    <p>"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there
                      live the blind texts. "</p>
                    <h5>Johnthan Doe - UX Designer</h5>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
       </div>
     </div>
   </section>

<section id="faq">
     <div class="faq wrapper">
       <div class="container">
         <div class="row">
           <div class="col-sm-12">
             <div class="text-center pb-4">
              <h2>Frequently Asked Questions</h2>
             </div>
           </div>
         </div>
         <div class="row pt-5">
           <div class="col-sm-6 mb-4">
            <h4><span>~</span>Is Foodies Bread really baked fresh each day?</h4>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the
              blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language.
            </p>
           </div>
           <div class="col-sm-6 mb-4">
            <h4><span>~</span>Do you bake breads containing animal fats or products?</h4>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the
              blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language.
            </p>
           </div>
           <div class="col-sm-6 mb-4">
            <h4><span>~</span>Can I order your products online?</h4>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the
              blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language.
            </p>
           </div>
           <div class="col-sm-6 mb-4">
            <h4><span>~</span>When are you opening a shop near me?</h4>
            <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the
              blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language.
            </p>
           </div>
         </div>
       </div>
     </div>
   </section>

<section id="book-food">
     <div class="book-food">
       <div class="container book-food-text">
         <div class="row text-center">
           <div class="col-lg-9 col-md-12">
            <h2>Baked fresh daily by bakers with passion.</h2>
           </div>
           <div class="col-lg-3 col-md-12 mt-lg-0 mt-4">
             <button class="main-btn">Learn more</button>
           </div>
         </div>
       </div>
     </div>
   </section>

<section id="newslettar">
     <div class="newslettar wrapper">
       <div class="container">
         <div class="row">
           <div class="sol-sm-12">
             <div class="text-content text-center pb-4">
              <h2>Hurry up! Subscribe our newsletter
                and get 25% Off</h2>
              <p>Limited time offer for this month. No credit card required. </p>
             </div>
             <form class="newsletter">
               <div class="row">
                 <div class="col-md-8 col-12">
                   <input class="form-control" placeholder="Email Address here" name="email" type="email">
                 </div>
                 <div class="col-md-4 col-12">
                   <button class="main-btn" type="submit">Subscribe</button>
                 </div>
               </div>
             </form>
           </div>
         </div>
       </div>
     </div>
   </section>

<footer id="footer">
    <div class="footer py-5">
      <div class="container">
        <div class="row">
          <div class="col-md-12 text-center">
            <a class="footer-link" href="#">Register</a>
            <a class="footer-link" href="#">Forum</a>
            <a class="footer-link" href="#">Affiliate</a>
            <a class="footer-link" href="#">FAQ</a>
            <div class="footer-social pt-4 text-center">
              <a href="#"><i class="fab fa-facebook-f"></i></a>
              <a href="#"><i class="fab fa-twitter"></i></a>
              <a href="#"><i class="fab fa-youtube"></i></a>
              <a href="#"><i class="fab fa-dribbble"></i></a>
              <a href="#"><i class="fab fa-linkedin"></i></a>
              <a href="#"><i class="fab fa-instagram"></i></a>
            </div>
          </div>
          <div class="col-sm-12">
            <div class="footer-copy">
              <div class="copy-right text-center pt-5">
                <p class="text-light">© 2021. Foodies. All rights reserved.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
  
  <script src="js/main.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Roboto:wght@100;300;400;500;700;900&display=swap');

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:active,
:hover,
:focus {
  outline: 0 !important;
  outline-offset: 0;
}

a,
a:hover {
  text-decoration: none;
}

a:hover {
  color: var(--primary-color) !important;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

/*===== Variable Define =====*/
:root {
  --primary-color: #A82C48;
  --secondry-color: #43121d;
  --third-color: #f98169;
  --white-color: #fff;
  --text-color: #555;
  --text-gray: #999;
  --black-color: #000;
  --primary-font: 'Roboto', sans-serif;
  --secondry-font: 'Quicksand', sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--primary-font);
  font-size: 100%;
  font-weight: 400;
}

/*
=========================================
    Custom Scrollbar
=========================================
*/

::-webkit-scrollbar {
  width: 0.625rem;
} 
::-webkit-scrollbar-track {
  background: var(--white-color); 
} 
::-webkit-scrollbar-thumb {
  background:var(--primary-color); 
}

/*
==========================================
   Custom CSS Design
==========================================
*/

h1 {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 3rem;
  color: var(--secondry-color);
}

h2 {
  font-weight: 700;
  font-size: 2.25rem;
  text-transform: capitalize;
  font-family: var(--secondry-font);
  color: var(--secondry-color);
  line-height: 3rem;

}

h4 {
  color: var(--secondry-color);
  font-family: var(--secondry-font);
  text-transform: capitalize;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

h5 {
  color: var(--primary-color);
  text-transform: capitalize;
  font-family: var(--secondry-font);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

p {
  font-size: 1rem;
  color: var(--text-color);
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: 1px;
}

.main-btn {
  display: inline-block;
  padding: 0.625rem 1.875rem;
  line-height: 1.5625rem;
  background-color: var(--primary-color);
  border: 0.1875rem solid var(--primary-color);
  color: var(--white-color);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: capitalize;
  box-shadow: 0px 2px 10px -1px rgb(0 0 0 / 19%);
  -webkit-transition: all .4s ease-out 0s;
  -o-transition: all .4s ease-out 0s;
  -moz-transition: all .4s ease-out 0s;
  transition: all .4s ease-out 0s;
}

.white-btn {
  padding: 0.625rem 1.875rem;
  line-height: 25px;
  background-color: var(--white-color);
  border: 0.1875rem solid var(--white-color);
  color: var(--text-color);
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: capitalize;
  box-shadow: 0px 2px 10px -1px rgb(0 0 0 / 19%);
  -webkit-transition: all .4s ease-out 0s;
  -o-transition: all .4s ease-out 0s;
  -moz-transition: all .4s ease-out 0s;
  transition: all .4s ease-out 0s;
}

.main-btn:hover {
  background-color: transparent;
  color: var(--primary-color);
}

.white-btn:hover {
  background-color: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}

.wrapper {
  padding-top: 8.25rem;
  padding-bottom: 8.25rem;
}

.text-content {
  width: 70%;
  margin: auto;
}

.counter-section h2,
.testimonial-section h2,
.book-food-text h2 {
  color: var(--white-color);
}

/*
==========================================
   Header Design
==========================================
*/
.navigation-wrap{
  position:fixed;
  width:100%;
  left:0;
  z-index:1000;
  -webkit-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out;
} 
.navigation-wrap .nav-item{
  padding:0 0.625rem;
  transition:all 200ms linear;
}
.navbar-toggler:focus{
  outline:unset;
  border:unset;
  box-shadow: none;
}
.nav-link{
  font-size:0.9375rem;
  font-weight: 600;
  text-transform: capitalize;
  color:var(--primary-color);
  letter-spacing: 1px;
}
.navigation-wrap .main-btn{
  padding:0.3125rem 1.4375rem;
  box-shadow: none;
  margin-left:0.625rem;
}

/* Change navbar styling on scroll */

.navigation-wrap.scroll-on{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  background:var(--white-color);
  box-shadow: 0 0.125rem 1.75rem 0 rgb(0,0,0,0.09);
  transition:all .15s ease-in-out 0s;
}

/*
==========================================
   top-banner Design
==========================================
*/
.top-banner{
  width:100%;
  background: url('../images/bg/bg-1.jpg') no-repeat center;
  background-size:cover;
  padding:16.875rem 0 9.375rem;
}

/*
==========================================
  counter Design
==========================================
*/
.counter-section{
  background-color: var(--primary-color);
  padding:2.5rem 0;
}
.counter-section p{
  color:var(--white-color);
  text-transform: uppercase;
}

/*
==========================================
 about section Design
==========================================
*/
.about-section{
  background: var(--white-color);
}
.about-section .card,
.about-section .card img{
  border-radius: 0.625rem;
}
.about-section .text-sec{
  padding-left:2rem;
}
 
/*
==========================================
 food type section Design
==========================================
*/
 .food-type{
   padding-top:3.25rem;
 }
.food-type ul li{
  font-size:1rem;
  color:var(--text-color);
  line-height: 32px;
  position:relative;
  margin-left: 30px;
}
.food-type ul li::before{
  position:absolute;
  left:-2.1875rem;
  color:var(--primary-color);
  font-size: 1.25rem;
  font-family: "Font Awesome 5 Free";
  content:'\f00c';
  display:inline-block;
  padding-right:3px;
  vertical-align:middle;
  font-weight: 900;
}
.story-section{
  width:100%;
  height:28.125rem;
  background: url('../images/bg/bg-2.jpg') no-repeat center;
  background-size: cover;
  padding-top:100px;
  text-align: center;
} 
.story-section h2{
  color:var(--primary-color);
}

/*
==========================================
 explore food section Design
==========================================
*/
.explore-food .card{
  border:none;
  background-color: transparent;
  border-radius: 0.9375rem;
}
.explore-food .card img{
  border-radius: 0.9375rem;
  object-fit: cover;
}
.explore-food .card span{
  display:block;
  font-size: 1.5rem;
  font-weight: 700;
  color:var(--primary-color);
  padding-bottom:1rem;
  border-bottom:0.0625rem solid #eee;
}
.explore-food .card span del{
  color:var(--text-gray);
  margin-left:0.5rem;
}

/*
==========================================
 testimonial section Design
==========================================
*/
.testimonial-section{
  background-color: var(--primary-color);
}
.testimonial-section .carousel-item{
  margin-top:3rem;
  padding:10rem 3.125rem;
  background-color:var(--white-color);
  border-radius: 0.9375rem;
  text-align: center;
} 
.testimonial-section .carousel-caption img{
  max-width:5rem;
  border-radius: 50%;
  padding:0.3125rem;
}

.testimonial-section .carousel-item .carousel-caption p{
  font-size: 1.3125rem;
  line-height: 2.0625rem;
  padding:0 11% 0.625rem;
}
.testimonial-section .carousel-indicators{
  bottom:-2.8125rem;
}
.testimonial-section .carousel-indicators button{
  width:15px;
  height:15px;
  outline:none;
  border-radius: 50%;
  border:none;
  margin-right:1rem;
  opacity:0.2;
}
.testimonial-section .carousel-indicators button.active{
  opacity:1;
}

/*
==========================================
FAQ section Design
==========================================
*/
.faq h4 span{
  color:var(--primary-color);
  font-size: 1.875rem;
  margin-right:0.3125rem;
} 
.book-food{
  width:100%;
  background:url('../images/bg/bg-3.jpg') no-repeat center;
  background-size: cover;
  background-attachment: fixed;
  background-position:0 71.9125px;
  padding:4.375rem 0
}

/* Form Control */
.newsletter{
  width:55%;
  margin:0 auto;
}
.newsletter .form-control{
  height:3.225rem;
  padding:0 1.25rem;
  font-size: 0.875rem; 
  width:100%;
  border:none;
  border-radius: 0;
  background:transparent;
  border:0.1875rem solid var(--text-gray);
  color:var(--black-color);
  font-weight: 700;
}
.newsletter .form-control:hover,
.newsletter .form-control:focus{
  outline:none;
  box-shadow: none;
  border-color:var(--primary-color);
}

/*
==========================================
footer section Design
==========================================
*/
.footer{
  background: var(--primary-color);
}
.footer .footer-link{
  font-size:1rem;
  color:var(--white-color);
  padding:0 1.875rem;
}
.footer .footer-link:hover{
  color:var(--white-color) !important;
}
.footer a i{
  font-size: 1.5rem;
  color:var(--white-color);
  padding:0 1rem;
}

@media (max-width:1024px) {

/* about section */
    
}

@media (max-width: 991px) {

/*custom classes  */
    .text-content{
        width:100%;
    }

/* navbar brand */
    .navigation-wrap .navbar-brand img{
        height:3.8125rem;
    }
    .navigation-wrap{
        text-align: center;
        background-color: var(--white-color);
    }
    .navigation-wrap .nav-link{
        line-height: 1.875rem;
    }
    /* Banner Design */
    .top-banner{
        padding:9.375rem 0 9.375rem;
    }

/* carousel design */
    .testimonial-section .carousel-item .carousel-caption p{
        padding:0;
    }
     
}

@media (max-width: 767px) {

/* custom css */
    h1{
        font-size:2.8rem;
    }
    h2{
        font-size:2rem;
        line-height: 2.0625rem;
    }

/* top banner */
    .top-banner{
        padding:10.875rem 0 9.375rem;
    }

/* story section */
    .story-section{
        height:auto;
        padding:3rem 0;
    }

/* carousel design */
    .testimonial-section .carousel-item{
        padding:11rem 3.125rem;
    }

/* newslettar */
    .newsletter{
        width:75%;
    }
    .newsletter .main-btn{
        width:100%;
        margin-top:1rem;
    }

/* footer link */
    .footer .footer-link,
    .footer a i{
        padding:0 0.7rem;
    }
     
}

@media (max-width:330px) {

/* carousel design */
    .testimonial-section .carousel-item{
        padding:13rem 3.125rem;
    }
     
}

JS

// active navbar
let nav = document.querySelector(".navigation-wrap");
window.onscroll = function () {
    if(document.documentElement.scrollTop  > 20){
        nav.classList.add("scroll-on");
    }else{
        nav.classList.remove("scroll-on");
    }
}

// nav hide 
let navBar = document.querySelectorAll('.nav-link');
let navCollapse = document.querySelector('.navbar-collapse.collapse');
navBar.forEach(function(a){
    a.addEventListener("click", function(){
        navCollapse.classList.remove("show");
    })
})
 
// counter design
 document.addEventListener("DOMContentLoaded", () => {
    function counter(id, start, end, duration){
        let obj = document.getElementById(id),
        current = start,
        range = end - start,
        increment = end > start ? 1 : -1,
        step = Math.abs(Math.floor(duration /  range)),
        timer = setInterval(() => {
            current += increment;
            obj.textContent = current;
            if(current == end){
                clearInterval(timer);
            }
        }, step);
    }
    counter("count1", 0, 1287, 3000);
    counter("count2", 100, 5786, 2500);
    counter("count3", 0, 1440, 3000);
    counter("count4", 0, 7110, 3000);
 });

12 thoughts on “Responsive Food And Restaurant Website Using Bootstrap 5 (Part-2).”

Harsh Jain says:

June 6, 2021 at 5:09 pm

please attach those images you used in your restaurant website .

Reply
1. Hammad Shaikh says:
  
  July 14, 2021 at 4:49 am
  
  we have got some problem with images Please Share us these img and bg
  thank you
  
  Reply
Unnat Jain says:

June 8, 2021 at 4:26 pm

Hi Bhaskar. Could you provide the images as it becomes very easy to follow along. Thanks

Reply
1. Code4Education says:
  
  June 12, 2021 at 4:00 pm
  
  U can put your Image according to your requirements
  
  Reply
  1. Geza Fiqrullah says:
    
    November 2, 2021 at 12:50 pm
    
    agree, we have to put our Image according to our own requirements.don’t follow along with the tutorials. we can explore and modify it to keep learning.don’t just copy-paste it :(.
    
    btw, thank you for this amazing web design Mr.Code4Education.
    we really appreciate it 🙂
    
    Reply
Anonymous says:

July 25, 2021 at 6:29 pm

Yaar images and logo’s agar YouTube videos pe hi upload kr dete to achha hota Itna ghuma rahe ho yaar 😅…

Reply
Huraira Hassan says:

September 12, 2021 at 11:55 pm

bnda kch to khud sy kar ly images lagai hoe h sab thnku so much bro for this amazing effort.

Reply
Jasmeet Kaur says:

November 28, 2021 at 12:56 pm

Thank You so much for all the efforts you have put in. It was really helpful.

Reply
Code4Education says:

December 6, 2021 at 12:52 pm

Sorry for the inconvenience, but it will be available on the last part of the project

http://codes4education.com/responsive-food-and-restaurant-website-using-bootstrap-5-part-2/

Reply
m aqib awan says:

January 5, 2022 at 2:45 pm

i need souce code

Reply
1. Code4Education says:
  
  January 8, 2022 at 5:33 pm
  
  for the source code you just need to scroll down on this page
  
  Reply
Azeem Rahman says:

August 21, 2022 at 6:00 pm

Dear Mr. Code4Education

I do not have words to describe the happiness I have gotten by getting the free source code.
You have made a front-end development hell lot easy.
I have been working in the web development field as a professional. This is exactly what I have been searching
for for a long time on youtube. I have been searching many YouTubers but you are a NEXT-LEVEL.
THANKS, A LOT ONCE AGAIN…..

HAPPY CODING

Reply

Responsive Food And Restaurant Website Using Bootstrap 5 (Part-2).

HTML

CSS

JS

12 thoughts on “Responsive Food And Restaurant Website Using Bootstrap 5 (Part-2).”

Leave a Reply Cancel reply

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript