Tour and Travel Website Design Using HTML CSS And JAVASCRIPT With Source Code

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

how to create a responsive websites the best travel agency 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 adventure & tour Website Design </title>

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


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


<link rel="stylesheet" href="style.css">


</head>
<body>


<section class="header" id="header">
<a href="#" class="logo"> <i class="fas fa-hiking"></i> adventure </a>

<nav class="navbar">
    <div id="nav-close" class="fas fa-times"></div>
    <a href="#home">home</a>
    <a href="#about">about</a>
    <a href="#shop">shop</a>
    <a href="#packages">packages</a>
    <a href="#reviews">reviews</a>
    <a href="#blogs">blogs</a>
</nav>

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




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

    <div class="swiper home-slider">

        <div class="swiper-wrapper">

            <div class="swiper-slide">
                <div class="box" style="background: url(img/home-bg-1.jpg) no-repeat;">
                    <div class="content">
                        <span>never stop </span>
                        <h3>exploring</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa, 
                        nostrum non dolor tempore corrupti farhan perspiciatis consequatur adipisci ullam.</p>
                        <a href="#" class="btn">get started</a>
                    </div>
                </div>
            </div>

            <div class="swiper-slide">
                <div class="box second" style="background: url(img/home-bg-2.jpg) no-repeat;">
                    <div class="content">
                        <span>make tour </span>
                        <h3>amazing</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa, 
                        nostrum non dolor tempore corrupti farhan perspiciatis consequatur adipisci ullam.</p>
                        <a href="#" class="btn">get started</a>
                    </div>
                </div>
            </div>

            <div class="swiper-slide">
                <div class="box thrid" style="background: url(img/home-bg-3.jpg) no-repeat;">
                    <div class="content">
                        <span>exploring the </span>
                        <h3>new world</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa, 
                        nostrum non dolor tempore corrupti farhan perspiciatis consequatur adipisci ullam.</p>
                        <a href="#" class="btn">get started</a>
                    </div>
                </div>
            </div>

        </div>
        <div class="swiper-button-next"></div>
       <div class="swiper-button-prev"></div>

    </div>

</section>





<section class="category">
    <h1 class="heading">adventure <span>idea!</span></h1>
    <div class="box-container">
       
        <div class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/category-1.jpg">
            <h3>Bungee jump</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
            <a href="#" class="btn">read more...</a>
        </div>

        <div class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/category-2.jpg">
            <h3>Zip lines</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
            <a href="#" class="btn">read more...</a>
        </div>

        <div class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/category-3.jpg">
            <h3>Canoeing</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
            <a href="#" class="btn">read more...</a>
        </div>

        <div class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/category-4.jpg">
            <h3>Kayaking</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
            <a href="#" class="btn">read more...</a>
        </div>

    </div>
</section>





<section class="about" id="about">
    <div class="img">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/about-img.jpg" alt="">
    </div>

    <div class="content">
        <h3>memorable outdoor experiences</h3>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
         Officia minus id sequi quibusdam. Possimus dolores iusto quam officiis dignissimos quo! Lorem ipsum dolor sit amet consectetur adipisicing elit
        farhan debitis id nulla consequatur incidunt, ipsum aliquam facere maiores voluptates architecto!</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Voluptatem expedita corrupti officia velit soluta ab quod reprehenderit. Numquam, sed ad.</p>
        <a href="#" class="btn">read more</a>
    </div>
</section>





