Grocery Webpage Nikhil Kumar and Raj Gupta

REPORT
On
Project: Grocery Website
Submitted by
Name: Nikhil Kumar Agarwal, Raj Gupta

Registration no: 12215039,12215327
Program Name: Bachelor of Technology
(Computer Science and Engineering)
Under the Guidance of
Ms. Nausheen Fatima

School of Computer Science & Engineering
Lovely Professional University
(October-November 2022)
DECLARATION
We hereby declare that we have completed my simulation project on a Grocery

Website from 10-10-2022 to 30-11-2022 under the guidance of Ms. Nausheen
Fatima. We have declared that We have worked with full dedication during
these seven weeks to fulfil the requirements of training for the award of degree
of Bachelor of Technology (Computer Science and Engineering), Lovely
Professional University, Phagwara
Date: 30-11-2022 Signature

Registration No:12215039, 12215327
2
ACKNOWLEDGEMENT
Primarily We would like to thank God for being able to learn a new technology.
Then I would like to express my special thanks of gratitude to the teacher who
provide me the golden opportunity to learn a new technology from home.
We would like to also thank my own college Lovely Professional University for
offering such a course which not only improve my programming skill but also
taught me other new technology.
Then, We would like to thank my parents and friends who have helped me with
their valuable suggestions and guidance for choosing this course.
We am making this project not only for marks but to also increase my
knowledge.
THANKS AGAIN TO ALL
3
DESIGN AND SOURCE CODE
Source code:
Main page source code (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>Grocery website by Nikhil Kumar Agarwal and Raj
Gupta</title>
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-
bundle.min.css" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header class="header">
<a href="#" class="logo"> <i class="fas fa-shopping-

basket"></i> Shop It </a>
<nav class="navbar">
<a href="#home">home</a>
<a href="#features">revolution</a>
<a href="products.html" target="_blank">products</a>
<a href="#categories">advantages</a>
<a href="review.html" target="_blank">review</a>
<a href=#contact>contact us</a>
</nav>
<div class="icons">
<div class="fas fa-bars" id="menu-btn"></div>
<div class="fas fa-search" id="search-btn"></div>
<div class="fas fa-shopping-cart" id="cart-btn"></div>
4
<a href="login.html" target="_blank"><div class="fas fa-
user" id="login-btn"></div></a>
</div>
<form action="" class="search-form">

<input type="search" id="search-box" placeholder="search
here...">
<label for="search-box" class="fas fa-search"></label>
</form>
</header>
<section class="home" id="home">
<div class="content">
<h3>fresh and <span>organic</span> products for your</h3>
<p>Itni Fast Delivery <span>BY GOD</span> </p>
<a href="products.html" class="btn">apply for free
sample</a>
</div>
</section>
<h1 class="heading"> our <span>Challenges</span> </h1>
<section class="challen" id="home">
<div class="content">
<h3><span>The food is Ending</span></h3>
<p>During Food Industry evolution, humankind has
habituated to meat-based diet as a primary energy source. They have
managed to grow corn, wheat, and rice.</p>
<h3><span>Solution - Vertical farming</span></h3>
<p>Vertical farming is a way of taking the controlled
environment of a modern commercial greenhouse to the literal next
level. By stacking plants vertically on shelves or tall pillars,
vertical farming allows 10 times the yield for a given land area.
Plants are grown in completely enclosed conditions,

with LED lights replacing sunshine and closed-loop water recycling.
There is no need for pesticides, since the indoor space is already free
of bugs, and plants can be grown in such clean conditions that there is
no need to wash them before eating.</p>
</div>
</section>
5
<marquee behavior="scroll" direction="left"
onmousedown="this.stop();" onmouseup="this.start();">
Todays offer : 25% off on Vegeatables and fruits on purchase of
order above 499₹
</marquee>
<section class="footer">
<div class="box-container">
<div class="box">
<h3> Shop It <i class="fas fa-shopping-basket"></i>
</h3>
<p>Fresh and organic fruits directly from farm to your
home.</p>
<p>At your service</p>
<div class="share">
<a
href="https://www.facebook.com/hearthacker30.net" target="_blank"
class="fab fa-facebook-f" ></a>
<a href="https://twitter.com/NIKHILK72558999"
target="_blank" class="fab fa-twitter"></a>
<a
href="https://www.instagram.com/_simply.nikhil_kumar/" target="_blank"
class="fab fa-instagram"></a>
<a href="https://www.linkedin.com/in/nikhil-kumar-
agarwal-48a738199/" target="_blank" class="fab fa-linkedin"></a>
</div>
</div>
<div class="box">
<h3>contact info</h3>
<a href="#" class="links"> <i class="fas fa-phone"></i>
+918328051347 </a>
+918759158886 </a>
<a href="#" class="links"> <i class="fas fa-
envelope"></i> nikhilkumar@gmail.com </a>
<a href="https://goo.gl/maps/vk2Vp9m6sQMgDNJ99"
target="_blank" class="links"> <i class="fas fa-map-marker-alt"></i>
Jalhandhar, india - 144001 </a>
</div>
<div class="box">
<h3>newsletter</h3>
6
<p>subscribe for latest updates</p>
<input type="email" placeholder="your email"
class="email">
<input type="submit" value="subscribe" class="btn">
<img src="image/payment.png" class="payment-img"
alt="">
</div>
</div>
<div class="credit"> created by <span> Nikhil Kumar Agarwal and

Raj Gupta </span> | all rights reserved </div>
</section>
<script src="https://unpkg.com/swiper@7/swiper-
bundle.min.js"></script>
<script src="javascript/index.js"></script>
</body>
</html>
Main page source code (CSS):

@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;
500;600&display=swap');
:root{
--green: #23a321 ;
--black:#130f40;
--light-color:#666;
--box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
--border:.2rem solid rgba(0,0,0,.1);
--outline:.1rem solid rgba(0,0,0,.1);
--outline-hover:.2rem solid var(--black);
}
*{
font-family: 'Poppins', sans-serif;
margin:0; padding:0;
box-sizing: border-box;
outline: none; border:none;
7
text-decoration: none;
text-transform: capitalize;
transition: all .2s linear;
}
html{
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 7rem;
}
body{
background:#eee;
}
section{
padding:2rem 9%;
}
.heading{
text-align: center;
padding:2rem 0;
padding-bottom: 3rem;
font-size: 3.5rem;
color:var(--black);
}
.heading span{
background: var(--green);
color:#fff;
display: inline-block;
padding:.5rem 3rem;
clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0%
0%);
}
.btn{
margin-top: 1rem;
padding:.8rem 3rem;
font-size: 1.7rem;
border-radius: .5rem;
border:.2rem solid var(--black);
color:var(--black);
cursor: pointer;
8
background: none;
}
.btn:hover{
color:#fff;
}
.header{
position: fixed;
top:0; left:0; right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding:2rem 9%;
background:#fff;
box-shadow: var(--box-shadow);
}
.header .logo{
font-size: 2.5rem;
font-weight: bolder;
color:var(--black);
}
.header .logo i{
color:var(--green);
}
.header .navbar a{
font-size: 1.7rem;
margin:0 1rem;
color:var(--black);
}
.header .navbar a:hover{

color:var(--green);
}
.header .icons div{

height: 4.5rem;
width: 4.5rem;
line-height: 4.5rem;
background: #eee;
9
color:var(--black);
font-size: 2rem;
margin-left: .3rem;
cursor: pointer;
text-align: center;
}
.header .icons div:hover{

color:#fff;
}
#menu-btn{
display: none;
}
.header .search-form{
position: absolute;
top:110%; right:-110%;
width: 50rem;
height:5rem;
background: #fff;
overflow: hidden;
display: flex;
}
.header .search-form.active{
right:2rem;
transition: .4s linear;
}
.header .search-form input{

height:100%;
width:100%;
background: none;
text-transform: none;
font-size: 1.6rem;
color:var(--black);
padding:0 1.5rem;
}
.header .search-form label{

font-size: 2.2rem;
10
padding-right: 1.5rem;
color:var(--black);
cursor: pointer;
}
.header .search-form label:hover{

color:var(--green);
}
.home{
display: flex;
justify-content: center;
background: url(/pjo/bann.jpg) no-repeat;
background-position: center;
background-size: cover;
padding-top: 25rem;
}
.home .content{
text-align: center;
width:60rem;
}
.home .content h3{

color:var(--black);
font-size: 3.2rem;
}
.home .content h3 span{

color:var(--green);
}
.home .content p span{

color:var(--green);
}
.home .content p{
color:var(--light-color);
font-size: 1.7rem;
padding:1rem 0;
line-height: 1.8;
}
.challen{
11
display: flex;
background: url(/pjo/Vertical_farming-min2.jpg) no-repeat;
padding-top: 12rem;
}
.challen .content{
text-align: center;
width:160rem;
}
.challen .content h3{

color:var(--black);
font-size: 3.2rem;
}
.challen .content h3 span{

color:white;
}
.challen .content p span{

color:var(--green);
}
.challen .content p{
color:white;
font-size: 1.7rem;
padding:1rem 0;
line-height: 1.8;
}
.footer{
background: #fff;
}
.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap:1.5rem;
}
.footer .box-container .box h3{
12
font-size: 2.5rem;
color:var(--black);
padding:1rem 0;
}
.footer .box-container .box h3 i{

color:var(--green);
}
.footer .box-container .box .links{

display: block;
font-size: 1.5rem;
padding:1rem 0;
}
.footer .box-container .box .links i{

color:var(--green);
padding-right: .5rem;
}
.footer .box-container .box .links:hover i{

padding-right: 2rem;
}
.footer .box-container .box p{

line-height: 1.8;
font-size: 1.5rem;
padding:1rem 0;
}
.footer .box-container .box .share a{

height:4rem;
width:4rem;
line-height:4rem;
font-size: 2rem;
color:var(--black);
margin-right: .2rem;
background: #eee;
text-align: center;
}
.footer .box-container .box .share a:hover{
13
color: #fff;
}
.footer .box-container .box .email{

width: 100%;
margin:.7rem 0;
padding:1rem;
background: #eee;
font-size: 1.6rem;
color:var(--black);
}
.footer .box-container .box .payment-img{

margin-top: 2rem;
height: 3rem;
display: block;
}
.footer .credit{
text-align: center;
margin-top: 2rem;
padding:1rem;
padding-top: 2.5rem;
font-size: 2rem;
color:var(--black);
border-top: var(--border);
}
.footer .credit span{

color:var(--green);
}
marquee{
padding: 1.5rem 1.5rem;
background: #eee;
font-size: 2rem;
color: #23a321;
}
14
Main page source code (JavaScript):
@import
:root{
--green: #23a321 ;
--black:#130f40;
--light-color:#666;
}
*{
}
html{
font-size: 62.5%;
overflow-x: hidden;
}
body{
background:#eee;
}
section{
padding:2rem 9%;
}
.heading{
text-align: center;
padding:2rem 0;
font-size: 3.5rem;
15
color:var(--black);
}
.heading span{
color:#fff;
padding:.5rem 3rem;
0%);
}
.btn{
margin-top: 1rem;
padding:.8rem 3rem;
font-size: 1.7rem;
color:var(--black);
cursor: pointer;
background: none;
}
.btn:hover{
color:#fff;
}
.header{
position: fixed;
z-index: 1000;
display: flex;
padding:2rem 9%;
background:#fff;
}
.header .logo{
font-size: 2.5rem;
color:var(--black);
}
16
.header .logo i{
color:var(--green);
}
.header .navbar a{
font-size: 1.7rem;
margin:0 1rem;
color:var(--black);
}

