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

how to create a responsive, best online food ordering websites. Using html5, CSS3, and ES6 JavaScript, this beginner web development project tutorial.

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 food website design tutorial</title>

<!-- 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 -->
<header>
<a href="#" class="logo"><i class="fas fa-utensils"></i>food</a>

<div id="menu-bar" class="fas fa-bars"></div>

    <nav class="navbar">
        <a href="#home">home</a>
        <a href="#speciality">speciality</a>
        <a href="#popular">popular</a>
        <a href="#gallery">gallery</a>
        <a href="#review">review</a>
        <a href="#order">order</a>
    </nav>

</header>

<!-- header section ends -->

<!-- home section starts -->
<section class="home" id="home">
    <div class="content">
        <h3>food made with love</h3>
        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
        <a href="#" class="btn">order now</a>
    </div>

    <div class="img">
        <img decoding="async" src="img/home-img.png">
    </div>
</section>

<!-- home section ends -->

<!-- speciality section starts -->
<section class="speciality" id="speciality">
    <h1 class="heading">our <span>speciality</span></h1>
    <div class="box-container">
        <div class="box">
            <img decoding="async" class="img" src="img/s-img-1.jpg">
            <div class="content">
                <img decoding="async" src="img/s-1.png">
                <h3>tasty burger</h3>
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
            </div>
        </div>

        <div class="box">
            <img decoding="async" class="img" src="img/s-img-2.jpg">
            <div class="content">
                <img decoding="async" src="img/s-2.png">
                <h3>tasty pizza</h3>
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
            </div>
        </div>

        <div class="box">
            <img decoding="async" class="img" src="img/s-img-3.jpg">
            <div class="content">
                <img decoding="async" src="img/s-3.png">
                <h3>cold ice-cream</h3>
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
            </div>
        </div>

        <div class="box">
            <img decoding="async" class="img" src="img/s-img-4.jpg">
            <div class="content">
                <img decoding="async" src="img/s-4.png">
                <h3>cold drinks</h3>
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
            </div>
        </div>
        <div class="box">
            <img decoding="async" class="img" src="img/s-img-5.jpg">
            <div class="content">
                <img decoding="async" src="img/s-5.png">
                <h3>tasty sweets</h3>
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
            </div>
        </div>

        <div class="box">
            <img decoding="async" class="img" src="img/s-img-6.jpg">
            <div class="content">
                <img decoding="async" src="img/s-6.png">
                <h3>healty breakfast</h3>
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
            </div>
        </div>
    </div>
</section>

<!-- speciality section ends -->

<!-- popular section starts -->

<section class="popular" id="popular">
    <h1 class="heading">most <span>popular</span> food</h1>
    <div class="box-container">
        <div class="box">
            <span class="price"> $5 - $20</span>
            <img decoding="async" src="img/p-1.jpg">
            <h3>tasty burger</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"></i>
            </div>
            <a href="#" class="btn">order now</a>
        </div>

        <div class="box">
            <span class="price"> $5 - $20</span>
            <img decoding="async" src="img/p-2.jpg">
            <h3>tasty cake</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"></i>
            </div>
            <a href="#" class="btn">order now</a>
        </div>

        <div class="box">
            <span class="price"> $5 - $20</span>
            <img decoding="async" src="img/p-3.jpg">
            <h3>tasty sweets</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"></i>
            </div>
            <a href="#" class="btn">order now</a>
        </div>

        <div class="box">
            <span class="price"> $5 - $20</span>
            <img decoding="async" src="img/p-4.jpg">
            <h3>tasty cupcake</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"></i>
            </div>
            <a href="#" class="btn">order now</a>
        </div>

        <div class="box">
            <span class="price"> $5 - $20</span>
            <img decoding="async" src="img/p-5.jpg">
            <h3>cold drinks</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"></i>
            </div>
            <a href="#" class="btn">order now</a>
        </div>

        <div class="box">
            <span class="price"> $5 - $20</span>
            <img decoding="async" src="img/p-6.jpg">
            <h3>cold ice-cream</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"></i>
            </div>
            <a href="#" class="btn">order now</a>
        </div>
    </div>
</section>

<!-- popular section ends -->

<!-- steps section starts -->