<section class="shop" id="shop">
    <h1 class="heading">featured <span>products</span></h1>
    <div class="swiper product-slider">
        <div class="swiper-wrapper">

            <div class="swiper-slide slide">
                <div class="img">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-1.jpg" alt="">
                    <div class="icons">
                        <a href="#" class="fas fa-shopping-cart"></a>
                        <a href="#" class="fas fa-eye"></a>
                        <a href="#" class="fas fa-share"></a>
                    </div>
                </div>
                <div class="content">
                    <h3>survival kits</h3>
                    <div class="price"> $10.00 - $30.00</div>
                    <div class="starts">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="swiper-slide slide">
                <div class="img">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-2.jpg" alt="">
                    <div class="icons">
                        <a href="#" class="fas fa-shopping-cart"></a>
                        <a href="#" class="fas fa-eye"></a>
                        <a href="#" class="fas fa-share"></a>
                    </div>
                </div>
                <div class="content">
                    <h3>survival kits</h3>
                    <div class="price"> $10.00 - $30.00</div>
                    <div class="starts">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="swiper-slide slide">
                <div class="img">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-3.jpg" alt="">
                    <div class="icons">
                        <a href="#" class="fas fa-shopping-cart"></a>
                        <a href="#" class="fas fa-eye"></a>
                        <a href="#" class="fas fa-share"></a>
                    </div>
                </div>
                <div class="content">
                    <h3>survival kits</h3>
                    <div class="price"> $10.00 - $30.00</div>
                    <div class="starts">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="swiper-slide slide">
                <div class="img">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-4.jpg" alt="">
                    <div class="icons">
                        <a href="#" class="fas fa-shopping-cart"></a>
                        <a href="#" class="fas fa-eye"></a>
                        <a href="#" class="fas fa-share"></a>
                    </div>
                </div>
                <div class="content">
                    <h3>survival kits</h3>
                    <div class="price"> $10.00 - $30.00</div>
                    <div class="starts">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class=" swiper-slide slide">
                <div class="img">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-5.jpg" alt="">
                    <div class="icons">
                        <a href="#" class="fas fa-shopping-cart"></a>
                        <a href="#" class="fas fa-eye"></a>
                        <a href="#" class="fas fa-share"></a>
                    </div>
                </div>
                <div class="content">
                    <h3>survival kits</h3>
                    <div class="price"> $10.00 - $30.00</div>
                    <div class="starts">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

            <div class="swiper-slide slide">
                <div class="img">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/product-6.jpg" alt="">
                    <div class="icons">
                        <a href="#" class="fas fa-shopping-cart"></a>
                        <a href="#" class="fas fa-eye"></a>
                        <a href="#" class="fas fa-share"></a>
                    </div>
                </div>
                <div class="content">
                    <h3>survival kits</h3>
                    <div class="price"> $10.00 - $30.00</div>
                    <div class="starts">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-alt"></i>
                    </div>
                </div>
            </div>

        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>

    </div>
</section>





<section class="packages" id="packages">
    <div class="heading">popular <span>packages</span></div>
    <div class="box-container">

        <div class="box">
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-1.jpg">
            </div>
            <div class="content">
                <h3>Kayaking</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
                <div class="price">$350 - 550</div>
                <a href="#" class="btn">explore me</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-2.jpg">
            </div>
            <div class="content">
                <h3>exploring new places</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
                <div class="price">$350 - 550</div>
                <a href="#" class="btn">explore me</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-3.jpg">
            </div>
            <div class="content">
                <h3>hiking</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
                <div class="price">$350 - 550</div>
                <a href="#" class="btn">explore me</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-4.jpg">
            </div>
            <div class="content">
                <h3>mountaineering</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
                <div class="price">$350 - 550</div>
                <a href="#" class="btn">explore me</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-5.jpg">
            </div>
            <div class="content">
                <h3>surfing</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
                <div class="price">$350 - 550</div>
                <a href="#" class="btn">explore me</a>
            </div>
        </div>

        <div class="box">
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-6.jpg">
            </div>
            <div class="content">
                <h3>cycling</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
                <div class="price">$350 - 550</div>
                <a href="#" class="btn">explore me</a>
            </div>
        </div>

    </div>
</section>





