Hotel Booking Website Design HTML CSS and JAVASCRIPT Tutorial With Source Code

Hi everybody! Using HTML, CSS, and JavaScript, you will learn how to create a responsive website hotel booking website design using HTML CSS, And JAVASCRIPT in

- Responsive Website
January 17, 2023
3 Views

Hotel Booking Website Design HTML CSS and JAVASCRIPT Tutorial With Source Code

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

how to create a responsive website hotel booking 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 hotel agency website design </title>
    <link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>
    <!-- font awesome cdn link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- custome css file link -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- header section starts -->
    <header>
        <a href="#">Hotel</a>
        <nav>
             <a href="#home">home</a>
             <a href="#packages">packages</a>
             <a href="#services">services</a>
             <a href="#gallery">gallery</a>
             <a href="#review">review</a>
             <a href="#contact">contact</a>
             <a href="#book">book</a>
        </nav>
        <form action="">
            <input type="search" id="search-bar" placeholder="search here...">
            <label for="search-bar"></label>
        </form>
    </header>
<!-- header section ends -->
<!-- login form container -->
    <form action="">
         <h3>login</h3>
         <input type="email" placeholder="enter your email">
         <input type="password" placeholder="enter your email">
         <input type="submit" value="login now">
         <input type="checkbox" id="remember">
         <label for="remember">Remember me</label>
         <p>forgrt password? <a href="#">click here</a></p>
         <p>don't have and account? <a href="#">register now</a></p>
    </form>
<!-- home section starts -->
<section id="home">
        <h3>welcome to A global icon of luxury</h3>
        <p>dicover new places with us, luxury awaits</p>
        <a href="#">discover more</a>
        <video src="img/vid-1.mp4" id="video-slider" loop autoplay muted></video>
</section>
<!-- home section ends -->
<!-- packages section starts -->
<section id="packages">
    <h1>
        p
        a
        c
        k
        a
        g
        e
        s
    </h1>
            <img decoding="async" src="img/p-1.jpg" alt="">
                <h3> mumbai </h3>
                <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
                 $90.00 $120.00
                <a href="#">book now</a>
            <img decoding="async" src="img/p-2.jpg" alt="">
                <h3> sydney </h3>
                <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
                 $90.00 $120.00
                <a href="#">book now</a>
            <img decoding="async" src="img/p-3.jpg" alt="">
                <h3> hawaii </h3>
                <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
                 $90.00 $120.00
                <a href="#">book now</a>
            <img decoding="async" src="img/p-4.jpg" alt="">
                <h3> paris </h3>
                <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
                 $90.00 $120.00
                <a href="#">book now</a>
            <img decoding="async" src="img/p-5.jpg" alt="">
                <h3> tokyo </h3>
                <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
                 $90.00 $120.00
                <a href="#">book now</a>
            <img decoding="async" src="img/p-6.jpg" alt="">
                <h3> eypt </h3>
                <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
                 $90.00 $120.00
                <a href="#">book now</a>
</section>
<!-- packages section ends -->
<!-- services section starts -->
<section id="services">
    <h1>
        s
        e
        r
        v
        i
        c
        e
        s
    </h1>
                <h3>affordable hotels</h3>
                <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.
                    Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                    Lorem Ipsum is simply dummy text of the farhan and typesetting industry</p>
                <h3>food and drinks</h3>
                <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.
                    Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                    Lorem Ipsum is simply dummy text of the farhan and typesetting industry</p>
                <h3>safty guide</h3>
                <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.
                    Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                    Lorem Ipsum is simply dummy text of the farhan and typesetting industry</p>
                <h3>around the world</h3>
                <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.
                    Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                    Lorem Ipsum is simply dummy text of the farhan and typesetting industry</p>
                <h3>fastest travel</h3>
                <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.
                    Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                    Lorem Ipsum is simply dummy text of the farhan and typesetting industry</p>
                <h3>adventures</h3>
                <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.
                    Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                    Lorem Ipsum is simply dummy text of the farhan and typesetting industry</p>
