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

how to create a responsive website NFT 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 nft website with roadmap design</title>

    <link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
    
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css">

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

</head>
<body>

    
    <header class="header">
        <a href="#" class="logo"> <i class="fas fa-cubes"></i> Dippies. </a>

        <nav class="navbar">
            <a href="#">Home</a>
            <a href="#">Story</a>
            <a href="#">The Fire Pit</a>
            <a href="#">Roadmap</a>
            <a href="#">Meet the Team</a>
            <a href="#">FAQ</a>
        </nav>

        <div class="icons">
            <div id="menu-btn" class="fas fa-bars"></div>
            <div id="search-btn" class="fas fa-search"></div>
            <div id="cart-btn" class="fas fa-shopping-cart"></div>
            <div id="login-btn" class="fas fa-user"></div>
        </div>
    </header>



<section class="home" id="home">
    <div class="slides-container">

        <div class="slide active">
            <div class="content">
                <div class="slideimg">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/main.png">
                </div>
                <h3>Funk, meet web 3. A collection of 8,888 unique digital hippies that 
                    are building the new free world before our eyes.</h3>
                    <a href="#" class="btn">twitter</a>
                    <a href="#" class="btn">opensea</a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/main1.png" alt="">
            </div>
        </div>

        <div class="slide">
            <div class="content">
                <div class="slideimg">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/main.png">
                </div>
                <h3>Funk, meet web 3. A collection of 8,888 unique digital hippies that 
                    are building the new free world before our eyes.</h3>
                    <a href="#" class="btn">twitter</a>
                    <a href="#" class="btn">opensea</a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/main2.png" alt="">
            </div>
        </div>
    </div>
    <div id="next-slide"class="fas fa-angle-right" onclick="next()"></div>
    <div id="prev-slide"class="fas fa-angle-left" onclick="next()"></div>
</section>




<section class="banner-container">
    <div class="banner">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/home.webp">
        <div class="content">
            <span>special offer</span>
            <h3>upto 50% off</h3>
            <a href="#" class="btn">check out</a>
        </div>
    </div> 
</section>




<section class="story">
    <h1 class="title"> our <span>story</span><a href="#">view all >></a> </h1>

    <div class="box-container">

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide.png">
            </div>
            <div class="content">
                <h3>Rock-Star Dippie</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <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>  
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide1.png">
            </div>
            <div class="content">
                <h3>Corporate Dippie</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <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>  
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide2.png">
            </div>
            <div class="content">
                <h3>Stoner Dippie</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <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>  
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide3.png">
            </div>
            <div class="content">
                <h3>Psychedelic Dippie</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <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>  
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide4.png">
            </div>
            <div class="content">
                <h3>Artistic Dippie</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <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>  
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide5.png">
            </div>
            <div class="content">
                <h3>Musician Dippie</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <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>  
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide6.png">
            </div>
            <div class="content">
                <h3>Road Tripping Dippie</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <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>  
                </div>
            </div>
        </div>

        <div class="box">
            <div class="icons">
                <a href="#" class="fas fa-shopping-cart"></a>
                <a href="#" class="fas fa-heart"></a>
                <a href="#" class="fas fa-eye"></a>
            </div>
            <div class="img">
                <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide7.jpg">
            </div>
            <div class="content">
                <h3>Developer Dippie</h3>
                <div class="price">$19.99</div>
                <div class="stars">
                    <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>  
                </div>
            </div>
        </div>

</div>
</section>


<section>
<h1 class="title"> The <span>Firepit</span> <a href="#">read more >></a> </h1>
</section>
<section class="firepit">
    <div class="content">
        <h3>The Fire Pit</h3>
        <p>Here is where we come together and help shape the 
        future of Dippies. This is a spot where the dippie-
        collective gather to make a difference in the web3 
        space and vote on proposals as a community.
        <br><br>
        Come and get to know the family today; showcase 
        your skills and find like minded people.
        </p>
        <a href="#" class="btn">check out</a>
    </div>

    <div class="img">
        <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/fire pits.png">
    </div>
</section>




<section>
    <h1 class="title">roadmap <span>review</span> <a href="#">read more >></a> </h1>
</section>

