index.hrml
<!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>My food delivery site | vishalfood system</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" media="screen and (max-width:1170px)" href="css/phone.css">
</head>
<body>
<div class="nav" id="navbar">
<div id="logo">
<img src="img/logo.png" alt="">
</div>
<ul>
<li id="list1"><a href="#home">Home</a></li>
<li id="list2"><a href="#about">About Us</a></li>
<li id="list3"><a href="#services">Services</a></li>
<li id="list4"><a href="#contct-sectio">Contact Us</a></li>
</ul>
</div>
<section class="banner" id="about">
<h1 class="h-primary">Welcome To the vishalfood.com</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore repellendus,Lorem, ipsum.</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repudiandae, eveniet!</p>
<button class="btn-click">Click To Order</button>
</section>
<section class="our-services" id="services">
<h2 class="h-secondary center">Our Services</h2>
<div class="service-box">
<div class="box">
<img src="img/1.jpeg" alt="Food Ordering">
<h2 class="center h-secondary">Food Ordering</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae, aperiam facilis. Sit, cumque nihil
dolorem saepe numquam debitis labore unde.</p>
</div>
<div class="box">
<img src="img/2.jpg" alt="Food Ordering">
<h2 class="center h-secondary">Food Ordering</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae, aperiam facilis. Sit, cumque nihil
dolorem saepe numquam debitis labore unde.</p>
</div>
<div class="box">
<img src="img/3.jpg" alt="Food Ordering">
<h2 class="center h-secondary">Food Ordering</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae, aperiam facilis. Sit, cumque nihil
dolorem saepe numquam debitis labore unde.</p>
</div>
</div>
</section>
<section id="clent-section">
<h1 class="h-secondary center">Our Client</h1>
<div class="clent-item">
<div class="client">
<img src="img/l1.jpg" alt="Our Client">
</div>
<div class="client">
<img src="img/l1.jpg" alt="Our Client">
</div>
<div class="client">
<img src="img/l2.jpg" alt="Our Client">
</div>
<div class="client">
<img src="img/l3.jpg" alt="Our Client">
</div>
<div class="client">
<img src="img/l1.jpg" alt="Our Client">
</div>
</div>
</section>
<section id="contct-sectio">
<h1 class="h-secondary center">
Contact Us
</h1>
<div class="contact-form">
<form action="" method="post">
<div class="form-group">
<label for="name">Name:-</label>
<input type="text" name="name" id="name" placeholder="Enter Your Name">
</div>
<div class="form-group">
<label for="email">Email:-</label>
<input type="email" name="email" id="email" placeholder="Enter Your Email">
</div>
<div class="form-group">
<label for="phone">Phone:-</label>
<input type="phone" name="phone" id="phone" placeholder="Enter Your phone">
</div>
<div class="form-group">
<label for="message">message:-</label>
<textarea name="message" id="message" cols="4" rows="3"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn-click">Submit</button>
</div>
</form>
</div>
</section>
<footer class="center"> All reserved © Vishalfood.com</footer>
</body>
</html>
css/style.css
/* css reset */
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
/* global variable */
html{
scroll-behavior: smooth;
}
:root{
--background-color: black;
}
#logo img{
width: 50px;
height: 50px;
margin: 5px 6px;
}
.nav{
display: flex;
position: absolute;
align-items: center;
/* justify-content: center; */
width: 100%;
}
.nav::before{
content: "";
height:100%;
z-index: -1;
top: 0px;
left: 0px;
width: 100%;
position: absolute;
background-color: black;
opacity: 0.5;
}
.nav ul{
display: flex;
}
.nav ul li{
padding: 20px;
margin: 2px 3px;
list-style: none;
}
.nav ul li a{
text-decoration: none;
border: 1px solid white;
color: white;
border-radius: 25px;
padding: 2px 20px;
}
.nav ul li a:hover{
color: black;
background-color: white;
}
.banner{
display: flex;
flex-direction: column;
padding: 10px;
height: 341px;
justify-content: center;
align-items: center;
margin: 0px 10px;
}
.banner::before{
content: "";
background: url(../img/bg.jpg) no-repeat center/cover;
height: 120%;
width: 100%;
position: absolute;
z-index: -1;
opacity: 0.99;
}
.banner h1{
color: white;
text-align: center;
font-size: 3.8rem;
}
.banner p{
color: white;
text-align: center;
font-size: 1.2rem;
}
.service-box{
display: flex;
flex-direction: row;
margin: 4px;
/* border: 1px solid black; */
}
.our-services{
margin: 220px 0px;
}
.our-services .service-box .box{
border: 1px solid black;
background-color: rgb(213, 216, 222);
padding: 22px 15px;
margin: 9px 16px;
border-radius: 15px;
}
.our-services .box img{
width: 250px;
margin: auto;
display: block;
}
.our-services .box h2{
font-size: 1.8rem;
margin: 10px;
}
.our-services .box p{
font-size: 1rem;
text-align: center;
}
#clent-section h1{
padding-top:10px ;
}
#clent-section{
position: relative;
}
#clent-section::before{
background: url('../img/rg.jpg');
content: "";
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
opacity: 0.5;
}
.clent-item{
display: flex;
justify-content: center;
align-items: center;
}
.client{
padding: 10px;
margin: 20px;
}
.client img{
width: 100px;
}
/* set the contacts us form */
#contct-sectio h1{
padding-top: 10px;
}
#contct-sectio{
position: relative;
/* height: 500px; */
}
#contct-sectio::before{
content: "";
height: 100%;
width: 100%;
background: url('../img/contact.jpg') no-repeat center/cover;
position: absolute;
z-index: -1;
opacity: 0.5;
}
.contact-form{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
height: 100%;
}
.contact-form form input::placeholder{
font-size: 13px;
}
.contact-form form label{
color: black;
font-size: 20px;
}
.contact-form inout,
.contact-form textarea{
font-size: 40px;
padding: 20px 30px;
width: 100%;
}
footer{
background-color: azure;
color: black;
font-size: 20px;
}
/* utility class here */
.h-primary{
font-size: 30px;
color: white;
}
.h-secondary{
font-size: 30px;
color: black;
}
.btn-click{
background-color: rgb(241, 241, 241);
padding: 10px;
margin: 19px;
border-radius: 15px;
color: black;
cursor: pointer;
}
.btn-click:hover{
background-color: transparent;
color: white;
}
.center{
text-align: center;
}
css/phone.css
/* navbar */
.nav{
flex-direction: column;
margin: 2px;
}
.nav ul li {
padding: 3px;
margin: 0px 0px;
}
.nav ul li a{
padding: 0px 4px;
display: flex;
flex-wrap: wrap;
font-size: 11px;
}
/* banner */
.banner::before {
height: 111%;
}
.banner h1 {
font-size: 1.5rem;
margin-top: 107px;
}
.banner p {
font-size: 0.7rem;
}
.btn-click{
padding: 5px;
margin: 21px;
}
/* server box */
.our-services .box img {
width: 9rem;
height: auto;
}
.clent-item{
display: flex;
flex-wrap: wrap;
}
.service-box{
flex-direction: column;
}
/* client */
.clent-item{
overflow: hidden;
}
/* contact */
.contact-form inout, .contact-form textarea {
font-size: 26px;
padding: 0px 0px;
width: 100%;
}
/* footer */
Thanks you for commenting your questions. I will see question and respond you.