color:var(--green);
}
.header .icons div{

height: 4.5rem;
width: 4.5rem;
background: #eee;
color:var(--black);
font-size: 2rem;
margin-left: .3rem;
cursor: pointer;
text-align: center;
}

color:#fff;
}
#menu-btn{
display: none;
}
position: absolute;
top:110%; right:-110%;
width: 50rem;
height:5rem;
background: #fff;
overflow: hidden;
display: flex;
17
}
right:2rem;
}

height:100%;
width:100%;
background: none;
font-size: 1.6rem;
color:var(--black);
padding:0 1.5rem;
}

font-size: 2.2rem;
color:var(--black);
cursor: pointer;
}

color:var(--green);
}
.home{
display: flex;
background: url(/pjo/bann.jpg) no-repeat;
padding-top: 25rem;
}
.home .content{
text-align: center;
width:60rem;
}
18
.home .content h3{
color:var(--black);
font-size: 3.2rem;
}
.home .content h3 span{

color:var(--green);
}
.home .content p span{

color:var(--green);
}
.home .content p{
font-size: 1.7rem;
padding:1rem 0;
line-height: 1.8;
}
.challen{
display: flex;
background: url(/pjo/Vertical_farming-min2.jpg) no-repeat;
padding-top: 12rem;
}
.challen .content{
text-align: center;
width:160rem;
}
.challen .content h3{

color:var(--black);
font-size: 3.2rem;
}
.challen .content h3 span{

color:white;
}
.challen .content p span{
19
color:var(--green);
}
.challen .content p{
color:white;
font-size: 1.7rem;
padding:1rem 0;
line-height: 1.8;
}
.footer{
background: #fff;
}
display: grid;
gap:1.5rem;
}

