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

how to create responsive web designer for e-commerce 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 valentine website design</title>

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


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

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

<!-- header section start page -->
<header class="header">
    <a href="#" class="logo"> <i class="fas fa-american-sign-language-interpreting"></i> valentine. </a>

    <nav class="navbar">
        <a href="#">home</a>
        <a href="#">days</a>
        <a href="#">about</a>
        <a href="#">review</a>
        <a href="#">blog</a>
        <a href="#">contact</a>
    </nav>

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


<!-- home section start -->

<section class="home" id="home">
    <div class="slides-container">

        <div class="slide active">
            <div class="content">
                <span>Have a Valentine Day</span>
                <h3>upto 50% off</h3>
                <a href="#" class="btn">Book Now</a>
            </div>
            <div class="img">
                <img decoding="async" src="home-img-1.png">
            </div>
        </div>

        <div class="slide">
            <div class="content">
                <span>Have a Valentine Day</span>
                <h3>upto 50% off</h3>
                <a href="#" class="btn">Book Now</a>
            </div>
            <div class="img">
                <img decoding="async" src="home-img-2.png">
            </div>
        </div>

        <div class="slide">
            <div class="content">
                <span>Have a Valentine Day</span>
                <h3>upto 50% off</h3>
                <a href="#" class="btn">Book Now</a>
            </div>
            <div class="img">
                <img decoding="async" src="home-img-3.png">
            </div>
        </div>
         </div>
         <div id="next-slide" class="fas fa-angle-right" onclick="next()"></div>
         <div id="prev-slide" class="fas fa-angle-left" onclick="next()"></div>
</section>


<section class="banner-container">
    <div class="banner">
        <img decoding="async" src="banner-1.png">
        <div class="content">
            <span>special offer</span>
            <h3>upto 50% off</h3>
            <a href="#" class="btn">check out</a>
        </div>
    </div>

    <div class="banner">
        <img decoding="async" src="banner-2.png">
        <div class="content">
            <span>limited offer</span>
            <h3>upto 50% off</h3>
            <a href="#" class="btn">check out</a>
        </div>
    </div>

    <div class="banner">
        <img decoding="async" src="banner-3.png">
        <div class="content">
            <span>premium offer</span>
            <h3>upto 50% off</h3>
            <a href="#" class="btn">check out</a>
        </div>
    </div>
</section>


<section class="products">
<h1 class="title"> valentine <span>days</span> <a href="#">view all >></a> </h1>

<div class="box-container">

    <div class="box">
        <div class="icons">
            <a href="#" class="fas fa-shopping-cart"></a>
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-eye"></a>
        </div>
        <div class="img">
            <img decoding="async" src="rose.png">
        </div>
        <div class="content">
            <h3>rose day</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 class="box">
        <div class="icons">
            <a href="#" class="fas fa-shopping-cart"></a>
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-eye"></a>
        </div>
        <div class="img">
            <img decoding="async" src="Propose.png">
        </div>
        <div class="content">
            <h3>propose day</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 class="box">
        <div class="icons">
            <a href="#" class="fas fa-shopping-cart"></a>
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-eye"></a>
        </div>
        <div class="img">
            <img decoding="async" src="chocolate.png">
        </div>
        <div class="content">
            <h3>chocolate day</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 class="box">
        <div class="icons">
            <a href="#" class="fas fa-shopping-cart"></a>
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-eye"></a>
        </div>
        <div class="img">
            <img decoding="async" src="teddy.png">
        </div>
        <div class="content">
            <h3>teddy day</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 class="box">
        <div class="icons">
            <a href="#" class="fas fa-shopping-cart"></a>
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-eye"></a>
        </div>
        <div class="img">
            <img decoding="async" src="promise.png">
        </div>
        <div class="content">
            <h3>promise day</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 class="box">
        <div class="icons">
            <a href="#" class="fas fa-shopping-cart"></a>
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-eye"></a>
        </div>
        <div class="img">
            <img decoding="async" src="kiss.png">
        </div>
        <div class="content">
            <h3>kiss day</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 class="box">
        <div class="icons">
            <a href="#" class="fas fa-shopping-cart"></a>
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-eye"></a>
        </div>
        <div class="img">
            <img decoding="async" src="hug.png">
        </div>
        <div class="content">
            <h3>hug day</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 class="box">
        <div class="icons">
            <a href="#" class="fas fa-shopping-cart"></a>
            <a href="#" class="fas fa-heart"></a>
            <a href="#" class="fas fa-eye"></a>
        </div>
        <div class="img">
            <img decoding="async" src="valentine.png">
        </div>
        <div class="content">
            <h3>valentine day</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>

