Scribd
Upload
16 views

HTML, CSS, Javascript Codes

Hey

Uploaded by

saishshetyerollno54
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

HTML, CSS, Javascript Codes

Hey

Uploaded by

saishshetyerollno54
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 60

HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Grocery Store </title>

<!-- Code for font awesome cdn -->


<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-a
wesome/4.7.0/css/font-awesome.min.css">
<!-- Code for font awesome cdn -->

<!-- Code for linking css file -->


<link rel="stylesheet" href="css/style.css">
<!-- Code for linking css file -->

<link rel="stylesheet"
href="https://unpkg.com/swiper@7/swiper-bundle.min.
css" />

<meta name="viewport"
content="width=device-width, initial-scale=1.0">

</head>
<body>
<!-- header section -->
<header class="header">
<a href="#" class="logo"> <i class="fa
fa-shopping-basket"></i> Grocery </a>

<nav class="navbar">
<a href="#Home">Home</a>
<a href="#Features">Features</a>
<a href="#Products">Products</a>
<a href="#Review">Review</a>

</nav>

<div class="icons">
<div class="fa fa-bars" id="menu-btn"></div>
<div class="fa fa-search"
id="search-btn"></div>
<div class="fa fa-shopping-cart"
id="cart-btn"></div>
<div class="fa fa-user" id="login-btn"></div>
</div>

<form class="search-form">
<input type="search" id="search-box"
placeholder="Search Here...">
<label for="search-box" class="fa
fa-search"></label>
</form>

<div class="shopping-cart">
<div class="box">
<i class="fa fa-trash"></i>
<img src="image/watermelon.jpg">
<div class="content">
<h3>watermelon</h3>
<span class="price">$5.99/-</span>
<span class="quantity">Qty : 1</span>
</div>
</div>

<div class="box">
<i class="fa fa-trash"></i>
<img src="image/onion.jpg">
<div class="content">
<h3>onion</h3>
<span class="price">$3.99/-</span>
<span class="quantity">Qty : 1</span>
</div>
</div>

<div class="box">
<i class="fa fa-trash"></i>
<img src="image/chicken">
<div class="content">
<h3>chicken</h3>
<span class="price">$7.99/-</span>
<span class="quantity">Qty : 1</span>
</div>
</div>

<div class="total"> total : $17.97/- </div>


<a href="#" class="btn">Checkout</a>

</div>

<form action="#" class="login-form">


<h3>login now</h3>
<input type="email" placeholder="your email"
class="box">
<input type="password" placeholder="your
password" class="box">

<p>Forget Your Password <a href="#"> Click


Here</a></p>
<p>Don't Have An Account <a href="#"> Create
Now</a></p>
<input type="submit" value="Login Now"
class="btn">

</form>
</header>
<!-- header section -->

<!-- banner section -->


<section class="home" id="home">
<div class="content">
<h3>Fresh And <span>Organic</span> Products
For You</h3>
<a href="#" class="btn">shop now</a>
</div>
</section>
<!-- banner section -->

<!-- our features section -->


<section class="features" id="features">
<h1 class="heading">our
<span>features</span></h1>

<div class="box-container">
<div class="box">
<img src="image/feature img-1.jpg">
<h3>fresh and Organic</h3>
<a href="#" class="btn">read more</a>
</div>
<div class="box">
<img src="image/feature img-2">
<h3>free Delivery</h3>
<a href="#" class="btn">read more</a>
</div>

<div class="box">
<img src="image/feature img-3.jpg">
<h3>Easy payments</h3>
<a href="#" class="btn">read more</a>
</div>

</div>
</section>
<!-- our features section -->

<!-- our products section -->


<section class="products" id="products">
<h1 class="heading"> our
<span>products</span></h1>

<div class="swiper product-slider">


<div class="swiper-wrapper">
<div class="swiper-slide box">
<img src="image/products
img-1.jpg">
<h1>fresh orange</h1>
<div class="price"> $5.99/- -
7.99/-</div>
<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>
<a href="" class="btn">Add to
cart</a>
</div>