font-size: 2.5rem;
color:var(--black);
padding:1rem 0;
}

color:var(--green);
}

display: block;
font-size: 1.5rem;
padding:1rem 0;
}

color:var(--green);
}

}
20
line-height: 1.8;
font-size: 1.5rem;
padding:1rem 0;
}

height:4rem;
width:4rem;
line-height:4rem;
font-size: 2rem;
color:var(--black);
background: #eee;
text-align: center;
}

color: #fff;
}

width: 100%;
margin:.7rem 0;
padding:1rem;
background: #eee;
font-size: 1.6rem;
color:var(--black);
}

margin-top: 2rem;
height: 3rem;
display: block;
}
.footer .credit{
text-align: center;
margin-top: 2rem;
padding:1rem;
21
font-size: 2rem;
color:var(--black);
}

color:var(--green);
}
marquee{
padding: 1.5rem 1.5rem;
background: #eee;
font-size: 2rem;
color: #23a321;
}
Product page source code (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">




<link rel="stylesheet" href="css/products.css">
<title>Products</title>
</head>
<body>
<a href="#" class="logo"> <i class="fas fa-shopping-basket"></i>

Shop It </a>
22
<a href="index.html">home</a>
<a href="review.html">review</a>
</nav>
<div class="icons">
<a href="login.html" target="_blank"><div class="fas fa-user"
id="login-btn"></div></a>
</div>

here...">
</form>
</header>
<br><br><br><br>
<div class="container">
<h3 class="title"> organic Vegeatables </h3>
<div class="products-container">
<div class="product" data-name="p-1">

<img src="pjo/1.png" alt="">
<h3>strawberries</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span>( 250 )</span>
</div>
<div class="price">$2.00</div>
</div>
23
<h3>onions</h3>
<div class="stars">
</div>
</div>

<h3>tomatoes</h3>
<div class="stars">
</div>
</div>

<h3>brinjal</h3>
<div class="stars">
</div>
</div>

<h3>broccoli</h3>
<div class="stars">
24
</div>
</div>

<h3>potatoes</h3>
<div class="stars">
</div>
</div>
</div>
</div>
<h3 class="title"> organic fruits </h3>

<h3>mango</h3>
<div class="stars">
</div>
</div>
25
<h3>oranges</h3>
<div class="stars">
</div>
</div>

<img src="pjo/9.jpg" alt="">
<h3>grapes</h3>
<div class="stars">
</div>
</div>

<img src="pjo/10.webp" alt="">
<h3>apple</h3>
<div class="stars">
</div>
</div>

<h3>pomogranate</h3>
26
<div class="stars">
</div>
</div>

<h3>banana</h3>
<div class="stars">
</div>
</div>
</div>
</div>
<h3 class="title"> Dairy Product </h3>

<h3>milk</h3>
<div class="stars">
</div>
27
</div>

<h3>butter</h3>
<div class="stars">
</div>
</div>

<h3>yougurt</h3>
<div class="stars">
</div>
</div>

<h3>paneer</h3>
<div class="stars">
</div>
</div>

28
<h3>cheese</h3>
<div class="stars">
</div>
</div>

<h3>ghee</h3>
<div class="stars">
</div>
</div>
</div>
</div>
<div class="box">
<h3> Shop It <i class="fas fa-shopping-basket"></i> </h3>
home.</p>
<div class="share">
<a href="https://www.facebook.com/hearthacker30.net"
target="_blank" class="fab fa-facebook-f" ></a>
29
<a
</div>
</div>
<div class="box">
+918328051347 </a>
+918759158886 </a>
<a href="#" class="links"> <i class="fas fa-envelope"></i>
nikhilkumar@gmail.com </a>
</div>
<div class="box">
<h3>newsletter</h3>
<input type="email" placeholder="your email" class="email">
<img src="image/payment.png" class="payment-img" alt="">
</div>
</div>
<div class="credit"> created by <span> Nikhil Kumar Agarwal and Raj

Gupta </span> | all rights reserved </div>
</section>
</body>
</html>
30
Product page source code (CSS):
@import
:root{
--green: #23a321 ;
--black:#130f40;
--light-color:#666;
}
*{
}
html{
font-size: 62.5%;
overflow-x: hidden;
}
body{
background:#eee;
}
section{
padding:2rem 9%;
}
.heading{
text-align: center;
padding:2rem 0;
font-size: 3.5rem;
color:var(--black);
31
}
.heading span{
color:#fff;
padding:.5rem 3rem;
0%);
}
.btn{
margin-top: 1rem;
padding:.8rem 3rem;
font-size: 1.7rem;
color:var(--black);
cursor: pointer;
background: none;
}
.btn:hover{
color:#fff;
}
.header{
position: fixed;
z-index: 1000;
display: flex;
padding:2rem 9%;
background:#fff;
}
.header .logo{
font-size: 2.5rem;
color:var(--black);
}
32
.header .logo i{
color:var(--green);
}
.header .navbar a{
font-size: 1.7rem;
margin:0 1rem;
color:var(--black);
}