<!-- about section start -->
<section class="">
<h1 class="title"> about <span>us</span> <a href="#">read more >></a> </h1>
</section>
<section class="about">
    <div class="img">
        <img decoding="async" src="about-img.png">
    </div>

    <div class="content">
        <span>welcome to our shop</span>
        <h3>Have a Valentine Day</h3>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore farhan aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
            in voluptate </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
             farhan aliqua. Ut enim ad minim veniam, quis</p>
             <a href="#" class="btn">read more</a>
    </div>
</section>


<!-- client review -->
<section class="">
    <h1 class="title"> client <span>review</span> <a href="#">what they say >></a> </h1>
    </section>

    <section class="review" id="review">
        <div class="swiper mySwiper review-slider">
            <div class="swiper-wrapper wrapper">
                
                <div class="swiper-slide slide">
                    <i class="fas fa-quote-right"></i>
                    <div class="user">
                        <img decoding="async" src="pic-1.jpg">
                        <div class="user-info">
                            <h3>jenna deo</h3>
                            <div class="star">
                                <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"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                        </div>
                    </div>
                    <p>"Lorem ipsum dolor sit amet, consectetur 
                        adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
                        dolore magna farhan. Ut enim ad minim veniam, quis nostrud 
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>

                <div class="swiper-slide slide">
                    <i class="fas fa-quote-right"></i>
                    <div class="user">
                        <img decoding="async" src="pic-2.jpg">
                        <div class="user-info">
                            <h3>Edward deo</h3>
                            <div class="star">
                                <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"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                        </div>
                    </div>
                    <p>"Lorem ipsum dolor sit amet, consectetur 
                        adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
                        dolore magna farhan. Ut enim ad minim veniam, quis nostrud 
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>

                <div class="swiper-slide slide">
                    <i class="fas fa-quote-right"></i>
                    <div class="user">
                        <img decoding="async" src="pic-3.jpg">
                        <div class="user-info">
                            <h3>Bey deo</h3>
                            <div class="star">
                                <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"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                        </div>
                    </div>
                    <p>"Lorem ipsum dolor sit amet, consectetur 
                        adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
                        dolore magna farhan. Ut enim ad minim veniam, quis nostrud 
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>

                <div class="swiper-slide slide">
                    <i class="fas fa-quote-right"></i>
                    <div class="user">
                        <img decoding="async" src="pic-4.png">
                        <div class="user-info">
                            <h3>Lisa deo</h3>
                            <div class="star">
                                <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"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                        </div>
                    </div>
                    <p>"Lorem ipsum dolor sit amet, consectetur 
                        adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
                        dolore magna farhan. Ut enim ad minim veniam, quis nostrud 
                        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>

            </div>
        </div>
    </section>


<!-- blog section -->

<section class="blogs">
    <h1 class="title"> our <span>blogs</span> <a href="#">view all >></a> </h1>
   

<div class="box-container">

    <div class="box">
        <div class="img">
            <img decoding="async" src="blog-1.png">
        </div>
        <div class="content">
            <div class="icons">
                <a href="#" class="fas fa-calendar"></i> 14 feb, 2022</a>
                <a href="#" class="fas fa-user"></i> by administrator</a>
            </div>
            <h3>blog title page</h3>
            <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
            <a href="#" class="btn">read more...</a>
        </div>
    </div>

    <div class="box">
        <div class="img">
            <img decoding="async" src="blog-2.png">
        </div>
        <div class="content">
            <div class="icons">
                <a href="#" class="fas fa-calendar"></i> 14 feb, 2022</a>
                <a href="#" class="fas fa-user"></i> by administrator</a>
            </div>
            <h3>blog title page</h3>
            <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
            <a href="#" class="btn">read more...</a>
        </div>
    </div>

    <div class="box">
        <div class="img">
            <img decoding="async" src="blog-3.png">
        </div>
        <div class="content">
            <div class="icons">
                <a href="#" class="fas fa-calendar"></i> 14 feb, 2022</a>
                <a href="#" class="fas fa-user"></i> by administrator</a>
            </div>
            <h3>blog title page</h3>
            <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
            <a href="#" class="btn">read more...</a>
        </div>
    </div>

</div>
</section>

<!-- contact section -->
<section class="">
    <h1 class="title"> contact <span>us</span> <a href="#">view all >></a> </h1>