<div class="swiper-slide box">


<img src="image/products
img-2.jpg">
<h1>fresh meat</h1>
<div class="price"> $15.99/- -
20.99/-</div>
<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"></i>
</div>
<a href="" class="btn">Add to
cart</a>
</div>

<div class="swiper-slide box">


<img src="image/products
img-3.jpg">
<h1>fresh tomatoes</h1>
<div class="price"> $8.99/- -
10.99/-</div>
<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>
</div>
<a href="" class="btn">Add to
cart</a>
</div>

</div>
</div>

<div class="swiper product-slider">


<div class="swiper-wrapper">
<div class="swiper-slide box">
<img src="image/products
img-4.jpg">
<h1>fresh onion</h1>
<div class="price"> $5.99/- -
7.99/-</div>
<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>
<a href="" class="btn">Add to
cart</a>
</div>

<div class="swiper-slide box">


<img src="image/products
img-5.jpg">
<h1>fresh carrot</h1>
<div class="price"> $8.99/- -
11.99/-</div>
<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"></i>
</div>
<a href="" class="btn">Add to
cart</a>
</div>

<div class="swiper-slide box">


<img src="image/products
img-6.jpg">
<h1>fresh potato</h1>
<div class="price"> $4.99/- -
6.99/-</div>
<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>
</div>
<a href="" class="btn">Add to
cart</a>
</div>
</div>
</div>
</section>
<!-- our products section -->

<!-- Review section -->


<section class="review">
<h1 class="heading"> Customer's
<span>Review</span></h1>
<div class="swiper review-slider">
<div class="swiper-wrapper">
<div class="swiper-slide box">
<img src="image/customer-1.png">
<p>I have made several purchases
from this store. Great products,customer service is
very good too</p>
<h3>john deo</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"></i>
</div>
</div>

<div class="swiper-slide box">


<img src="image/customer-2.png">
<p>I have made several purchases
from this store. Great products,customer service is
very good too</p>
<h3>Marcos paulo</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>
</div>

<div class="swiper-slide box">


<img src="image/customer-3.png">
<p>I have made several purchases
from this store. Great products,customer service is
very good too</p>
<h3>Alexx</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>
</div>

<div class="swiper-slide box">


<img src="image/customer-4.png">
<p>I have made several purchases
from this store. Great products,customer service is
very good too</p>
<h3>Lara Alemao</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"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Review section -->

<script
src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-
bundle.min.js"></script>

<script src="js/script.js"></script>

</body>
</html>
JAVASCRIPT code:

let searchForm =
document.querySelector('.search-form');

document.querySelector('#search-btn').onclick = ()
=>
{
searchForm.classList.toggle('active');
shoppingCart.classList.remove('active');
loginForm.classList.remove('active');
navbar.classList.remove('active');
}

let shoppingCart =
document.querySelector('.shopping-cart');

document.querySelector('#cart-btn').onclick = () =>
{
searchForm.classList.remove('active');
shoppingCart.classList.toggle('active');
loginForm.classList.remove('active');
navbar.classList.remove('active');
}

let loginForm =
document.querySelector('.login-form');
document.querySelector('#login-btn').onclick = ()
=>
{
searchForm.classList.remove('active');
shoppingCart.classList.remove('active');
loginForm.classList.toggle('active');
navbar.classList.remove('active');
}

let navbar = document.querySelector('.navbar');

document.querySelector('#menu-btn').onclick = () =>
{
searchForm.classList.remove('active');
shoppingCart.classList.remove('active');
loginForm.classList.remove('active');
navbar.classList.toggle('active');
}

window.onscroll = () =>
{
searchForm.classList.remove('active');
shoppingCart.classList.remove('active');
loginForm.classList.remove('active');
navbar.classList.remove('active');
}
var swiper = new Swiper(".product-slider", {
loop: true,
spaceBetween: 20,

autoplay: {
delay: 7500,
disableOnInteraction: false,
},

breakpoints: {
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
1020: {
slidesPerView: 3,
},
},
});

