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

how to create a responsive cosmetic website design 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 Cosmetic website Design </title>

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

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

</head>
<body>
    
<!-- header section start page -->
<section id="header" class="header">
<a href="#" class="logo"><i class="fas fa-female"></i> cosmetics</a>
<nav class="navbar">
    <a href="#home">home</a> 
    <a href="#about">about</a> 
    <a href="#shop">shop</a>  
    <a href="#gallery">gallery</a> 
    <a href="#message">message</a>
    <a href="#blogs">blogs</a> 
</nav>

<div class="icons">
    <div id="menu-btn" class="fas fa-bars"></div>
    <a href="#" class="fas fa-heart"></a>
    <a href="#" class="fas fa-shopping-cart"></a>
</div>
</section>

<!-- header section ends -->

<!-- home section starts -->

<section class="home" id="home">

    <div class="slide active" style="background:url(img/home-bg-1.jpg) no-repeat; background-size:cover; 
    background-position: center;">
    <div class="content">
        <span>forever <br> beautiful</span>
        <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br>
            sed do eiusmod tempor farhan ut labore et dolore magna aliqua.<br>
           Lorem, ipsum dolor </h3>
         <a href="#" class="btn">read more</a>  
    </div>
    </div>

    <div class="slide" style="background:url(img/home-bg-2.jpg) no-repeat; background-size:cover; 
    background-position: center;">
    <div class="content">
        <span>forever <br> beautiful</span>
        <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br>
            sed do eiusmod tempor farhan ut labore et dolore magna aliqua.<br>
           Lorem, ipsum dolor </h3>
         <a href="#" class="btn">read more</a>  
    </div>
    </div>

    <div class="slide" style="background:url(img/home-bg-3.jpg) no-repeat; background-size:cover; 
    background-position: center;">
    <div class="content">
        <span>forever <br> beautiful</span>
        <h3>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, <br>
            sed do eiusmod tempor farhan ut labore et dolore magna aliqua.<br>
           Lorem, ipsum dolor </h3>
         <a href="#" class="btn">read more</a>  
    </div>
    </div>
     
    <div id="next-slide" onclick="next()" class="fas fa-angle-right"></div>
    <div id="prev-slide" onclick="prev()" class="fas fa-angle-left"></div>
    
</section>

<!-- home section ends -->

<!-- category section starts -->

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

        <a href="#" class="box">
            <img decoding="async" src="img/category-1.png">
            <h3>skincare</h3>
        </a>

        <a href="#" class="box">
            <img decoding="async" src="img/category-2.png">
            <h3>lips</h3>
        </a>

        <a href="#" class="box">
            <img decoding="async" src="img/category-3.png">
            <h3>hair</h3>
        </a>

        <a href="#" class="box">
            <img decoding="async" src="img/category-4.png">
            <h3>eye</h3>
        </a>

        <a href="#" class="box">
            <img decoding="async" src="img/category-5.png">
            <h3>makeup</h3>
        </a>

        <a href="#" class="box">
            <img decoding="async" src="img/category-6.png">
            <h3>fragrance</h3>
        </a>

    </div>
</section>
<!-- category section ends -->

<!-- about section starts -->

<section class="about" id="about">
    <div class="img">
        <img decoding="async" src="img/about-img.jpg" alt="">
    </div>
    <div class="content">
        <div class="box">
            <h3>About <span>Us...</span></h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Incidunt ab voluptatibus impedit animi, odit mollitia explicabo commodi ducimus molestiae error.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Incidunt ab voluptatibus impedit animi, odit mollitia </p>
            <a href="#" class="btn">read more</a>
        </div>
        <div class="icons-container">
            <div class="icons">
                <i class="fas fa-address-card"></i>
                <p>address card</p>
            </div>
            <div class="icons">
                <i class="fas fa-award"></i>
                <p>award cards</p>
            </div>
            <div class="icons">
                <i class="fas fa-gift"></i>
                <p>gift cards</p>
            </div>
        </div>
    </div>
</section>

<!-- about section ends -->

<!-- shop section starts -->