</section>

    <section class="contact">
    <div class="icons-container">
        <div class="icons">
            <i class="fas fa-phone"></i>
            <h3>our number</h3>
            <p>+111-222-3333</p>
            <p>+456-786-7890</p>
        </div>

        <div class="icons">
            <i class="fas fa-envelope"></i>
            <h3>our email</h3>
            <p>shaikhfarhan@gmail.com</p>
            <p>xyzemail@gmail.com</p>
        </div>

        <div class="icons">
            <i class="fa fa-map-marker-alt"></i>
            <h3>our address</h3>
            <p>dubai, UEA - 400001</p>
        </div>
    </div>
</section>


<!-- footer section -->

<section class="footer">
    <div class="box-container">
        <div class="box">
            <h3>quick links</h3>
                <a href="#"> <i class="fa fa-arrow-right"></i>Home</a>
                <a href="#"> <i class="fa fa-arrow-right"></i>Days</a>
                <a href="#"> <i class="fa fa-arrow-right"></i>About</a>
                <a href="#"> <i class="fa fa-arrow-right"></i>Review</a>
                <a href="#"> <i class="fa fa-arrow-right"></i>Blog</a>
                <a href="#"> <i class="fa fa-arrow-right"></i>Contact</a>
        </div>

        <div class="box">
            <h3>extra links</h3>
                <a href="#"> <i class="fa fa-arrow-right"></i> my order</a>
                <a href="#"> <i class="fa fa-arrow-right"></i> my favorite</a>
                <a href="#"> <i class="fa fa-arrow-right"></i> my wishlist</a>
                <a href="#"> <i class="fa fa-arrow-right"></i> my account</a>
                <a href="#"> <i class="fa fa-arrow-right"></i> terms or use</a>
                <a href="#"> <i class="fa fa-arrow-right"></i> policy</a>
        </div>

        <div class="box">
            <h3>follow us</h3>
            <a href="#"> <i class="fab fa-facebook-f"></i> facebook</a>
            <a href="#"> <i class="fab fa-twitter"></i> twitter</a>
            <a href="#"> <i class="fab fa-instagram"></i> instagram</a>
            <a href="#"> <i class="fab fa-linkedin"></i> linkedin</a>
            <a href="#"> <i class="fab fa-pinterest"></i> pinterest</a>
        </div>

        <div class="box">
            <h3>newsletter</h3>
            <p>subscribe for latest update</p>
            <form action="">
                <input type="email" placeholder="enter your email address">
                <input type="submit" value="subscribe" class="btn">
            </form>
            <img decoding="async" src="payment.png" class="payments">
        </div>
</div>
</section>

<section class="credit">created by <span>Dailywebdesign</span> || all rights reserved</section>













































    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <!-- custom js file link -->
    <script 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{
    --red:#fd0e35;
}

body{
    background:#ff355e;
}

*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-transform: uppercase;
    text-decoration: none;
    transition: .2s linear;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
section{
    padding: 3rem 9%;
}

.title{
    display: flex;
    align-items: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    padding:1.2rem 0;
    border-bottom:0.1rem solid rgba(0,0,0,0.7);
    color: #fff;
}

.title span{
    color: #222222;
    padding-left: .7rem;
}

.title a{
    margin-left: auto;
    color: #222;
    font-size: 1.5rem;
}

.title a:hover{
    color: #fff;
}

.btn{
    margin-top:1rem;
    display: inline-block;
    padding:.8rem 3rem;
    background:var(--red);
    color:#ffffff;
    font-size: 1.7rem;
    cursor: pointer;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border: 0.1rem solid rgba(0,0,0,0.7);
}

.btn:hover{
    background:#222222;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

.header{

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index:1000;
    background: var(--red);
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding:2rem 9%;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);

}

.header .logo{
    font-size: 2.5rem;
    font-weight: bolder;
    color: #ffffff;
}

.header .logo i{
    color: #222222;
    padding-right: .5rem;
}

.header .navbar a{
    font-size: 1.7rem;
    color: #ffffff;
    margin: 0 1rem;
}

.header .navbar a:hover{
    color: #222222;
}

.header .icons div{
    font-size: 2.5rem;
    margin-left: 1.7rem;
    cursor: pointer;
    color: #ffffff;
}

.header .icons div:hover{
    color: #222222;
}

#menu-btn{
    display:none;
}

@keyframes fadeLeft{
    0%{
        opacity: 0;
        transform: translateY(-5rem);
    }
}

@keyframes fadeUp{
    0%{
        opacity: 0;
        transform:scale(0.5);
    }
}

.home{
    padding-top: 5rem;
    background-size: cover;
    background-position: center;
    position: relative;
} 
 .home .slides-container .slide{
    display:flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    display:none;
}
.home .slides-container .slide.active{
    display:flex;
}

.home .slides-container .slide .content{
    flex: 1 1 40rem;
    animation: fadeLeft .4s linear .4s backwards;
}

