<!DOCTYPE html>
<head>
   <title>sample</title>
   <link rel="stylesheet" href="style.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <link rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>

<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
</head>
<body>
   <header>

       <a href="#" class="logo"><i class="fa fa-car" style="font-size:20px; padding-right: 5px;"></i>Food Court</a>
       <nav class="navbar">
           <a class="active" href="#">Home</a>
           <a href="#dishes">Dishes</a>
           <a href="#about">About </a>
           <a href="#">Menu</a>
           <a href="page2.html">page2</a>
           <a href="#footer">footer</a>
       </nav>

   </header>
   <div class="banner" id="home">
       <div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
   <img src="images/fc.png">
   </div>
    <div class="swiper-slide">
   <img src="images/mh.jpg">
   </div>
    <div class="swiper-slide">
   <img src="images/nr.jpg">
   </div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

 
 
</div>
   </div>
   
   <section class="dishes" id="dishes">
       <h3 class="sub-heading">Our Dishes</h3>
       <h1 class="main-heading">Popular Dishes</h1>
       <div class="box-container">
           
           
           
           
           <div class="box">
               <img src="images/puri.jpg">
               <h3>item 2</h3>
               <div class="stars">
                   <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-half"></i>
           
               </div>
               <span>Rs 200</span>
           
               <a href="#" class="btn">Add to cart</a>
           
       
           </div>
           <div class="box">
               <img src="images/puri.jpg">
               <h3>item 3</h3>
               <div class="stars">
                   <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-half"></i>
           
               </div>
               <span>Rs 200</span>
           
               <a href="#" class="btn">Add to cart</a>
           
       
           </div>
           <div class="box">
               <img src="images/puri.jpg">
               <h3>item 4</h3>
               <div class="stars">
                   <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-half"></i>
           
               </div>
               <span>Rs 200</span>
           
               <a href="#" class="btn">Add to cart</a>
           
       
           </div>
           <div class="box">
               <img src="images/puri.jpg">
               <h3>item 4</h3>
               <div class="stars">
                   <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-half"></i>
           
               </div>
               <span>Rs 200</span>
           
               <a href="#" class="btn">Add to cart</a>
           
       
           </div>
           <div class="box">
               <img src="images/puri.jpg">
               <h3>item 4</h3>
               <div class="stars">
                   <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-half"></i>
           
               </div>
               <span>Rs 200</span>
           
               <a href="#" class="btn">Add to cart</a>
           
       
           </div>
           <div class="box">
               <img src="images/puri.jpg">
               <h3>item 4</h3>
               <div class="stars">
                   <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-half"></i>
           
               </div>
               <span>Rs 200</span>
           
               <a href="#" class="btn">Add to cart</a>
           
       
           </div>
       </div>
   
   </section>
   
   <section class="about" id="about">
       <h3 class="sub-heading">About Us</h3>
       <h1 class="main-heading">Why Food Court</h1>
       <div class="row">
           <div class="image">
               <img src="images/momos.png">
           </div>
           
           <div class="content">
               <h3>Best food in the country</h3>
               <p>This is a food court, order any thing online, delivery 2 hours
               This is a food court, order any thing online, delivery 2 hours
               This is a food court, order any thing online, delivery 2 hours
               This is a food court, order any thing online, delivery 2 hours
               This is a food court, order any thing online, delivery 2 hours
               This is a food court, order any thing online, delivery 2 hours
               This is a food court, order any thing online, delivery 2 hours</p>
           <a href="#" class="btn2">Add to cart</a>
           </div>
           
           
       
       
       </div>
       
   </section>
   