<section class="shop" id="shop">
    <h1 class="heading">our <span>shop</span></h1>
    <div class="box-container">

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/product-1.jpg">
                <div class="icons">
                    <a href="#" class="fas fa-eye"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>airbrush matte</h3>
                <div class="price">$40-<span>$200.99</span></div>
                <a href="#" class="btn">add to cart</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/product-2.jpeg">
                <div class="icons">
                    <a href="#" class="fas fa-eye"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>lactic acid treatment</h3>
                <div class="price">$40-<span>$200.99</span></div>
                <a href="#" class="btn">add to cart</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/product-3.jpg">
                <div class="icons">
                    <a href="#" class="fas fa-eye"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>midnight must</h3>
                <div class="price">$40-<span>$200.99</span></div>
                <a href="#" class="btn">add to cart</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/product-4.jpg">
                <div class="icons">
                    <a href="#" class="fas fa-eye"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>face & body foundation</h3>
                <div class="price">$40-<span>$200.99</span></div>
                <a href="#" class="btn">add to cart</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/product-5.jpeg">
                <div class="icons">
                    <a href="#" class="fas fa-eye"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>eyeliner pack</h3>
                <div class="price">$40-<span>$200.99</span></div>
                <a href="#" class="btn">add to cart</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/product-6.jpg">
                <div class="icons">
                    <a href="#" class="fas fa-eye"></a>
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-share"></a>
                </div>
            </div>
            <div class="content">
                <h3>moisture balam</h3>
                <div class="price">$40-<span>$200.99</span></div>
                <a href="#" class="btn">add to cart</a>
            </div>
        </div>

    </div>
</section>

<!-- shop section ends -->

<!-- banner section starts -->

<section class="banner">
    <div class="content">
        <span>special <span>offer</span></span>
        <h3>upto 50% off</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. farhan  Hic, error.ipsum dolor sit amet consectetur,</p>
        <a href="#" class="btn">shop now</a>
    </div>
</section>

<!-- banner section ends -->

<!-- gallery section starts -->

<section class="gallery" id="gallery">
    <h1 class="heading">our <span>gallery</span></h1>
    <div class="box-container">

        <div class="box">
            <img decoding="async" src="img/gallery-img-1.jpeg">
            <div class="content">
                <h3>face</h3>
                <p>Lorem ipsum dolor sit amet consectetur</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/gallery-img-2.jpeg">
            <div class="content">
                <h3>eyes</h3>
                <p>Lorem ipsum dolor sit amet consectetur</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/gallery-img-3.jpeg">
            <div class="content">
                <h3>lips</h3>
                <p>Lorem ipsum dolor sit amet consectetur</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/gallery-img-4.jpeg">
            <div class="content">
                <h3>hairs</h3>
                <p>Lorem ipsum dolor sit amet consectetur</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/gallery-img-5.jpeg">
            <div class="content">
                <h3>make up</h3>
                <p>Lorem ipsum dolor sit amet consectetur</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/gallery-img-6.jpeg">
            <div class="content">
                <h3>skin care</h3>
                <p>Lorem ipsum dolor sit amet consectetur</p>
                <a href="#" class="btn">read more</a>
            </div>
        </div>

    </div>
</section>

<!-- gallery section ends -->

<!-- message section starts -->
<section class="message" id="message">
    <form action="">
        <h3>get in <span>touch</span></h3>
        <input type="text" placeholder="full name" class="box">
        <input type="email" placeholder="email" class="box">
        <input type="number" placeholder="phone" class="box">
        <textarea placeholder="message" class="box" cols="30" rows="10"></textarea>
        <input type="submit" value="send message" class="btn">
    </form>
</section>

<!-- message section ends -->

<!-- blog section starts -->

<section class="blogs" id="blogs">
    <h1 class="heading">our daily <span>blogs</span></h1>
    <div class="box-container">

        <div class="box">
            <div class="img">
                <img decoding="async" src="img/blog-1.jpg" alt="">
            </div>
            <div class="content">
                <div class="date">
                <h3>12</h3>
                <span>jan</span>
            </div>
            <a href="#" class="user"><i class="fas fa-user"></i> by admin</a>
            <a href="#" class="title"> blog title goes here...</a>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
            <a href="#" class="btn">read more</a>
        </div>
    </div>

    <div class="box">
        <div class="img">
            <img decoding="async" src="img/blog-2.jpg" alt="">
        </div>
        <div class="content">
            <div class="date">
            <h3>19</h3>
            <span>feb</span>
        </div>
        <a href="#" class="user"><i class="fas fa-user"></i> by admin</a>
        <a href="#" class="title"> blog title goes here...</a>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
        <a href="#" class="btn">read more</a>
    </div>
