Build Responsive Online Grocery Store Website From Scratch Using HTML CSS And Javascript.
Build Responsive Online Grocery Store Website From Scratch Using HTML CSS And Javascript.
This Content is for educational purpose only. Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use.
You Can Use & Start Project From Scratch And Get Source Code from here and support me ❤ You can Motivate me through Paying using UPI , Your Single Panny will be Countable. UPI_ID : CodingGenius@ybl , CodingGenius@ibl .
And Don’t Forget To Subscribe My Youtube Channel To motivate me So I can Give You more Valuable Content .
" https://www.youtube.com/@Codingenius "
Home
Our Features
Our Products
Products Categories
Customer Review
Our Blogs
Footer
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Complete Responsive Grocery Wedsite .</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/>
<!-- font awesome cdn link -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- custom css file link -->
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- Header Section Starts -->
<header class="header">
<a href="#" class="logo"
><i class="fas fa-shopping-basket"></i>Grocery Store</a
>
<nav class="navbar">
<a href="#home">Home</a>
<a href="#features">Features</a>
<a href="#products">Products</a>
<a href="#categories">Categories</a>
<a href="#review">Review</a>
<a href="#blog">Blog</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>
<div class="fas fa-user" id="login-btn"></div>
</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>
<div class="shopping-cart">
<div class="box">
<i class="fas fa-trash"></i
><img src="images/bgR/cart-img-1.png" alt="" />
<div class="content">
<h3>Watermelon</h3>
<span class="price"> ₹40.9/-</span>
<sapan class="quantity">qty : 1</sapan>
</div>
</div>
<div class="box">
<i class="fas fa-trash"></i
><img src="images/bgR/cart-img-2.png" alt="" />
<div class="content">
<h3>Onion</h3>
<span class="price"> ₹40.9/-</span>
<sapan class="quantity">qty : 1</sapan>
</div>
</div>
<div class="box">
<i class="fas fa-trash"></i
><img src="images/bgR/cart-img-3.png" alt="" />
<div class="content">
<h3>Chicken</h3>
<span class="price"> ₹40.9/-</span>
<sapan class="quantity">qty : 1</sapan>
</div>
</div>
<div class="total">total: ₹122.7/-</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 Ends -->
<!-- Home Section Starts -->
<section class="home" id="home">
<div class="content">
<h3>fresh and <span> organic </span> Products for Your</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas ab,
quam tenetur eos numquam quasi!
</p>
<a href="#" class="btn">shop now</a>
</div>
</section>
<!-- Home Section Ends -->
<!-- Features Section Starts -->
<section class="features" id="features">
<h1 class="heading">Our <span> Features </span></h1>
<div class="box-container">
<div class="box">
<img src="images/bgR/feature-img-1.png" alt="" />
<h3>fresh and organic</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit,
impedit.
</p>
<a href="#" class="btn">read more</a>
</div>
<div class="box">
<img src="images/bgR/feature-img-2.png" alt="" />
<h3>free delivery</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit,
impedit.
</p>
<a href="#" class="btn">read more</a>
</div>
<div class="box">
<img src="images/bgR/feature-img-3.webp" alt="" />
<h3>easy payment</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit,
impedit.
</p>
<a href="#" class="btn">read more</a>
</div>
</div>
</section>
<!-- Features Section Ends -->
<!-- Products Section Starts -->
<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="/images/bgR/product-1.png" alt="" />
<h3>Fresh Tomato</h3>
<div class="price">₹40.9/- - 50.99/-</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="swiper-slide box">
<img src="/images/bgR/product-2.png" alt="" />
<h3>Fresh Onion</h3>
<div class="price">₹40.9/- - 50.99/-</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="swiper-slide box">
<img src="/images/bgR/product-3.png" alt="" />
<h3>Fresh Brinjal</h3>
<div class="price">₹40.9/- - 50.99/-</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="swiper-slide box">
<img src="/images/bgR/product-4.png" alt="" />
<h3>Fresh Cauliflower</h3>
<div class="price">₹40.9/- - 50.99/-</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></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="/images/bgR/product-5.png" alt="" />
<h3>Fresh Strawberry</h3>
<div class="price">₹40.9/- - 50.99/-</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="swiper-slide box">
<img src="/images/bgR/product-6.png" alt="" />
<h3>Fresh Spinach</h3>
<div class="price">₹40.9/- - 50.99/-</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="swiper-slide box">
<img src="/images/bgR/product-7.png" alt="" />
<h3>Fresh Carrot</h3>
<div class="price">₹40.9/- - 50.99/-</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<a href="#" class="btn">add to cart</a>
</div>
<div class="swiper-slide box">
<img src="/images/bgR/product-8.png" alt="" />
<h3>Fresh Green Pea</h3>
<div class="price">₹40.9/- - 50.99/-</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<a href="#" class="btn">add to cart</a>
</div>
</div>
</div>
</section>
<!-- Products Section Ends -->
<!-- Category Section Starts -->
<section class="categories" id="categories">
<h1 class="heading">Products<span> Categories </span></h1>
<div class="box-container">
<div class="box">
<img src="images/bgR/cat-1.png" alt="" />
<h3>Vegitables</h3>
<p>Upto 45% off</p>
<a href="#" class="btn">Shop Now</a>
</div>
<div class="box">
<img src="images/bgR/cat-2.png" alt="" />
<h3>Fresh Fruit</h3>
<p>Upto 45% off</p>
<a href="#" class="btn">Shop Now</a>
</div>
<div class="box">
<img src="images/cat-3.png" alt="" />
<h3>Dairy Products</h3>
<p>Upto 45% off</p>
<a href="#" class="btn">Shop Now</a>
</div>
<div class="box">
<img src="images/bgR/cat-4.png" alt="" />
<h3>Fresh Meat</h3>
<p>Upto 45% off</p>
<a href="#" class="btn">Shop Now</a>
</div>
</div>
</section>
<!-- Category Section Starts -->
<!-- Reviews Sections Starts -->
<section class="review" id="review">
<h1 class="heading">Customer's<span> Review </span></h1>
<div class="swiper review-slider">
<div class="swiper-wrapper">
<div class="box swiper-slide">
<img src="images/pic-1.jpg" alt="" />
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Praesentium nisi adipisci aspernatur voluptatem? Deleniti eos,
ipsum debitis sit cumque laudantium?
</p>
<h3>John Miller</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<div class="box swiper-slide">
<img src="images/pic-2.jpg" alt="" />
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Praesentium nisi adipisci aspernatur voluptatem? Deleniti eos,
ipsum debitis sit cumque laudantium?
</p>
<h3>John Miller</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<div class="box swiper-slide">
<img src="images/pic-3.jpg" alt="" />
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Praesentium nisi adipisci aspernatur voluptatem? Deleniti eos,
ipsum debitis sit cumque laudantium?
</p>
<h3>John Miller</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<div class="box swiper-slide">
<img src="images/pic-4.jpg" alt="" />
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Praesentium nisi adipisci aspernatur voluptatem? Deleniti eos,
ipsum debitis sit cumque laudantium?
</p>
<h3>John Miller</h3>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
</div>
</section>
<!-- Reviews Sections Starts -->
<!-- Blog Section Starts -->
<section class="blogs" id="blog">
<h1 class="heading">Our<span> Blogs </span></h1>
<div class="box-container">
<div class="box">
<img src="images/bgR/blog-1.png" alt="" />
<div class="content">
<div class="icons">
<a href="#"><i class="fas fa-user"></i> By User </a>
<a href="#"><i class="fas fa-calendar"></i> 10th July, 2023 </a>
</div>
<h3>Fresh And Organic Vegitables And Fruits</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
ipsam.
</p>
<a href="#" class="btn">Read More</a>
</div>
</div>
<div class="box">
<img src="images/bgR/blog-2.png" alt="" />
<div class="content">
<div class="icons">
<a href="#"><i class="fas fa-user"></i> By User </a>
<a href="#"><i class="fas fa-calendar"></i> 10th July, 2023 </a>
</div>
<h3>Fresh And Organic Vegitables And Fruits</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
ipsam.
</p>
<a href="#" class="btn">Read More</a>
</div>
</div>
<div class="box">
<img src="images/bgR/blog-3.png" alt="" />
<div class="content">
<div class="icons">
<a href="#"><i class="fas fa-user"></i> By User </a>
<a href="#"><i class="fas fa-calendar"></i> 10th July, 2023 </a>
</div>
<h3>Fresh And Organic Vegitables And Fruits</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis,
ipsam.
</p>
<a href="#" class="btn">Read More</a>
</div>
</div>
</div>
</section>
<!-- Blog Section Ends -->
<!-- Footer Section Starts -->
<section class="footer">
<div class="box-container">
<div class="box">
<h3>Grocery Store <i class="fas fa-shopping-basket"> </i></h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Consequuntur, obcaecati.
</p>
<div class="share">
<a href="#" class="fab fa-facebook-f"></a
><a href="#" class="fab fa-twitter"></a
><a href="#" class="fab fa-instagram"></a
><a href="#" class="fab fa-linkedin"></a>
</div>
</div>
<div class="box">
<h3>Contact Info</h3>
<a href="#" class="links"
><i class="fas fa-phone"></i> +123-456-7890
</a>
<a href="#" class="links"
><i class="fas fa-phone"></i> +111-222-7890
</a>
<a href="#" class="links"
><i class="fas fa-envelope"></i> Codingenius@gmail.com
</a>
<a href="#" class="links"
><i class="fas fa-map-marker-alt"></i> Haryana, India - 122000
</a>
</div>
<div class="box">
<h3>Quick Links</h3>
<a href="#" class="links"><i class="fas fa-arrow-right"></i> Home </a>
<a href="#" class="links"
><i class="fas fa-arrow-right"></i> Features
</a>
<a href="#" class="links"
><i class="fas fa-arrow-right"></i> Products
</a>
<a href="#" class="links"
><i class="fas fa-arrow-right"></i> Categories
</a>
<a href="#" class="links"
><i class="fas fa-arrow-right"></i> Review
</a>
<a href="#" class="links"
><i class="fas fa-arrow-right"></i> Blogs
</a>
</div>
<div class="box">
<h3>News Letter</h3>
<p>Subscribe For Latest Updates</p>
<input type="email" placeholder="Your Email" class="emial" />
<input type="submit" value="subscribe" class="btn" />
<img src="images/payment.png" class="payment-img" alt="" />
</div>
</div>
<div class="credit">
Credited By <span>Mr. Web Developer Codingenius.</span> | All Rights
Reserved
</div>
</section>
<!-- Footer Section Ends -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<!-- custome JavaScript File -->
<script src="js/script.js"></script>
</body>
</html>
Style.css
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200&family=Poppins:ital,wght@0,100;0,300;0,400;0,500;1,600&display=swap");
:root {
--green: #217906;
--black: #130f40;
--light-color: #006;
--box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
--border: 0.2rem solid rgba(0, 0, 0, 0.1);
--outline: 0.1rem solid rgba(0, 0, 0, 0.1);
--outline-hover: 0.2rem solid var(--black);
}
* {
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 0.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: 0.5rem 3rem;
clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);
}
.btn {
margin-top: 1rem;
display: inline-block;
padding: 0.8rem 3rem;
font-size: 1.7rem;
border-radius: 0.5rem;
border: 0.2rem solid var(--black);
color: var(--black);
background: none;
cursor: pointer;
}
.btn:hover {
background: var(--green);
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;
border-radius: 0.5rem;
background: #eee;
color: var(--black);
font-size: 2rem;
margin-right: 0.3rem;
cursor: pointer;
text-align: center;
}
.header .icons div:hover {
background: var(--green);
color: #fff;
}
#menu-btn {
display: none;
}
.header .search-form {
position: absolute;
top: 110%;
right: -110%;
width: 50rem;
height: 5rem;
background: #fff;
border-radius: 0.5rem;
overflow: hidden;
display: flex;
align-items: center;
box-shadow: var(--box-shadow);
}
.header .search-form.active {
right: 2rem;
transition: 0.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 {
position: absolute;
top: 110%;
right: -110%;
padding: 1rem;
border-radius: 0.5rem;
box-shadow: var(--box-shadow);
width: 35rem;
background: #fff;
}
.header .shopping-cart.active {
right: 2rem;
transition: 0.4s linear;
}
.header .shopping-cart .box {
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: translateY(-50%);
}
.header .shopping-cart .box .fa-trash:hover {
color: var(--green);
}
.header .shopping-cart .box .content h3 {
color: var(--black);
font-size: 1.7rem;
padding-bottom: 1rem;
}
.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 {
position: absolute;
top: 100%;
right: -110%;
width: 30rem;
box-shadow: var(--box-shadow);
padding: 2rem;
border-radius: 0.5rem;
background: #fff;
text-align: center;
}
.header .login-form.active {
right: 2rem;
transition: 0.4s linear;
}
.header .login-form h3 {
font-size: 2.5rem;
text-transform: uppercase;
color: var(--black);
}
.header .login-form .box {
width: 100%;
margin: 0.7rem 0;
background: #eee;
border-radius: 0.5rem;
padding: 1rem;
font-size: 1.6rem;
color: var(--black);
text-transform: none;
}
.header .login-form p {
font-size: 1.4rem;
padding: 0.5rem 0;
color: var(--light-color);
}
.header .login-form p a {
color: var(--green);
text-decoration: underline;
}
.home {
display: flex;
align-items: center;
justify-content: center;
background: url(../images/banner-bg.jpg) no-repeat;
background-position: center;
background-size: cover;
padding-top: 17rem;
padding-bottom: 10rem;
}
.home .content {
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.8rem;
}
.features .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 1.5rem;
}
.features .box-container .box {
padding: 3rem 2rem;
background: #fff;
outline: var(--outline);
outline-offset: -1rem;
text-align: center;
box-shadow: var(--box-shadow);
}
.features .box-container .box:hover {
outline: var(--outline-hover);
outline-offset: 0rem;
}
.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;
}
.products .product-slider {
padding: 1rem;
}
.products .product-slider:first-child {
margin-bottom: 2rem;
}
.products .product-slider .box {
background: #fff;
border-radius: 0.5rem;
text-align: center;
padding: 3rem 2rem;
outline-offset: -1rem;
outline: var(--outline);
box-shadow: var(--box-shadow);
transition: 0.2s linear;
}
.products .product-slider .box:hover {
outline-offset: 0rem;
outline: var(--outline-hover);
}
.products .product-slider .box img {
height: 20rem;
}
.products .product-slider .box h3 {
font-size: 2.5rem;
color: var(--black);
}
.products .product-slider .box .price {
font-size: 2rem;
color: var(--light-color);
padding: 0.5rem 0;
}
.products .product-slider .box .stars i {
font-size: 1.7rem;
color: var(--green);
padding: 0.5rem 0;
}
.categories .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
gap: 1.5rem;
}
.categories .box-container .box {
padding: 3rem 2rem;
border-radius: 0.5rem;
background: #fff;
box-shadow: var(--box-shadow);
outline: var(--outline);
outline-offset: -1rem;
text-align: center;
}
.categories .box-container .box:hover {
outline: var(--outline-hover);
outline-offset: 0rem;
}
.categories .box-container .box img {
width: 100%;
margin: 1rem 0;
height: 15rem;
}
.categories .box-container .box h3 {
font-size: 2rem;
color: var(--black);
line-height: 1.8;
}
.categories .box-container .box p {
font-size: 1.7rem;
color: var(--light-color);
line-height: 1.8;
padding: 1rem 0;
}
.review .review-slider {
padding: 1rem;
}
.review .review-slider .box {
background: #fff;
border-radius: 0.5rem;
text-align: center;
padding: 3rem 2rem;
outline-offset: -1rem;
outline: var(--outline);
box-shadow: var(--box-shadow);
transition: 0.2s linear;
}
.review .review-slider .box:hover {
outline: var(--outline-hover);
outline-offset: 0rem;
}
.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: 0.5rem;
color: var(--black);
font-size: 2.2rem;
}
.review .review-slider .box .stars i {
color: var(--green);
font-size: 1.7rem;
}
.blogs .box-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
gap: 1.5rem;
}
.blogs .box-container .box {
overflow: hidden;
border-radius: 0.5rem;
box-shadow: var(--box-shadow);
background: #fff;
}
.blogs .box-container .box img {
height: 25rem;
width: 100%;
object-fit: cover;
}
.blogs .box-container .box .content {
padding: 2rem;
}
.blogs .box-container .box .content .icons {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1.5rem;
margin-bottom: 1rem;
border-bottom: var(--border);
}
.blogs .box-container .box .content .icons a {
color: var(--light-color);
font-size: 1.5rem;
}
.blogs .box-container .box .content .icons a:hover {
color: var(--black);
}
.blogs .box-container .box .content .icons a i {
color: var(--green);
padding-right: 0.5rem;
}
.blogs .box-container .box .content h3 {
line-height: 1.8;
color: var(--black);
font-size: 2.2rem;
padding: 0.5rem 0;
}
.blogs .box-container .box .content p {
line-height: 1.8;
color: var(--light-color);
font-size: 1.5rem;
padding: 0.5rem 0;
}
.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 {
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;
color: var(--light-color);
padding: 1rem 0;
}
.footer .box-container .box .links i {
color: var(--green);
padding-right: 0.5rem;
}
.footer .box-container .box .links:hover i {
padding-right: 2rem;
}
.footer .box-container .box p {
line-height: 1.8;
font-size: 1.5rem;
color: var(--light-color);
padding: 1rem 0;
}
.footer .box-container .box .share a {
height: 4rem;
width: 4rem;
line-height: 4rem;
border-radius: 0.5rem;
font-size: 2rem;
color: var(--black);
margin-left: 0.2rem;
background: #eee;
text-align: center;
}
.footer .box-container .box .share a:hover {
background: var(--green);
color: #fff;
}
.footer .box-container .box .email {
width: 100%;
margin: 0.7rem 0;
padding: 1rem;
border-radius: 0.5rem;
background: #eee;
font-size: 1.6rem;
color: var(--black);
text-transform: none;
}
.footer .box-container .box .payment-img {
margin-top: 2rem;
height: 3rem;
}
.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);
}
/* Media Queries */
@media (max-width: 1080px) {
html {
font-size: 55%;
}
.header {
padding: 2rem;
}
}
@media (max-width: 991px) {
html {
font-size: 55%;
}
.header {
padding: 2rem;
}
section {
padding: 2rem;
}
}
@media (max-width: 820px) {
#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: 0.5rem;
background: #fff;
}
.header .navbar.active {
right: 2rem;
transition: 0.4s linear;
}
.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;
}
.footer {
text-align: center;
}
}
Script.Js
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 = () => {
shoppingCart.classList.toggle("active");
searchForm.classList.remove("active");
loginForm.classList.remove("active");
navbar.classList.remove("active");
};
let loginForm = document.querySelector(".login-form");
document.querySelector("#login-btn").onclick = () => {
loginForm.classList.toggle("active");
searchForm.classList.remove("active");
shoppingCart.classList.remove("active");
navbar.classList.remove("active");
};
let navbar = document.querySelector(".navbar");
document.querySelector("#menu-btn").onclick = () => {
navbar.classList.toggle("active");
searchForm.classList.remove("active");
shoppingCart.classList.remove("active");
loginForm.classList.remove("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: 10,
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
centeredSlides: true,
breakpoints: {
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
},
});
var swiper = new Swiper(".review-slider", {
loop: true,
spaceBetween: 10,
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
centeredSlides: true,
breakpoints: {
0: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
1024: {
slidesPerView: 3,
},
},
});
IMAGE FILES
Banner
Our Features
Our Products
Our Category
Customer Review
Our Blogs
Payment
Some Important Links Are :--
swiper.js link:
https://swiperjs.com/
font awesome cdn link:
https://cdnjs.com/libraries/font-awesome
google fonts:
https://fonts.google.com/specimen/Nun...
Some Important CDN Links Are :--
<!-- swiper CSS CDN File -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"
/>
<!-- font awesome cdn link -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
<!-- swiper js CDN File -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
Related Videos:
1. Build a Complete Responsive Personal Portfolio Website using HTML CSS Javascript
https://youtu.be/C6IE2bcS47c
2. Build a Complete Responsive Personal Portfolio Website using HTML CSS Javascript | Dark
And Light Mode
https://youtu.be/ftWF2fP3EIk
Related PlayList:
1. Full Tutorial For Css Flex and Grid System in Web Development .
https://www.youtube.com/playlist?list=PLbBqedyzVdDvdrxb6wTG18PGAFGxU9iYX
2. Full Tutorial For Jasmine Unit Testing Using JavaScript And Angular.
https://www.youtube.com/playlist?list=PLbBqedyzVdDsUINNDz2uVX6fPldppKs6k
3. PlayList For Responsive Web Development Using Html, Css, Js , React And Angular .
https://www.youtube.com/playlist?list=PLbBqedyzVdDuMhoixLt94NqWuQlQhTaWm
Thanks For Your Love And Support.
Comments
Post a Comment