Hi everybody! Using HTML, CSS, and JavaScript, you will learn

how to create responsive websites that deliver groceries using HTML CSS, And JAVASCRIPT in this Blog.

Using standard JavaScript, users can use the navigation buttons on the web design moving car animation website design to navigate through each slide. The clip-path property is utilized for the transition on the slide. I hope that when you design a website with online moving car animation , this video will be helpful.

You can download all of the source files and codes from this location. The code from the text editors must be copied and pasted. Try it out first by watching the video tutorial. It will assist you in comprehending everything. After that, if your code isn’t working right, look at the source codes provided and compare them to your own. It will assist you in comprehending everything, including your errors.

Index.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>Complete Responsive Grocery Website Design Tutorial</title>

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

<!-- font awesome cdn link -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<!-- custom css file link -->
<link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>


<!-- header section starts -->
<section class="header">
    <a href="#" class="logo"><i class="fas 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="#categories">categories</a>
        <a href="#review">review</a>
        <a href="#blogs">blogs</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 decoding="async" src="img/cart-img-1.png">
            <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="fas fa-trash"></i>
            <img decoding="async" src="img/cart-img-2.png">
            <div class="content">
                <h3>onion</h3>
                <span class="price">$5.99/-</span>
                <span class="quantity">qty : 1</span>
            </div>
        </div>

        <div class="box">
            <i class="fas fa-trash"></i>
            <img decoding="async" src="img/cart-img-3.png">
            <div class="content">
                <h3>chicken</h3>
                <span class="price">$5.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="enter your email" class="box">
        <input type="password" placeholder="enter your password" class="box">
        <p>forget password <a href="#">click here</a></p>
        <p>don't have an account <a href="#">create how</a></p>
        <input type="submit" value="login now" class="btn" name="">

     </form>
</section>

<!-- <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>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</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 decoding="async" src="img/feature-img-1.png">
            <h3>fresh and organic</h3>
            <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
            <a href="#" class="btn">read more</a>
        </div>

        <div class="box">
            <img decoding="async" src="img/feature-img-2.png">
            <h3>free delivery</h3>
            <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
            <a href="#" class="btn">read more</a>
        </div>

        <div class="box">
            <img decoding="async" src="img/feature-img-3.png">
            <h3>easy payment</h3>
            <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</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 decoding="async" src="img/product-1.png" alt="">
                <h3>fresh orange</h3>
                <div class="price"> $5.99/- - 10.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 decoding="async" src="img/product-2.png" alt="">
                <h3>fresh onion</h3>
                <div class="price"> $5.99/- - 10.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 decoding="async" src="img/product-3.png" alt="">
                <h3>fresh meat</h3>
                <div class="price"> $5.99/- - 10.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 decoding="async" src="img/product-4.png" alt="">
                <h3>fresh cabbage</h3>
                <div class="price"> $5.99/- - 10.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 decoding="async" src="img/product-5.png" alt="">
                <h3>fresh potato</h3>
                <div class="price"> $5.99/- - 10.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 decoding="async" src="img/product-6.png" alt="">
                <h3>fresh avocado</h3>
                <div class="price"> $5.99/- - 10.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 decoding="async" src="img/product-7.png" alt="">
                <h3>fresh carrot</h3>
                <div class="price"> $5.99/- - 10.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 decoding="async" src="img/product-8.png" alt="">
                <h3>green lemon</h3>
                <div class="price"> $5.99/- - 10.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 -->

<!-- categories section start -->

<section class="categories" id="categories">
    <h1 class="heading"> product <span>categories</span></h1>

    <div class="box-container">

        <div class="box">
            <img decoding="async" src="img/cat-1.png">
            <h3>vegitables</h3>
            <p>upto 45% off</p>
            <a href="#" class="btn">shop now</a>
        </div>

        <div class="box">
            <img decoding="async" src="img/cat-2.png">
            <h3>fresh fruits</h3>
            <p>upto 45% off</p>
            <a href="#" class="btn">shop now</a>
        </div>

        <div class="box">
            <img decoding="async" src="img/cat-3.png">
            <h3>dairy product</h3>
            <p>upto 45% off</p>
            <a href="#" class="btn">shop now</a>
        </div>

        <div class="box">
            <img decoding="async" src="img/cat-4.png">
            <h3>fresh meat</h3>
            <p>upto 45% off</p>
            <a href="#" class="btn">shop now</a>
        </div>

    </div>
</section>

<!-- categories section ends -->

<!-- review section 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="swiper-slide box">
                <img decoding="async" src="img/pic-1.jpg">
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing farhan, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                <h3>Edward Bey</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="swiper-slide box">
                <img decoding="async" src="img/pic-2.jpg">
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing farhan, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                <h3>jenna Bey</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="swiper-slide box">
                <img decoding="async" src="img/pic-3.jpg">
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing farhan, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                <h3>Edward Bey</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="swiper-slide box">
                <img decoding="async" src="img/pic-4.jpg">
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing farhan, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                <h3>lisa Bey</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>

<!-- review section ends -->

<!-- blogs section start -->

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

    <div class="box-container">

        <div class="box">
            <img decoding="async" src="img/blog-1.jpg">
            <div class="content">
                <div class="icons">
                    <a href="#"> <i class="fas fa-user"></i> by user</a>
                    <a href="#"> <i class="fas fa-calender"></i> 1st jan, 2022</a>
                </div>
                <h3>fresh and organic vegitables and fruits</h3>
                <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/blog-2.jpg">
            <div class="content">
                <div class="icons">
                    <a href="#"> <i class="fas fa-user"></i> by user</a>
                    <a href="#"> <i class="fas fa-calender"></i> 1st jan, 2022</a>
                </div>
                <h3>fresh and organic vegitables and fruits</h3>
                <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/blog-3.jpg">
            <div class="content">
                <div class="icons">
                    <a href="#"> <i class="fas fa-user"></i> by user</a>
                    <a href="#"> <i class="fas fa-calender"></i> 1st jan, 2022</a>
                </div>
                <h3>fresh and organic vegitables and fruits</h3>
                <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

    </div>