</div>

<div class="box">
    <div class="img">
        <img decoding="async" src="img/blog-3.jpg" alt="">
    </div>
    <div class="content">
        <div class="date">
        <h3>02</h3>
        <span>Aug</span>
    </div>
    <a href="#" class="user"><i class="fas fa-user"></i> by admin</a>
    <a href="#" class="title"> blog title goes here...</a>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
    <a href="#" class="btn">read more</a>
</div>
</div>


    </div>
</section>


<!-- blogs section ends -->

<!-- services section starts -->

<section class="services">

    <div class="box">
        <img decoding="async" src="img/icon-1.png" alt="">
        <h3>free delivery</h3>
        <p>lorem ipsum dolor sit amet, consectetur adip</p>
    </div>

    <div class="box">
        <img decoding="async" src="img/icon-2.png" alt="">
        <h3>secure payments</h3>
        <p>lorem ipsum dolor sit amet, consectetur adip</p>
    </div>

    <div class="box">
        <img decoding="async" src="img/icon-3.png" alt="">
        <h3>24/7 support</h3>
        <p>lorem ipsum dolor sit amet, consectetur adip</p>
    </div>

</section>

<!-- services section ends -->

<!-- footer section starts -->

<section class="footer">

    <div class="box-container">

        <div class="box">
            <h3>quick links</h3>
            <a class="link" href="#home"> <i class="fas fa-angle-right"></i> home</a>
            <a class="link" href="#about"> <i class="fas fa-angle-right"></i> about</a>
            <a class="link" href="#shop"> <i class="fas fa-angle-right"></i> shop</a>
            <a class="link" href="#gallery"> <i class="fas fa-angle-right"></i> gallery</a>
            <a class="link" href="#message"> <i class="fas fa-angle-right"></i> message</a>
            <a class="link" href="#blogs"> <i class="fas fa-angle-right"></i> blogs</a>
        </div>

        <div class="box">
            <h3>extra links</h3>
            <a class="link" href="#"> <i class="fas fa-angle-right"></i> my favorite </a>
            <a class="link" href="#"> <i class="fas fa-angle-right"></i> my order </a>
            <a class="link" href="#"> <i class="fas fa-angle-right"></i> my wishlist </a>
            <a class="link" href="#"> <i class="fas fa-angle-right"></i> private policy </a>
            <a class="link" href="#"> <i class="fas fa-angle-right"></i> terms of use </a>
        </div>

        <div class="box">
            <h3>contact info</h3>
            <a class="link" href="#"> <i class="fas fa-phone"></i> +123-456-7890 </a>
            <a class="link" href="#"> <i class="fas fa-phone"></i> +111-222-3333 </a>
            <a class="link" href="#"> <i class="fas fa-envelope"></i> shaikhfarhan@gmail.com </a>
            <a class="link" href="#"> <i class="fas fa-map"></i> mumbai, india - 401203 </a>
            <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>newsletter</h3>
            <p>subscribe for latest updates</p>
            <form action="">
                <input type="email" name="" placeholder="enter your email" id="" class="email">
                <input type="submit" value="subscribe" class="btn">
            </form>
        </div>

    </div>

    <div class="credit"> created by <span>dailywebdesign</span> || all rights reserved! </div>

</section>



<!-- custom js file link -->
<script src="main.js"></script>

</body>
</html>

style.css

				
					@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;1,100&display=swap');

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

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}
html::-webkit-scrollbar-track{
    background: transparent;
}
html::-webkit-scrollbar{
    width:1rem;
}
html::-webkit-scrollbar-thumb{
    background: #F08080;
}
section{
    padding:3rem 9%;
}
span{
    color:#F08080;
}