var swiper = new Swiper(".review-slider", {


loop: true,
spaceBetween: 20,

autoplay: {
delay: 7500,
disableOnInteraction: false,
},

breakpoints: {
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
1020: {
slidesPerView: 3,
},
},
});
CSS code:

@import u@import url(


'https://fonts.googleapis.com/css2?family=Poppins:
ital,wght@0,400;0,500;1, 300&display=swap');

:root
{
--green: green;
--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);
}
*
{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
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;
}

/*css code for banner*/


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
{
border: .2rem solid var(--bLack);
margin-top: 1rem;
display: inline-block;
padding: .8rem 3rem;
font-size: 1.7rem;
border-radius: .5rem;
color: var(--bLack);
cursor: pointer;
background: none;
}

.btn:hover
{
background: var(--green);
color: #fff;
}

.header
{
border:2px solid;
position: fixed;
top: 0;
Left: 0;
right: 0;
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;
}

.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


{
border: 0px solid;
height: 4.5rem;
width: 4.5rem;
Line-height: 4.5rem;
border-radius: .5rem;
background: #eee;
color: var(--black);
font-size: 2rem;
margin-right: .5rem;
text-align: center;
cursor: pointer;
}

.header .icons div:hover


{
background: var(--green);
color: white;
}

#menu-btn
{
display: none;
}

.header .navbar .active


{
right: 2rem;
transition: .4s linear;
}

.header .search-form
{
border: 1px solid;
position: absolute;
top: 110%;
right: -110%;
width: 50rem;
height: 5rem;
background: #fff;
border-radius: .5rem;
overflow: hidden;
display: flex;
align-items: center;
box-shadow: var (--box-shadow);
}
.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;
padding-right: 1.5rem;
color: var(--black);
cursor: pointer;
}

.header .search-form label:hover


{
color: var(--green);
}

.header .shopping-cart
{
border: 0px solid;
position: absolute;
top: 110%;
right: -110%;
padding: 1rem;
border-radius: .5rem;
box-shadow: var (--box-shadow);
width: 50rem;
background: #fff;
}

.header .shopping-cart .active


{
right: 2rem;
transition: .4s linear;
}

.header .shopping-cart .box


{
border: 1px solid blue;
display: flex;
align-items: center;
gap: 1rem;
position: relative;
margin: 1rem 0;
}

.header .shopping-cart .box img


{
height: 10rem;
}

.header .shopping-cart .box .fa-trash


{
font-size: 2rem;
position: absolute;
top: 50%;
right: 2rem;
cursor: pointer;
color: var(--Light-color);
transform: translate(-50%);
}

.header .shopping-cart .box .fa-trash:hover


{
color: var(--green);
}

.header .shopping-cart .box .content span


{
color: var(--Light-color);
font-size: 1.6rem;
}

.header .shopping-cart .box .content .quantity


{
padding-Left: 1rem;
}

.header .shopping-cart .total


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

.header .shopping-cart .btn


{
display: block;
text-align: center;
margin: 1rem 0;
}

.header .login-form
{
border: 0px solid;
position: absolute;
width: 35rem;
top: 110%;
right: -110%;
box-shadow: var(--box-shadow);
padding: 2rem;
border-radius: 5rem;
background: #fff;
text-align: center;
}

.header .login-form.active
{
right: 2rem;
transition: .4s linear;
}

.header .login-form h3
{
font-size: 2.5rem;
text-transform: uppercase;
color: var(--bLack);
}

.header .login-form .box


{
width: 100%;
border: 0px solid;
margin: .7rem 0;
background: #eee;
border-radius: .5rem;
padding: 1rem;
font-size: 1.6rem;
color: var(--black);
text-transform: none;
}

.header .login-form p
{
font-size: 1.4rem;
padding: .5rem 0;
color: var(--Light-color);
}

.header .login-form p a
{
color: var(--green);
text-decoration: underline;
}