color:var(--green);
}
.header .icons div{

height: 4.5rem;
width: 4.5rem;
background: #eee;
color:var(--black);
font-size: 2rem;
margin-left: .3rem;
cursor: pointer;
text-align: center;
}

color:#fff;
}
#menu-btn{
display: none;
}
position: absolute;
top:110%; right:-110%;
width: 50rem;
height:5rem;
background: #fff;
overflow: hidden;
display: flex;
33
}
right:2rem;
}

height:100%;
width:100%;
background: none;
font-size: 1.6rem;
color:var(--black);
padding:0 1.5rem;
}

font-size: 2.2rem;
color:var(--black);
cursor: pointer;
}

color:var(--green);
}
.container{
max-width: 1200px;
margin:0 auto;
padding:3rem 2rem;
}
.container .title{
font-size: 3.5rem;
color:#444;
margin-bottom: 3rem;
text-transform: uppercase;
text-align: center;
}
.container .products-container{
display: grid;
gap:2rem;
34
}
.container .products-container .product{

text-align: center;
padding:3rem 2rem;
background: #fff;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
outline: .1rem solid #ccc;
outline-offset: -1.5rem;
cursor: pointer;
}
.container .products-container .product:hover{

outline: .2rem solid #222;
outline-offset: 0;
}
.container .products-container .product img{

height: 25rem;
}
.container .products-container .product:hover img{

transform: scale(.9);
}
.container .products-container .product h3{

padding:.5rem 0;
font-size: 2rem;
color:#444;
}
.container .products-container .product:hover h3{

color:#27ae60;
}
.container .products-container .product .price{

font-size: 2rem;
color:#444;
}
.footer{
background: #fff;
}
35
display: grid;
gap:1.5rem;
}