<section class="footer" id="footer">
   <div class="container">
       <div class="box">
           <h3>Locations</h3>
           <a href="#">Bangalore</a>
           <a href="#">Hyderabad</a>
           <a href="#">Mumbai</a>
           <a href="#">Chennai</a>
       </div>
       <div class="box">
           <h3>Quick Links</h3>
           <a href="#">Home</a>
           <a href="#">about</a>
           <a href="#">dishes</a>
           <a href="#">contact</a>
       </div>
       <div class="box">
           <h3>Contact Info</h3>
           <a href="#">+91 9618750208</a>
           <a href="#">airbaclabs@gmail.com</a>
           <a href="#">foodcourt</a>
           <a href="#">Bangalore</a>
       </div>
       <div class="box">
           <h3>Follow us</h3>
           <a href="#">facebook</a>
           <a href="#">instagram</a>
           <a href="#">linkedin</a>
           <a href="#">twitter</a>
       </div>
       
           
           
           
   </div>


</section>
<script>
const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  const swiper = new Swiper('.swiper', {
  speed: 400,
  spaceBetween: 100,

});


</script>



</body>


 

HTML

CSS

*{
   font-family: arial;
   padding: 0;
   margin: 0;
   
   
}


header{
   position: fixed;
   top:0; left: 0; right: 0;
   background: white;
   padding: 1rem 7%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   z-index: 1000;
   box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
   
}

header .navbar a{
       font-size: 15px;
       border-radius: 50px;
       padding: .5rem 1.5rem;
       color: black;
       text-decoration: none;
   
}

header .navbar a.active, 
header .navbar a:hover{
   
   color: white; 
   background: black;
}

header .logo{
       color: red;
       font-size: 25px;
       font-weight: bold;
       text-decoration: none;
}

.banner img{
   width: 100%;
   position: fit;
   height: auto;
   
}

.sub-heading {
       text-align: center;
       color: red;
       font-size: 25px;
       padding-top: 30px;
}
.main-heading {
       text-align: center;
       color: green;
       font-size: 35px;
       padding-top: 10px;
}

.dishes .box-container {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
       gap: 1.5rem;
}

.dishes .box-container .box {
   padding: 2.5rem;
   background: white;
   border-radius: .5rem;
   border: .1rem solid rgb(0,0,0,.2);
   box-shadow: black;
   position: relative;
   overflow: hidden;
   text-align: center;
}
.dishes .box-container .box img{
   height: 17rem;
   margin: 1rem 0;
}
.dishes .box-container .box h3{
   color: black;
   font-size: 2.5rem;
}
.dishes .box-container .box .stars{
   padding: 1rem 0;
   
}
.dishes .box-container .box .stars i{
   font-size: 1.7rem;
   color: green;
}
.dishes .box-container .box span{
   color: black;
   font-size: 2.5rem;
   margin-right: 1rem;
   font-weight: bolder;
}
.btn {
   color: white;
   background-color: red;
   border-radius: 30px;
   padding: .8rem 3rem;
   margin-top: 10px;
   font-size: 1.7 rem;
}
.btn:hover{
   background-color: green;
   letter-spacing: .1rem;
}
section{
   padding: 2rem 9%;
}

.about {
   background-color: yellow;
}

.about .row {
   
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   align-items: center;
}
.about .row .image {
   flex: 1 1 45rem;
   
}
.about .row .image img{
   width: 100%;
   
}

.about .row .content {
   flex: 1 1 45rem;
}

.about .row .content h3{
   color: red;
   font-size: 70px;
   padding: 10px;
}
.about .row .content p{
   color: black;
   font-size: 30px;
   padding: 30px;
   margin-bottom: 20px;
   
}
.about .row .content .btn2{
   
   color: white;
   background-color: red;
   border-radius: 30px;
   padding: 2rem 3rem;
   margin-top: 50px;
   font-size: 1.7 rem;
}
.about .row .content .btn2:hover{
   background-color: green;
   letter-spacing: .1rem;
}
   
.footer .container {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   gap: 1.5rem;
   
}

.footer .container .box h3{
   font-size: 2.5rem;
   color: red;
   padding: .5rem 0;
}
.footer .container .box a{
   display: block;
   font-size: 30px;
   color: black;
   padding: .5rem 0;
   text-decoration: none;
}
.swiper {
  width: 100%;
  height: 500px;
}