.home
{
border: 0px solid;
display: flex;
justify-content: center;
background: url(../image/banner-img.jpg)
no-repeat;
background-position: center;
background-size: cover;
padding-top: 17rem;
padding-bottom: 10rem;
}

.home .content
{
border: 0px solid;
text-align: center;
width: 60rem;
}

.home .content h3
{
color: var(--bLack);
font-size: 3rem;
}

.home .content h3 span


{
color: var(--green);
}

.home .content p
{
color: var(--Light-color);
font-size: 1.7rem;
padding: 1rem 0;
line-height: 1.8;
}

/*features*/
.features .box-container
{
border: 0px solid;
display: grid;
grid-template-columns: repeat(auto-fit,
minmax(30rem, 1fr));
gap: 1.5rem;
}

.features .box-container .box


{
border: 0px solid red;
padding: 3rem 2rem;
background: #fff;
outline: var(--outLine);
outline-offset: -1rem;
text-align: center;
box-shadow: var(--box-shadow);
}

.features .box-container .box:hover


{
box-shadow: 1px 1px 10px 5px var(--green);
}
.features .box-container .box img
{
margin: 1rem 0;
height: 15rem;
}

.features .box-container .box h3


{
font-size: 2.5rem;
line-height: 1.8;
color: var(--bLack);
}

.features .box-container .box p


{
font-size: 1.5rem;
line-height: 1.8;
color: var(--Light-color);
padding: 1rem 0;
}

/*features*/

/*products*/
.products .product-slider
{
border: 0px solid;
padding: 1rem;
}

.products .product-slider:first-child
{
margin-bottom: 2rem;
}
.products .product-slider .box
{
border: 0px solid red;
background: #fff;
border-radius: .5rem;
text-aLign: center;
padding: 3rem 2rem;
outLine-offset: -1rem;
outline: var(--outline);
box-shadow: var(--box-shadow);
transition: .2s linear;
}

.products .product-slider .box:hover


{
box-shadow: 1px 1px 10px 5px var(--green);
}

.products .product-slider .box img


{
height: 20rem;
}

.products .product-slider .box h1


{
font-size: 2.5rem;
color: var(--bLack);
}

.products .product-slider .box .price


{
font-size: 2rem;
color: var(--Light-color);
padding: .5rem 0;
}

.products .product-slider .box .stars i


{
font-size: 1.7rem;
color: orange;
padding: .5rem 0;
}
/*products*/

/*review*/
.review .review-slider+
{
border: 0px solid;
padding: 1rem;
}

.review .review-slider .box


{
border: 0px solid red;
background: #fff;
border-radius: .5rem;
text-aLign: center;
padding: 3rem 2rem;
outLine-offset: -1rem;
outline: var(--outline);
box-shadow: var(--box-shadow);
transition: .2s linear;
}

.review .review-slider .box:hover


{
box-shadow: 1px 1px 10px 5px var(--green);
}

.review .review-slider .box img


{
height: 10rem;
width: 10rem;
border-radius: 50%;
}
.review .review-slider .box p
{
padding: 1rem 0;
line-height: 1.8;
color: var(--Light-color);
font-size: 1.5rem;
}

.review .review-slider .box h3


{
padding-bottom: .5rem;
color: var(--bLack);
font-size: 2.2rem;
}

.review .review-slider .box .stars i


{
color: orange;
font-size: 1.7rem;
}

/*review*/

/* media queries */
@media (max-width: 991px)
{
html
{
font-size: 55%;
}

.header
{
padding: 2rem;
}
section
{
padding: 2rem;
}
}

@media (max-width: 768px)


{
#menu-btn
{
display: inline-block;
}

.header .search-form
{
width: 90%;
}

.header .navbar
{
position: absolute;
top: 110%;
right: -110%;
width: 30rem;
box-shadow: var(--box-shadow);
border-radius: .5rem;
background: #fff;
}

.header .navbar a
{
font-size: 2rem;
margin: 2rem 2.5rem;
display: block;
}
}