<section class="roadmap" id="roadmap">
    <div class="swiper mySwiper roadmap-slider">
        <div class="swiper-wrapper wrapper">

            <div class="swiper-slide slide">
                <i class="fas fa-quote-right"></i>
                <div class="user">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide11.png">
                    <div class="user-info">
                        <h3>COMMUNITY ✅</h3>
                        <div class="star">
                            <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>
                <p>When we first began Dippies we had a simple goal in mind; 
                    to adopt a community first farhan that holds a safe-space 
                    for all members. The process is simple but efficient. Peace, 
                    love and kindness toward others is a big part of who we are.</p>
            </div>

            <div class="swiper-slide slide">
                <i class="fas fa-quote-right"></i>
                <div class="user">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide44.png">
                    <div class="user-info">
                        <h3>BOUNTY ✅</h3>
                        <div class="star">
                            <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>
                <p>When we first began Dippies we had a simple goal in mind; 
                    to adopt a community first farhan that holds a safe-space 
                    for all members. The process is simple but efficient. Peace, 
                    love and kindness toward others is a big part of who we are.</p>
            </div>

            <div class="swiper-slide slide">
                <i class="fas fa-quote-right"></i>
                <div class="user">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide55.png">
                    <div class="user-info">
                        <h3>DippieStash ✅</h3>
                        <div class="star">
                            <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>
                <p>When we first began Dippies we had a simple goal in mind; 
                    to adopt a community first farhan that holds a safe-space 
                    for all members. The process is simple but efficient. Peace, 
                    love and kindness toward others is a big part of who we are.</p>
            </div>

            <div class="swiper-slide slide">
                <i class="fas fa-quote-right"></i>
                <div class="user">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide66.png">
                    <div class="user-info">
                        <h3>MERCH</h3>
                        <div class="star">
                            <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>
                <p>When we first began Dippies we had a simple goal in mind; 
                    to adopt a community first farhan that holds a safe-space 
                    for all members. The process is simple but efficient. Peace, 
                    love and kindness toward others is a big part of who we are.</p>
            </div>

            <div class="swiper-slide slide">
                <i class="fas fa-quote-right"></i>
                <div class="user">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide71.png">
                    <div class="user-info">
                        <h3>RELEASING</h3>
                        <div class="star">
                            <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>
                <p>When we first began Dippies we had a simple goal in mind; 
                    to adopt a community first farhan that holds a safe-space 
                    for all members. The process is simple but efficient. Peace, 
                    love and kindness toward others is a big part of who we are.</p>
            </div>

            <div class="swiper-slide slide">
                <i class="fas fa-quote-right"></i>
                <div class="user">
                    <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/slide99.jpeg">
                    <div class="user-info">
                        <h3>ROADMAP 2.0</h3>
                        <div class="star">
                            <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>
                <p>When we first began Dippies we had a simple goal in mind; 
                    to adopt a community first farhan that holds a safe-space 
                    for all members. The process is simple but efficient. Peace, 
                    love and kindness toward others is a big part of who we are.</p>
            </div>

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




<section class="teams">
    <h1 class="title">our <span>team</span> <a href="#">view all >></a></h1>


<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/founder.png">
        </div>
        <div class="content">
            <div class="icons">
                <a href="#" class="fas fa-calendar"></i>12 jan, 2022</a>
                <a href="#" class="fas fa-user"></i>by Sal</a>
            </div>
            <h3>Founding Dippie</h3>
            <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
            <a href="#" class="btn">read more...</a>
        </div>
    </div>

    <div class="box">
        <div class="img">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/mainside.png">
        </div>
        <div class="content">
            <div class="icons">
                <a href="#" class="fas fa-calendar"></i>12 jan, 2022</a>
                <a href="#" class="fas fa-user"></i>by Taylor</a>
            </div>
            <h3>Founder & Artist</h3>
            <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
            <a href="#" class="btn">read more...</a>
        </div>
    </div>

    <div class="box">
        <div class="img">
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/owner.png">
        </div>
        <div class="content">
            <div class="icons">
                <a href="#" class="fas fa-calendar"></i>12 jan, 2022</a>
                <a href="#" class="fas fa-user"></i>by Latency Labs</a>
            </div>
            <h3>Developer</h3>
            <p>Lorem ipsum dolor sit amet, farhan aliqua. Ut enim ad minim veniam, quis</p>
            <a href="#" class="btn">read more...</a>
        </div>
    </div>

</div>
</section>



<section class="">
    <h1 class="title">FAQ <span>question</span> <a href="#">what we say >></a></h1>
    </section>

    <section class="faq">
    <div class="icons-container">
        <div class="icons">
            <i class="fas fa-bookmark"></i>
            <h3>Is there a place to buy off of secondaries?</h3>
            <p>Opensea</p>
            <p>Looks Rare</p>
        </div>

        <div class="icons">
            <i class="fas fa-money-bill-alt"></i>
            <h3>What are your secondary royalty fees?</h3>
            <p>5%</p>
            <p>0.02%</p>
        </div>

        <div class="icons">
            <i class="fas fa-cookie"></i>
            <h3>Total number of tokens Blockchain:</h3>
            <p>8.888</p>
            <p>7.561</p>
        </div>
    </div>