font-size: 2.5rem;
color:var(--black);
padding:1rem 0;
}

color:var(--green);
}

display: block;
font-size: 1.5rem;
padding:1rem 0;
}

color:var(--green);
}

}

line-height: 1.8;
font-size: 1.5rem;
padding:1rem 0;
}

height:4rem;
width:4rem;
line-height:4rem;
font-size: 2rem;
color:var(--black);
36
background: #eee;
text-align: center;
}

color: #fff;
}

width: 100%;
margin:.7rem 0;
padding:1rem;
background: #eee;
font-size: 1.6rem;
color:var(--black);
}

margin-top: 2rem;
height: 3rem;
display: block;
}
.footer .credit{
text-align: center;
margin-top: 2rem;
padding:1rem;
font-size: 2rem;
color:var(--black);
}

color:var(--green);
}
@media (max-width:991px){
html{
font-size: 55%;
}
37
}
.products-preview .preview img{

height: 25rem;
}
html{
font-size: 50%;
}
Login page source code (HTML):

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="css/login.css">
bundle.min.css" />
<head>
<body>
<div class="header">
<h1>Login</h1>
</div>
<div class="main">
<form>
<span>
<i class="fa fa-user"></i>
<input type="text" placeholder="Username" name="">
</span><br>
<span>
<i class="fa fa-lock"></i>
38
<input type="Password" placeholder="Password" name="">
</span><br>
<a href="index.html"><button>Login</button></a>
<body>
</html
Login page source code (CSS):