@media (max-width: 450px)


{
html
{
font-size: 50%;
}

.heading
{
font-size: 2.5rem;
}
}
rl(
'https://fonts.googleapis.com/css2?family=Poppins:
ital,wght@0,400;0,500;1, 300&display=swap');

:root
{
--green: green;
--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);
}
*
{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
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;
}

/*css code for banner*/


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
{
border: .2rem solid var(--bLack);
margin-top: 1rem;
display: inline-block;
padding: .8rem 3rem;
font-size: 1.7rem;
border-radius: .5rem;
color: var(--bLack);
cursor: pointer;
background: none;
}

.btn:hover
{
background: var(--green);
color: #fff;
}
.header
{
border:2px solid;
position: fixed;
top: 0;
Left: 0;
right: 0;
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;
}

.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


{
border: 0px solid;
height: 4.5rem;
width: 4.5rem;
Line-height: 4.5rem;
border-radius: .5rem;
background: #eee;
color: var(--black);
font-size: 2rem;
margin-right: .5rem;
text-align: center;
cursor: pointer;
}

.header .icons div:hover


{
background: var(--green);
color: white;
}

#menu-btn
{
display: none;
}

.header .navbar .active


{
right: 2rem;
transition: .4s linear;
}

.header .search-form
{
border: 1px solid;
position: absolute;
top: 110%;
right: -110%;
width: 50rem;
height: 5rem;
background: #fff;
border-radius: .5rem;
overflow: hidden;
display: flex;
align-items: center;
box-shadow: var (--box-shadow);
}

.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;
padding-right: 1.5rem;
color: var(--black);
cursor: pointer;
}

.header .search-form label:hover


{
color: var(--green);
}

.header .shopping-cart
{
border: 0px solid;
position: absolute;
top: 110%;
right: -110%;
padding: 1rem;
border-radius: .5rem;
box-shadow: var (--box-shadow);
width: 50rem;
background: #fff;
}

.header .shopping-cart .active


{
right: 2rem;
transition: .4s linear;
}

.header .shopping-cart .box


{
border: 1px solid blue;
display: flex;
align-items: center;
gap: 1rem;
position: relative;
margin: 1rem 0;
}

.header .shopping-cart .box img


{
height: 10rem;
}

.header .shopping-cart .box .fa-trash


{
font-size: 2rem;
position: absolute;
top: 50%;
right: 2rem;
cursor: pointer;
color: var(--Light-color);
transform: translate(-50%);
}

.header .shopping-cart .box .fa-trash:hover


{
color: var(--green);
}

.header .shopping-cart .box .content span


{
color: var(--Light-color);
font-size: 1.6rem;
}

.header .shopping-cart .box .content .quantity


{
padding-Left: 1rem;
}

.header .shopping-cart .total


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

.header .shopping-cart .btn


{
display: block;
text-align: center;
margin: 1rem 0;
}

.header .login-form
{
border: 0px solid;
position: absolute;
width: 35rem;
top: 110%;
right: -110%;
box-shadow: var(--box-shadow);
padding: 2rem;
border-radius: 5rem;
background: #fff;
text-align: center;
}

.header .login-form.active
{
right: 2rem;
transition: .4s linear;
}

.header .login-form h3
{
font-size: 2.5rem;
text-transform: uppercase;
color: var(--bLack);
}

.header .login-form .box


{
width: 100%;
border: 0px solid;
margin: .7rem 0;
background: #eee;
border-radius: .5rem;
padding: 1rem;
font-size: 1.6rem;
color: var(--black);
text-transform: none;
}

.header .login-form p
{
font-size: 1.4rem;
padding: .5rem 0;
color: var(--Light-color);
}

.header .login-form p a
{
color: var(--green);
text-decoration: underline;
}

.home
{
border: 0px solid;
display: flex;
justify-content: center;
background: url(../image/banner-img.jpg)
no-repeat;
background-position: center;
background-size: cover;
padding-top: 17rem;
padding-bottom: 10rem;
}