.home .slides-container .slide .content span{
    color: #000;
    font-size:2.5rem;
}

.home .slides-container .slide .content h3{
    font-size:6rem;
    color: #222;
    padding:.5rem 0;
}

.home .slides-container .slide .img{
    flex: 1 1 40rem;
    margin: 3rem 0;
}

.home .slides-container .slide .img img{
    width: 100%;
    animation: fadeUp .4s linear;
}

.home #next-slide,
.home #prev-slide{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
    text-align: center;
    background: var(--red);
    font-size:2rem;
    color: #fff;
    cursor: pointer;
}

.home #next-slide:hover,
.home #prev-slide:hover{
    background:#222;
    color: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

.home #prev-slide{
    left:2rem;
}

.home #next-slide{
    right:2rem;
}

.banner-container{
    display:flex;
    flex-wrap: wrap;
    gap:1.5rem;
}

.banner-container .banner{
    flex: 1 1 35rem;
    height:25rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border: 0.1em solid rgba(0,0,0,0.7);
    background:var(--red);
}

.banner-container .banner img{
    height:350px;
    width:350px;
    object-fit: cover;
}

.banner-container .banner .content{
    position: absolute;
    top: 70%;
    left:4%;
    transform:translateY(-50%);
}

.banner-container .banner .content h3{
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
}

.banner-container .banner .content span{
    font-size: 1rem;
    color: #fff;
    text-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
}


.banner-container .banner:hover img{
    transform: scale(1.2) rotate(-5deg);
}

.products .box-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap:1.5rem;
}

.products .box-container .box{
    position:relative;
    background:var(--red);
    text-align: center;
    overflow:hidden;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border: 0.1rem solid rgba(0,0,0,0.7);
}

.products .box-container .box:hover .icons{
    top: 0;
}

.products .box-container .box .icons{
    position:absolute;
    top: -105%;
    left: 0;
    height:35rem;
    width:100%;
    display:flex;
    align-items: center;
    justify-content: center;
    background:rgba(243,243,243,0.8);
    gap:1rem;
}

.products .box-container .box .icons a{
    font-size:2rem;
    height:5rem;
    width:5rem;
    line-height: 5rem;
    background:var(--red);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    color: #000;
}

.products .box-container .box .icons a:hover{
    background:var(--red);
    color: #fff;
}

.products .box-container .box .img{
    height:27rem;
    width:27rem;
    overflow:hidden;
}

.products .box-container .box .img img{
    height:100%;
    width:100%;
    object-fit: cover;
}

.products .box-container .box .content{
    padding: 1.5rem;
}

.products .box-container .box .content h3{
    font-size: 2rem;
}

.products .box-container .box .content .stars i{
    font-size: 1.7rem;
    color:#fff;
}


.about{
    display:flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.about .img{
    flex: 1 1 40rem;
}

.about .img img{
    width: 100%;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border: 0.1rem solid rgba(0,0,0,0.7);
    background:var(--red);
}

.about .content{
    flex: 1 1 40rem;
}

.about .content span{
    color: #fff;
    font-size: 2.5rem;
}

.about .content h3{
    color: #222;
    font-size: 3rem;
    padding-top: .5rem;
}

.about .content p{
    color: #222;
    font-size: 1.4rem;
    line-height:2;
    padding:1rem 0;
}

.review .slide{
    padding:2rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border: 0.1rem solid rgba(0,0,0,0.7);
    border-radius: .5rem;
    position: relative;
    background: var(--red);
}

.review .slide .fa-quote-right{
    position:absolute;
    top: 2rem;
    right: 2rem;
    font-size: 6rem;
    color: #ccc;
}

.review .slide .user{
    display:flex;
    gap: 1.5rem;
    align-items: center;
    padding-bottom: 1.5rem;
}

.review .slide .user img{
    height:7rem;
    width: 7rem;
    border-radius: 50%;
    object-fit: cover;
}

.review .slide .user h3{
    color:#000;
    font-size: 2rem;
    padding-bottom:.5rem;
}

.review .slide .user i{
    font-size: 1.3rem;
    color: #fff;
}

.review .slide p{
    font-size: 1.5rem;
    line-height: 1.8;
    color: #222;
}


.blogs .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;
}

.blogs .box-container .box{
    border:0.1rem solid rgba(0,0,0,0.7);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    background:var(--red);
}

.blogs .box-container .box .img{
    height:25rem;
    width:100%;
    overflow:hidden;
}

.blogs .box-container .box .img:hover img{
    transform:scale(1.2);
}

.blogs .box-container .box .img img{
    height:100%;
    width:100%;
    object-fit:cover;
}