</section>
<!-- services section ends -->
<!-- gallery section starts -->
<section id="gallery">
    <h1>
        g
        a
        l
        l
        e
        r
        y
    </h1>
        <img decoding="async" src="img/g-1.jpg" alt="">
            <h3>amazing places</h3>
            <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
            <a href="#">see more</a>
        <img decoding="async" src="img/g-2.jpg" alt="">
            <h3>amazing places</h3>
            <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
            <a href="#">see more</a>
        <img decoding="async" src="img/g-3.jpg" alt="">
            <h3>amazing places</h3>
            <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
            <a href="#">see more</a>
        <img decoding="async" src="img/g-4.jpg" alt="">
            <h3>amazing places</h3>
            <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
            <a href="#">see more</a>
        <img decoding="async" src="img/g-5.jpg" alt="">
            <h3>amazing places</h3>
            <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
            <a href="#">see more</a>
        <img decoding="async" src="img/g-6.jpg" alt="">
            <h3>amazing places</h3>
            <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
            <a href="#">see more</a>
        <img decoding="async" src="img/g-7.jpg" alt="">
            <h3>amazing places</h3>
            <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
            <a href="#">see more</a>
        <img decoding="async" src="img/g-8.jpg" alt="">
            <h3>amazing places</h3>
            <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
            <a href="#">see more</a>
        <img decoding="async" src="img/g-9.jpg" alt="">
            <h3>amazing places</h3>
            <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.</p>
            <a href="#">see more</a>
</section>
<!-- gallery section ends -->
<!-- review section start -->
<section id="review">
    <h1>
        r
        e
        v
        i
        e
        w
    </h1>
                    <img decoding="async" src="img/pic1.png" alt="">
                    <h3>Lalisa Bey</h3>
                    <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.
                        Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                        Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                        farhan and typesetting industry.</p>
                    <img decoding="async" src="img/pic2.png" alt="">
                    <h3>Edward Bey</h3>
                    <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.
                        Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                        Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                        farhan and typesetting industry.</p>
                    <img decoding="async" src="img/pic3.png" alt="">
                    <h3>Jenna Bey</h3>
                    <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.
                        Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                        Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                        farhan and typesetting industry.</p>
                    <img decoding="async" src="img/pic4.png" alt="">
                    <h3>Edward Bey</h3>
                    <p>Lorem Ipsum is simply dummy text of the farhan and typesetting industry.
                        Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                        Lorem Ipsum is simply dummy text of the farhan and typesetting industry
                        farhan and typesetting industry.</p>
</section>
<!-- review section ends -->
<!-- contact section starts -->
<section id="contact">
    <h1>
        c
        o
        n
        t
        a
        c
        t
    </h1>
            <img decoding="async" src="img/contact-img.svg" alt="">
        <form action="">
                <input type="text" placeholder="name">
                <input type="email" placeholder="email">
                <input type="number" placeholder="number">
                <input type="text" placeholder="subject">
            <textarea placeholder="message" name="" cols="30" rows="10"></textarea>
            <input type="submit" value="send message">
        </form>
</section>
<!-- contact section ends -->
<!-- brand section -->
<section>
            <img decoding="async" src="img/1.jpg" alt="">
            <img decoding="async" src="img/2.jpg" alt="">
            <img decoding="async" src="img/3.jpg" alt="">
            <img decoding="async" src="img/4.jpg" alt="">
            <img decoding="async" src="img/5.jpg" alt="">
            <img decoding="async" src="img/6.jpg" alt="">
</section>
<!-- book section starts -->
<section id="book">
    <h1>
        b
        o
        o
        k
        n
        o
        w
    </h1>
            <img decoding="async" src="img/book-img.svg" alt="">
        <form action="">
                  <h3>where to</h3>
                  <input type="text" placeholder="place name">
                <h3>how many</h3>
                <input type="number" placeholder="number of guests">
                <h3>arrivals</h3>
                <input type="date">
                <h3>leaving</h3>
                <input type="date">
            <input type="submit" value="book now">
        </form>
</section>
<!-- book section ends -->
<!-- footer section -->
<section>
            <h3>about us</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Totam natus asperiores voluptas aliquam vitae odio. Beatae doloribus facere nostrum magni.</p>
            <h3>branch locations</h3>
            <a href="#">USA</a>
            <a href="#">india</a>
            <a href="#">japan</a>
            <a href="#">philippines</a>
            <a href="#">france</a>
            <h3>quick links</h3>
            <a href="#">home</a>
            <a href="#">package</a>
            <a href="#">service</a>
            <a href="#">gallery</a>
            <a href="#">review</a>
            <a href="#">contact</a>
            <a href="#">book</a>
            <h3>follow us</h3>
            <a href="#">facebook</a>
            <a href="#">instagram</a>
            <a href="#">twitter</a>
            <a href="#">likedin</a>
    <h1> created by Dailywebdesign | all rights reserved!! </h1>