</section>


<!-- blogs section ends -->

<!-- footer section starts -->

<section class="footer">
    <div class="box-container">

        <div class="box">
            <h3>grocery <i class="fas fa-shopping-basket"></i></h3>
            <p>Grocery Items . . means Farhanfood and foodstuffs, green groceries, beverages and household goods usually prepackaged...</p>
            <div class="share">
                <a href="#" class="fab fa-facebook"></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-443-5678</a>
            <a href="#" class="links"><i class="fas fa-phone"></i> +444-222-6789</a>
            <a href="#" class="links"><i class="fas fa-envelope"></i> shaikhfarhan@gmail.com</a>
            <a href="#" class="links"><i class="fas fa-map-marker-alt"></i> mumbai, india - 401203</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>newsletter</h3>
            <p>subscribe for latest update</p>
            <input type="email" placeholder="enter your emai" class="email" name="">
            <input type="submit" value="subscribe" class="btn" name="">
            <img decoding="async" src="img/payment.png" class="payment-img">
        </div>
    </div>
    <div class="credit"> created by <span>dailywebdesign</span> || all right reserved </div>
</section>
















































<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<!-- custom js file link -->
<script type="text/javascript" src="main.js"></script>
</body>
</html>

style.css

				
					@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');

:root{
    --orange:#ff7800;
    --black:#130f40;
    --lighting-color: #666;
    --border-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;
    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(--orange);
    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;
    display: inline-block;
    padding: .8rem 3rem;
    font-size: 1.7rem;
    border-radius: .5rem;
    border: .2rem solid var(--black);
    color: var(--black);
    cursor: pointer;
    background: none;
}

.btn:hover{
    background: var(--orange);
    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(--orange);
}


.header .navbar a{
    font-size: 1.7rem;
    margin:0 1rem;
    color: var(--black)
}

.header .navbar a:hover{
    color: var(--orange);
}

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

.header .icons div:hover{
    background: var(--orange);
    color: #fff;
}

#menu-btn{
    display: none;
}

.header .search-form{
    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(--orange);
}

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

.header .shopping-cart.active{
    right: 2rem;
    transition: .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(--lighting-color);
    transform: translateY(-50%);
}

.header .shopping-cart .box .fa-trash:hover{
    color: var(--orange);
}

.header .shopping-cart .box .content h3{
    color: var(--black);
    font-size: 1.7rem;
    padding-bottom: 1rem;
}

.header .shopping-cart .box .content span{
    color: var(--lighting-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;
}

.header .login-form{
    position: absolute;
    top: 110%;
    right: -110%;
    width: 30rem;
    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%;
    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(--lighting-color);
}

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


.home{
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(img/banner-bg.webp) no-repeat;
    background-position: center;
    box-sizing: 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(--orange);
}

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

.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(--lighting-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: .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{
    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:.5rem 0;
}

.products .product-slider .box .stars i{
    font-size: 1.7rem;
    color:var(--orange);
    padding:.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: .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{
    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(--lighting-color);
    line-height: 1.8;
    padding: .5rem 0;
}


.review .review-slider{
    padding: 1rem;
}

.review .review-slider .box{
    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{
    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(--lighting-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: var(--orange);
    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: .5rem;
    box-shadow: var(--box-shadow);
    background: #fff;
}

.blogs .box-container .box img{
    height: 25rem;
    width: 100%;
    object-fit: cover;
    transition: transform 2s;
}
.blogs .box-container .box img:hover{
    transform: scaleX(1.2);
}


.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(--lighting-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(--orange);
    padding-right: .5rem;
}

.blogs .box-container .box .content h3{
    line-height: 1.8;
    color: var(--black);
    font-size: 2.2rem;
    padding-right: .5rem 0;
}

.blogs .box-container .box .content p{
    line-height: 1.8;
    color: var(--lighting-color);
    font-size: 1.5rem;
    padding-right: .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(--orange);
}

.footer .box-container .box .links{
    display: block;
    font-size: 1.5rem;
    color: var(--lighting-color);
    padding: 1rem 0;
}
.footer .box-container .box .links i{
    color: var(--orange);
    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;
    color: var(--lighting-color);
    padding: 1rem 0;
}

.footer .box-container .box .share a{
    height: 4rem;
    width: 4rem;
    line-height: 4rem;
    border-radius: .5rem;
    font-size: 2rem;
    color: var(--black);
    margin-left: .2rem;
    background: #eee;
    text-align: center;
}

.footer .box-container .box .share a:hover{
    background: var(--orange);
    color: #fff;
}

.footer .box-container .box .email{
    width: 100%;
    margin: .7rem 0;
    padding: 1rem;
    border-radius: .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(--orange)
}


















/*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-from{
    width: 90%;
}

    .header .navbar{
        position: absolute;
        top: 110%;
        right: -110%;
        width: 30rem;
        box-shadow: var(--box-shadow);
        border-radius: .5rem;
        background:#fff;
    }
    .header .navbar.active{
        right: 2rem;
        transition: .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;
   }
}

main.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: 20,
    autoplay: {
        delay: 7500,
        disableOnInteraction: false,
    },
    centeredSlides: true,
    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,
    },
    centeredSlides: true,
    breakpoints: {
      0: {
        slidesPerView: 1,
      },
      768: {
        slidesPerView: 2,
      },
      1020: {
        slidesPerView: 3,
      },
    },
});