.home .content
{
border: 0px solid;
text-align: center;
width: 60rem;
}

.home .content h3
{
color: var(--bLack);
font-size: 3rem;
}

.home .content h3 span


{
color: var(--green);
}

.home .content p
{
color: var(--Light-color);
font-size: 1.7rem;
padding: 1rem 0;
line-height: 1.8;
}

/*features*/
.features .box-container
{
border: 0px solid;
display: grid;
grid-template-columns: repeat(auto-fit,
minmax(30rem, 1fr));
gap: 1.5rem;
}

.features .box-container .box


{
border: 0px solid red;
padding: 3rem 2rem;
background: #fff;
outline: var(--outLine);
outline-offset: -1rem;
text-align: center;
box-shadow: var(--box-shadow);
}

.features .box-container .box:hover


{
box-shadow: 1px 1px 10px 5px var(--green);
}

.features .box-container .box img


{
margin: 1rem 0;
height: 15rem;
}

.features .box-container .box h3


{
font-size: 2.5rem;
line-height: 1.8;
color: var(--bLack);
}

.features .box-container .box p


{
font-size: 1.5rem;
line-height: 1.8;
color: var(--Light-color);
padding: 1rem 0;
}

/*features*/

/*products*/
.products .product-slider
{
border: 0px solid;
padding: 1rem;
}

.products .product-slider:first-child
{
margin-bottom: 2rem;
}
.products .product-slider .box
{
border: 0px solid red;
background: #fff;
border-radius: .5rem;
text-aLign: center;
padding: 3rem 2rem;
outLine-offset: -1rem;
outline: var(--outline);
box-shadow: var(--box-shadow);
transition: .2s linear;
}

.products .product-slider .box:hover


{
box-shadow: 1px 1px 10px 5px var(--green);
}

.products .product-slider .box img


{
height: 20rem;
}

.products .product-slider .box h1


{
font-size: 2.5rem;
color: var(--bLack);
}

.products .product-slider .box .price


{
font-size: 2rem;
color: var(--Light-color);
padding: .5rem 0;
}

.products .product-slider .box .stars i


{
font-size: 1.7rem;
color: orange;
padding: .5rem 0;
}
/*products*/

/*review*/
.review .review-slider+
{
border: 0px solid;
padding: 1rem;
}

.review .review-slider .box


{
border: 0px solid red;
background: #fff;
border-radius: .5rem;
text-aLign: center;
padding: 3rem 2rem;
outLine-offset: -1rem;
outline: var(--outline);
box-shadow: var(--box-shadow);
transition: .2s linear;
}

.review .review-slider .box:hover


{
box-shadow: 1px 1px 10px 5px var(--green);
}

.review .review-slider .box img


{
height: 10rem;
width: 10rem;
border-radius: 50%;
}
.review .review-slider .box p
{
padding: 1rem 0;
line-height: 1.8;
color: var(--Light-color);
font-size: 1.5rem;
}

.review .review-slider .box h3


{
padding-bottom: .5rem;
color: var(--bLack);
font-size: 2.2rem;
}

.review .review-slider .box .stars i


{
color: orange;
font-size: 1.7rem;
}

/*review*/

/* media queries */
@media (max-width: 991px)
{
html
{
font-size: 55%;
}

.header
{
padding: 2rem;
}
section
{
padding: 2rem;
}
}

@media (max-width: 768px)


{
#menu-btn
{
display: inline-block;
}

.header .search-form
{
width: 90%;
}
.header .navbar
{
position: absolute;
top: 110%;
right: -110%;
width: 30rem;
box-shadow: var(--box-shadow);
border-radius: .5rem;
background: #fff;
}

.header .navbar a
{
font-size: 2rem;
margin: 2rem 2.5rem;
display: block;
}
}

@media (max-width: 450px)


{
html
{
font-size: 50%;
}

.heading
{
font-size: 2.5rem;
}
}

You might also like