<section class="steps">
    <div class="box">
        <img decoding="async" src="img/step-1.jpg">
        <h3>choose your favorite food</h3>
    </div>

    <div class="box">
        <img decoding="async" src="img/step-2.jpg">
        <h3>free and fast delivery</h3>
    </div>

    <div class="box">
        <img decoding="async" src="img/step-3.jpg">
        <h3>easy payments methods</h3>
    </div>

    <div class="box">
        <img decoding="async" src="img/step-4.jpg">
        <h3>and finally, enjoy your food</h3>
    </div>
</section>

<!-- steps section ends -->

<!-- gallery section starts -->

<section class="gallery" id="gallery">
    <h1 class="heading">our food <span>gallery</span></h1>
    <div class="box-container">
        <div class="box">
            <img decoding="async" src="img/g-1.jpg">
            <div class="content">
                <h3>tasty food</h3>
                <p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
                <a href="#" class="btn">ordern now</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/g-2.jpg">
            <div class="content">
                <h3>tasty food</h3>
                <p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
                <a href="#" class="btn">ordern now</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/g-3.jpg">
            <div class="content">
                <h3>tasty food</h3>
                <p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
                <a href="#" class="btn">ordern now</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/g-4.jpg">
            <div class="content">
                <h3>tasty food</h3>
                <p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
                <a href="#" class="btn">ordern now</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/g-5.jpg">
            <div class="content">
                <h3>tasty food</h3>
                <p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
                <a href="#" class="btn">ordern now</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/g-6.jpg">
            <div class="content">
                <h3>tasty food</h3>
                <p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
                <a href="#" class="btn">ordern now</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/g-7.jpg">
            <div class="content">
                <h3>tasty food</h3>
                <p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
                <a href="#" class="btn">ordern now</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/g-8.jpg">
            <div class="content">
                <h3>tasty food</h3>
                <p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
                <a href="#" class="btn">ordern now</a>
            </div>
        </div>

        <div class="box">
            <img decoding="async" src="img/g-9.jpg">
            <div class="content">
                <h3>tasty food</h3>
                <p>"Lorem ipsum dolor sit amet, dolore magna aliqua. Ut enim ad farhan veniam,</p>
                <a href="#" class="btn">ordern now</a>
            </div>
        </div>
    </div>
</section>

<!-- gallery section ends -->

<!-- review section starts -->

<section class="review" id="review">
    <h1 class="heading"> our customers <span>reviews</span></h1>
    <div class="box-container">
        <div class="box">
            <img decoding="async" src="img/pic1.png">
            <h3>Jenna deo</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="far fa-star"></i>
            </div>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
        </div>

        <div class="box">
            <img decoding="async" src="img/pic2.png">
            <h3>Edward deo</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="far fa-star"></i>
            </div>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
        </div>

        <div class="box">
            <img decoding="async" src="img/pic3.png">
            <h3>lisa deo</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="far fa-star"></i>
            </div>
            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad farhan veniam,</p>
        </div>
    </div>
</section>

<!-- review section ends -->

<!-- order section starts -->

<section class="order" id="order">
    <h1 class="heading"><span>order</span> now</h1>
    <div class="row">
        <div class="img">
            <img decoding="async" src="img/order-img.jpg">
        </div>
        <form action="">
            <div class="inputBox">
                <input type="text" placeholder="name" name="">
                <input type="email" placeholder="email" name="">
            </div>

            <div class="inputBox">
                <input type="number" placeholder="number" name="">
                <input type="text" placeholder="food name" name="">
            </div>

            <textarea name="" placeholder="address" id="" cols="30" rows="10"></textarea>

            <input type="submit" name="" value="order now" class="btn">
        </form>
    </div>
</section>

<!-- order section ends -->

<!-- footer section -->

<section class="footer">
    <div class="share">
        <a href="#" class="btn">facebook</a>
        <a href="#" class="btn">twitter</a>
        <a href="#" class="btn">instagram</a>
        <a href="#" class="btn">pinterset</a>
        <a href="#" class="btn">linkedin</a>
    </div>
    <h1 class="credit"> created by <span>dailywebdesign</span> | all rights reserved! </h1>
</section>


<!-- scroll top button -->

<a href="#home" class="fas fa-angle-up" id="scroll-top"></a>