</section>
    <!-- custome js file link -->
</body>
</html>

style.css

				
					@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700&display=swap');
:root{
    --orange:#ffa500;
}
*{
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
    outline: none;
    border: none;
    text-decoration: none;
    transition: all .2s linear;
}
*::selection{
    background:var(--orange);
    color:#fff;
}
html{
    font-size:62.5%;
    overflow-x: hidden;
    scroll-padding-top: 6rem;
    scroll-behavior: smooth;
}
section{
    padding:2rem 9%;
}
.heading{
    text-align: center;
    padding:2.5rem 0;
}
.heading span{
   font-size: 3.5rem;
   background:rgba(255, 155, 0, .2);
   color:var(--orange);
   border-radius: .5rem;
   padding: .2rem 1rem;
}
.heading span.space{
    background:none;
}
.btn{
    display: inline-block;
    margin-top:1rem;
    background:var(--orange);
    color:#fff;
    padding:.8rem 3rem;
    border: .2rem solid var(--orange);
    cursor:pointer;
    font-size: 1.7rem;
}
.btn:hover{
    background: rgba(255,165,0,.2);
    color:var(--orange);
}
header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    background:#333;
    z-index: 1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 2rem 9%;
}
header .logo{
    font-size: 2.5rem;
    font-weight: bolder;
    color: #fff;
    text-transform: uppercase;
}
header .logo span{
    color: var(--orange);
}
header .navbar a{
    color: #fff;
    font-size: 2rem;
    margin: .8rem;
}
header .navbar a:hover{
    color: var(--orange);
}
header .icons i{
    font-size: 2.5rem;
    color: #fff;
    cursor:pointer;
    margin-right: 2rem;
}
header .icons i:hover{
    color: var(--orange);
}
header .search-bar-container{
    position:absolute;
    top:100%;
    left: 0;
    right:0;
    padding:1.5rem 2rem;
    background:#333;
    border-top: .1rem solid rgba(255,255,255,.2);
    display:flex;
    align-items:center;
    z-index:1001;
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .search-bar-container.active{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
header .search-bar-container #search-bar{
    width:100%;
    padding:1rem;
    text-transform: none;
    color:#333;
    font-size: 1.7rem;
    border-radius: .5rem;
}
header .search-bar-container label{
    color:#fff;
    cursor:pointer;
    font-size: 3rem;
    margin-left: 1.5rem;
}
header .search-bar-container label:hover{
    color: var(--orange);
}
.login-form-container{
    position:fixed;
    top: -120%;
    left: 0;
    z-index: 10000;
    min-height: 100vh;
    width: 100%;
    background:rgba(0,0,0,.7);
    display: flex;
    align-items:center;
    justify-content:center;
}
.login-form-container.active{
    top:0;
}
.login-form-container form{
    margin: 2rem;
    padding:1.5rem 2rem;
    border-radius: .5rem;
    background:#fff;
    width: 50rem;
}
.login-form-container form h3{
    font-size: 3rem;
    color: #444;
    text-transform: uppercase;
    text-align: center;
    padding:1rem 0;
}
.login-form-container form .box{
    width: 100%;
    padding:1rem;
    font-size: 1.7rem;
    color: #333;
    margin:.6rem 0;
    border: .1rem solid rgba(0,0,0,0.3);
    text-transform: none;
}
.login-form-container form .box:focus{
    border-color: var(--orange);
}
.login-form-container form #remember{
    margin: 2rem 0;
}
.login-form-container form label{
    font-size: 1.5rem;
}
.login-form-container form .btn{
    display: block;
    width: 100%;
}
.login-form-container form p{
    padding:.5rem 0;
    font-size: 1.5rem;
    color: #666;
}
.login-form-container form p a{
    color:var(--orange);
}
.login-form-container form p a:hover{
    color: #333;
    text-decoration:underline;
}
.login-form-container #form-close{
    position: absolute;
    top:2rem;
    right:3rem;
    font-size: 5rem;
    color: #fff;
    cursor: pointer;
}
#menu-bar{
    color: #fff;
    border:.1rem solid #fff;
    border-radius:.5rem;
    font-size: 3rem;
    padding:.5rem 1.2rem;
    cursor:pointer;
    display:none;
}
.home{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    position: relative;
    z-index: 0;
}
.home .content{
    text-align: center;
}
.home .content h3{
    font-size: 4.5rem;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 .3rem .5rem rgba(0, 0,0,.1);
}
.home .content p{
    font-size: 2.5rem;
    color: #fff;
   padding:.5rem 0;
}
.home .video-container video{
    position:absolute;
    top:0;
    left:0;
    z-index: -1;
    height:100%;
    width:100%;
    object-fit: cover;
}
.home .controls{
    padding:1rem;
    border-radius: 5rem;
    background:rgba(0, 0,0,.7);
    position:relative;
    top:10rem;
}
.home .controls .vid-btn{
    height:2rem;
    width: 2rem;
    display:inline-block;
    border-radius: 50%;
    background:#fff;
    cursor:pointer;
    margin: 0 .5rem;
}
.home .controls .vid-btn.active{
    background:var(--orange);
}
.book .row{
    display:flex;
    flex-wrap: wrap;
    gap:1.5rem;
    align-items: center;
}
.book .row .img img{
    width: 100%;
    height:500px;
}
.book .row form{
    flex: 1 1 40rem;
    padding:2rem;
    box-shadow:0 1rem 2rem rgba(0,0,0,.1);
    border-radius: .5rem;
}
.book .row form .inputBox{
    padding:.5rem 0;
}
.book .row form .inputBox input{
    width: 100%;
    padding:1rem;
    border:.1rem solid rgba(0,0,0,.1);
    font-size:1.7rem;
    color:#333;
    text-transform: none;
}
.book .row form .inputBox h3{
    font-size: 2rem;
    padding:1rem 0;
    color:#666;
}
.packages .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:2rem;
}
.packages .box-container .box{
    flex: 1 1 30rem;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
}
.packages .box-container .box img{
    height:25rem;
    width: 100%;
    object-fit: cover;
}
.packages .box-container .box .content{
    padding:2rem;
}
.packages .box-container .box .content h3{
    font-size:2rem;
    color: #333;
}
.packages .box-container .box .content h3 i{
    color: var(--orange);
}
.packages .box-container .box .content p{
    font-size:1.7rem;
    color: #666;
    padding:1rem 0;
}
.packages .box-container .box .content .stars i{
    font-size:1.7rem;
    color: var(--orange);
}
.packages .box-container .box .content .price{
    font-size: 2rem;
    color: #333;
    padding: 1rem;
}
.packages .box-container .box .content .price span{
    color: #666;
    font-size: 1.5rem;
    text-decoration: line-through;
}
.services .box-container{
    display:flex;
    flex-wrap: wrap;
    gap:1.5rem;
}
.services .box-container .box{
    flex: 1 1 30rem;
    border-radius: .5rem;
    padding: 1rem;
    text-align: center;
}
.services .box-container .box i{
    padding:1rem;
    font-size: 5rem;
    color: var(--orange);
}
.services .box-container .box h3{
    font-size: 2.5rem;
    color: #333;
}
.services .box-container .box p{
    font-size: 1.5rem;
    color: #666;
    padding:1rem 0;
}
.services .box-container .box:hover{
    box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
  }