</section>



<section class="footer">
    <div class="box-container">
        <div class="box">
            <h3>quick links</h3>
                <a href="#"> <i class="fa fa-arrow-right"></i>Home</a>
                <a href="#"> <i class="fa fa-arrow-right"></i>Story</a>
                <a href="#"> <i class="fa fa-arrow-right"></i>The Fire Pit</a>
                <a href="#"> <i class="fa fa-arrow-right"></i>Roadmap</a>
                <a href="#"> <i class="fa fa-arrow-right"></i>Meet the Team</a>
                <a href="#"> <i class="fa fa-arrow-right"></i>FQA</a>
        </div>

        <div class="box">
            <h3>extra links</h3>
                <a href="#"> <i class="fa fa-arrow-right"></i> my order</a>
                <a href="#"> <i class="fa fa-arrow-right"></i> my favorite</a>
                <a href="#"> <i class="fa fa-arrow-right"></i> my wishlist</a>
                <a href="#"> <i class="fa fa-arrow-right"></i> my account</a>
                <a href="#"> <i class="fa fa-arrow-right"></i> terms or use</a>
                <a href="#"> <i class="fa fa-arrow-right"></i> policy</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-discord"></i> Discord</a>
            <a href="#"> <i class="fab fa-pinterest"></i> pinterest</a>
        </div>

        <div class="box">
            <h3>newsletter</h3>
            <p>subscribe for latest update</p>
            <form action="">
                <input type="email" placeholder="enter your email address">
                <input type="submit" value="subscribe" class="btn">
            </form>
            <img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="img/payment.png" class="payments">
        </div>
</div>
</section>

<section class="credit">created by <span>Dailywebdesign</span> || all rights reserved</section> <script type="litespeed/javascript" data-src="https://unpkg.com/swiper@8/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:wght@100;300;400;500;600&display=swap');

:root{
    --Tusk:#B0E5E3;
    --main:#2E307D;
    --meet:#FFE9E2;
}

body{
    background:var(--Tusk);
}
*{
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-transform: uppercase;
    text-decoration: none;
    transition: .2s linear;
}

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

section{
    padding: 3rem 9%;
}

.title{
    display: flex;
    align-items: center;
    font-size: 2.5rem;
    margin-bottom:3rem;
    padding:1.2rem 0;
    border-bottom: 1px solid rgba(0,0,0,0.7);
    color: var(--main);
}

.title span{
    color: var(--main);
    padding-left: .7rem;
}

.title a{
    margin-left: auto;
    color: var(--main);
    font-size: 1.5rem;
}

.title a:hover{
    color: #fff;
}

.btn{
    margin-top: 1rem;
    display:inline-block;
    padding:.8rem 3rem;
    background-color:var(--main);
    color:var(--Tusk);
    font-size: 1.7rem;
    cursor:pointer;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border:0.1rem solid rgba(0,0,0,0.7);
}

.btn:hover{
    background: var(--Tusk);
    color: var(--main);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

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

.header .logo{
    font-size: 2.4rem;
    font-weight: bolder;
    color: var(--Tusk);
}

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


.header .navbar a{
    font-size:1.7rem;
    color: var(--Tusk);
    margin: 0 1rem;
    font-weight: bold;
}

.header .navbar a:hover{
    color: #fff;
}

.header .icons div{
    font-size: 2.5rem;
    margin-left: 1.7rem;
    cursor: pointer;
    color:var(--Tusk);
}

.header .icons div:hover{
    color: #fff;
}

#menu-btn{
    display: none;
}

@keyframes fadeLeft{
    0%{
        opacity: 0;
        transform:translateY(-5rem);
    }
}

@keyframes fadeUp {
    0%{
        opacity: 0;
        transform: scale(0.5);
    }
}

.home{
    padding-top: 14rem;
    background-color:var(--Tusk);
    background-size: cover;
    background-position: center;
    position: relative;
}

.home .slides-container .slide{
    display:flex;
    align-items:center;
    flex-wrap: wrap;
    gap: 1.5rem;
    display:none;
}

.home .slides-container .slide.active{
   display: flex;
}

.home .slides-container .slide .content{
    flex: 1 1 40rem;
    animation:fadeLeft .4s linear .4s backwards;
}


.home .slides-container .slide .content h3{
    color: var(--main);
    font-size: 2.0rem; 
    align-items: center;
}

.home .slides-container .slide .content .slideimg img{
    display: inline-block;
}