@import
*{
}
body {
font-family: same_serif;
background-image: url(/pjo/acbf54ecbccec89a1da8507378e2303d.jpg);
background-repeat: no-repeat;
overflow: hidden;
}
.container {
width: 380px;
margin: 7% auto;
border-radius: 25px;
background-color: rgba(0,0,0,0.2);
box-shadow: 0 0 17px grey;
}
.header {
text-align:center;
padding-top: 75px;
}
.header h1 {
color:Black;
39
font-size: 45px;
margin-bottom: 80px;
.main {
text-align: center;
}
.container h1{
color: forestgreen;
}
.main input, button {
width: 300px;
height: 45px;
border: none;
outline: none;
padding-left: 40px;
font-size:15px;
color: black;
margin-bottom:40px;
}
.main button{
margin-top: 1rem;
padding:0rem 3rem;
font-size: 1.7rem;
border:.2rem solid black;
color:black;
cursor: pointer;
background: none;
}
.main button:hover{
background: green;
color:#fff;
}
.main input:hover {
box-shadow: 2px 2px 5px grey ;
background-color:darkgray;
}
.main span {
position: relative;
}
40
.main i {
position: absolute;
left: 15px;
color: black;
font-size: 15px;
top: 2px;
}
Review page source code (HTML):

<!DOCTYPE html>
<html>
<head>
<title>Reviews</title>

bundle.min.css" />
<link rel="stylesheet" href="css/review.css">
<body>
<a href="#" class="logo"> <i class="fas fa-shopping-

basket"></i> Shop It </a>
<a href="index.html">home</a>
<a href="review.html">review</a>
</nav>
<div class="icons">
<a href="login.html" target="_blank"><div class="fas fa-
user" id="login-btn"></div></a>
</div>
41
here...">
</form>
</header>
<br><br><br><br><br>
<div class="Reviews">
<div class="inner">
<h1>Reviews</h1>
<div class="border"></div>
<div class="row">
<div class="col">
<img src="pjo/ki.jpg" alt="">
<div class="name">Virti</div>
<div class="stars">
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
</div>
<p>
It was very easy to order. It arrived very fast and all
the products were carefully wrapped and they were all as described. I
would definitely recommend
</p>
</div>
</div>
<div class="col">
<img src="pjo/vv.jpg" alt="">
<div class="name">Virat</div>
<div class="stars">
42
</div>
<p>
Amazing service. Very happy to have found this company.
Great prices and fast delivery
</p>
</div>
</div>
<div class="col">
<img src="pjo/sh.jpg" alt="">
<div class="name">Shraddha</div>
<div class="stars">
</div>
<p>
I was very happy that my orders were delivered
perfectly. They also sent some extra food as gifts. Very polite and
good manners. They covered every product that could leak or break with
air sponges in a very durable way. For cold products, there was a
special box with frosted bags. I can really say that they are very good
at this. I also bought a few salad ingredients. Cucumbers, tomatoes and
peppers etc... It was fresh
</p>
</div>
</div>
</div>
</div>
</div>
<div class="box">
<h3> Shop It <i class="fas fa-shopping-basket"></i>
</h3>
home.</p>
<div class="share">
43
<a
href="https://www.facebook.com/hearthacker30.net" target="_blank"
class="fab fa-facebook-f" ></a>
<a
</div>
</div>
<div class="box">
+918328051347 </a>
+918759158886 </a>
<a href="#" class="links"> <i class="fas fa-
envelope"></i> nikhilkumar@gmail.com </a>
</div>
<div class="box">
<h3>newsletter</h3>
<input type="email" placeholder="your email"
class="email">
<img src="image/payment.png" class="payment-img"
alt="">
</div>
</div>
<div class="credit"> created by <span> Nikhil Kumar Agarwal and

Raj Gupta </span> | all rights reserved </div>
</section>
</body>
</html>
44
Review page source code (CSS):
@import
:root{
--green: #23a321 ;
--black:#130f40;
--light-color:#666;
}
*{
}
html{
font-size: 62.5%;
overflow-x: hidden;
}
body{
background:#eee;
}
section{
padding:2rem 9%;
}
.heading{
text-align: center;
padding:2rem 0;
45
font-size: 3.5rem;
color:var(--black);
}
.heading span{
color:#fff;
padding:.5rem 3rem;
0%);
}
.btn{
margin-top: 1rem;
padding:.8rem 3rem;
font-size: 1.7rem;
color:var(--black);
cursor: pointer;
background: none;
}
.btn:hover{
color:#fff;
}
.header{
position: fixed;
z-index: 1000;
display: flex;
padding:2rem 9%;
background:#fff;
}
.header .logo{
font-size: 2.5rem;
color:var(--black);
46
}
.header .logo i{
color:var(--green);
}
.header .navbar a{
font-size: 1.7rem;
margin:0 1rem;
color:var(--black);
}