.gallery .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
}
.gallery .box-container .box{
    overflow: hidden;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
    border:1rem solid #fff;
    border-radius: .5rem;
    flex: 1 1 30rem;
    height:25rem;
    position:relative;
}
.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%;
    text-align: center;
    background:rgba(0, 0,0,.7);
    padding:2rem;
    padding-top:5rem;
}
.gallery .box-container .box:hover .content{
    top:0;
}
.gallery .box-container .box .content h3{
    font-size:2.5rem;
    color:var(--orange);
}
.gallery .box-container .box .content p{
    font-size:1.5rem;
    color:#eee;
    padding:.5rem 0;
}
.review .review-slider{
    padding-bottom: 2rem;
  }
  .review .box{
    padding:2rem;
    text-align: center;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
    border-radius: .5rem;
  }
  .review .box img{
    height:13rem;
    width:13rem;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
  }
  .review .box h3{
    color:#333;
    font-size: 2.5rem;
  }
  .review .box p{
    color:#666;
    font-size: 1.5rem;
    padding:1rem 0;
  }
  .review .box .stars i{
    color:var(--orange);
    font-size: 1.7rem;
  }
.contact .row{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.contact .row .img{
    flex: 1 1 35rem;
}
.contact .row .img img{
    width: 100%;
    height:500px;
}
.contact .row form{
    flex: 1 1 35rem;
    padding:2rem;
    box-shadow: 0 1rem 2rem rgba(0,0,0,.1);
    border-radius: .5rem;
}
.contact .row form .inputBox{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}
.contact .row form .inputBox input,
.contact .row form textarea {
    width: 49%;
    margin: 1rem 0;
    padding:1rem;
    font-size: 1.7rem;
    color:#333;
    background:#f7f7f7;
    text-transform: none;
}
.contact .row form textarea{
    height:27rem;
    resize:none;
    width:100%;
}
.brand-container{
    text-align:center;
}
.footer{
    background:#333;
  }
  .footer .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
  }
  .footer .box-container .box{
    padding:1rem 0;
    flex:1 1 25rem;
  }
  .footer .box-container .box h3{
    font-size: 2.5rem;
    padding:.7rem 0;
    color:#fff;
  }
  .footer .box-container .box p{
    font-size: 1.5rem;
    padding:.7rem 0;
    color:#eee;
  }
  .footer .box-container .box a{
    display: block;
    font-size: 1.5rem;
    padding:.7rem 0;
    color:#eee;
  }
  .footer .box-container .box a:hover{
    color:var(--orange);
    text-decoration: underline;
  }
  .footer .credit{
    text-align: center;
    padding:2rem 1rem;
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: normal;
    color:#fff;
    border-top: .1rem solid rgba(255,255,255,.2);
  }
  .footer .credit span{
    color:var(--orange);
  }