.heading{
    text-align: center;
    color: #222;
    margin-bottom: 3rem;
    font-size: 4rem;
}

.btn{
    display:inline-block;
    margin-top:1rem;
    padding:1rem 3rem;
    color:#222;
    font-size:1.7rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    cursor: pointer;
}
.btn:hover{
    letter-spacing: .1rem;
    background: #F08080;
    color: #fff;
}


@keyframes fadeIn{
    0%{
        opacity: 0;
        transform: translateY(-4rem) scale(0.4);
    }
}
.header{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    background:#fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:1.5rem 9%;
}
.header .logo{
    font-size: 2.5rem;
    color: #222;
    font-weight: bolder;
}
.header .logo i{
    color: #F08080;
}
.header .navbar a{
    margin: 0 1.5rem;
    font-size: 1.7rem;
    color: #222;
}
.header .navbar a:hover{
    color: #F08080;
}
.header .icons div,
.header .icons a{
    height: 4.5rem;
    width:4.5rem;
    line-height: 4.5rem;
    border-radius: .5rem;
    background: #eee;
    font-size: 1.7rem;
    color: #222;
    margin-left: .3rem;
    text-align: center;
    cursor: pointer;
}
.header .icons a:hover,
.header .icons div:hover{
    background: #F08080;
    color: #fff;
}
.header #menu-btn{
    display: none;
}

.home{
    position: relative;
    padding:0;
}

.home .slide{
    padding: 3rem;
    display: flex;
    min-height: 90vh;
    display:none;
}
.home .slide .content{
    margin:60;
    text-align: left;
    padding-top:18rem;     
}
.home .slide.active{
    display:flex;
}

.home .slide .content span{
    color: #fff;
    display:block;
    font-size: 9rem;
    text-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    animation: fadeIn .2s linear backwards;
    text-transform: uppercase;
    letter-spacing: .1rem;
}
.home .slide .content span:hover{
    color: #F08080;
}
.home .slide .content h3{
    font-size:1.7rem;
    color: #fff;
    text-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2);
    animation: fadeIn .2s linear backwards .4s;
    letter-spacing: .1rem;
    font-weight: normal;
 
}
.home .slide .content .btn{
    animation: fadeIn .2s linear backwards .6s;
}
.home #next-slide,
.home #prev-slide{
    height:5rem;
    width:5rem;
    line-height:4.5rem;
    font-size:2.5rem;
    color: #222;
    background: transparent;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.9);
    cursor: pointer;
    position: absolute;
    bottom:2rem;
    right:2rem;
    text-align: center;
}

.home #next-slide:hover,
.home #prev-slide:hover{
    background: #F08080;
    color: #fff;
}

.home #prev-slide{
    right:8rem;
}

.category .box-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap:2rem;
}

.category .box-container .box{
    text-align:center;
}

.category .box-container .box:hover h3{
    color: #F08080;
}
.category .box-container .box img{
    height:14rem;
    margin-bottom:1rem;
}

.category .box-container .box h3{
    font-size:1.7rem;
    color: #222;
    font-weight: bold;
}

.about {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap:2rem;
}
.about .img{
    flex: 1 1 42rem;
    padding-bottom: 5rem;
    padding-right: 5rem;
}
.about .img img{
    width: 100%;
    box-shadow: 4rem 4rem 0 #eee;
}
.about .content{
    flex: 1 1 42rem;
}
.about .content .box{
    padding: 3rem;
    background: #eee;
}
.about .content .box h3{
    font-size:2.5rem;
    color: #222;
}
.about .content .box p{
    padding: 1rem 0;
    line-height: 2;
    color: #666;
    font-size:1.4rem;
}
.about .content .icons-container{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 2rem;
    margin-top: 2rem;
}
.about .content .icons-container .icons{
    flex: 1 1 16rem;
    background: #eee;
    padding:2rem;
    text-align: center;
}
.about .content .icons-container .icons i{
    color: #F08080;
    margin-bottom: 1rem;
    font-size: 5rem;
}
.about .content .icons-container .icons p{
    font-size:1.4rem;
    color: #666;
}

