How To Create Tour And Travel Website Using HTML CSS JS

byPosted at
How To Create Tour And Travel Website Using HTML CSS JS


Create Tour And Travel Website Using HTML CSS And JavaScript

Travel website using HTML CSS and JavaScript. I Create this tour and travel website project using HTML, CSS, and JavaScript. This Tour And Travel Website is fully Responsive and has all browser compatibility. If you follow this tutorial step by step, you will be able to make this tour and travel website project

I have more than Four years experience in Frontend(HTML, CSS, and JS). I promise you, I will try to provide you best way to create Tour Website using HTML CSS And JavaScript.



Make a Travel Website Using HTML CSS And JavaScript



HTML Code 

   <!--doctype html-->
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--==Title============================================================-->
<title>Travel Website</title>

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

<!--==Fav-icon=========================================================-->
<link rel="shortcut icon" href="images/fav-icon.png"/>

<!--==Using-Font-Awesome-for-Icons=====================================-->
<script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>

<!--==Import-Poppins-Font-Family-From-Google-Font======================-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

<!-- Link Swiper's CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
    />

</head>

<body>

    <!--==Navigation=============================-->
    <nav class="navigation">

        <!--logo-->
        <a href="index.html" class="logo"><i class="fab fa-phoenix-framework"></i>Travel</a>
        
        <!--menu-btn-->
        <input type="checkbox" class="menu-btn" id="menu-btn">
        <label for="menu-btn" class="menu-icon">
            <span class="nav-icon"></span>
        </label>

        <!--menu-->
        <ul class="menu">
            <li><a href="index.html" class="active">Home</a></li>
            <li><a href="#trending">Trending</a></li>
            <li><a href="#destination">Destination</a></li>
            <li><a href="#testimonials">Testimonials</a></li>
        </ul>

        <!--book-now-btn-->
            <a href="#" class="book-now-btn">Book Now</a>

    </nav>
    <!--nav-end-->

    
    
    <!--==main==============================-->
    <section id="main">
    <div class="content">
        <!--text-->
        <div class="main-text">
            <strong>Explore The World <i class="fas fa-globe-americas"></i></strong>
            <h1>It's a Big World Out There, Go Explore</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo ab nesciunt possimus blanditiis amet! </p>
            <a href="#">Book Online</a>
        </div>
        <!--img-->
        <div class="main-img">
            <img alt="Traveling" src="images/main.png">
        </div>
    </div>



    <!--==Search-Tour=====================-->
    <div class="search-tour">
    <form>
        <!--Location-->
        <div class="t-search-box">
            <div class="s-b-icon">
                <i class="fas fa-map-marker-alt"></i>
            </div>
            <div class="s-b-input">
                <span>Location <i class="fas fa-chevron-down"></i></span>
                <input type="text" name="location" placeholder="New York, USA" required/>
            </div>
        </div>
        <!--Date-->
        <div class="t-search-box">
            <div class="s-b-icon">
                <i class="far fa-calendar-alt"></i>
            </div>
            <div class="s-b-input">
                <span>Tour Date <i class="fas fa-chevron-down"></i></span>
                <input type="date" id="tourdate" name="tourdate" required/>
            </div>
        </div>
        <!--Guest-->
        <div class="t-search-box">
            <div class="s-b-icon">
                <i class="fas fa-users"></i>
            </div>
            <div class="s-b-input">
                <span>Persons <i class="fas fa-chevron-down"></i></span>
                <input type="number" name="total-tourist" placeholder="5 Tourist" required/>
            </div>
        </div>
        <!--Btn-->
        <div class="t-search-btn">
            <button><i class="fas fa-search"></i></button>
        </div>

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



    <!--==Trending===========================-->
    <section id="trending">

        <!--heading-container************-->
        <div class="trending-heading-container">
            <!--heading-->
            <div class="trending-heading">
                <h2>Trending 2022</h2>
                <p>Sost Brilliant reasons Entrada should be your one-stop-stop!</p>
            </div>
            <!--btns-->
        </div>

        <!--==trend-box-container==============-->
        <div class="trending-box-container">

        <!-- Swiper Slider -->
        <div class="swiper mySwipercard">
        <div class="swiper-wrapper">

            <!--**Slide-1*******************-->
            <div class="swiper-slide">
                <!--box**********-->
            <div class="trending-box">
                <!--img-->
                <div class="t-b-img">
                    <img alt="Travel" src="images/t-1.jpg">
                </div>
                <!--text-->
                <div class="t-b-text">
                    <a href="#">Forest Wild Life</a>
                    <span>12 Places | 3 Activites</span>
                </div>
                <!--price-&-Book-->
                <div class="price-book">
                    <span class="t-price">200$</span>
                    <a href="#" class="t-book-btn">Book Now</a>
                </div>
                <!--agency-name-->
                <div class="agency-name">
                    <img alt="Agence Logo" src="images/Agency_Name.png">
                    <span>Agence Name</span>
                </div>
            </div>
            </div>


            <!--**Slide-1*******************-->
            <div class="swiper-slide">
                <!--box**********-->
            <div class="trending-box">
                <!--img-->
                <div class="t-b-img">
                    <img alt="Travel" src="images/t-2.jpg">
                </div>
                <!--text-->
                <div class="t-b-text">
                    <a href="#">Forest Wild Life</a>
                    <span>12 Places | 3 Activites</span>
                </div>
                <!--price-&-Book-->
                <div class="price-book">
                    <span class="t-price">200$</span>
                    <a href="#" class="t-book-btn">Book Now</a>
                </div>
                <!--agency-name-->
                <div class="agency-name">
                    <img alt="Agence Logo" src="images/Agency_Name.png">
                    <span>Agence Name</span>
                </div>
            </div>
            </div>


            <!--**Slide-1*******************-->
            <div class="swiper-slide">
                <!--box**********-->
            <div class="trending-box">
                <!--img-->
                <div class="t-b-img">
                    <img alt="Travel" src="images/t-3.webp">
                </div>
                <!--text-->
                <div class="t-b-text">
                    <a href="#">Forest Wild Life</a>
                    <span>12 Places | 3 Activites</span>
                </div>
                <!--price-&-Book-->
                <div class="price-book">
                    <span class="t-price">200$</span>
                    <a href="#" class="t-book-btn">Book Now</a>
                </div>
                <!--agency-name-->
                <div class="agency-name">
                    <img alt="Agence Logo" src="images/Agency_Name.png">
                    <span>Agence Name</span>
                </div>
            </div>
            </div>


            <!--**Slide-1*******************-->
            <div class="swiper-slide">
                <!--box**********-->
            <div class="trending-box">
                <!--img-->
                <div class="t-b-img">
                    <img alt="Travel" src="images/t-4.jpg">
                </div>
                <!--text-->
                <div class="t-b-text">
                    <a href="#">Forest Wild Life</a>
                    <span>12 Places | 3 Activites</span>
                </div>
                <!--price-&-Book-->
                <div class="price-book">
                    <span class="t-price">200$</span>
                    <a href="#" class="t-book-btn">Book Now</a>
                </div>
                <!--agency-name-->
                <div class="agency-name">
                    <img alt="Agence Logo" src="images/Agency_Name.png">
                    <span>Agence Name</span>
                </div>
            </div>
            </div>


            <!--**Slide-1*******************-->
            <div class="swiper-slide">
                <!--box**********-->
            <div class="trending-box">
                <!--img-->
                <div class="t-b-img">
                    <img alt="Travel" src="images/t-5.jpg">
                </div>
                <!--text-->
                <div class="t-b-text">
                    <a href="#">Forest Wild Life</a>
                    <span>12 Places | 3 Activites</span>
                </div>
                <!--price-&-Book-->
                <div class="price-book">
                    <span class="t-price">200$</span>
                    <a href="#" class="t-book-btn">Book Now</a>
                </div>
                <!--agency-name-->
                <div class="agency-name">
                    <img alt="Agence Logo" src="images/Agency_Name.png">
                    <span>Agence Name</span>
                </div>
            </div>
            </div>


            <!--**Slide-1*******************-->
            <div class="swiper-slide">
                <!--box**********-->
            <div class="trending-box">
                <!--img-->
                <div class="t-b-img">
                    <img alt="Travel" src="images/t-6.jpg">
                </div>
                <!--text-->
                <div class="t-b-text">
                    <a href="#">Forest Wild Life</a>
                    <span>12 Places | 3 Activites</span>
                </div>
                <!--price-&-Book-->
                <div class="price-book">
                    <span class="t-price">200$</span>
                    <a href="#" class="t-book-btn">Book Now</a>
                </div>
                <!--agency-name-->
                <div class="agency-name">
                    <img alt="Agence Logo" src="images/Agency_Name.png">
                    <span>Agence Name</span>
                </div>
            </div>
            </div>

        </div>
        <div class="swiper-pagination"></div>
        </div>

        </div>

    </section>


    <!--==Destination===========================-->
    <section id="destination">

            <!--heading******************-->
            <div class="destination-heading">
                <h2>TOP Destinations</h2>
                <p>Sost Brilliant reasons Entrada should be your one-stop-stop!</p>
            </div>

            <!--destination-grid*********-->
            <div class="destination-grid">

                <!--box=======-->
                <div class="destination-box d-b-1">
                    <img alt="Destination" src="images/d-1.jpg"/>
                    <!--text-->
                    <div class="d-b-text-container">
                        <span class="ration">3.5</span>
                        <div class="d-b-text">
                            <strong>Vientam</strong>
                            <span>Worefall</span>
                        </div>
                    </div>
                </div>

                <!--box=======-->
                <div class="destination-box d-b-2">
                    <img alt="Destination" src="images/d-2.jpg"/>
                    <!--text-->
                    <div class="d-b-text-container">
                        <span class="ration">3.5</span>
                        <div class="d-b-text">
                            <strong>Vientam</strong>
                            <span>Worefall</span>
                        </div>
                    </div>
                </div>


                <!--box=======-->
                <div class="destination-box d-b-3">
                    <img alt="Destination" src="images/d-3.jpg"/>
                    <!--text-->
                    <div class="d-b-text-container">
                        <span class="ration">3.5</span>
                        <div class="d-b-text">
                            <strong>Vientam</strong>
                            <span>Worefall</span>
                        </div>
                    </div>
                </div>


                <!--box=======-->
                <div class="destination-box d-b-4">
                    <img alt="Destination" src="images/d-4.webp"/>
                    <!--text-->
                    <div class="d-b-text-container">
                        <span class="ration">3.5</span>
                        <div class="d-b-text">
                            <strong>Vientam</strong>
                            <span>Worefall</span>
                        </div>
                    </div>
                </div>


                <!--box=======-->
                <div class="destination-box d-b-5">
                    <img alt="Destination" src="images/d-5.jpg"/>
                    <!--text-->
                    <div class="d-b-text-container">
                        <span class="ration">3.5</span>
                        <div class="d-b-text">
                            <strong>Vientam</strong>
                            <span>Worefall</span>
                        </div>
                    </div>
                </div>


                <!--box=======-->
                <div class="destination-box d-b-6">
                    <img alt="Destination" src="images/d-6.webp"/>
                    <!--text-->
                    <div class="d-b-text-container">
                        <span class="ration">3.5</span>
                        <div class="d-b-text">
                            <strong>Vientam</strong>
                            <span>Worefall</span>
                        </div>
                    </div>
                </div>

            </div>

    </section>

    <!--==Testimonials========================-->
    <section id="testimonials">

        <!--**Img******************************-->
        <div class="testmonials-img">
            <img alt="Tour" src="images/testimonials-img.png"/>
        </div>

        <!--**Slider***************************-->
        <div class="testmonials-slider">

        <!-- Swiper -->
        <div class="swiper mySwipertest">
        <div class="swiper-wrapper">
            <!--1-->
            <div class="swiper-slide">
            <!--==box============-->
            <div class="testimonials-box">
            <!--text-->
            <div class="testimonials-box-text">
                <i class="fas fa-quote-left"></i>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur cupiditate commodi.</p>
                <strong>Alex Falcan</strong>
            </div>
            <!--img-->
            <div class="testimonials-box-img">
                <img alt="Testimonials" src="images/t-member.jpg">
            </div>
            </div>
            </div><!--slide-end-->
            <!--2-->
            <div class="swiper-slide">
            <!--==box============-->
            <div class="testimonials-box">
            <!--text-->
            <div class="testimonials-box-text">
                <i class="fas fa-quote-left"></i>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur cupiditate commodi.</p>
                <strong>Alex Falcan</strong>
            </div>
            <!--img-->
            <div class="testimonials-box-img">
                <img alt="Testimonials" src="images/t-member.jpg">
            </div>
            </div>
            </div><!--slide-end-->
            <!--3-->
            <div class="swiper-slide">
            <!--==box============-->
            <div class="testimonials-box">
            <!--text-->
            <div class="testimonials-box-text">
                <i class="fas fa-quote-left"></i>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur cupiditate commodi.</p>
                <strong>Alex Falcan</strong>
            </div>
            <!--img-->
            <div class="testimonials-box-img">
                <img alt="Testimonials" src="images/t-member.jpg">
            </div>
            </div>
            </div><!--slide-end-->
            
        </div>
        <div class="swiper-pagination"></div>
        </div>

        
    </div>
    </section>


    <!--==Subscribe===========================-->
    <section id="subscribe">
        <strong>Subscribe our newsletter</strong>
        <p>Reacive Latest News, Updates, and other things every weak.</p>
        <form>
            <input type="email" name="subscribe" placeholder="Enter Your Email Address" required/>
            <button><i class="fas fa-paper-plane"></i></button>
        </form>
    </section>




    <!--==footer===============================-->
    <footer>
        <!--container**********************-->
        <div class="footer-container">

            <!--footer-box********************-->
            <div class="footer-box">
                <strong><i class="fab fa-phoenix-framework"></i> Travel</strong>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias fuga</p>
                <div class="footer-social">
                    <a href="#">
                        <i class="fab fa-facebook-f"></i>
                    </a>
                    <a href="#">
                        <i class="fab fa-twitter"></i>
                    </a>
                    <a href="#">
                        <i class="fab fa-instagram"></i>
                    </a>
                </div>
            </div>

            <!--footer-box***********************-->
            <div class="footer-box">
                <strong>Links</strong>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Destinations</a></li>
                    <li><a href="#">Trending</a></li>
                    <li><a href="#">Book Online</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>


            <!--footer-box***********************-->
            <div class="footer-box">
                <strong>Social</strong>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Destinations</a></li>
                    <li><a href="#">Trending</a></li>
                    <li><a href="#">Book Online</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>


            <!--footer-box***********************-->
            <div class="footer-box">
                <strong>External</strong>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Destinations</a></li>
                    <li><a href="#">Trending</a></li>
                    <li><a href="#">Book Online</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>

            <!--**Footer-box*******************-->
            <div class="footer-box">
                <strong>Contact</strong>
                <span><i class="fas fa-map-marker-alt"></i> New York, United Sate</span>
                <span><i class="far fa-envelope"></i> <a href="#">Example@gmail.com</a></span>
                <span><i class="fas fa-phone-square-alt"></i><a href="#">0123456789</a></span>
            </div>

        </div>
    </footer>
    <span class="copyright">GoingToInternet 2021 - All Copyright Reserved</span>




     <!-- Swiper JS -->
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>

    <script type="text/javascript">
         var swiper = new Swiper(".mySwipercard", {
        slidesPerView: 1,
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        breakpoints: {
          640: {
            slidesPerView: 2,
            spaceBetween: 20,
          },
          768: {
            slidesPerView: 2,
            spaceBetween: 40,
          },
          1024: {
            slidesPerView: 3,
            spaceBetween:20,
          },
        },
      });

      var swiper = new Swiper(".mySwipertest", {
        pagination: {
          el: ".swiper-pagination",
        },
      });
    </script>
