hotels.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
        crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <!-- Header Start -->

    <header id="header">
        <div class="container-fluid blue position-relative">
            <div class="container">
                <div class="row header-top text-white p-0">
                    <div class="col-8 d-flex align-items-center">
                        <a href="#" class="mr-3">MY ACCOUNT</a>
                        <div class="dropdown-lang">
                            <a href="3" class="dropbtn">ENGLISH</a>
                            <div class="dropdown-content">
                                <ul class="p-0 d-flex flex-column align-items-center">
                                    <li>
                                        <a href="#">Azerbaijan</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">Deutsch</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">English</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">Espanol</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">Francais</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">Italino</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">Magyar</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">Nederlands</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">Norsk</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">Polski</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">Portugules</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">Suomi</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">Svenska</a>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <i class="fas fa-sort-down mb-1 ml-1"></i>
                    </div>
                    <div class="col-4 d-flex justify-content-end align-items-center">
                        <a href="#" class="bg-warning purchase mr-3">
                            <i class="fas fa-lock fa-xs"></i> PURCHASE</a>
                        <a href="#" class="mr-3">LOGIN</a>
                        <a href="#" class="mr-3">SIGNUP</a>
                        <div class="dropdown-currency">
                            <a href="3" class="dropbtn">USD</a>
                            <div class="dropdown-content">
                                <ul class="p-0 d-flex flex-column align-items-center">
                                    <li>
                                        <a href="#">AZN</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">BRL</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">USD</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">CAD</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">CHF</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">CNY</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">CZK</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">DKK</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">EUR</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">GBP</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">HKD</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">HUF</a>
                                    </li>
                                    <hr>
                                    <li>
                                        <a href="#">IDR</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <i class="fas fa-sort-down mb-1 ml-1"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="container d-none d-lg-block">
            <div class="row header-bottom py-lg-3">
                <div class="col-2 d-flex align-items-center">
                    <div class="logo">
                        <img src="images/logo (1).png" alt="">
                    </div>
                </div>
                <div class="col-10 d-none d-lg-block p-0">
                    <ul class="nav d-flex justify-content-end">
                        <li class="nav-item">
                            <div class="dropdown-link">
                                <a href="#" class="dropbtn nav-link">Home</a>
                                <div class="dropdown-content">
                                    <ul class="p-0 d-flex flex-column align-items-center">
                                        <li>
                                            <a href="#">Home Layout 1</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Home Layout 2</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Home Layout 3</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Home Layout 4</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Home Layout 5</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Home Layout 6</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Home Layout 7</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="dropdown-link">
                                <a href="hotels.html" class="dropbtn nav-link">Hotels</a>
                                <div class="dropdown-content">
                                    <ul class="p-0 d-flex flex-column align-items-center">
                                        <li>
                                            <a href="#">Home Hotels</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">List View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Grid View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Block View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Detailed</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Booking</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Thank You</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="dropdown-link">
                                <a href="#" class="dropbtn nav-link">Flights</a>
                                <div class="dropdown-content">
                                    <ul class="p-0 d-flex flex-column align-items-center">
                                        <li>
                                            <a href="#">Home Flight</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">List View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Grid View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Block View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Detailed</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Booking</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Thank You</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="dropdown-link">
                                <a href="#" class="dropbtn nav-link">Cars</a>
                                <div class="dropdown-content">
                                    <ul class="p-0 d-flex flex-column align-items-center">
                                        <li>
                                            <a href="#">Home Cars</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">List View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Grid View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Block View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Detailed</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Booking</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Thank You</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="dropdown-link">
                                <a href="#" class="dropbtn nav-link">Cruises</a>
                                <div class="dropdown-content">
                                    <ul class="p-0 d-flex flex-column align-items-center">
                                        <li>
                                            <a href="#">Home Cruises</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">List View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Grid View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Block View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Detailed</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Booking</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Thank You</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="dropdown-link">
                                <a href="#" class="dropbtn nav-link">Tour</a>
                                <div class="dropdown-content">
                                    <ul class="p-0 d-flex flex-column align-items-center">
                                        <li>
                                            <a href="#">Home Tour</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">List View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Grid View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Block View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Detailed</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Booking</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Thank You</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="dropdown-link">
                                <a href="#" class="dropbtn nav-link">Pages</a>
                                <div class="dropdown-content">
                                    <ul class="p-0 d-flex flex-column align-items-center">
                                        <li>
                                            <a href="#">Home Pages</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">List View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Grid View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Block View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Detailed</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Booking</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Thank You</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="dropdown-link">
                                <a href="#" class="dropbtn nav-link">ShortCodes</a>
                                <div class="dropdown-content">
                                    <ul class="p-0 d-flex flex-column align-items-center">
                                        <li>
                                            <a href="#">Home ShortCodes</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">List View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Grid View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Block View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Detailed</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Booking</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Thank You</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <div class="dropdown-link">
                                <a href="#" class="dropbtn nav-link">Bonus</a>
                                <div class="dropdown-content">
                                    <ul class="p-0 d-flex flex-column align-items-center">
                                        <li>
                                            <a href="#">Home Bonus</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">List View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Grid View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Block View</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Detailed</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Booking</a>
                                        </li>
                                        <hr>
                                        <li>
                                            <a href="#">Thank You</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container-fluid d-block d-lg-none">
            <div class="row">
                <div class="col-2 d-flex align-items-center">
                    <div class="logo">
                        <img src="images/logo (1).png" alt="">
                    </div>
                </div>
                <div class="col-10 d-lg-none d-flex justify-content-end p-0">
                    <i class="fas fa-bars fa-lg d-flex justify-content-center align-items-center"></i>
                </div>
            </div>
        </div>
        <div class="container-fluid menu-mobil">
            <div class="row d-block d-lg-none">
                <ul class="list-group">
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href=""> Home</a>
                        <span class="badge badge-primary badge-pill">+</span>
                    </li>
                    <ul class="list-group sub-menu">
                        <li class="list-group-item">
                            <a href="#">Home Layout 1</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Home Layout 2</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Home Layout 3</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Home Layout 4</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Home Layout 5</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Home Layout 6</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Home Layout 7</a>
                        </li>
                    </ul>

                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="">Hotels</a>
                        <span class="badge badge-primary badge-pill">+</span>
                    </li>
                    <ul class="list-group sub-menu">
                        <li class="list-group-item">
                            <a href="#">Hotel Layout 1</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Hotel Layout 2</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Hotel Layout 3</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Hotel Layout 4</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Hotel Layout 5</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Hotel Layout 6</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Hotel Layout 7</a>
                        </li>
                    </ul>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="">Flights</a>
                        <span class="badge badge-primary badge-pill">+</span>
                    </li>
                    <ul class="list-group sub-menu">
                        <li class="list-group-item">
                            <a href="#">Flights Layout 1</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Flights Layout 2</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Flights Layout 3</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Flights Layout 4</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Flights Layout 5</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Flights Layout 6</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Flights Layout 7</a>
                        </li>
                    </ul>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="">Cars</a>
                        <span class="badge badge-primary badge-pill">+</span>
                    </li>
                    <ul class="list-group sub-menu">
                        <li class="list-group-item">
                            <a href="#">Cars Layout 1</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Cars Layout 2</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Cars Layout 3</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Cars Layout 4</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Cars Layout 5</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Cars Layout 6</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Cars Layout 7</a>
                        </li>
                    </ul>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="">Cruises</a>
                        <span class="badge badge-primary badge-pill">+</span>
                    </li>
                    <ul class="list-group sub-menu">
                        <li class="list-group-item">
                            <a href="#">Cruises Layout 1</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Cruises Layout 2</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Cruises Layout 3</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Cruises Layout 4</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Cruises Layout 5</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Cruises Layout 6</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Cruises Layout 7</a>
                        </li>
                    </ul>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="">Tour</a>
                        <span class="badge badge-primary badge-pill">+</span>
                    </li>
                    <ul class="list-group sub-menu">
                        <li class="list-group-item">
                            <a href="#">Tour Layout 1</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Tour Layout 2</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Tour Layout 3</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Tour Layout 4</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Tour Layout 5</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Tour Layout 6</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Tour Layout 7</a>
                        </li>
                    </ul>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="">Pages</a>
                        <span class="badge badge-primary badge-pill">+</span>
                    </li>
                    <ul class="list-group sub-menu">
                        <li class="list-group-item">
                            <a href="#">Pages Layout 1</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Pages Layout 2</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Pages Layout 3</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Pages Layout 4</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Pages Layout 5</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Pages Layout 6</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Pages Layout 7</a>
                        </li>
                    </ul>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="">ShortCodes</a>
                        <span class="badge badge-primary badge-pill">+</span>
                    </li>
                    <ul class="list-group sub-menu">
                        <li class="list-group-item">
                            <a href="#">ShortCodes Layout 1</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">ShortCodes Layout 2</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">ShortCodes Layout 3</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">ShortCodes Layout 4</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">ShortCodes Layout 5</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">ShortCodes Layout 6</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">ShortCodes Layout 7</a>
                        </li>
                    </ul>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="">Bonus</a>
                        <span class="badge badge-primary badge-pill">+</span>
                    </li>
                    <ul class="list-group sub-menu">
                        <li class="list-group-item">
                            <a href="#">Bonus Layout 1</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Bonus Layout 2</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Bonus Layout 3</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Bonus Layout 4</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Bonus Layout 5</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Bonus Layout 6</a>
                        </li>
                        <li class="list-group-item">
                            <a href="#">Bonus Layout 7</a>
                        </li>
                    </ul>
                    <li class="list-group-item d-flex justify-content-between align-items-center">
                        <a href="">
                            <p>
                                <i class="fas fa-lock"></i>
                                Purchase</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <!-- Header End -->
    <!-- Slider Start -->

    <section id="slider">
        <div class="container-fluid">
            <div class="row">
                <div class="col p-0">
                    <div class="window">
                        <i class="fas fa-chevron-left chevron fa-3x"></i>
                        <i class="fas fa-chevron-right chevron fa-3x"></i>
                        <ul class="d-flex lenta">
                            <li>
                                <img src="images/bg2.jpg" alt="">
                            </li>
                            <li>
                                <img src="images/bg1.jpg" alt="">
                            </li>
                            <li>
                                <img src="images/bg3.jpg" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Slider End -->
    <!-- Tabs Start -->

    <section id="tabs">
        <div class="container px-3 px-lg-0">
            <div class="row">
                <div class="col">
                    <div class="tabs d-none d-lg-block">
                        <div class="btn-group" role="group" aria-label="Basic example">
                            <button type="button" class="tab hotels active">Hotels</button>
                            <button type="button" class="tab flights">Flights</button>
                            <button type="button" class="tab flights">Flights Hotels</button>
                            <button type="button" class="tab flights">Cars</button>
                            <button type="button" class="tab hotels">Cruises</button>
                            <button type="button" class="tab hotels">Flight Status</button>
                            <button type="button" class="tab hotels">Online Check In</button>
                        </div>
                    </div>
                    <div class="tabs-mobil d-block d-lg-none">
                        <div class="btn-group bg-white w-100 d-flex justify-content-between" role="group" aria-label="Basic example">
                            <button class="tabs-chevron">
                                <i class="fas fa-long-arrow-alt-left d-flex justify-content-center align-items-center"></i>
                            </button>
                            <button type="button" class="">Hotels</button>
                            <button class="tabs-chevron">
                                <i class="fas fa-long-arrow-alt-right d-flex justify-content-center align-items-center"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row tab content hotels">
                <div class="col-lg-2 col-md-6 col-12 pt-3 pt-lg-0">
                    <div class="where">
                        <h6>Where</h6>
                        <p>YOUR DESTINATION</p>
                        <input type="text" placeholder="enter a destination or hotel name">
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12 pt-sm-3 pt-lg-0">
                    <div class="when mt-4 mt-md-0">
                        <h6>When</h6>
                        <div class="text-contents d-flex">
                            <div class="content-text mr-0 mr-md-3">
                                <p>
                                    CHECK IN
                                </p>
                                <input type="date">
                                <i class="far fa-calendar-alt d-flex justify-content-center align-items-center"></i>
                            </div>
                            <div class="content-text">
                                <p>
                                    CHECK OUT
                                </p>
                                <input type="date">
                                <i class="far fa-calendar-alt d-flex justify-content-center align-items-center"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="who ml-lg-3 mt-4 mt-lg-0">
                        <h6>Who</h6>
                        <div class="text-contents">
                            <div class="content-text mr-3">
                                <p>ROOMS</p>
                                <select name="cars">
                                    <option value="volvo">01</option>
                                    <option value="saab">02</option>
                                    <option value="fiat">03</option>
                                    <option value="audi">04</option>
                                </select>

                                <i class="fas fa-caret-down d-flex justify-content-center align-items-center"></i>
                            </div>
                            <div class="content-text mr-3">
                                <p>ADULTS</p>
                                <select name="cars">
                                    <option value="volvo">01</option>
                                    <option value="saab">02</option>
                                    <option value="fiat">03</option>
                                    <option value="audi">04</option>
                                </select>
                                <i class="fas fa-caret-down d-flex justify-content-center align-items-center"></i>
                            </div>
                            <div class="content-text">
                                <p>KIDS</p>
                                <select name="cars">
                                    <option value="volvo">01</option>
                                    <option value="saab">02</option>
                                    <option value="fiat">03</option>
                                    <option value="audi">04</option>
                                </select>
                                <i class="fas fa-caret-down d-flex justify-content-center align-items-center"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 col-12 d-flex align-items-end">
                    <div class="content-text btn-group mt-4 mt-lg-0">
                        <button>Search Now</button>
                        <i class="fas fa-check d-flex justify-content-center align-items-center"></i>
                    </div>
                </div>
            </div>
            <div class="row tab content flights">
                <div class="col-lg-3 col-md-6 col-12 pt-3 pt-lg-0">
                    <div class="where">
                        <h6>Where</h6>
                        <p>LEAVING FROM</p>
                        <input type="text" placeholder="city, distirct or specific airpot">
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12 pt-sm-3 pt-lg-0">
                    <div class="when mt-4 mt-md-0">
                        <h6>When</h6>
                        <div class="text-contents d-flex align-items-end">
                            <div class="content-text mr-0 mr-md-3">
                                <p>
                                    DEPARTING ON
                                </p>
                                <input type="date">
                                <i class="far fa-calendar-alt d-flex justify-content-center align-items-center"></i>
                            </div>
                            <div class="content-text">
                                <p>

                                </p>
                                <input type="date">
                                <i class="far fa-calendar-alt d-flex justify-content-center align-items-center"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="who ml-lg-3 mt-4 mt-lg-0">
                        <h6>Who</h6>
                        <div class="text-contents">
                            <div class="content-text mr-3">
                                <p>ADULTS</p>
                                <select name="cars">
                                    <option value="volvo">01</option>
                                    <option value="saab">02</option>
                                    <option value="fiat">03</option>
                                    <option value="audi">04</option>
                                </select>
                                <i class="fas fa-caret-down d-flex justify-content-center align-items-center"></i>
                            </div>
                            <div class="content-text">
                                <p>KIDS</p>
                                <select name="cars">
                                    <option value="volvo">01</option>
                                    <option value="saab">02</option>
                                    <option value="fiat">03</option>
                                    <option value="audi">04</option>
                                </select>
                                <i class="fas fa-caret-down d-flex justify-content-center align-items-center"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 col-12 d-flex align-items-end">
                    <div class="content-text btn-group mt-lg-0">
                        <p>PROME CODE</p>
                        <input type="text" placeholder="type here">
                    </div>
                </div>
            </div>
            <div class="row tab content flights mt-3">
                <div class="col-lg-3 col-md-6 col-12 pt-3 pt-lg-0">
                    <div class="where">
                        <p>GOING TO</p>
                        <input type="text" placeholder="city, distirct or specific airpot">
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-12 pt-sm-3 pt-lg-0">
                    <div class="when mt-4 mt-md-0">
                        <div class="text-contents d-flex align-items-end">
                            <div class="content-text mr-0 mr-md-3">
                                <p>
                                    ARRIVING ON
                                </p>
                                <input type="date">
                                <i class="far fa-calendar-alt d-flex justify-content-center align-items-center"></i>
                            </div>
                            <div class="content-text">
                                <p>

                                </p>
                                <input type="date">
                                <i class="far fa-calendar-alt d-flex justify-content-center align-items-center"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="who ml-lg-3 mt-4 mt-lg-0">
                        <div class="text-contents">
                            <div class="content-text mr-3">
                                <p>INFANTS</p>
                                <select name="cars">
                                    <option value="volvo">01</option>
                                    <option value="saab">02</option>
                                    <option value="fiat">03</option>
                                    <option value="audi">04</option>
                                </select>

                                <i class="fas fa-caret-down d-flex justify-content-center align-items-center"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2 col-md-6 col-12 d-flex align-items-end">
                    <div class="content-text btn-group mt-4 mt-lg-0">
                        <button>Search Now</button>
                        <i class="fas fa-check d-flex justify-content-center align-items-center"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Tabs End -->
    <!-- Popular Start -->

    <section id="recommended">
        <div class="container pb-5">
            <div class="row mt-5 pt-5">
                <h5 class="pl-3">Recommended Hotels</h5>
            </div>
            <div class="row mt-2 pb-5">
                <div class="col-lg-3 col-md-6 col-12 pt-md-4 pt-lg-0">
                    <div class="item">
                        <div class="img">
                            <img src="images/1.png" class="w-100" alt="">
                            <div class="overlay d-flex justify-content-center align-items-center">
                                <i class="fas fa-plus fa-lg text-white p-3"></i>
                            </div>
                        </div>
                        <div class="img-contents px-3 pt-2 d-flex justify-content-between">
                            <div class="context-left">
                                <h6>Hotel - Hilton</h6>
                                <p class="mb-0">
                                    <span>$620</span> AVW/NIGHT</p>
                            </div>
                            <div class="context-right d-flex align-items-center">
                                <button>SEE ALL</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12 pt-4 pt-lg-0">
                    <div class="item">
                        <div class="img">
                            <img src="images/2.png" class="w-100" alt="">
                            <div class="overlay d-flex justify-content-center align-items-center">
                                <i class="fas fa-plus fa-lg text-white p-3"></i>
                            </div>
                        </div>
                        <div class="img-contents px-3 pt-2 d-flex justify-content-between">
                            <div class="context-left">
                                <h6>Roosevelt - Hotel</h6>
                                <p class="mb-0">
                                    <span>$170</span> AVW/NIGHT</p>
                            </div>
                            <div class="context-right d-flex align-items-center">
                                <button>SEE ALL</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12 pt-4 pt-lg-0">
                    <div class="item">
                        <div class="img">
                            <img src="images/3.png" class="w-100" alt="">
                            <div class="overlay d-flex justify-content-center align-items-center">
                                <i class="fas fa-plus fa-lg text-white p-3"></i>
                            </div>
                        </div>
                        <div class="img-contents px-3 pt-2 d-flex justify-content-between">
                            <div class="context-left">
                                <h6>Forte Do Vale</h6>
                                <p class="mb-0">
                                    <span>$120</span> AVW/NIGHT</p>
                            </div>
                            <div class="context-right d-flex align-items-center">
                                <button>SEE ALL</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12 pt-4 pt-lg-0">
                    <div class="item">
                        <div class="img">
                            <img src="images/4.png" class="w-100" alt="">
                            <div class="overlay d-flex justify-content-center align-items-center">
                                <i class="fas fa-plus fa-lg text-white p-3"></i>
                            </div>
                        </div>
                        <div class="img-contents px-3 pt-2 d-flex justify-content-between">
                            <div class="context-left">
                                <h6>Gran - Canaria</h6>
                                <p class="mb-0">
                                    <span>$322</span> AVW/NIGHT</p>
                            </div>
                            <div class="context-right d-flex align-items-center">
                                <button>SEE ALL</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Recommended End -->
    <!-- Details Start -->

    <section id="details">
        <div class="container">
            <div class="row py-5">
                <div class="col-lg-6">
                    <div class="row">
                        <h5>Hot Hotel Details</h5>
                    </div>
                    <div class="row tag-details-btn">
                        <div class="col">
                            <div class="btn-group py-3" role="group" aria-label="Basic example">
                                <button type="button" class="mr-2">Popular</button>
                                <button type="button" class="mr-2">Las Vegas</button>
                                <button type="button" class="mr-2">Miami</button>
                                <button type="button" class="mr-2">San Francisco</button>
                                <button type="button" class="mr-2">Hong Kong</button>
                            </div>
                        </div>
                    </div>
                    <hr class="m-0">
                    <div class="row tag-details-content py-3">
                        <div class="col-12">
                            <div class="item d-flex">
                                <div class="img order-0">
                                    <img src="images/hot-hotel1.png" alt="">
                                    <div class="save d-flex align-items-center justify-content-center">
                                        SAVE
                                        <br> 23%
                                    </div>
                                </div>
                                <div class="content ml-3 order-1">
                                    <a href="#">Travel Insurance</a>
                                    <br>
                                    <small>NEW YORK, USA</small>
                                    <p>
                                        Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam.
                                    </p>
                                </div>
                                <div class="price order-3 d-flex flex-column align-items-end">
                                    <p class="mb-0"> AVW/NIGHT</p>
                                    <span>$322</span>
                                    <div class="context-right d-flex align-items-center">
                                        <button>SEE ALL</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="item d-flex">
                                <div class="img order-0">
                                    <img src="images/hot-hotel1.png" alt="">
                                    <div class="save d-flex align-items-center justify-content-center">
                                        SAVE
                                        <br> 23%
                                    </div>
                                </div>
                                <div class="content ml-3 order-1">
                                    <a href="#">Travel Insurance</a>
                                    <br>
                                    <small>NEW YORK, USA</small>
                                    <p>
                                        Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam.
                                    </p>
                                </div>
                                <div class="price order-3 d-flex flex-column align-items-end">
                                    <p class="mb-0"> AVW/NIGHT</p>
                                    <span>$322</span>
                                    <div class="context-right d-flex align-items-center">
                                        <button>SEE ALL</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="row">
                        <h5>What Travelers Say?</h5>
                    </div>
                    <div class="row say">
                        <div class="col">
                            <div class="text p-4">
                                <em>This is the 3rd time I’ve used Travelo website and telling you the truth their services are
                                    always realiable and it only takes few minutes to plan and finalize your entire trip
                                    using their extremely fast website and up to date listings. I’m super excited about my
                                    next trip to Paris.</em>
                            </div>
                            <div class="profil p-4 pb-5 d-flex align-items-center">
                                <img src="images/author1.png" alt="">
                                <span class="ml-2">Jessica Brown
                                    <br>
                                    <small>Guest</small>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Details End -->
    <!-- Travelers Start -->

    <section id="travelers">
        <div class="container pb-5">
            <div class="row pt-5">
                <h5 class="pl-3">Travelers Choice of Hotels</h5>
            </div>
            <div class="row mt-2 pb-5">
                <div class="col-lg-3 col-md-6 col-12 pt-md-4 pt-lg-0">
                    <div class="item">
                        <div class="img">
                            <img src="images/1.png" class="w-100" alt="">
                            <div class="overlay d-flex justify-content-center align-items-center">
                                <i class="fas fa-plus fa-lg text-white p-3"></i>
                            </div>
                        </div>
                        <div class="img-contents px-3 pt-2 ">
                            <div class="price d-flex justify-content-between">
                                <div class="context-left">
                                    <h6>Roosevelt Hotel</h6>
                                    <p class="mb-0">NEW YORK</p>
                                </div>
                                <div class="context-right">
                                    <p class="m-0">AVG/NIGHT</p>
                                    <span>$290</span>
                                </div>
                            </div>
                            <hr class="m-0">
                            <div class="star d-flex justify-content-between">
                                <div class="icon">
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-warning"></i>
                                </div>
                                <div class="view">
                                    <small>170 REVIEWS</small>
                                </div>
                            </div>
                            <hr class="m-0">
                            <div class="text">
                                <p class="text">
                                    Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam.
                                </p>
                            </div>
                            <div class="btn-group pb-2 d-flex justify-content-between">
                                <button>Select</button>
                                <button class="bg-warning">VIEW ON MAP</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12 pt-4 pt-lg-0">
                    <div class="item">
                        <div class="img">
                            <img src="images/2.png" class="w-100" alt="">
                            <div class="overlay d-flex justify-content-center align-items-center">
                                <i class="fas fa-plus fa-lg text-white p-3"></i>
                            </div>
                        </div>
                        <div class="img-contents px-3 pt-2 ">
                            <div class="price d-flex justify-content-between">
                                <div class="context-left">
                                    <h6>Roosevelt Hotel</h6>
                                    <p class="mb-0">NEW YORK</p>
                                </div>
                                <div class="context-right">
                                    <p class="m-0">AVG/NIGHT</p>
                                    <span>$290</span>
                                </div>
                            </div>
                            <hr class="m-0">
                            <div class="star d-flex justify-content-between">
                                <div class="icon">
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-warning"></i>
                                </div>
                                <div class="view">
                                    <small>170 REVIEWS</small>
                                </div>
                            </div>
                            <hr class="m-0">
                            <div class="text">
                                <p class="text">
                                    Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam.
                                </p>
                            </div>
                            <div class="btn-group pb-2 d-flex justify-content-between">
                                <button>Select</button>
                                <button class="bg-warning">VIEW ON MAP</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12 pt-4 pt-lg-0">
                    <div class="item">
                        <div class="img">
                            <img src="images/3.png" class="w-100" alt="">
                            <div class="overlay d-flex justify-content-center align-items-center">
                                <i class="fas fa-plus fa-lg text-white p-3"></i>
                            </div>
                        </div>
                        <div class="img-contents px-3 pt-2 ">
                            <div class="price d-flex justify-content-between">
                                <div class="context-left">
                                    <h6>Roosevelt Hotel</h6>
                                    <p class="mb-0">NEW YORK</p>
                                </div>
                                <div class="context-right">
                                    <p class="m-0">AVG/NIGHT</p>
                                    <span>$290</span>
                                </div>
                            </div>
                            <hr class="m-0">
                            <div class="star d-flex justify-content-between">
                                <div class="icon">
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-warning"></i>
                                </div>
                                <div class="view">
                                    <small>170 REVIEWS</small>
                                </div>
                            </div>
                            <hr class="m-0">
                            <div class="text">
                                <p class="text">
                                    Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam.
                                </p>
                            </div>
                            <div class="btn-group pb-2 d-flex justify-content-between">
                                <button>Select</button>
                                <button class="bg-warning">VIEW ON MAP</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12 pt-4 pt-lg-0">
                    <div class="item">
                        <div class="img">
                            <img src="images/4.png" class="w-100" alt="">
                            <div class="overlay d-flex justify-content-center align-items-center">
                                <i class="fas fa-plus fa-lg text-white p-3"></i>
                            </div>
                        </div>
                        <div class="img-contents px-3 pt-2 ">
                            <div class="price d-flex justify-content-between">
                                <div class="context-left">
                                    <h6>Roosevelt Hotel</h6>
                                    <p class="mb-0">NEW YORK</p>
                                </div>
                                <div class="context-right">
                                    <p class="m-0">AVG/NIGHT</p>
                                    <span>$290</span>
                                </div>
                            </div>
                            <hr class="m-0">
                            <div class="star d-flex justify-content-between">
                                <div class="icon">
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-secondary"></i>
                                    <i class="fas fa-star fa-xs text-warning"></i>
                                </div>
                                <div class="view">
                                    <small>170 REVIEWS</small>
                                </div>
                            </div>
                            <hr class="m-0">
                            <div class="text">
                                <p class="text">
                                    Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massa idporta nequetiam.
                                </p>
                            </div>
                            <div class="btn-group pb-2 d-flex justify-content-between">
                                <button>Select</button>
                                <button class="bg-warning">VIEW ON MAP</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Travelers End -->
    <!-- Discover Start -->

    <!-- Tell Start -->

    <section id="tell">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-4 col-md-4 d-flex justify-content-md-end justify-content-center order-2 order-md-1">
                    <div class="img d-flex justify-content-lg-end">
                        <img src="images/promo-image1.png" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="col-lg-8 col-md-8 d-flex order-1 order-md-2 d-flex align-items-center">
                    <div class="row w-100">
                        <div class="col-lg-7">
                            <h4 class="text-center">Tell us where you would like to go.</h4>
                            <h3 class="text-center">12,000+ Hotel and Resorts Available!</h3>
                        </div>
                        <div class="col-lg-5">
                            <form class="">
                                <div class="form-group d-flex justify-content-center">
                                    <input type="text" class="" id="formGroupExampleInput" placeholder="Enter destination or hotel name">
                                </div>
                                <div class="form-group d-flex justify-content-center">
                                    <button>SEARCH HOTELS</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Tell End -->

    <section id="discover">
        <div class="container">
            <div class="row py-5">
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="row">
                        <div class="col">
                            <h5>Discover</h5>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-6">
                            <ul>
                                <li>
                                    <i class="fas fa-caret-right mr-1"></i>
                                    <a href="#"> Safety</a>
                                </li>
                                <li>
                                    <i class="fas fa-caret-right mr-1"></i>
                                    <a href="#"> Travelo </a>
                                </li>
                                <li>
                                    <i class="fas fa-caret-right mr-1"></i>
                                    <a href="#"> Mobile</a>
                                </li>
                                <li>
                                    <i class="fas fa-caret-right mr-1"></i>
                                    <a href="#"> Why Host</a>
                                </li>
                                <li>
                                    <i class="fas fa-caret-right mr-1"></i>
                                    <a href="#"> Social </a>
                                </li>
                                <li>
                                    <i class="fas fa-caret-right mr-1"></i>
                                    <a href="#"> Site Map</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-6">
                            <ul>
                                <li>
                                    <i class="fas fa-caret-right mr-1"></i>
                                    <a href="#"> About</a>
                                </li>
                                <li>
                                    <i class="fas fa-caret-right mr-1"></i>
                                    <a href="#"> Latest </a>
                                </li>
                                <li>
                                    <i class="fas fa-caret-right mr-1"></i>
                                    <a href="#"> Press </a>
                                </li>
                                <li>
                                    <i class="fas fa-caret-right mr-1"></i>
                                    <a href="#"> Blog </a>
                                </li>
                                <li>
                                    <i class="fas fa-caret-right mr-1"></i>
                                    <a href="#"> Help </a>
                                </li>
                                <li>
                                    <i class="fas fa-caret-right mr-1"></i>
                                    <a href="#"> Policies</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12 pt-4 pt-md-0">
                    <div class="row">
                        <div class="col">
                            <h5>Travel News</h5>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12">
                            <div class="item d-flex">
                                <div class="img order-0">
                                    <img src="images/news01.png" alt="">
                                </div>
                                <div class="content ml-3 order-1">
                                    <a href="#">Amazing Places</a>
                                    <p>
                                        Purus ac congue arcu cursus ut vitae pulvinar massaidp.
                                    </p>
                                    <small>25 Sep, 2019</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 pt-3">
                            <div class="item d-flex">
                                <div class="img order-0">
                                    <img src="images/news02.png" alt="">
                                </div>
                                <div class="content ml-3 order-1">
                                    <a href="#">Travel Insurance</a>
                                    <p>
                                        Purus ac congue arcu cursus ut vitae pulvinar massaidp.
                                    </p>
                                    <small>25 Sep, 2019</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12 pt-5 pt-lg-0">
                    <div class="row">
                        <div class="col">
                            <h5>Mailing List</h5>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col">
                            <p>Sign up for our mailing list to get latest updates and offers.</p>
                            <div class="content-text btn-group w-100 py-3">
                                <input type="text" placeholder="your email" class="px-3 py-1">
                                <i class="fas fa-check d-flex justify-content-center align-items-center"></i>
                            </div>
                            <small>We respect your privacy</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12 pt-5 pt-lg-0">
                    <div class="row">
                        <div class="col">
                            <h5>About Travelo</h5>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col">
                            <p>
                                Nunc cursus libero purus ac congue arcu cursus ut sed vitae pulvinar massaidp nequetiam lore elerisque.
                            </p>
                            <i class="fas fa-phone-volume fa-lg mr-1"></i>
                            <span> 1-800-123-HELLO</span>
                            <br>
                            <a href="#" class="ml-4">helptravelo.com</a>
                            <ul class="d-flex flex-wrap pt-3">
                                <li>
                                    <a href="#">
                                        <div class="social-icon d-flex align-items-center justify-content-center mr-1">
                                            <i class="fab fa-twitter icon1 px-1"></i>
                                            <i class="fab fa-twitter icon2 px-1"></i>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="social-icon d-flex align-items-center justify-content-center mr-1">
                                            <i class="fab  fa-google-plus-g icon1 px-1"></i>
                                            <i class="fab  fa-google-plus-g icon2 px-1"></i>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="social-icon d-flex align-items-center justify-content-center mr-1">
                                            <i class="fab fa-facebook-f icon1 px-1"></i>
                                            <i class="fab fa-facebook-f icon2 px-1"></i>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="social-icon d-flex align-items-center justify-content-center mr-1">
                                            <i class="fab fa-linkedin-in icon1 px-1"></i>
                                            <i class="fab fa-linkedin-in icon2 px-1"></i>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="social-icon d-flex align-items-center justify-content-center mr-1">
                                            <i class="fab fa-vimeo-v icon1 px-1"></i>
                                            <i class="fab fa-vimeo-v icon2 px-1"></i>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="social-icon d-flex align-items-center justify-content-center mr-1">
                                            <i class="fab fa-dribbble icon1 px-1"></i>
                                            <i class="fab fa-dribbble icon2 px-1"></i>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="social-icon d-flex align-items-center justify-content-center mr-1">
                                            <i class="fab fa-flickr icon1 px-1"></i>
                                            <i class="fab fa-flickr icon2 px-1"></i>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Discover End -->

    <!-- Footer Start -->

    <footer>
        <div class="container">
            <div class="row py-3">
                <div class="col-sm-3 col-6 order-0">
                    <div class="logo">
                        <img src="images/logo (1).png" alt="">
                    </div>
                </div>
                <div class="col-sm-7 d-flex align-items-center justify-content-center col-12 order-2 order-sm-1">
                    <p class="text-center pt-3 mb-0 pt-sm-0">
                        © 2019 Travelo
                    </p>
                </div>
                <div class="col-sm-2 d-flex align-items-center justify-content-end col-6 text-right order-1 order-sm-2">
                    <a href="#header" class=" d-flex align-items-center justify-content-center">
                        <i class="fas fa-long-arrow-alt-up"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>