<section class="reviews" id="reviews">
    <h1 class="heading">Client's <span>reviews</span></h1>
    <div class="swiper review-slider">
        <div class="swiper-wrapper">

            <div class="swiper-slide slide">
                <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis 
                adipisci odio! Voluptatem.</p>
                <div class="user">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-1.png">
                    <div class="info">
                        <h3>edward bey</h3>
                        <span>designer</span>
                    </div>
                </div>
            </div>

            <div class="swiper-slide slide">
                <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis 
                adipisci odio! Voluptatem.</p>
                <div class="user">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-2.png">
                    <div class="info">
                        <h3>lina bey</h3>
                        <span>web development</span>
                    </div>
                </div>
            </div>

            <div class="swiper-slide slide">
                <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis 
                adipisci odio! Voluptatem.</p>
                <div class="user">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-3.png">
                    <div class="info">
                        <h3>edward bey</h3>
                        <span>web designer</span>
                    </div>
                </div>
            </div>

            <div class="swiper-slide slide">
                <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis 
                adipisci odio! Voluptatem.</p>
                <div class="user">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-4.png">
                    <div class="info">
                        <h3>jenna bey</h3>
                        <span>font end</span>
                    </div>
                </div>
            </div>

            <div class="swiper-slide slide">
                <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis 
                adipisci odio! Voluptatem.</p>
                <div class="user">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-5.png">
                    <div class="info">
                        <h3>edward bey</h3>
                        <span>back end</span>
                    </div>
                </div>
            </div>

            <div class="swiper-slide slide">
                <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                Aliquam soluta dolorem consequatur farhan aut tenetur iure omnis 
                adipisci odio! Voluptatem.</p>
                <div class="user">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/pic-6.png">
                    <div class="info">
                        <h3>lisa bey</h3>
                        <span>full stack</span>
                    </div>
                </div>
            </div>

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









<section class="services">
    <h1 class="heading">what we <span>offer</span></h1>
    <div class="box-container">

        <div class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/serv-1.png">
            <h3>complete guide</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
            <a href="#" class="btn">read more...</a>
        </div>

        <div class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/serv-2.png">
            <h3>custom packages</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
            <a href="#" class="btn">read more...</a>
        </div>

        <div class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/serv-3.png">
            <h3>family trips</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
            <a href="#" class="btn">read more...</a>
        </div>

        <div class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/serv-4.png">
            <h3>train guides</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
            <a href="#" class="btn">read more...</a>
        </div>

        <div class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/serv-5.png">
            <h3>adventure trail</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
            <a href="#" class="btn">read more...</a>
        </div>

        <div class="box">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/serv-6.png">
            <h3>various adventures</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ipsa,</p>
            <a href="#" class="btn">read more...</a>
        </div>

    </div>
</section>





<section class="blogs" id="blogs">
     <h1 class="heading">our daily <span>post</span></h1>
     <div class="swiper blogs-slider">
         <div class="swiper-wrapper">

             <div class="swiper-slide slide">
                 <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-1.jpg" alt="">
                 <div class="icons">
                     <a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
                     <a href="#"><i class="fas fa-user"></i>by admin </a>
                 </div>
                 <h3>blog title goes here...</h3>
                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    Commodi unde aut ducimus consectetur quam labore mollitia 
                    natus voluptatum dolore laboriosam!</p>
                    <a href="#" class="btn">read more</a>
             </div>

             <div class="swiper-slide slide">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-2.jpg" alt="">
                <div class="icons">
                    <a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
                     <a href="#"><i class="fas fa-user"></i>by admin </a>
                </div>
                <h3>blog title goes here...</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                   Commodi unde aut ducimus consectetur quam labore mollitia 
                   natus voluptatum dolore laboriosam!</p>
                   <a href="#" class="btn">read more</a>
            </div>

            <div class="swiper-slide slide">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-3.jpg" alt="">
                <div class="icons">
                    <a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
                     <a href="#"><i class="fas fa-user"></i>by admin </a>
                </div>
                <h3>blog title goes here...</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                   Commodi unde aut ducimus consectetur quam labore mollitia 
                   natus voluptatum dolore laboriosam!</p>
                   <a href="#" class="btn">read more</a>
            </div>

            <div class="swiper-slide slide">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-4.jpg" alt="">
                <div class="icons">
                    <a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
                     <a href="#"><i class="fas fa-user"></i>by admin </a>
                </div>
                <h3>blog title goes here...</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                   Commodi unde aut ducimus consectetur quam labore mollitia 
                   natus voluptatum dolore laboriosam!</p>
                   <a href="#" class="btn">read more</a>
            </div>

            <div class="swiper-slide slide">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-5.jpg" alt="">
                <div class="icons">
                    <a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
                    <a href="#"><i class="fas fa-user"></i>by admin </a>
                </div>
                <h3>blog title goes here...</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                   Commodi unde aut ducimus consectetur quam labore mollitia 
                   natus voluptatum dolore laboriosam!</p>
                   <a href="#" class="btn">read more</a>
            </div>

            <div class="swiper-slide slide">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/img-6.jpg" alt="">
                <div class="icons">
                    <a href="#"><i class="fas fa-calendar"></i> 1st jan,2022</a>
                    <a href="#"><i class="fas fa-user"></i>by admin </a>
                </div>
                <h3>blog title goes here...</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                   Commodi unde aut ducimus consectetur quam labore mollitia 
                   natus voluptatum dolore laboriosam!</p>
                   <a href="#" class="btn">read more</a>
            </div>
         </div>
     </div>