color:var(--green);
}
.header .icons div{

height: 4.5rem;
width: 4.5rem;
background: #eee;
color:var(--black);
font-size: 2rem;
margin-left: .3rem;
cursor: pointer;
text-align: center;
}

color:#fff;
}
#menu-btn{
display: none;
}
position: absolute;
top:110%; right:-110%;
width: 50rem;
height:5rem;
background: #fff;
overflow: hidden;
47
display: flex;
}
right:2rem;
}

height:100%;
width:100%;
background: none;
font-size: 1.6rem;
color:var(--black);
padding:0 1.5rem;
}

font-size: 2.2rem;
color:var(--black);
cursor: pointer;
}

color:var(--green);
}
.Reviews{
padding: 40px 0;
background: white;
color: black;
text-align: center;
}
.inner{
max-width: 1200px;
margin: auto;
overflow: hidden;
padding: 0 20px;
}
.border{
width: 160px;
height: 5px;
48
background: grey;
margin: 26px auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
.col{
flex: 33.33%;
max-width: 33.33%;
padding: 15px;
}
.Reviews{
background: white;
padding: 30px;
}
.Reviews img{
width: 100px;
height: 100px;
border-radius: 50%;
}
.name{
font-size: 20px;
text-transform: uppercase;
margin: 20px 0;
}
.stars{
color: green;
margin-bottom: 20px;
}
.footer{
background: #fff;
}
display: grid;
gap:1.5rem;
}