<!-- loader  -->

<div class="loader-container">
    <img decoding="async" src="img/loader.gif">
</div>



















<!-- custom js file link -->
<script type="text/javascript" src="script.js"></script>

</body>
</html>

style.css

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


:root{
    --red:#ff3838;
}
*{
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: all .2s linear;
}
*::selection{
    background: var(--red);
    color: #fff;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body{
    background: #f7f7f7;
}

section{
    padding: 2rem 9%;
}

.heading{
    text-align: center;
    font-size: 3.5rem;
    padding: 1rem;
    color: #666;
}

.heading span{
    color: var(--red);
}

.btn{
    display: inline-block;
    padding: .8rem 3rem;
    border: .2rem solid var(--red);
    color: var(--red);
    cursor: pointer;
    font-size: 1.7rem;
    border-radius: .5rem;
    position: relative;
    overflow: hidden;
    z-index: 0;
    margin-top: 1rem;
}

.btn::before{
    content:'';
    position: absolute;
    top: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background: var(--red);
    transition:.3s linear;
    z-index: -1;
}

.btn:hover::before{
    width: 100%;
    left: 0;
}
.btn:hover{
    color: #fff;
}

header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    padding: 2rem 9%;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

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

header .logo i{
    padding-right: .5rem;
    color: var(--red);
}

header .navbar a{
    font-size: 2rem;
    margin-left: 2rem;
    color: #666;
}

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

#menu-bar{
    font-size: 3rem;
    cursor: pointer;
    color: #666;
    border: .1rem solid #666;
    border-radius: .3rem;
    padding: .5rem 1.5rem;
    display: none;
}

.home{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
    min-height: 100vh;
    align-items: center;
    background: url(img/home-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.home .content{
    flex: 1 1 40rem;
    padding-top: 6.5rem;
}

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

.home .img img{
    width: 100%;
    padding: 1rem;
    animation:float 3s linear infinites;
}

@keyframes float{
    0%, 100%{
        transform: translateY(0rem);
    }
    50%{
        transform: translateY(3rem);
    }
}

.home .content h3{
    font-size: 5rem;
    color: #333;
}

.home .content p{
    font-size: 1.7rem;
    color: #666;
    padding: 1rem 0;
}

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

.speciality .box-container .box{
    flex: 1 1 30rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    border: .1rem solid rgba(0,0,0,.3);
    cursor: pointer;
    border-radius: .5rem;
}

.speciality .box-container .box .img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
    top: -100%;
    left: 0;
}

.speciality .box-container .box .content{
    text-align: center;
    background: #fff;
    padding: 2rem;

}

.speciality .box-container .box .content img{
    margin: 1.5rem 0;
}

.speciality .box-container .box .content h3{
    font-size: 2.5rem;
    color: #333;
}

.speciality .box-container .box .content p{
    font-size: 1.6rem;
    color: #666;
    padding: 1rem;
}

.speciality .box-container .box:hover .img{
    top: 0;
}

.speciality .box-container .box:hover .content{
    transform: translateY(100%);
    
}

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

.popular .box-container .box{
    padding: 2rem;
    background: #fff;
    box-shadow: 0.5rem 1rem rgba(0,0,0,.1);
    border:.1rem solid rgba(0,0,0,.3);
    border-radius: .5rem;
    text-align: center;
    flex: 1 1 30rem;
    position: relative;
}

.popular .box-container .box img{
    height: 25rem;
    object-fit: cover;
    width: 100%;
    border-radius: .5rem;
}

.popular .box-container .box .price{
    position: absolute;
    top: 3rem;
    left: 3rem;
    background: var(--red);
    color: #fff;
    font-size: 2rem;
    padding: .5rem 1rem;
    border-radius: .5rem;
}

.popular .box-container .box h3{
    color: #333;
    font-size: 2.5rem;
    padding-top: 1rem;
}

.popular .box-container .box .stars{
    color: #F39C12;
    font-size: 1.7rem;
    padding: 1rem .1rem;
}

.steps{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
    padding: 1rem;
}

.steps .box{
    flex: 1 1 25rem;
    padding: 1rem;
    text-align: center;
}

.steps .box img{
    border-radius: 50%;
    border:1rem solid #fff;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

.steps .box h3{
    font-size: 2.5rem;
    color: #333;
    padding: 1rem;
}

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

.gallery .box-container .box{
    height: 25rem;
    flex: 1 1 30rem;
    border:1rem solid #fff;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    border-radius: .5rem;
    position: relative;
    overflow: hidden;
}

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

.gallery .box-container .box .content{
    position: absolute;
    top: -100%;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,.9);
    padding: 2rem;
    padding-top: 5rem;
    text-align: center;
}

.gallery .box-container .box .content h3{
    font-size: 2.5rem;
    color: #333;
}

.gallery .box-container .box .content p{
    font-size: 1.5rem;
    color: #666;
    padding:1rem 0;
}

.gallery .box-container .box:hover .content{
    top: 0;
}

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

.review .box-container .box{
    text-align: center;
    padding-top: 2rem;
    border:1rem solid #fff;
    box-shadow: 0.5rem 1rem rgba(0,0,0,.3);
    border-radius: .5rem;
    flex: 1 1 30rem;
    background: #333;
    margin-top: 6rem;
}

.review .box-container .box img{
    height: 12rem;
    width: 12rem;
    border-radius: 50%;
    border:1rem solid #fff;
    margin-top: -8rem;
    object-fit: cover;
}

.review .box-container .box h3{
    font-size: 2.5rem;
    color: #fff;
    padding: .5rem 0;
}

.review .box-container .box .stars i{
    font-size: 2.5rem;
    color: var(--red);
    padding: .5rem 0;
}

.review .box-container .box p{
    font-size: 1.5rem;
    color: #eee;
    padding: 1rem 0;
}

.order .row{
    padding: 2rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
    border-radius: .5rem;

}

.order .row .img{
    flex: 1 1 30rem;
}

.order .row .img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: .5rem;
}