.shop{
    color: #eee;
}
.shop .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
    gap:2rem;
}
.shop .box-container .box{
    text-align: center;
    background: #fff;
    border: 0.2rem solid #222;
    box-shadow:0 0.5rem 1rem rgba(0,0,0,0.1);
}
.shop .box-container .box:hover .img img{
    transform:scale(1.1);
}
.shop .box-container .box:hover .img .icons{
    transform:translateX(0rem);
}
.shop .box-container .box .img{
    position: relative;
    overflow: hidden;
}
.shop .box-container .box .img img{
    height:25rem;
}
.shop .box-container .box .img .icons{
    position:absolute;
    top: 1rem;
    left: 2rem;
    transform:translateX(-10rem);
}
.shop .box-container .box .img .icons a{
    display:block;
    height:5rem;
    width:5rem;
    line-height: 4.5rem;
    font-size: 1.7rem;
    color: #222;
    border-radius: 0.2rem solid #222;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
    margin-top:1rem;
}
.shop .box-container .box .img .icons a:hover{
    color: #fff;
    background:#F08080;
}
.shop .box-container .box .content{
    padding:2rem;
}
.shop .box-container .box .content h3{
    font-size:2rem;
    color: #222;
    padding-bottom: .5rem;
    font-weight: normal;
}
.shop .box-container .box .content .price{
    font-size: 2rem;
    font-weight: bolder;
    color: #F08080;
}
.shop .box-container .box .content .price span{
    color: #666;
    font-size:1.7rem;
    text-decoration: line-through;
}

.banner{
    background: url(img/banner-bg.png) no-repeat;
    background-size:cover;
    background-position:center;
}
.banner .content{
    max-width: 40rem;
    background: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    padding: 2rem;
    text-align: center;
    margin: 10rem 0;
}
.banner .content span{
    font-size:2rem;
}
.banner .content h3{
    font-size:3rem;
    color: #222;
    padding-top: .5rem;
}
.banner .content p{
    font-size: 1.4rem;
    color: #666;
    padding: 1rem 0;
    line-height: 2;
}

.gallery .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
    gap:2rem;
}
.gallery .box-container .box{
    height:25rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}
.gallery .box-container .box:hover .content{
    display: flex;
}
.gallery .box-container .box img{
    height:100%;
    width:100%;
    object-fit: cover;
}
.gallery .box-container .box .content{
    background: rgba(255,255,255,0.8);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    padding:2rem;
    text-align:center;
    border:0.2rem solid #222;
    display: none;
}
.gallery .box-container .box .content h3{
    font-size: 2rem;
    color: #222;
    animation: fadeIn .2s linear backwards;
}
.gallery .box-container .box .content p{
    font-size: 1.4rem;
    color: #222;
    padding:1rem 0;
    line-height: 2;
    animation: fadeIn .2s linear backwards .4s;
}
.gallery .box-container .box .content .btn{
    animation: fadeIn .2s linear backwards .6s;
}

.message{
    background: url(img/message-bg.png) no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding:3rem 2rem;
}
.message form{
    margin: 2rem auto;
    background: #fff;
    text-align:center;
    max-width: 40rem;
    box-shadow:0 0.5rem 1rem rgba(0,0,0,0.1);
    padding: 2rem;
}
.message form h3{
    font-size: 3rem;
    color: #222;
}
.message form .box{
    width: 100%;
    padding:1.5rem 0;
    margin:.7rem 0;
    font-size: 1.6rem;
    color: #666;
    text-transform: none;
    border-radius: 0.2rem solid #222;
}
.message form .box:focus{
    border-color:#F08080;
}
.message form textarea{
    height:15rem;
    resize:none
}

