<!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;
}