.home .slides-container .slide .img{
    flex: 1 1 40rem;
    margin: 3rem 0;
}

.home .slides-container .slide .img img{
    width: 100%;
    height:490px;
    animation:fadeUp .4s linear;
}

.home #next-slide,
.home #prev-slide{
    position: absolute;
    top: 50%;
    transform:translateY(-50%);
    height:5rem;
    width:5rem;
    line-height: 5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border: 0.1rem solid rgba(0,0,0,0.7);
    text-align: center;
    background:var(--main);
    font-size: 2rem;
    color: var(--Tusk);
    cursor: pointer;
}

.home #next-slide:hover,
.home #prev-slide:hover{
    background: var(--Tusk);
    color: var(--main);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
}

.home #prev-slide{
    left: 2rem;
}

.home #next-slide{
    right: 2rem;
}

.banner-container{
    background:var(--Tusk);
    display:flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.banner-container .banner{
    flex: 1 1 35rem;
    height:65rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border: 0.1rem solid rgba(0,0,0,0.7);
}

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

.banner-container .banner .content{
    position: absolute;
    top: 70%;
    left: 4%;
    transform:translateY(-50%);
}

.banner-container .banner .content h3{
    font-size: 3rem;
    color: #000;
    text-shadow:0 0.5rem 1rem rgba(0,0,0,0.7);
}

.banner-container .banner .content span{
    font-size: 2.5rem;
    color: #000;;
    text-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
}

.banner-container .banner:hover img{
    transform:scale(1.2) rotate(-5deg);
}

.story .box-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap: 1.5rem;
}

.story .box-container .box{
    position:relative;
    background-color:var(--main);
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border: 0.1rem solid rgba(0,0,0,0.7);
}

.story .box-container .box:hover .icons{
    top: 0;
    height:35rem;
}

.story .box-container .box .icons{
    position:absolute;
    top: -105%;
    left: 0;
    height:35rem;
    width: 100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--main);
    gap: 1rem;
}

.story .box-container .box .icons a{
    font-size: 2rem;
    height:5rem;
    width:5rem;
    line-height: 5rem;
    background: var(--Tusk);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
    color:var(--main)
}

.story .box-container .box .icons a:hover{
    background: var(--Tusk);
    color:var(--main);
    height:17rem;
    
}

.story .box-container .box .img{
    height:27rem;
    width:27rem;
    overflow:hidden;
}

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

.story .box-container .box .content{
    padding:1.5rem;
}

.story .box-container .box .content .price{
    font-size: 1.4rem;
    color: var(--Tusk); 
}

.story .box-container .box .content h3{
    font-size:2rem;
    color: var(--Tusk);
}

.story .box-container .box .content .stars i{
    font-size: 1.4rem;
    color: yellow;
}


.firepit{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

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

.firepit .img img{
    width: 100%;
    height:55rem;
    overflow: hidden;
    object-fit: cover;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border: 0.1rem solid rgba(0,0,0,0.7);
}

.firepit .content{
    flex: 1 1 40rem;
}

.firepit .content h3{
    color: var(--main);
    font-size: 3rem;
    padding-top: .5rem;
}

.firepit .content p{
    color: var(--main);
    font-size:2rem;
    padding:1rem 0;
}



.roadmap .slide{
    padding:2rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    border: 0.1rem solid rgba(0,0,0,0.7);
    border-radius: .5rem;
    position: relative;
    background:var(--main);
}

.roadmap .slide .fa-quote-right{
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 6rem;
    color: var(--Tusk);
}

.roadmap .slide .user{
    display:flex;
    gap: 1.5rem;
    align-items: center;
    padding-bottom: 1.5rem;
}

.roadmap .slide .user img{
    height:7rem;
    width:7rem;
    border-radius: 50%;
    object-fit: cover;
}

.roadmap .slide .user h3{
    color: var(--Tusk);
    font-size: 2rem;
    padding-bottom:5rem;
}

.roadmap .slide .user i{
    font-size: 1.3rem;
    color:yellow;
}

.roadmap .slide p{
    font-size: 1.5rem;
    line-height: 1.8;
    color:var(--Tusk);
}


.teams .box-container{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
    gap:1.5rem;
}

.teams .box-container .box{
    border: 0.1rem solid rgba(0,0,0,0.7);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    background:var(--main);
}

.teams .box-container .box .img{
    height:27rem;
    width:27rem;
    overflow:hidden;
}

.teams .box-container .box .img:hover img{
    transform:scale(1.2);
}

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

.teams .box-container .box .content{
    padding:2rem 1.5rem;
}

.teams .box-container .box .content .icons{
    border-radius:0.1rem solid rgba(0,0,0,0.1);
    padding-bottom: 1.7rem;
    margin-bottom: 1.7rem;
    display: flex;
    align-items: center;
    justify-content:space-between;
}

.teams .box-container .box .content .icons a{
    font-size: 1.4rem;
    color: var(--Tusk);
}

.teams .box-container .box .content .icons a:hover{
    color: #fff;
}

.teams .box-container .box .content .icons a i{
    color: var(--Tusk);
    padding-right:.5rem;
}

.teams .box-container .box .content h3{
    font-size: 2.2rem;
    color: var(--Tusk);
}

.teams .box-container .box .content p{
    font-size: 1.4rem;
    color: var(--Tusk);
    line-height: 2;
    padding:1rem 0;
}


.faq .icons-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(29rem, 1fr));
    gap: 1.5rem;
}