.order .row form{
    flex: 1 1 50rem;
    padding: 1rem;
}

.order .row form .inputBox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.order .row form .inputBox input,
.order .row form textarea{
    padding: 1rem;
    margin: 1rem 0;
    font-size: 1.7rem;
    color: #333;
    text-transform: none;
    border:.1rem solid rgba(0,0,0,.3);
    border-radius: .5rem;
    width: 49%;
}

.order .row form textarea{
    width: 100%;
    resize: none;
    height: 15rem;
}

.order .row form .btn{
    background: none;

}

.order .row form .btn:hover{
    background: var(--red);
}

.footer{
    background: #000;
    text-align: center;
}

.footer .share{
    display: flex;
    gap:1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.footer .credit{
    padding: 2.5rem 1rem;
    color: #fff;
    font-weight: normal;
    font-size: 2rem;
}

.footer .credit span{
    color: var(--red);
}

#scroll-top{
    position: fixed;
    top:-120%;
    right: 2rem;
    padding:.5rem 1rem;
    font-size: 4rem;
    background: var(--red);
    color: #fff;
    border-radius: .5rem;
    transition: 1s linear;
    z-index: 1000;
}

#scroll-top.active{
    top:calc(100% - 12rem);
}

.loader-container{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.loader-container.fade-out{
    top: -120%;

}











/*media queries*/

@media(max-width: 991px){
    html{
    font-size: 55%;
    
}
header{
    padding: 2rem;
}
section{
    padding: 2rem;
}
}

@media(max-width: 768px){
    #menu-bar{
        display: initial;
    }
    header .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #f7f7f7;
        border-top: .1rem solid rgba(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;
        display: block;
        border: .2rem solid rgba(0,0,0,.1);
        border-left: .5rem solid var(--red);
        background: #fff;

    }
}

@media(max-width: 450px){
    html{
    font-size: 50%;
    
}
.order .row form .inputBox input{
    width: 100%;
}

}

main.js

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

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

}


window.onscroll = () =>{

  menu.classList.remove('fa-times');
  navbar.classList.remove('active');

  if(window.scrollY > 60){
    document.querySelector('#scroll-top').classList.add('active');
  }else{
    document.querySelector('#scroll-top').classList.remove('active');
  }

}

function loader(){
  document.querySelector('.loader-container').classList.add('fade-out');
}

function fadeOut(){
  setInterval(loader, 3000);
}

window.onload = fadeOut();