</section>




<section class="newsletter">
    <div class="content">
        <h1 class="heading">subscribe <span>now</span></h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
        Totam dicta atque, explicabo facere perferendis ex enim vel eligendi. Repellat, at.</p>
        <form action="">
            <input type="email" name="" id="" placeholder="enter your email address" class="email">
            <input type="submit" class="btn" value="subscribe">
        </form>
    </div>
</section>



<section class="clients">
     <div class="swiper clients-slider">
         <div class="swiper-wrapper">
             <div class="swiper-slide slide"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/client-logo-1.png" alt=""></div>
             <div class="swiper-slide slide"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/client-logo-2.png" alt=""></div>
             <div class="swiper-slide slide"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/client-logo-3.png" alt=""></div>
             <div class="swiper-slide slide"><img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/client-logo-4.png" alt=""></div>
         </div>
     </div>
</section>




<section class="footer">
    <div class="box-container">
        <div class="box">
            <h3>quick links</h3>
            <a href="#home">home</a>
            <a href="#about">about</a>
            <a href="#shop">shop</a>
            <a href="#packages">packages</a>
            <a href="#reviews">reviews</a>
            <a href="#blogs">blogs</a>
        </div>
        <div class="box">
            <h3>extra links</h3>
            <a href="#">my account</a>
            <a href="#">my order</a>
            <a href="#">my whishlist</a>
            <a href="#">ask question</a>
            <a href="#">privacy policy</a>
        </div>
        <div class="box">
            <h3>contact info</h3>
            <a href="#"><i class="fas fa-phone"></i>+111-222-7867</a>
            <a href="#"><i class="fas fa-phone"></i>+222-333-4444</a>
            <a href="#"><i class="fas fa-envelope"></i>shaikhfarhan@gmail.com</a>
            <a href="#"><i class="fas fa-map"></i>mumbai, india - 401203</a>
        </div>
        <div class="box">
            <h3>follow us</h3>
            <a href="#"><i class="fab fa-facebook-f"></i>facebook</a>
            <a href="#"><i class="fab fa-twitter"></i>twitter</a>
            <a href="#"><i class="fab fa-instagram"></i>instagram</a>
            <a href="#"><i class="fab fa-linkedin"></i>linkedin</a>
            <a href="#"><i class="fab fa-github"></i>github</a>
        </div>
    </div>
    <div class="credit">created by <span>dailywebdesign</span> || all rights reserved</div>
</section> <script type="litespeed/javascript" data-src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>  <script type="litespeed/javascript" data-src="main.js"></script> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://dailywebdesigns.com/wp-content/litespeed/js/1b3f96ee2c4d7c42a4b314914800caf2.js?ver=5a62f"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html> 
				
			

style.css

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

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

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