</body>

</html>


All CSS Code 
*{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
body{
    margin: 0px;
    padding: 0px;
    font-family: poppins;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
/*===============================*/
.navigation{
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    width: 90%;
    margin: auto;
    padding: 35px 0px
}
.logo{
    font-size: 2rem;
    color: #333333;
    font-weight: 700;
}
.logo i{
    color: #3647df;
}
.menu{
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu li a{
    margin: 0px 4px;
    padding: 5px 10px;
    color: #696969;
    transition: all ease 0.3s;
    position: relative;
}
.menu li a::after{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translateX(-50%);
    height: 3px;
    width: 0%;
    border-radius: 2px;
    background-color:  #3647df;
    transition: all ease 0.3s;
}
.menu li a:hover::after,
.menu li a.active::after{
    width: 30%;
    transition: all ease 0.3s;
}
.menu li a:hover,
.menu li a.active{
    color: #333333;
    transition: all ease 0.3s;
}
.book-now-btn{
    background: linear-gradient(48deg, rgb(174, 181, 254) 0%, rgb(215, 214, 255) 93%); 
    color: #202020;
    font-weight: 600;
    width: 150px;
    height: 45px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    border-radius: 5px;
    transition: all ease 0.3s;
}
.book-now-btn:hover{
    transform: scale(1.05);
}   
.nav-right-btns{
    display: flex;
    align-items: center;
    justify-content: center;
}
/*==main====================*/
#main{
    max-width: 1200px;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 50px auto 50px auto;
}
.content{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-img{
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: linear-gradient(48deg, rgb(174, 181, 254) 0%, rgb(215, 214, 255) 93%); 
}
.main-img img{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}
.main-text{
    width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.main-text strong{
    color: #333333;
    font-size: 1rem;
    background-color: #ebf1ff;
    height: 40px;
    padding: 0px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    display: flex;
    justify-content: flex-start;
    align-items:center;
}
.main-text strong i{
    margin-left: 5px;
}
.main-text h1{
    font-size: 3.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 4.3rem;
    margin: 15px 0px;
    color: #141316;
}
.main-text p{
    color: #696969;
}
.main-text a{
    width: 180px;
    height:50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(48deg, rgb(174, 181, 254) 0%, rgb(215, 214, 255) 93%); 
    margin-top: 20px;
    color: #1f1f1f;
    border-radius: 10px;
    font-weight: 600;
}
/*==Search======================*/
.search-tour{
   border-radius: 80px;
   margin: 50px auto;
   max-width: 1000px;
   box-shadow: 8px 8px 30px rgb(29, 29, 29,0.15);
   background-color: #ffffff;
}
.search-tour form{
    display: flex;
    justify-content: center;
    align-items: center;
}
.t-search-box{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}
.s-b-icon{
    margin-right:10px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #242424;
    background-color:#e9e5ff;
    border-radius: 50%;
}
.t-search-box span{
    font-size: 1rem;
    font-weight: 500;
    color: #141316;
    margin-bottom: 4px;
}
.t-search-box span i{
    font-size: 0.6rem;
}
.s-b-input{
    width:calc(100% - 60px);
}
.t-search-box input{
    border: 1px solid rgba(0,0,0,0.03);
    padding: 6px 10px;
    background-color: #f9f8ff;
    width: 100%;
    outline: none;
}
.search-tour form{
    padding: 20px;
}
.t-search-btn button{
    width:60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    outline: none;
    cursor: pointer;
    color: #252525;
    font-size: 1rem;
    background: linear-gradient(48deg, rgb(174, 181, 254) 0%, rgb(215, 214, 255) 93%); 
}
/*==Trending=====================*/
#trending{
    background-color: #f9f9ff; 
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
    padding: 50px 0px;
}
.trending-heading-container{
    max-width: 1200px;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.trending-heading h2,
.destination-heading h2{
    font-size: 2.4rem;
    color: #141314;
    font-weight: 700;
}
.trending-heading p,
.destination-heading p{
    color: #696969;
    margin: 10px 0px;
}
.trending-box-container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin-top: 40px;
    max-width: 1200px;
}
.trending-box{
    width: 100%;
    padding: 15px;
    margin-bottom: 60px;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid rgb(37, 37, 37,0.1);
    transition: all ease 0.3s;
}
.trending-box:hover{
    box-shadow: 8px 20px 30px rgba(0,0,0,0.1);
    transition: all ease 0.3s;
}
.t-b-img{
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    overflow: hidden;
}
.t-b-img img{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}
.t-b-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 20px 0px;
}
.t-b-text a{
    color: #1b1b1b;
    font-weight: 600;
    font-size: 1.2rem;
}
.t-b-text span{
    color: #696969;
    font-size: 0.8rem;
    letter-spacing: 1px;
}
.price-book{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.t-price{
    font-size: 1.5rem;
    color: #363636;
    font-weight: 700;
    letter-spacing: 1px;
}
.t-book-btn{
    width: 120px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border:1px solid #3647df;
    color: #3647df;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all ease 0.3s;
}
.t-book-btn:hover{
    color: #ffffff;
    background-color: #3647df;
    transition: all ease 0.3s;
}
.agency-name{
    background-color: #f1efff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 20px;
    border-radius: 10px;
    width: 100%;
    margin-top: 15px ;
}
.agency-name img{
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
    object-fit: cover;
    object-position: center;
}
.agency-name span{
    color: #474747;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 1px;
}
/*==destination-=================*/
#destination{
    width: 90%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 100px auto 70px auto;
}
.destination-heading{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
}
.destination-grid{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1.3fr 0.7fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: 550px;
    grid-gap: 30px;
    margin: 40px 0px;
}

.destination-box{
    width:100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
.destination-box img{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}
.d-b-text-container{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px;
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,0.06) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.d-b-text-container .ration{
    background-color: #ffffff;
    color: #1b1b1b;
    border-radius: 10px;
    width: 50px;
    height: 25px;
    font-size: 0.8rem;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
}
.d-b-text{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.d-b-text strong{
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
}
.d-b-text span{
    color: #ffffff;
    font-size: 0.9rem;
    letter-spacing: 1px;
}
.d-b-2{
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 1;
    grid-row-end: 3;
}
.d-b-3{
    grid-column-start: 3;
    grid-column-end: 5;
}

/*==subscribe======================*/
#subscribe{
    min-height: 300px;
    max-width: 1200px;
    width:90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #faf9ff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    margin: 50px auto;
    padding: 30px;
    background-image: url(../images/s-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}
#subscribe strong{
    font-size: 2.5rem;
    color: #1b1b1b;
    letter-spacing: 1px;
    font-weight: 700;
    text-align: center;
}
#subscribe p{
    color: #333333;
    font-size: 0.9rem;
    letter-spacing: 1px;
}
#subscribe form{
    max-width: 450px;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    background-color: #ffffff;
    margin-top: 30px;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
}
#subscribe form input{
    border: none;
    outline: none;
    width: 100%;
    height: 40px;
    padding: 0px 20px;
}
#subscribe form button{
    width: 50px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #fa479a;
    color: #ffffff;
    border: none;
    outline: none;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.15);
    cursor: pointer;
}
/*==testimonials==================*/
#testimonials{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px auto;
    max-width: 1200px;
    width: 90%;
}
.testmonials-img{
    max-width: 500px;
    width: 100%;
}
.testmonials-img img{
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}
.testmonials-slider{
    max-width: 550px;
    width: 100%;
}
.testimonials-box{
    background-color: #ffffff;
    padding: 30px;
    border: 1px solid rgba(0,0,0,0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.06);
}
.testimonials-box-img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    background-color: #fa479a;
    margin-left: 20px;
}
.testimonials-box-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.testimonials-box-text{
    width: 80%;
}
.testimonials-box-text i{
    color: #3647df;
    font-size: 1.3rem;
}
.testimonials-box-text p{
    color: #696969;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin: 5px 0px 15px 0px;
}
.testimonials-box-text strong{
    color: #363636;
    font-weight: 700;
    letter-spacing: 1px;
}
/*==footer======================*/
footer{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    padding: 50px 30px;
    flex-direction: column;
    background-color: #f9f9ff;
}
.footer-container{
    max-width: 1200px;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 2fr;
    grid-gap: 50px;
}
.footer-box strong{
    color: #363636;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 15px;
}
.footer-box p{
    color: #696969;
    font-size: 0.9rem;
    letter-spacing: 1px;
    margin-bottom: 15px;
}
.footer-social{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
.footer-social a{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    border-radius:5px;
    border: 1px solid rgba(0,0,0,0.1);
    color: #3647df;
    transition: all ease 0.3s;
}
.footer-social a:hover{
    background-color: #3647df;
    color: #ffffff;
    transition: all ease 0.3s;
}
.footer-social a:hover i{
    color: #ffffff;
}
.footer-box span{
    color: #696969;
    margin: 6px 0px;
    font-size: 0.9rem;
}
.footer-box span a{
    color: #696969;
}
.footer-box span i{
    margin-right: 6px;
    color: #3647df;
}
.footer-box{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.footer-box ul{
    margin-bottom: 15px;
}
.footer-box ul li a{
    color: #696969;
    margin: 5px 0px;
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: flex;
    justify-content: flex-start;
}
.footer-box a:hover{
    color: #1b1b1b;
    transition: all ease 0.3s;
}
.copyright{
    padding: 15px;
    color: #3b3b3b;
    font-weight: 400;
    letter-spacing: 1px;
    background-color: #ececec;
    width: 100%;
    font-size: 0.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*==making-responsive=================*/
.menu-icon,
.menu-btn{
    display: none;
}
@media(max-width:1100px){
    .content{
        flex-direction: column-reverse;
    }
    .main-text{
        width: 100%;
        margin-top: 50px;
    }
}
@media(max-width:1000px){
   .navigation{
            justify-content: space-between;
            padding: 20px;
            position: relative;
            width: 100%;
            z-index: 103;
        }
        .logo img{
            max-height: 30px;}
    
        .navigation .menu{
            display: none;
            position: absolute;
            left: 0px;
            top:calc(100% - 1px);
            background-color: #ffffff;
            width: 100%;
            padding: 0px;
            margin: 0px;
            z-index: 104;
            box-shadow: 2px 30px 30px rgba(0,0,0,0.06);
        }
        .navigation .menu li{
            width:100%;
            margin: 0px;
            padding: 0px;
        }
        .navigation .menu li a{
            width: 100%;
            display: flex;
            align-items: center;
            margin: 0px;
            padding: 20px;
            border-bottom: 1px solid #e2e2e26e;
        }
        .menu li a::after{
            display: none;
        }
        .menu-icon{
            display: block;
        }
        .navigation .menu-icon{
            cursor: pointer;
            float: right;
            padding: 10px 0px;
            position: relative;
            user-select: none;
            z-index: 106;
        }
        .navigation .menu-icon .nav-icon{
            background-color: #181818;
            display: block;
            position: relative;
            height: 2px;
            transition: background 0.2s ease-out;
            width: 25px;
        }
        .navigation .menu-icon .nav-icon::before,
        .navigation .menu-icon .nav-icon::after{
            background-color: #181818;
            content: '';
            position: absolute;
            height: 100%;
            transition: all ease-out 0.2s;
            width: 100%;
        }
    
        .navigation .menu-icon .nav-icon::before{
            top: 9px;
        }
        .navigation .menu-icon .nav-icon::after{
            top: -9px;
        }
        .navigation .menu-icon:checked ~ .menu-icon .nav-icon,
        .navigation .menu-btn:checked ~ .menu-icon .nav-icon{
            background-color: transparent;
        }
        .navigation .menu-btn:checked ~ .menu-icon .nav-icon::before{
            transform: rotate(-45deg);
            top: 0px;
        }
        .navigation .menu-btn:checked ~ .menu-icon .nav-icon::after{
            transform: rotate(45deg);
            top: 0px;
        }
     
        .navigation .menu-btn:checked ~ .menu{
            display: block;
        }
         .destination-grid{
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    height: auto;
    grid-gap: 10px;
   } 
   .d-b-3{
    grid-column-start: 1;
    grid-column-end:3;
    }
    .destination-box{
        height: 100%;
        max-height: 300px;
    }
    .d-b-2{
        grid-row: 1/2;
    }
    #testimonials{
        flex-direction: column;
    }
    .footer-container{
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
        
} 
@media(max-width:780px){
    .search-tour form{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }
    .t-search-btn button{
        width: 100%;
        max-width: 100%;
        border-radius: 10px;
    }
    .search-tour{
        border-radius: 10px;
    }
    .main-text h1,
    .trending-heading h2,
    .destination-heading h2,
    #subscribe strong{
        font-size: 1.8rem;
        line-height: 2rem;
    }
    .d-b-text strong{
        font-size: 1rem;
    }
}

@media(max-width:600px){
    .main-img{
        width: 300px;
        height: 300px;
    }
}
@media(max-width:550px){
    .logo{
        font-size: 1.4rem;
    }
    .search-tour form{
        grid-template-columns: 1fr;
    }
    .testimonials-box{
        flex-direction: column;
        text-align: center;
    }
    .testimonials-box-img{
        margin-left: 0px;
        margin-top: 10px;
    }
}
@media(max-width:370px){
    .footer-container{
        grid-template-columns: 1fr;
    }
    .main-img{
        width: 250px;
        height: 250px;
    }
    .book-now-btn{
        display: none;
    }
    .search-tour form{
        padding: 5px;
    }
   
}
.mySwipertest .swiper-slide{
    padding: 20px;
}
.mySwipertest .swiper-pagination{
    position: static !important;
}




Share
Post a Comment Labels, ,

Comments


Archive

Contact Form

Send