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" />
    <link rel="stylesheet" href="index.css" />
    <link rel="icon" href="./Images/banner.jpg" />
    <script src="https://kit.fontawesome.com/9603a582d3.js" crossorigin="anonymous"></script>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Dust Road Co.</title>
</head>

<body>
    <!-- Pre-Loader Start -->
    <section>
        <div id="preloader">
            <div id="ctn-preloader" class="ctn-preloader">
                <div class="animation-preloader">
                    <div class="spinner"></div>
                    <div class="txt-loading">
                        <span data-text-preloader="L" class="letters-loading"> L </span>

                        <span data-text-preloader="O" class="letters-loading"> O </span>

                        <span data-text-preloader="A" class="letters-loading"> A </span>

                        <span data-text-preloader="D" class="letters-loading"> D </span>

                        <span data-text-preloader="I" class="letters-loading"> I </span>

                        <span data-text-preloader="N" class="letters-loading"> N </span>

                        <span data-text-preloader="G" class="letters-loading"> G </span>
                    </div>
                </div>
                <div class="loader-section section-left"></div>
                <div class="loader-section section-right"></div>
            </div>
        </div>
    </section>
    <!-- Pre-Loader End -->
    <header>
        <a href="#" class="logo">
            <img src="./Images/banner.jpg" class="fav" />
        </a>
        <ul id="navbarNav" class="list">
            <!-- <i class="fa fa-times"onclick="hideMenu()"></i> -->
            <li><a href="index.html">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#contact">Contact </a></li>
        </ul>
        <!-- <i class="fa fa-bars" onclick="showMenu()"></i> -->
    </header>

    <section class="banner"></section>
    <div class="info">
        A Step <span>Towards Bright Future!!</span>
        <br />
        <button type="" name="button" class="start">
            <a href="sawo.html">Get Started</a>
        </button>
    </div>

    <!-- Testimonial Slider -->
    <section class="testimonial-section">
        <h1 class="head">WHAT OUR USERS SAY ABOUT OUR SERVICES?</h1>
        <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active" data-bs-interval="10000">
                    <img src="Images/img-2-modified.png" class="d-block">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Person 1</h5>
                        <p class="text-box">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptatum
                            dolores
                            blanditiis facere
                            consequatur illo expedita alias, eligendi, magnam labore error ipsam placeat eum veniam
                            nesciunt
                            fuga
                            ratione hic autem!"</p>
                    </div>
                </div>
                <div class="carousel-item" data-bs-interval="2000">
                    <img src="Images/img-1-modified.png" class="d-block">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Person 2</h5>
                        <p class="text-box">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
                            repudiandae!
                            Repudiandae
                            quod eaque vitae
                            quas nemo, cum fugiat consequatur. Quo quas minima laborum animi tempore maiores ducimus
                            perspiciatis, porro
                            qui."</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="Images/img-4-modified.png" class="d-block">
                    <div class="carousel-caption d-none d-md-block">
                        <h5>Person 3</h5>
                        <p class="text-box">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam dolorum,
                            perferendis sed
                            voluptates omnis
                            asperiores. Optio voluptatum, aut officia possimus dolores, omnis obcaecati nihil cupiditate
                            at
                            ipsum
                            officiis architecto sint!"</p>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
                data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"
                data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </section>
    <!-- FOOTER -->

    <footer>
        <div class="content">
            <h2 class="head-1">About</h2>
            <p class="about">
                Dust Car Co.is a step towards sustainable <br />environment. With the
                to help users find <br />car & bike pool possibilities, thereby
                <br />reducing traffic & commute costs.
            </p>

            <div class="explore">
                <h2 class="ex">Explore</h2>

                <ul class="serv-list">
                    <li><a href="#">Car Pooling</a></li>
                    <li><a href="#">Bike Pooling</a></li>
                    <li><a href="#">We are hiring !</a></li>
                </ul>
            </div>

            <!-- SOCIAL MEDIA -->
            <div class="social">
                <h2 class="follow">Follow Us</h2>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-facebook"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
            </div>

            <!--   NEWLETTER  -->
            <form action="" class="newsletter" id="contact">
                <h2 class="news">Subscribe Our Newsletter</h2>
                <p class="sub">Get frequent updates from us .</p>
                <div class="newsletter-box">
                    <input class="emailbox" type="email" name="" value="" placeholder="Enter your email id" />
                    <button type="button" name="button" class="letter">
                        Subscribe
                    </button>
                </div>
            </form>
        </div>

        <!-- Footer 2 -->
        <div class="foot2">
            <p class="f2" style="margin-bottom: 0px;">
                Made with 💛 & ☕ by <span>Sandhya Agarwal</span> | ©<span id="year"></span>
                All rights reserved<br />
            </p>
        </div>
    </footer>

    <!-- Sticky navbar -->
    <script type="text/javascript">
        window.addEventListener('scroll', function () {
            var header = document.querySelector('header');
            header.classList.toggle('sticky', window.scrollY > 0);
        });

        // Pre-Loader Logic
        $(document).ready(function () {
            setTimeout(function () {
                $('#ctn-preloader').addClass('loaded');
                $('body').removeClass('no-scroll-y');
                if ($('#ctn-preloader').hasClass('loaded')) {
                    $('#preloader')
                        .delay(1000)
                        .queue(function () {
                            $(this).remove();
                        });
                }
            }, 3000);
        });
        // Dynamic copyright year

        const yearEl = document.getElementById('year');
        const today = new Date();
        yearEl.innerText = today.getFullYear();
    </script>

    <!--JAVASCRIPT FOR TOGGLE MENU -->
    <!-- <script>
  var navbarNav =document.getElementById("navbarNav");
  function showMenu(){
      navbarNav.style.right="0";
  }
  function hideMenu(){
      navbarNav.style.right="-400px";
  }
</script> -->
</body>

</html>