html::-webkit-scrollbar{
    width:1rem;
}

html::-webkit-scrollbar-track{
    background: #fff;
}

html::-webkit-scrollbar-thumb{
    background: #10221b;
}
section{
    padding:5rem 9%;
}

.btn{
    margin-top:1rem;
    display: inline-block;
    border: 0.2rem solid #10221b;
    color: #10221b;
    cursor:pointer;
    background:none;
    font-size:1.7rem;
    padding:1rem 3rem;
}
.btn:hover{
    background: #10221b;
    color: #fff;
}

.heading{
    text-align: center;
    margin-bottom:2.5rem;
    font-size: 4rem;
    color: #10221b;
}
.heading span{
    color: #219150;
}

.header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 2rem 9%;
    z-index: 1000;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    /* -webkit-box-align: center; */
    /* -ms-flex-align: center; */
    align-items: center;
}
.header.active{
    background: #fff;
    /* -webkit-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.1); */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.header .logo{
    margin-right: auto;
    font-size: 2.5rem;
    color: #10221b;
    font-weight: bolder;
}

.header .logo i{
    color: #219150;
}

.header .navbar a{
    margin-left: 2rem;
    font-size: 1.7rem;
    color: #10221b;
}
.header .navbar a:hover{
    color: #219150;
}

.header .navbar #nav-close{
    font-size: 5rem;
    cursor: pointer;
    color: #10221b;
    display: none;
}

.header .icons a,
.header .icons div{
    font-size: 3.5rem;
    margin-left: 2rem;
    cursor: pointer;
    color: #10221b;
}

.header .icons a:hover,
.header .icons div:hover{
 color: #219150;
}

.header #menu-btn{
    display: none;
}

.home{
    padding:0;
}

.home .box{
    min-height: 100vh;
    display:-webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* -webkit-box-align: center; */
    /* -ms-flex-align: center; */
    align-items: center;
    background-size: cover !important;
    background-position: center !important;
    /* -webkit-box-pack: end; */
    /* -ms-flex-pack: end; */
    justify-content: flex-end;
    padding:2rem 9%;
}

.home .box.second{
    /* -webkit-box-pack: start; */
    /* -ms-flex-pack: start; */
    justify-content: flex-start;
}

.home .box .content{
    width:50rem;
}
.home .box .content span{
    font-size:4rem;
    color: #10221b;
}
.home .box .content h3{
    font-size:6rem;
    color: #219150;
    padding-top: .5rem;
    text-transform: uppercase;
}
.home .box .content p{
    line-height:    2;
    color: #10221b;
    font-size: 1.5rem;
    padding: 1rem 0;
}

.swiper-button-next::after,
.swiper-button-prev::after{
    font-size: 3rem;
    color: #10221b;
}

.category .box-container{
    display: -ms-grid;
    display:grid;
    /* -ms-grid-columns: (minmax(29rem, 1fr))[auto-fit]; */
    grid-template-columns: repeat(auto-fit, minmax(29rem, 1fr));
    gap:1.5rem;
}
.category .box-container .box{
    text-align:center;
    padding:1rem;
}
.category .box-container .box img{
    height:20rem;
    width:20rem;
    border-radius:50%;
    margin-bottom:1rem;
}
.category .box-container .box h3{
    font-size:2rem;
    color: #219150;
}
.category .box-container .box p{
    font-size:1.5rem;
    color: #10221b;
    padding:1rem 0;
    line-height:2;
}

.about{
    background: #eee;
    display: -webkit-box;
    display: -ms-flexbox;
    display:flex;
    /* -webkit-box-align: center; */
    /* -ms-flex-align: center; */
    align-items: center;
    /* -ms-flex-wrap: wrap; */
    flex-wrap: wrap;
    gap:2rem;
}
.about .img{
    /* -webkit-box-flex: 1; */
    /* -ms-flex:1 1 42rem; */
    flex:1 1 42rem;
    padding-right: 5rem;
    padding-bottom: 5rem;
}
.about .img img{
    width: 100%;
    /* -webkit-box-shadow:4rem 4rem 0 rgba(0, 0, 0, 0.1); */
    box-shadow:4rem 4rem 0 rgba(0, 0, 0, 0.1);
}
.about .content{
    /* -webkit-box-flex: 1; */
    /* -ms-flex: 1 1 42rem; */
    flex: 1 1 42rem;
}
.about .content h3{
    font-size: 3rem;
    color: #219150;
}
.about .content p{
    font-size:1.5rem;
    color: #10221b;
    padding: 1rem 0;
    line-height:2;
}