.faq .icons-container .icons{
    text-align:center;
    border: 0.1rem solid rgba(0,0,0,0.7);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    padding: 2rem;
    background:var(--main);
}

.faq .icons-container .icons i{
    height:6rem;
    width:6rem;
    line-height: 6rem;
    font-size: 2.5rem;
    background: var(--Tusk);
    color:var(--main);
    border-radius:50%;
}

.faq .icons-container .icons h3{
    color: var(--Tusk);
    font-size: 2rem;
    padding:1rem 0;
}

.faq .icons-container .icons p{
    color: var(--Tusk);
    font-size: 1.5rem;
    line-height: 2;
}


.footer{
    background:var(--main);
}

.footer .box-container{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
    gap:1.5rem;
}

.footer .box-container .box h3{
    font-size: 2.2rem;
    color: var(--Tusk);
    padding:1rem 0;
}

.footer .box-container .box p{
    font-size: 1.5rem;
    color: var(--Tusk);
    padding-bottom: .5rem;
}

.footer .box-container .box a{
    font-size: 1.4rem;
    color: var(--Tusk);
    padding: 1rem 0;
    display:block;
}

.footer .box-container .box a:hover{
    color: #fff;
}

.footer .box-container .box a:hover i{
    padding-right: 2rem;
}

.footer .box-container .box a i{
    padding-right:.5rem;
    color: var(--Tusk);
}

.footer .box-container .box form input[type="email"]{
    width: 100%;
    padding:1rem 1.2rem;
    font-size: 1.6rem;
    color: var(--Tusk);
    margin: 1rem 0;
    text-transform: none;
}

.footer .box-container .box .payments{
    width: 100%;
    margin-top: 2rem;
}

.credit{
    text-align: center;
    background:var(--main);
    color:#000;
    font-size: 2rem;
}

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


/* media queries */
@media(max-width:991px){
    html{
        font-size: 55%;
    }
    .header{
        padding:2rem;
    }
    section{
        padding:3rem 2rem;
    }
    .home #next-slide,
    .home #prev-slide{
        transform:translateY(0);
        top: 88%;
    }
    .home #prev-slide{
        left:auto;
        right: 8rem;
    }
}

@media(max-width:768px){

    #menu-btn{
        display: inline-block;
    }

    .header .navbar{
        position:absolute;
        top:99%;
        left:0;
        right:0;
        background:var(--main);
        border-top:1px solid rgba(0,0,0,0.1);
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
    }
    .header .navbar.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }

    .header .navbar a{
        margin: 1.5rem;
        padding:1.5rem;
        background:var(--Tusk);
        font-size: 2rem;
        display:block;
        border-radius: .5rem;
    }
}

@media(max-width:450px){
    html{
        font-size: 50%;
    }
    .home .slides-container .slide .content .slideimg img{
        display: none;
    }
    .home .slides-container .slide .content h3{
        font-size:1rem;
    }
    .story .box-container .box .img{
        width: 100%;
    }
}

main.js

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

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

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

let slides = document.querySelectorAll('.home .slides-container .slide');
let index = 0;

function next(){
    slides[index].classList.remove('active');
    index = (index + 1) % slides.length;
    slides[index].classList.add('active');
}

function prev(){
    slides[index].classList.remove('active');
    index = (index - 1 + slides.length) % slides.length;
    slides[index].classList.add('active');
}

var swiper = new Swiper('.roadmap-slider', {
    spaceBetween: 20,
    centeredSlides: true,
    autoplay: {
        delay:7500,
        disableOnInteraction: false,
    },
    loop:true,
    breakpoints:{
        0: {
            slidesPerView: 1,
        },
        640: {
            slidesPerView: 2,
        },
        768: {
            slidesPerView: 2,
        },
        1024: {
            slidesPerView: 3,
        },
    },
});