.blogs .box-container .box .content{
    padding:2rem 1.5rem;
}

.blogs .box-container .box .content .icons{
    border-radius:  0.1rem solid rgba(0,0,0,0.1);
    padding-bottom: 1.7rem;
    margin-bottom:1.7rem;
    display: flex;
    align-items: center;
    justify-content:space-between;
}

.blogs .box-container .box .content .icons a{
    font-size: 1.4rem;
    color: #222;
}

.blogs .box-container .box .content .icons a:hover{
    color:#ffffff;
}

.blogs .box-container .box .content .icons a i{
    color: #222;
    padding-right: .5rem;
}

.blogs .box-container .box .content h3{
    font-size: 2.2rem;
    color: #222;
}

.blogs .box-container .box .content p{
    font-size: 1.4rem;
    color: #222;
    line-height: 2;
    padding:1rem 0;
}


.contact .icons-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(29rem, 1fr));
    gap: 1.5rem;
}

.contact .icons-container .icons{
    text-align:center;
    border: 0.1rem solid rgba(0,0,0,0.7);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    padding: 2rem;
    background:var(--red);
}

.contact .icons-container .icons i{
    height:6rem;
    width:6rem;
    line-height: 6rem;
    font-size: 2.5rem;
    background:#ff355e;
    color: #fff;
    border-radius: 50%;
}

.contact .icons-container .icons h3{
    color: #222;
    font-size: 2rem;
    padding:1rem 0;
}

.contact .icons-container .icons p{
    color: #222;
    font-size: 1.5rem;
    line-height:2;
}

.footer{
    background:var(--red);
}

.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.2rem;
    color: #000;
    padding:1rem 0;
}

.footer .box-container .box p{
    font-size: 1.5rem;
    color: #000;
    padding-bottom: .5rem;
}

.footer .box-container .box a{
    font-size: 1.4rem;
    color: #000;
    padding: 1rem 0;
    display: block;
}

.footer .box-container .box a:hover{
    color: #fff;
}

.footer .box-container .box a:hover i{
    padding-right: 2rem;
}

.footer .box-container .box a i{
    padding-right: .5rem;
    color: #000;
}

.footer .box-container .box form input[type="email"]{
    width:100%;
    padding: 1rem 1.2rem;
    font-size: 1.6rem;
    color: #000;
    margin: 1rem 0;
    text-transform: none !important;
}

.footer .box-container .box .payments{
    width: 100%;
    margin-top: 2rem;
}

.credit{
    text-align: center;
    background:var(--red);
    color: #fff;
    font-size:2rem;
}

.credit span{
    color: #000;
}



/* media queries */
@media (max-width: 991px){
    html{
        font-size: 55%;
    }
    .header{
        padding:2rem;
    }
    section{
        padding:3rem 2rem;
    }
    .home #next-slide,
    .home #prev-slide{
        transform: translateY(0);
        top:88%;
    }
    .home #prev-slide{
        left:auto;
        right:8rem;
    }
}

@media (max-width: 768px){
    #menu-btn{
        display: inline-block;
    }
    .header .navbar{
        position:absolute;
        top: 99%;
        left: 0;
        right: 0;
        background:#222;
        border-top: 0.1rem solid rgba(0,0,0,0.1);
        border-bottom: 0.1rem solid rgba(0,0,0,0.1);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    .header .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }


    .header .navbar a{
        margin: 1.5rem;
        padding:1.5rem;
        background:var(--red);
        font-size: 2rem;
        display: block;
        border-radius: .5rem;
    }
}

@media (max-width: 450px){
    html{
        font-size: 50%;
    }
    .home .slides-container .slide .content h3{
        font-size:4rem;
    }
    .products .box-container .box .img{
        width: 100%;
    }
}

main.js

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

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

window.onscroll = () =>{
    navbar.classList.remove('active');
}

let slides = document.querySelectorAll('.home .slides-container .slide');
let index = 0;


function next(){

    slides[index].classList.remove('active');
    index = (index + 1) % slides.length;
    slides[index].classList.add('active');
}



function prev(){

    slides[index].classList.remove('active');
    index = (index - 1 + slides.length) % slides.length;
    slides[index].classList.add('active');
}

var swiper = new Swiper('.review-slider', {
    spaceBetween: 20,
    centeredSlides: true,
    autoplay: {
        delay:7500,
        disableOnInteraction: false,
    },
    loop:true,
    breakpoints:{
        0: {
            slidesPerView: 1,
        },
        640: {
            slidesPerView: 2,
        },
        768: {
            slidesPerView: 2,
        },
        1024: {
            slidesPerView: 3,
        },
    },
});