.shop .slide{
    border: 0.2rem solid #10221b;
   
}
.shop .slide:hover .img .icons{
    /* -webkit-transform: translateY(0); */
    transform: translateY(0);
}

.shop .slide .img{
    position: relative;
    overflow: hidden;
    height:30rem;
    width:100%;
}
.shop .slide .img img{
    height: 100%;
    width: 100%;
    /* -o-object-fit: cover; */
    object-fit: cover;
}
.shop .slide .img .icons{
    width: 100%;
    position: absolute;
    bottom: 2rem;
    left:0;
    text-align: center;
    z-index:10;
    /* -webkit-transform: translateY(7rem); */
    transform:translateY(7rem);
}

.shop .slide .img .icons a{
    height:4.5rem;
    width:4.5rem;
    line-height: 4.5rem;
    font-size: 1.7rem;
    background: #102210;
    color: #fff;
    margin:0.2rem;
}
.shop .slide .img .icons a:hover{
    background: #219150;
}

.shop .slide .content{
    padding: 1rem 0;
    text-align: center;
}
.shop .slide .content h3{
    font-size:2rem;
    color: #10221b;
}
.shop .slide .content .price{
    padding:1rem 0;
    padding-top: .5rem;
    font-size:2rem;
    color: #219150;
}
.shop .slide .content .starts i{
    font-size: 1.7rem;
    color: #10221b;
}

.packages{
    background: #fff;
}
.packages .box-container{
    display: grid;
    display: -ms-grid;
    /* -ms-grid-columns: (minmax(32rem, 1fr))[auto-fit]; */
    grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
    gap: 1.5rem;
}
.packages .box-container .box{
    text-align: center;
    background: #fff;
    border:0.2rem solid #10221b;
    /* -webkit-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.1); */
    /* box-shadow:0 0.5rem 1 rgba(0, 0, 0, 0.1); */
    border-radius: .5rem;
}
.packages .box-container .box:hover{
    background: #10221b;
}
.packages .box-container .box:hover .content > *{
    color: #fff;
}
.packages .box-container .box:hover .btn{
    border-color: #fff;
}
.packages .box-container .box:hover .btn:hover{
    background: #fff;
    color: #10221b;
}

.packages .box-container .box .img{
    height:25rem;
    overflow:hidden;
    padding: 2rem;
    padding-bottom: 0;
    border-radius: .5rem;
}
.packages .box-container .box .img img{
    height:100%;
    width:100%;
    /* -o-object-fit: cover; */
    object-fit: cover;
    border-radius: .5rem;
}
.packages .box-container .box .content{
    padding:2rem;
}
.packages .box-container .box .content h3{
    font-size:2rem;
    color: #10221b;
}
.packages .box-container .box .content p{
    font-size:1.5rem;
    color: #10221b;
    padding: 1rem 0;
    line-height:2;
}
.packages .box-container .box .content .price{
    font-size: 2rem;
    color: #219150;
}

