index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Travel Website | Home</title>
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Montserrat&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="./style.css" />
</head>

<body data-barba="wrapper">
    <header class="nav-header">
        <h1><a href="./index.html" id="logo">days_</a></h1>
        <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
            <div class="line4"></div>
        </div>
    </header>
    <main data-barba="container" data-barba-namespace="home">
        <section class="mountain slide">
            <div class="hero-img">
                <img src="./img/forest.png" alt="forest image" />
                <div class="reveal-img"></div>
            </div>
            <div class="hero-desc">
                <div class="title">
                    <h2>
                        Freedom at your <span class="mountain-span">fingertips.</span>
                    </h2>
                    <div class="title-swipe t-swipe1"></div>
                </div>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam
                    asperiores ad laboriosam iure rem. Voluptates pariatur quo iusto non
                    deleniti.
                </p>
                <a href="./fashion/index.html" class="explore fashion-exp">Explore</a>
                <div class="reveal-text"></div>
            </div>
        </section>
        <section class="hike slide">
            <div class="hero-img">
                <img src="./img/hike.png" alt="hike image" />
                <div class="reveal-img"></div>
            </div>
            <div class="hero-desc">
                <div class="title">
                    <h2>Freedom at your <span class="hike-span">fingertips.</span></h2>
                    <div class="title-swipe t-swipe2"></div>
                </div>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam
                    asperiores ad laboriosam iure rem. Voluptates pariatur quo iusto non
                    deleniti.
                </p>
                <a href="./fashion/index.html" class="explore fashion-exp">Explore</a>
                <div class="reveal-text"></div>
            </div>
        </section>
        <section class="fashion slide">
            <div class="hero-img">
                <img src="./img/fashion.png" alt="fashion image" />
                <div class="reveal-img"></div>
            </div>
            <div class="hero-desc">
                <div class="title">
                    <h2>
                        Freedom at your <span class="fashion-span">fingertips.</span>
                    </h2>
                    <div class="title-swipe t-swipe3"></div>
                </div>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam
                    asperiores ad laboriosam iure rem. Voluptates pariatur quo iusto non
                    deleniti.
                </p>
                <a href="./fashion/index.html" class="explore fashion-exp">Explore</a>
                <div class="reveal-text"></div>
            </div>
        </section>
    </main>
    <nav class="nav-bar">
        <ul class="nav-links">
            <h3>Twitter</h3>
            <h3>Youtube</h3>
            <h3>Instragram</h3>
        </ul>
        <div class="contact">
            <h2>Stay in touch.</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis dolorem
                praesentium ea amet error quidem natus. Magnam explicabo sed tenetur?
            </p>
        </div>
    </nav>
    <div class="cursor">
        <span class="cursor-text"></span>
    </div>
    <div class="swipe swipe1"></div>
    <div class="swipe swipe2"></div>
    <div class="swipe swipe3"></div>
    <script src="https://unpkg.com/@barba/core"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"
        integrity="sha256-2p2tRZlPowp3P/04Pw2rqVCSbhyV/IB7ZEVUglrDS/c=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"
        integrity="sha256-XBVALc3QsDSQiDtiaBwNZ2rxCJTHzlUhhlDQ84J8bw8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"
        integrity="sha256-+9YNuItWuR4sbqeaNiJOxG0BvptYz4fbUXbIZoH5Jwo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"
        integrity="sha256-3arngJBQR3FTyeRtL3muAGFaGcL8iHsubYOqq48mBLw=" crossorigin="anonymous"></script>
    <script src="./app.js"></script>
</body>

</html>