Scribd
Upload
16 views60 pages

HTML, CSS, Javascript Codes

Hey

Uploaded by

saishshetyerollno54
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views60 pages

HTML, CSS, Javascript Codes

Hey

Uploaded by

saishshetyerollno54
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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