.services{
    background: #eee;
}
.services .box-container{
    display: grid;
    display: -ms-grid;
    /* -ms-grid-columns: (minmax(31rem, 1fr))[auto-fit]; */
    grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
    gap: 1.5rem;
}
.services .box-container .box{
    text-align: center;
    padding: 2rem;
    border: 0.2rem solid #10221b;
    border-radius:.5rem;
    background: #fff;
}
.services .box-container .box:hover{
    background: #10221b;
}
.services .box-container .box:hover img{
    /* -webkit-filter: invert(1); */
    filter:invert(1);
}
.services .box-container .box:hover p{
    color: #fff;
}
.services .box-container .box:hover .btn{
    border-color: #fff;
    color: #fff;
}
.services .box-container .box:hover .btn:hover{
    background: #fff;
    color: #10221b;
}
.services .box-container .box img{
    height:10rem;
    margin-bottom:1rem;
}
.services .box-container .box h3{
    font-size: 2rem;
    color: #219150;
}
.services .box-container .box p{
    font-size: 1.5rem;
    color: #10221b;
    padding: 1rem 0;
    line-height:2;
}

.reviews .slide .text{
    padding: 2rem;
    font-size: 1.5rem;
    font-style: italic;
    background: #eee;
    border-radius: .5rem;
    color: #10221b;
    line-height:2;
    position: relative;
    z-index: 0;
    margin-bottom: 3rem;
}
.reviews .slide .text::before{
    content: "";
    position: absolute;
    bottom:-1.5rem;
    left: .7rem;
    height:3rem;
    width: 3rem;
    background: #eee;
    /* -webkit-transform: rotate(45deg); */
    transform: rotate(45deg);

}
.reviews .slide .user{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* -webkit-box-align: center; */
    /* -ms-flex-align: center; */
    align-items: center;
    gap:1rem;
}
.reviews .slide .user img{
    height:7rem;
    width:7rem;
    border-radius: 50%;
}
.reviews .slide .user h3{
    font-size: 2rem;
    color: #10221b;
}
.reviews .slide .user span{
    color: #219150;
    font-size: 1.5rem;
}

.blogs .slide{
    text-align: center;
    padding:2rem;
}
.blogs .slide img{
    height:25rem;
    width: 100%;
    /* -o-object-fit: cover; */
    object-fit: cover;
    border-radius: .5rem;
}
.blogs .slide .icons{
    background: #10221b;
    border-radius: .5rem;
    padding: 1rem;
    position: relative;
    top: -2rem;
    display: inline-block;
}
.blogs .slide .icons a{
    font-size: 1.4rem;
    color: #fff;
    margin: 0 1rem;
}
.blogs .slide .icons a:hover{
    color: #219150;
}
.blogs .slide .icons a i{
    padding-right: .5rem;
    color: #219150;
}
.blogs .slide h3{
    font-size:2rem;
    color: #10221b;
}
.blogs .slide p{
    font-size: 1.4rem;
    padding:1rem 0;
    line-height:2;
    color: #10221b;
}

.newsletter{
    background: #eee;
}

.newsletter .content{
    max-width: 70rem;
    margin: 1rem auto;
    text-align: center
}
.newsletter .content p{
    font-size: 1.5rem;
    line-height: 2;
    color: #10221b;
}
.newsletter .content form{
    margin-top: 2rem;
    background: #fff;
    border-radius: 5rem;
    border: 0.2rem solid #10221b;
    padding:.7rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display:flex;
}
.newsletter .content form .email{
    width:100%;
    background:none;
    text-transform: none;
    font-size: 1.6rem;
    color: #10221b;
    padding:0 1.3rem;
}
.newsletter .content form .btn{
    margin-top:0;
    border-radius: 5rem;
    background: #10221b;
    color: #fff;
}
.newsletter .content form .btn:hover{
    background: none;
    color: #10221b;
}

.clients .slide{
    text-align: center;
}

.clients .slide img{
    height: 12rem;
}