font-size: 2.5rem;
color:var(--black);
49
padding:1rem 0;
}

color:var(--green);
}

display: block;
font-size: 1.5rem;
padding:1rem 0;
}

color:var(--green);
}

}

line-height: 1.8;
font-size: 1.5rem;
padding:1rem 0;
}

height:4rem;
width:4rem;
line-height:4rem;
font-size: 2rem;
color:var(--black);
background: #eee;
text-align: center;
}

color: #fff;
50
}

width: 100%;
margin:.7rem 0;
padding:1rem;
background: #eee;
font-size: 1.6rem;
color:var(--black);
}

margin-top: 2rem;
height: 3rem;
display: block;
}
.footer .credit{
text-align: center;
margin-top: 2rem;
padding:1rem;
font-size: 2rem;
color:var(--black);
}

color:var(--green);
}
@media screen and (max-width:960px) {

.col{
flex: 100%;
max-width: 80%;
}
}
@media screen and (max-width:600px) {

.col{
flex: 100%;
max-width: 100%;
}
}
51
RESULT/OUTPUT
52
53
54
55
56
Conclusion
It was a wonderful and learning experience for me while
working on this project. This project took us through the
various phases of project development and gave us real
insight into the world of website making. The joy of work
and the thrill involved while tackling the various problems
and challenges gave us courage to do more projects.
This project made us test our knowledge about html and
css . we really enjoyed making this project and successfully
completed it on time
57

Grocery Webpage Nikhil Kumar and Raj Gupta

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Grocery Webpage Nikhil Kumar and Raj Gupta

Uploaded by

Copyright:

Available Formats

REPORT

Name: Nikhil Kumar Agarwal, Raj Gupta

Under the Guidance of

Ms. Nausheen Fatima

We hereby declare that we have completed my simulation project on a Grocery

Date: 30-11-2022 Signature

Main page source code (HTML):

<a href="#" class="logo"> <i class="fas fa-shopping-

<form action="" class="search-form">

Plants are grown in completely enclosed conditions,

<div class="credit"> created by <span> Nikhil Kumar Agarwal and

Main page source code (CSS):

.header .navbar a:hover{

.header .icons div{

.header .icons div:hover{

.header .search-form input{

.header .search-form label{

.header .search-form label:hover{

.home .content h3{

.home .content h3 span{

.home .content p span{

.challen .content h3{

.challen .content h3 span{

.challen .content p span{

.footer .box-container .box h3{

.footer .box-container .box h3 i{

.footer .box-container .box .links{

.footer .box-container .box .links i{

.footer .box-container .box .links:hover i{

.footer .box-container .box p{

.footer .box-container .box .share a{

.footer .box-container .box .share a:hover{

.footer .box-container .box .email{

.footer .box-container .box .payment-img{

.footer .credit span{

.header .navbar a:hover{

.header .icons div{

.header .icons div:hover{

.header .search-form input{

.header .search-form label{

.header .search-form label:hover{

.home .content h3 span{

.home .content p span{

.challen .content h3{

.challen .content h3 span{

.challen .content p span{

.footer .box-container .box h3{

.footer .box-container .box h3 i{

.footer .box-container .box .links{

.footer .box-container .box .links i{

.footer .box-container .box .links:hover i{

.footer .box-container .box .share a{

.footer .box-container .box .share a:hover{

.footer .box-container .box .email{

.footer .box-container .box .payment-img{

.footer .credit span{

Product page source code (HTML):

<a href="#" class="logo"> <i class="fas fa-shopping-basket"></i>

<form action="" class="search-form">

<h3 class="title"> organic Vegeatables </h3>

<div class="product" data-name="p-1">

<div class="product" data-name="p-3">