.blogs .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
    gap:2rem;
}
.blogs .box-container .box{
    border:0.1rem solid #222;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.blogs .box-container .box:hover .img img{
    transform: scale(1.1);
}
.blogs .box-container .box .img{
    height:30rem;
    width: 100%;
    border:0.1rem solid #222;
    overflow: hidden;
}
.blogs .box-container .box .img img{
    height:100%;
    width:100%;
    object-fit: cover;
} 
.blogs .box-container .box .content{
    padding:2rem;
    position:relative;
}
.blogs .box-container .box .content .date{
    position:absolute;
    top:-4rem;
    right: 3rem;
    height:8rem;
    width:8rem;
    border: 0.5rem solid #fff;
    border-radius: 50%;
    background: #F08080;
    text-align: center;
    padding-top: 1rem;
}
.blogs .box-container .box .content .date h3{
    font-size:2.7rem;
    line-height:1;
    color: #fff;
}
.blogs .box-container .box .content .date span{
   font-size: 1.5rem;
   color: #fff;
}
.blogs .box-container .box .content .user{
    display: block;
    padding-bottom: 1rem;
    font-size: 1.5rem;
    color: #666;
}
.blogs .box-container .box .content .user i{
    padding-right: .5rem;
    color: #F08080;
}
.blogs .box-container .box .content .user:hover{
    color: #F08080;
}
.blogs .box-container .box .content .title{
    font-size: 2rem;
    color: #222;
}
.blogs .box-container .box .content .title:hover{
    color: #F08080;
}
.blogs .box-container .box .content p{
    padding:1rem 0;
    line-height: 2;
    color: #666;
    font-size: 1.4rem;
}

.services{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
    gap:2rem;
    background: #F08080;
}
.services .box{
    text-align: center;
    padding:2rem;
}
.services .box img{
    height:10rem;
}
.services .box h3{
    padding:1rem 0;
    font-size: 2rem;
    color: #fff;
}
.services .box p{
    line-height: 2;
    font-size: 1.4rem;
    color: #fff;
}

.footer .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap:2rem;
}
.footer .box-container .box h3{
    font-size: 2.2rem;
    color: #222;
    padding:1rem 0;
}
.footer .box-container .box .link{
    padding:1rem 0;
    font-size: 1.4rem;
    color: #666;
    display:block;
}
.footer .box-container .box .link i{
    padding-right: .5rem;
    color: #F08080;
}
.footer .box-container .box .link:hover{
    color: #F08080;
}
.footer .box-container .box .link:hover i{
    padding-right: 2rem;
}
.footer .box-container .box .share{
    margin-top: 2rem;
}
.footer .box-container .box .share a{
    height:4.5rem;
    width:4.5rem;
    line-height: 4.5rem;
    font-size: 1.7rem;
    border-radius: .5rem;
    background: #eee;
    text-align: center;
    color: #222;
    margin-right: .5rem;
}
.footer .box-container .box .share a:hover{
    color: #fff;
    background: #F08080;
}
.footer .box-container .box p{
    padding: 1rem 0;
    font-size: 1.7rem;
    color: #666;
}
.footer .box-container .box form .email{
    border:0.2rem solid #222;
    width: 100%;
    padding:1.2rem 1.4rem;
    text-transform: none;
    color: #666;
    margin: 1rem 0;
    font-size: 1.6rem;
}
.footer .credit{
    text-align: center;
    padding: 1rem;
    padding-top:3rem;
    margin-top: 3rem;
    font-size: 2rem;
    border-top: 0.2rem solid #222;
    color: #666;
}










/* media queries */
@media (max-width: 991px){
    html{
        font-size: 55%;
    }
    .header{
        padding:1.5rem 2rem;
    }
    section{
        padding:3rem 2rem;
    }
    

}


@media (max-width:768px){

    .header #menu-btn{
        display: inline-block;
    }
    .header .navbar{
        position: absolute;
        top: 99%;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 0.2rem solid #222;
        border-bottom: 0.2rem solid #222;
        padding: 0.2rem;
        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{
        display: block;
        font-size:2rem;
        margin:3rem 1rem;
    }
    
}


@media (max-width:450px){
    html{
        font-size:50%;
    }
    .home .slide .content span{
        font-size:4rem;
    }
    .home .slide .content h3{
        font-size: 2rem;
    }
}

main.js

				
					let menu = document.querySelector('#menu-btn');
let navbar = document.querySelector('.header .navbar');

menu.onclick = () => {
    menu.classList.toggle('fa-times');
    navbar.classList.toggle('active');
}

window.onsroll = () => {
    menu.classList.remove('fa-times');
    navbar.classList.remove('active');
}

let slides = document.querySelectorAll('.home .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');
}