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">
    <meta name="description" content="description">
    <meta name="keywords" content="keywords">
    <title>Mitravel</title>
    <link rel="stylesheet" href="./css/video-js.min.css">
    <link rel="stylesheet" href="./css/fantasy.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/media.css">
</head>
<body>
    <!-- Menu -->
    <div class="menu">
        <button class="menu-close-btn">
            <span class="menu-close-line"></span>
            <span class="menu-close-line"></span>
        </button>
        <div class="menu-colomns">
            <h2 class="menu-colomns-title">Company</h2>
            <ul class="menu-colomns-list">
                <li class="menu-colomns-item"><a href="#!">About</a></li>
                <li class="menu-colomns-item"><a href="#!">Press</a></li>
                <li class="menu-colomns-item"><a href="#!">Blog</a></li>
                <li class="menu-colomns-item"><a href="#!">Careers</a></li>
                <li class="menu-colomns-item"><a href="#!">Security</a></li>
                <li class="menu-colomns-item"><a href="#!">Driver Centre</a></li>
            </ul>
        </div>
        <div class="menu-colomns">
            <h2 class="menu-colomns-title">Information</h2>
            <ul class="menu-colomns-list">
                <li class="menu-colomns-item"><a href="#!">Our Story</a></li>
                <li class="menu-colomns-item"><a href="#!">Recipes</a></li>
                <li class="menu-colomns-item"><a href="#!">Nutrition</a></li>
                <li class="menu-colomns-item"><a href="#!">Resources</a></li>
                <li class="menu-colomns-item"><a href="#!">Newsletter</a></li>
                <li class="menu-colomns-item"><a href="#!">Contact</a></li>
            </ul>
        </div>
        <div class="menu-colomns">
            <h2 class="menu-colomns-title">Information</h2>
            <ul class="menu-colomns-list">
                <li class="menu-colomns-item"><a href="#!">Customer service</a></li>
                <li class="menu-colomns-item"><a href="#!">Recommend a restaurant</a></li>
                <li class="menu-colomns-item"><a href="#!">Signup a restaurant</a></li>
                <li class="menu-colomns-item"><a href="#!">Jobs</a></li>
                <li class="menu-colomns-item"><a href="#!">Press</a></li>
                <li class="menu-colomns-item"><a href="#!">Terms of use</a></li>
            </ul>
        </div>
    </div>
    <!-- Site -->
    <div class="site-container no-scroll">
        <!-- Header -->
        <header class="header">
            <div class="container flex header-container">
                <div class="header-social flex">
                    <a href="#!" class="header-link link--facebook btn-hover-increase" target="_blank" aria-label="facebook"></a>
                    <a href="#!" class="header-link link--twitter btn-hover-increase" target="_blank" aria-label="twitter"></a>
                </div>
                <a href="#!" class="header-logo btn-hover-increase">Mitravel</a>
                <button class="btn-menu btn-hover-increase">
                    <span class="btn-menu-line"></span>
                    <span class="btn-menu-line"></span>
                </button>
            </div>
        </header>
        <!-- Main -->
        <main class="main">
            <!-- Intro -->
            <div class="intro">
                <div class="container intro-container">
                    <div class="intro-content">
                        <a href="#!" class="btn-base intro-content-link btn-hover-increase">New book</a>
                        <h1 class="intro-content-title">Mother Earth Hosts Our Travels</h1>
                        <p class="intro-content-desc">There are not many cities that have experienced such social and political extremes in recent history as Amsterdam. In the 20th century alone, Amsterdam faced the atrocities of war for the first time in 400 years, became the radical center of 1960s social movements and witnessed a complete</p>
                        <button class="btn-base intro-content-btn btn-hover-bias color-dawn">Buy The Book</button>
                    </div>
                    <div class="intro-stories flex">
                        <form action="./" class="intro-form flex">
                            <input type="search" class="intro-form-field" placeholder="Search stories">
                            <button type="submit" class="intro-form-btn btn-hover-increase" aria-label="Search"></button>
                        </form>
                        <!-- Slider main container -->
                        <div class="swiper intro-swiper">
                            <!-- Additional required wrapper -->
                            <div class="swiper-wrapper">
                            <!-- Slides -->
                            <div class="swiper-slide intro-slide-wrap">
                                <button class="intro-slide-play btn-play" data-path="video_01"></button>
                                <img src="./img/intro/slider/01.jpg" alt="#" class="intro-slide">
                                <div class="intro-slide-desc flex">
                                    <button class="btn-base intro-slide-text btn-play" data-path="video_01">wonderful moutain<button>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <button class="intro-slide-play btn-play" data-path="video_02"></button>
                                <img src="./img/intro/slider/02.jpg" alt="#" class="intro-slide">
                                <div class="intro-slide-desc flex">
                                    <button class="btn-base intro-slide-text btn-play" data-path="video_02">fragrant india<button>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <button class="intro-slide-play btn-play" data-path="video_03"></button>
                                <img src="./img/intro/slider/03.jpg" alt="#" class="intro-slide">
                                <div class="intro-slide-desc flex">
                                    <button class="btn-base intro-slide-text btn-play" data-path="video_03">sunny europe<button>
                                </div>
                            </div>
                            </div>
                            <!-- If we need navigation buttons -->
                            <div class="swiper-button-prev intro-swiper-button-prev btn-hover-increase"></div>
                            <div class="swiper-button-next intro-swiper-button-next btn-hover-increase"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Become -->
            <section class="become">
                <div class="container">
                    <h2 class="section-title become-title">Become A Travel Pro In One Easy Lesson</h2>
                    <div class="become-wrapper flex">
                        <div class="become-item">
                            <img src="./img/become/01.jpg" alt="#">
                            <a href="#!" class="become-item-title">Vacation Home Rental Success</a>
                        </div>
                        <div class="become-item">
                            <img src="./img/become/02.jpg" alt="#">
                            <a href="#!" class="become-item-title">Vacation Home Rental Success</a>
                        </div>
                        <div class="become-item">
                            <img src="./img/become/03.jpg" alt="#">
                            <a href="#!" class="become-item-title">Vacation Home Rental Success</a>
                        </div>
                        <div class="become-item">
                            <img src="./img/become/04.jpg" alt="#">
                            <a href="#!" class="become-item-title">Vacation Home Rental Success</a>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Featured Stories -->
            <section class="featured-stories">
                <div class="container featured-stories-container">
                    <h2 class="section-title featured-stories-title">Featured Stories</h2>
                    <div class="featured-stories-wrapper flex">
                        <div class="featured-stories-main-stories">
                            <a href="#!" class="btn-base main-stories-link btn-hover-bias color-dawn">Featured</a>
                            <h3 class="main-stories-title">How To Fly A Private Jet On Your Next Trip</h3>
                            <p class="main-stories-desc">The state of Utah in the United States is home to lots of beautiful National Parks, & Bryce Canyon National Park ranks as three of the most magnificent & awe inspiring.</p>
                            <a href="#!" class="btn-base main-stories-read btn-hover-bias color-turquoise">Read Article</a>
                        </div>
                        <ul class="featured-stories-list">
                            <li class="featured-stories-item flex">
                                <div class="featured-stories-item-img">
                                    <img src="./img/featured-stories/autors/01.jpg" alt="#!">
                                </div>
                                <div class="featured-stories-item-desc">
                                    <a href=#! class="featured-stories-item-title">Do A Sporting Stag Do In Birmingham</a>
                                    <time datetime="2019-12-13 00:00" class="featured-stories-item-data">13 Dec 2019</time>
                                </div>
                            </li>
                            <li class="featured-stories-item flex">
                                <div class="featured-stories-item-img">
                                    <img src="./img/featured-stories/autors/02.jpg" alt="#!">
                                </div>
                                <div class="featured-stories-item-desc">
                                    <a href=#! class="featured-stories-item-title">From Wetlands To Canals And Dams Amsterdam Is Alive</a>
                                    <time datetime="2019-12-13 00:00" class="featured-stories-item-data">13 Dec 2019</time>
                                </div>
                            </li>
                            <li class="featured-stories-item flex">
                                <div class="featured-stories-item-img">
                                    <img src="./img/featured-stories/autors/03.jpg" alt="#!">
                                </div>
                                <div class="featured-stories-item-desc">
                                    <a href=#! class="featured-stories-item-title">Stu Unger Rise And Fall Of A Poker Genius</a>
                                    <time datetime="2019-12-13 00:00" class="featured-stories-item-data">13 Dec 2019</time>
                                </div>
                            </li>
                            <li class="featured-stories-item flex">
                                <div class="featured-stories-item-img">
                                    <img src="./img/featured-stories/autors/04.jpg" alt="#!">
                                </div>
                                <div class="featured-stories-item-desc">
                                    <a href=#! class="featured-stories-item-title">New Ideas For A Low Cost Vacation On Water</a>
                                    <time datetime="2019-12-13 00:00" class="featured-stories-item-data">13 Dec 2019</time>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
            <!-- Featured Videos -->
            <section class="featured-videos">
                <div class="container">
                    <h2 class="section-title featured-videos-title">Featured Videos</h2>
                    <p class="featured-videos-title-desc">The state of Utah in the United States is home to lots of beautiful National Parks, & Bryce Canyon National Park ranks as three of the most magnificent & awe inspiring.</p>
                </div>
                <!-- Slider main container -->
                <div class="swiper video-swiper">
                    <!-- Additional required wrapper -->
                    <div class="swiper-wrapper video-swiper-wrap">
                        <!-- Slides -->
                        <div class="swiper-slide video-slide">
                            <div class="video-slide-img">
                                <img src="./img/featured-videos/slider/01.jpg" alt="#">
                            </div>
                            <h3 class="video-slide-title">A Guide To Rocky Mountain Vacations</h3>
                            <button class="video-slide-play btn-play" data-path="video_04"></button>
                        </div>
                        <div class="swiper-slide video-slide">
                            <div class="video-slide-img">
                                <img src="./img/featured-videos/slider/02.jpg" alt="#">
                            </div>
                            <h3 class="video-slide-title">A Guide To Rocky Mountain Vacations</h3>
                            <button class="video-slide-play btn-play" data-path="video_05"></button>
                        </div>
                        <div class="swiper-slide video-slide">
                            <div class="video-slide-img">
                                <img src="./img/featured-videos/slider/03.jpg" alt="#">
                            </div>
                            <h3 class="video-slide-title">A Guide To Rocky Mountain Vacations</h3>
                            <button class="video-slide-play btn-play" data-path="video_06"></button>
                        </div>
                        <div class="swiper-slide video-slide">
                            <div class="video-slide-img">
                                <img src="./img/featured-videos/slider/04.jpg" alt="#">
                            </div>
                            <h3 class="video-slide-title">A Guide To Rocky Mountain Vacations</h3>
                            <button class="video-slide-play btn-play" data-path="video_07"></button>
                        </div>
                    </div>
                    <!-- If we need navigation buttons -->
                        <div class="swiper-button-prev video-swiper-button-prev btn-hover-increase"></div>
                        <div class="swiper-button-next video-swiper-button-next btn-hover-increase"></div>
                </div>
            </section>
            <!-- Sign Up -->
            <section class="sign-up">
                <div class="container sign-up-container">
                    <div class="sing-up-content">
                        <h2 class="section-title sign-up-title">Sign Up Our Newsletter</h2>
                        <p class="sign-up-desc">The state of Utah in the United States is home to lots of beautiful National Parks, & Bryce Canyon National Park ranks as three of the most magnificent.</p>
                    </div>
                    <form action="" class="sign-up-form">
                        <input type="text" class="sign-up-form-field" placeholder="Name"></input>
                        <input type="email" class="sign-up-form-field" placeholder="Email"></input>
                        <input type="tel" class="sign-up-form-field" placeholder="Phone Number"></input>
                        <button class="btn-base sign-up-form-btn color-turquoise">Sign Up Now</button>
                    </form>
                </div>
            </section>
            <!-- Inspirations -->
            <section class="inspirations">
                <div class="container">
                    <h2 class="section-title inspirations-title">Inspirations</h2>
                    <p class="inspirations-desc">The state of Utah in the United States is home to lots of beautiful National Parks, & Bryce Canyon National Park ranks as three of the most magnificent & awe inspiring.</p>
                    <div class="grid inspirations-grid">
                        <div class="inspirations-item inspirations-item-wide">
                            <div class="inspirations-item-img">
                                <img src="./img/inspirations/item-01/bg.jpg" alt="#">
                            </div>
                            <div class="inspirations-item-content">
                                <p class="inspirations-item-desc">Destinations</p>
                                <h3 class="inspirations-item-title">A Guide To Rocky Mountain Vacations</h3>
                            </div>
                            <div class="inspirations-item-autors">
                                <div class="inspirations-item-autor">
                                    <img src="./img/inspirations/item-01/autors/01.jpg" alt="#">
                                </div>
                                <div class="inspirations-item-autor autor-second">
                                    <img src="./img/inspirations/item-01/autors/02.jpg" alt="#">
                                </div>
                                <div class="inspirations-item-autor autor-next">
                                    <img src="./img/inspirations/item-01/autors/03.jpg" alt="#">
                                </div>
                            </div>
                            <div class="inspirations-item-hover flex">
                                <p class="inspirations-item-hover-desc">Andre Gide</p>
                                <h3 class="inspirations-item-hover-title">Man cannot discover new oceans unless he has the courage to lose sight of the shore.</h3>
                            </div>
                        </div>
                        <div class="inspirations-item">
                            <div class="inspirations-item-img">
                                <img src="./img/inspirations/item-02/bg.jpg" alt="#">
                            </div>
                            <div class="inspirations-item-content">
                                <p class="inspirations-item-desc">Destinations</p>
                                <h3 class="inspirations-item-title">Traveling To Barcelona</h3>
                            </div>
                            <div class="inspirations-item-autors">
                                <div class="inspirations-item-autor">
                                    <img src="./img/inspirations/item-02/autors/01.jpg" alt="#">
                                </div>
                                <div class="inspirations-item-autor autor-second">
                                    <img src="./img/inspirations/item-02/autors/02.jpg" alt="#">
                                </div>
                            </div>
                            <div class="inspirations-item-hover flex">
                                <p class="inspirations-item-hover-desc">Andre Gide</p>
                                <h3 class="inspirations-item-hover-title">Man cannot discover new oceans unless he has the courage to lose sight of the shore.</h3>
                            </div>
                        </div>
                        <div class="inspirations-item inspirations-item-high">
                            <div class="inspirations-item-img">
                                <img src="./img/inspirations/item-03/bg.jpg" alt="#">
                            </div>
                            <div class="inspirations-item-content">
                                <p class="inspirations-item-desc">Destinations</p>
                                <h3 class="inspirations-item-title">Party Jokes Startling But Unnecessary</h3>
                            </div>
                            <div class="inspirations-item-autors">
                                <div class="inspirations-item-autor">
                                    <img src="./img/inspirations/item-03/autors/01.jpg" alt="#">
                                </div>
                                <div class="inspirations-item-autor autor-second">
                                    <img src="./img/inspirations/item-03/autors/02.jpg" alt="#">
                                </div>
                            </div>
                            <div class="inspirations-item-hover flex">
                                <p class="inspirations-item-hover-desc">Andre Gide</p>
                                <h3 class="inspirations-item-hover-title">Man cannot discover new oceans unless he has the courage to lose sight of the shore.</h3>
                            </div>
                        </div>
                        <div class="inspirations-item inspirations-item-high">
                            <div class="inspirations-item-img">
                                <img src="./img/inspirations/item-04/bg.jpg" alt="#">
                            </div>
                            <div class="inspirations-item-content">
                                <p class="inspirations-item-desc">Destinations</p>
                                <h3 class="inspirations-item-title">Maui By Air The Best Way Around The Island</h3>
                            </div>
                            <div class="inspirations-item-autors">
                                <div class="inspirations-item-autor">
                                    <img src="./img/inspirations/item-04/autors/01.jpg" alt="#">
                                </div>
                                <div class="inspirations-item-autor autor-second">
                                    <img src="./img/inspirations/item-04/autors/02.jpg" alt="#">
                                </div>
                            </div>
                            <div class="inspirations-item-hover flex">
                                <p class="inspirations-item-hover-desc">Andre Gide</p>
                                <h3 class="inspirations-item-hover-title">Man cannot discover new oceans unless he has the courage to lose sight of the shore.</h3>
                            </div>
                        </div>
                        <div class="inspirations-item inspirations-item-high">
                            <div class="inspirations-item-img">
                                <img src="./img/inspirations/item-05/bg.jpg" alt="#">
                            </div>
                            <div class="inspirations-item-content">
                                <p class="inspirations-item-desc">Destinations</p>
                                <h3 class="inspirations-item-title">Traveling To Barcelona</h3>
                            </div>
                            <div class="inspirations-item-autors">
                                <div class="inspirations-item-autor">
                                    <img src="./img/inspirations/item-05/autors/01.jpg" alt="#">
                                </div>
                                <div class="inspirations-item-autor autor-second">
                                    <img src="./img/inspirations/item-05/autors/02.jpg" alt="#">
                                </div>
                            </div>
                            <div class="inspirations-item-hover flex">
                                <p class="inspirations-item-hover-desc">Andre Gide</p>
                                <h3 class="inspirations-item-hover-title">Man cannot discover new oceans unless he has the courage to lose sight of the shore.</h3>
                            </div>
                        </div>
                        <div class="inspirations-item inspirations-item-high">
                            <div class="inspirations-item-img">
                                <img src="./img/inspirations/item-08/bg.jpg" alt="#">
                            </div>
                            <div class="inspirations-item-content">
                                <p class="inspirations-item-desc">Destinations</p>
                                <h3 class="inspirations-item-title">Party Jokes Startling But Unnecessary</h3>
                            </div>
                            <div class="inspirations-item-autors">
                                <div class="inspirations-item-autor">
                                    <img src="./img/inspirations/item-08/autors/01.jpg" alt="#">
                                </div>
                                <div class="inspirations-item-autor autor-second">
                                    <img src="./img/inspirations/item-08/autors/02.jpg" alt="#">
                                </div>
                            </div>
                            <div class="inspirations-item-hover flex">
                                <p class="inspirations-item-hover-desc">Andre Gide</p>
                                <h3 class="inspirations-item-hover-title">Man cannot discover new oceans unless he has the courage to lose sight of the shore.</h3>
                            </div>
                        </div>
                        <div class="inspirations-item inspirations-item-high">
                            <div class="inspirations-item-img">
                                <img src="./img/inspirations/item-09/bg.jpg" alt="#">
                            </div>
                            <div class="inspirations-item-content">
                                <p class="inspirations-item-desc">Destinations</p>
                                <h3 class="inspirations-item-title">Maui By Air The Best Way Around The Island</h3>
                            </div>
                            <div class="inspirations-item-autors">
                                <div class="inspirations-item-autor">
                                    <img src="./img/inspirations/item-09/autors/01.jpg" alt="#">
                                </div>
                                <div class="inspirations-item-autor autor-second">
                                    <img src="./img/inspirations/item-09/autors/02.jpg" alt="#">
                                </div>
                            </div>
                            <div class="inspirations-item-hover flex">
                                <p class="inspirations-item-hover-desc">Andre Gide</p>
                                <h3 class="inspirations-item-hover-title">Man cannot discover new oceans unless he has the courage to lose sight of the shore.</h3>
                            </div>
                        </div>
                        <div class="inspirations-item inspirations-item-high">
                            <div class="inspirations-item-img">
                                <img src="./img/inspirations/item-10/bg.jpg" alt="#">
                            </div>
                            <div class="inspirations-item-content">
                                <p class="inspirations-item-desc">Destinations</p>
                                <h3 class="inspirations-item-title">Traveling To Barcelona</h3>
                            </div>
                            <div class="inspirations-item-autors">
                                <div class="inspirations-item-autor">
                                    <img src="./img/inspirations/item-10/autors/01.jpg" alt="#">
                                </div>
                                <div class="inspirations-item-autor autor-second">
                                    <img src="./img/inspirations/item-10/autors/02.jpg" alt="#">
                                </div>
                            </div>
                            <div class="inspirations-item-hover flex">
                                <p class="inspirations-item-hover-desc">Andre Gide</p>
                                <h3 class="inspirations-item-hover-title">Man cannot discover new oceans unless he has the courage to lose sight of the shore.</h3>
                            </div>
                        </div>
                        <div class="inspirations-item">
                            <div class="inspirations-item-img">
                                <img src="./img/inspirations/item-06/bg.jpg" alt="#">
                            </div>
                            <div class="inspirations-item-content">
                                <p class="inspirations-item-desc">Destinations</p>
                                <h3 class="inspirations-item-title">Traveling To Barcelona</h3>
                            </div>
                            <div class="inspirations-item-autors">
                                <div class="inspirations-item-autor">
                                    <img src="./img/inspirations/item-06/autors/01.jpg" alt="#">
                                </div>
                                <div class="inspirations-item-autor autor-second">
                                    <img src="./img/inspirations/item-06/autors/02.jpg" alt="#">
                                </div>
                            </div>
                            <div class="inspirations-item-hover flex">
                                <p class="inspirations-item-hover-desc">Andre Gide</p>
                                <h3 class="inspirations-item-hover-title">Man cannot discover new oceans unless he has the courage to lose sight of the shore.</h3>
                            </div>
                        </div>
                        <div class="inspirations-item inspirations-item-wide">
                            <div class="inspirations-item-img">
                                <img src="./img/inspirations/item-07/bg.jpg" alt="#">
                            </div>
                            <div class="inspirations-item-content">
                                <p class="inspirations-item-desc">Destinations</p>
                                <h3 class="inspirations-item-title">A Guide To Rocky Mountain Vacations</h3>
                            </div>
                            <div class="inspirations-item-autors">
                                <div class="inspirations-item-autor">
                                    <img src="./img/inspirations/item-07/autors/01.jpg" alt="#">
                                </div>
                                <div class="inspirations-item-autor autor-second">
                                    <img src="./img/inspirations/item-07/autors/02.jpg" alt="#">
                                </div>
                                <div class="inspirations-item-autor autor-next">
                                    <img src="./img/inspirations/item-07/autors/03.jpg" alt="#">
                                </div>
                            </div>
                            <div class="inspirations-item-hover flex">
                                <p class="inspirations-item-hover-desc">Andre Gide</p>
                                <h3 class="inspirations-item-hover-title">Man cannot discover new oceans unless he has the courage to lose sight of the shore.</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <!-- Footer -->
        <footer class="footer">
            <div class="container flex footer-container">
                <div class="footer-colomns">
                    <h2 class="footer-colomns-title">Company</h2>
                    <ul class="footer-colomns-list">
                        <li class="footer-colomns-item"><a href="#!">About</a></li>
                        <li class="footer-colomns-item"><a href="#!">Press</a></li>
                        <li class="footer-colomns-item"><a href="#!">Blog</a></li>
                        <li class="footer-colomns-item"><a href="#!">Careers</a></li>
                        <li class="footer-colomns-item"><a href="#!">Security</a></li>
                        <li class="footer-colomns-item"><a href="#!">Driver Centre</a></li>
                    </ul>
                </div>
                <div class="footer-colomns">
                    <h2 class="footer-colomns-title">Information</h2>
                    <ul class="footer-colomns-list">
                        <li class="footer-colomns-item"><a href="#!">Our Story</a></li>
                        <li class="footer-colomns-item"><a href="#!">Recipes</a></li>
                        <li class="footer-colomns-item"><a href="#!">Nutrition</a></li>
                        <li class="footer-colomns-item"><a href="#!">Resources</a></li>
                        <li class="footer-colomns-item"><a href="#!">Newsletter</a></li>
                        <li class="footer-colomns-item"><a href="#!">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-colomns">
                    <h2 class="footer-colomns-title">Information</h2>
                    <ul class="footer-colomns-list">
                        <li class="footer-colomns-item"><a href="#!">Customer service</a></li>
                        <li class="footer-colomns-item"><a href="#!">Recommend a restaurant</a></li>
                        <li class="footer-colomns-item"><a href="#!">Signup a restaurant</a></li>
                        <li class="footer-colomns-item"><a href="#!">Jobs</a></li>
                        <li class="footer-colomns-item"><a href="#!">Press</a></li>
                        <li class="footer-colomns-item"><a href="#!">Terms of use</a></li>
                    </ul>
                </div>
                <div class="footer-colomns">
                    <h2 class="footer-colomns-title">Subscribe Now</h2>
                    <form action="./" class="footer-colomns-form">
                        <input type="email" class="footer-colomns-field" placeholder="Your email">
                        <button class="btn-base footer-colomns-btn btn-hover-bias color-turquoise">Subscribe Now</button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="container flex footer-bottom-container">
                    <p class="footer-copy">© 2019 Mass Impressions. Designed by Tran Mau Tri Tam for Mass Impressions. All rights reserved.</p>
                    <ul class="footer-bottom-list flex">
                        <li class="footer-bottom-item"><a href="#!">Terms of Service</a></li>
                        <li class="footer-bottom-item"><a href="#!">Privacy Policy</a></li>
                    </ul>
                </div>
            </div>
        </footer>
    </div>
    
    <div class="modals">
        <div class="modal-overlay">
                <div class="video-wrap modal" data-target="video_01">
                    <video class="video-js vjs-theme-fantasy" controls preload="metadata">
                        <source src="./video/01.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="video-wrap modal" data-target="video_02">
                    <video class="video-js vjs-theme-fantasy" controls preload="metadata">
                        <source src="./video/02.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="video-wrap modal" data-target="video_03">
                    <video class="video-js vjs-theme-fantasy" controls preload="metadata">
                        <source src="./video/03.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="video-wrap modal" data-target="video_04">
                    <video class="video-js vjs-theme-fantasy" controls preload="metadata">
                        <source src="./video/04.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="video-wrap modal" data-target="video_05">
                    <video class="video-js vjs-theme-fantasy" controls preload="metadata">
                        <source src="./video/05.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="video-wrap modal" data-target="video_06">
                    <video class="video-js vjs-theme-fantasy" controls preload="metadata">
                        <source src="./video/06.mp4" type="video/mp4">
                    </video>
                </div>
                <div class="video-wrap modal" data-target="video_07">
                    <video class="video-js vjs-theme-fantasy" controls preload="metadata">
                        <source src="./video/07.mp4" type="video/mp4">
                    </video>
                </div>
        </div>
    </div>


    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/video.min.js"></script>
    <script src="./js/main.js"></script>
</body>
</html>