.footer{
    /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), 
    url(../images/footer-bg.jpg) no-repeat; */
    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)),url(img/footer-bg.jpg)no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.footer .box-container{
    display: -ms-grid;
    display:grid;
    /* -ms-grid-columns: (minmax(25rem, 1fr))[auto-fit]; */
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap:1rem;

}
.footer .box-container .box h3{
    font-size: 2rem;
    padding:1.5rem 0;
    color:#fff;
}
.footer .box-container .box a{
    display:block;
    font-size: 1.4rem;
    color: #fff;
    padding:1rem 0;
}
.footer .box-container .box a i{
    color: #219150;
    padding-right: .5rem;
}
.footer .box-container .box a:hover{
    color: #219150;
}
.footer .box-container .box a:hover i{
    padding-right: 2rem;
}
.footer .credit{
    text-align: center;
    margin-top:2.5rem;
    padding: 1rem;
    padding-top: 2.5rem;
    font-size: 2rem;
    color: #fff;
}
.footer .credit span{
    color: #219150;
}















/* media queries */
@media (max-width:1200px){
    .header{
        padding: 2rem;
    }
    section{
        padding: 3rem 2rem;
    }
}

@media (max-width:991px){
    html{
        font-size: 55%;
        scroll-padding-top: 7rem;
    }
    .home .box{
        padding: 2rem;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content:center;
        background-position: right !important;
    }
    .home .box.second{
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        background-position: left !important;
    }
    .home .box .content{
        text-align: center;
    }
    .home .box .content span{
        font-size:3rem;
    }
    .home .box .content h3{
        font-size:4rem;
    }

}

@media (max-width:768px){
    .header #menu-btn{
        display: inline-block;
    }
    .header .navbar{
        position: fixed;
        top: 0;
        left: -110%;
        background:#fff;
        z-index: 1000;
        width:35rem;
        height: 100%;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        --webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-flow: column;
        flex-flow: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content:center;

    }
    .header .navbar a{
        margin: 1rem 0;
        font-size: 3rem;
    }
    .header .navbar #nav-close{
        display: block;
        position: absolute;
        top: 1rem;
        right:2rem;
    }
    .header .navbar.active{
        left: 0;
        -webkit-box-shadow:0 0 0 100vw rgba(0, 0, 0, 0.8);
        box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.8);
    }
    .swiper-button-next::after,
    .swiper-button-prev::after{
    display:none;
}
}



@media (max-width:450px){
    html{
        font-size: 50%;
        
    }
    .heading{
        font-size:3rem;
    }
    
    
}

				
			

main.js

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

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

document.querySelector('#nav-close').onclick = () =>{
    navbar.classList.remove('active');
}

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

    if(window.scrollY > 0){
        document.querySelector('.header').classList.add('active');
    }else{
        document.querySelector('.header').classList.add('active');
    }
};

window.onload = () =>{
    if(window.scrollY > 0){
        document.querySelector('.header').classList.add('active');
    }else{
        document.querySelector('.header').classList.add('active');
    }
};



var swiper = new Swiper(".home-slider", {
    loop:true,
    grabCursor:true,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
  });

  var swiper = new Swiper(".product-slider", {
    loop:true, 
    grabCursor:true,
    spaceBetween: 20,
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    breakpoints: {
        0: {
          slidesPerView: 1,
        },
        640: {
          slidesPerView: 2,
        },
        768: {
          slidesPerView: 3,
        },
        1024: {
          slidesPerView: 4,
        },
    },
});

var swiper = new Swiper(".review-slider", {
  loop:true, 
  grabCursor:true,
  spaceBetween: 20,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  breakpoints: {
      0: {
        slidesPerView: 1,
      },
      640: {
        slidesPerView: 2,
      },
      768: {
        slidesPerView: 3,
      },
  },
});

var swiper = new Swiper(".blogs-slider", {
  loop:true, 
  grabCursor:true,
  spaceBetween: 10,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
  breakpoints: {
      0: {
        slidesPerView: 1,
      },
      768: {
        slidesPerView: 2,
      },
      991: {
        slidesPerView: 3,
      },
  },
});

var swiper = new Swiper(".clients-slider", {
  loop:true, 
  grabCursor:true,
  spaceBetween: 20,
  breakpoints: {
      0: {
        slidesPerView: 1,
      },
      640: {
        slidesPerView: 2,
      },
      768: {
        slidesPerView: 3,
      },
      1024: {
        slidesPerView: 4,
      },
  },
});
				
			

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top