/* media queries */
@media (max-width:1200px){
    html{
        font-size:55%;
    }
}
@media (max-width:991px){
    header{
        padding:2rem;
    }
    section{
        padding:2rem;
    }
}
@media (max-width:768px){
    #menu-bar{
        display:initial;
    }
    header .navbar{
        position:absolute;
        top:100%;
        right:0;
        left:0;
        background:#333;
        border-top: .1rem solid rgba(255,255,255,.2);
        padding:1rem 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;
        border-radius: .5rem;
        padding:1.5rem;
        margin:1.5rem 0;
        background:#222;
    }
}
@media (max-width:450px){
    html{
        font-size:50%;
    }
    .heading span{
        font-size:2.5rem;
    }
    .contact .row form .inputBox input{
        width:100%;
    }
}

main.js

				
					let searchBtn = document.querySelector('#search-btn');
let searchBar = document.querySelector('.search-bar-container');
let formBtn = document.querySelector('#login-btn');
let loginForm = document.querySelector('.login-form-container');
let formClose = document.querySelector('#form-close');
let menu = document.querySelector('#menu-bar');
let navbar = document.querySelector('.navbar');
let videoBtn = document.querySelectorAll('.vid-btn');
window.onscroll = () =>{
    searchBtn.classList.remove('fa-times');
    searchBar.classList.remove('active');
    menu.classList.remove('fa-times');
    navbar.classList.remove('active');
    loginForm.classList.remove('active');
}
menu.addEventListener('click', () =>{
    menu.classList.toggle('fa-times');
    navbar.classList.toggle('active');
});
searchBtn.addEventListener('click', () =>{
    searchBtn.classList.toggle('fa-times');
    searchBar.classList.toggle('active');
});
formBtn.addEventListener('click', () =>{
    loginForm.classList.add('active');
});
formClose.addEventListener('click', () =>{
    loginForm.classList.remove('active');
});
videoBtn.forEach(btn =>{
    btn.addEventListener('click', () =>{
        document.querySelector('.controls .active').classList.remove('active');
        btn.classList.add('active');
        let src = btn.getAttribute('data-src');
        document.querySelector('#video-slider').src = src;
    });
});
var swiper = new Swiper(".review-slider", {
    spaceBetween: 20,
    loop:true,
    autoplay:{
        delay:2500,
        disableOnIneraction: false,
    },
    breakpoints: {
        640:{
            slidesPerView: 1,
        },
        768: {
            slidesPerView: 2,
        },
        1024: {
            slidesPerView: 3,
        },
    },
});
var swiper = new Swiper(".brand-slider", {
    spaceBetween: 20,
    loop:true,
    autoplay:{
        delay:2500,
        disableOnIneraction: false,
    },
    breakpoints: {
        450:{
            slidesPerView: 2,
        },
        768: {
            slidesPerView: 3,
        },
        991:{
            slidesPerView: 4,
        },
        1200: {
            slidesPerView: 5,
        },
    },
});