<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Midtown Hotel | The best hotels & accommodations</title>
    <?php require('./components/link.php'); ?>
</head>
<body>
    <!--Hero & Navbar section-->
    <div class="hero">
        <div class="load"></div>
        <?php require('./components/header.php'); ?>
        <!--Hero section-->
        <div class="hero-content">
            <div class="hero-head">
                <h1 class="hero-title">Welcome to Midtown Hotel</h1>
                <p class="hero-subtitle">Everything you can dream about, available here, start just $99 per night</p>
            </div>
            <!--availability-->
            <div class="container">
                <div class="row row-form">
                    <div class="col-lg-12 bg-white shadow p-3 rounded">
                        <form>
                            <div class="row">
                                <div class="col-lg-3">
                                    <label class="form-label" style="color: black; font-weight: 500;">Check-in</label>
                                    <input type="date" class="form-control shadow-none" style="font-size: 14px;"/>
                                </div>
                                <div class="col-lg-3">
                                    <label class="form-label" style="color: black; font-weight: 500;">Check-out</label>
                                    <input type="date" class="form-control shadow-none" style="font-size: 14px;"/>
                                </div>
                                <div class="col-lg-2">
                                    <label class="form-label" style="color: black; font-weight: 500;">Adults</label>
                                    <select class="form-select" style="font-size: 14px;">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">More than 5</option>
                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <label class="form-label" style="color: black; font-weight: 500;">Children</label>
                                    <select class="form-select" style="font-size: 14px;">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">More than 5</option>
                                    </select>
                                </div>
                                <div class="col-lg-2">
                                    <div class="d-grid" style="align-items: center; margin-top: 30px;">
                                        <button type="submit" class="btn btn-dark shadow-none d-block" style="font-size: 14px; font-weight: 500;">Submit</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--pre section-->
    <div class="panel" data-color="white">
        <img src="./images/logo.png" class="pre-header-img" style="width: 100px; margin-bottom: 40px;"/>
        <h1 class="pre-header">Midtown Hotel epitomizes comfort and service with spacious accommodation for you to enjoy every moment</h1>
        <a class="btn-th" href="#" style="margin-bottom: 10px;">Hotel</a>
    </div>
    <!--pre section2-->
    <div class="panel" data-color="khaki">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="./images/presec1.jpg"/>
                </div>
                <div class="swiper-slide">
                    <img src="./images/presec2.jpg"/>
                </div>
                <div class="swiper-slide">
                    <img src="./images/presec3.jpg"/>
                </div>
            </div>
        </div>
        <div class="pre-section2-container">
            <div class="pre-section2-wrapper">
                <div class="pre-section2-text">
                    <p>Favorite hotel</p>
                    <p>Find inspiration</p>
                    <p>Experience the ultimate in luxury</p>
                    <p>Discover the ultimate indulgence</p>
                    <p>In the heart of Florida</p>
                </div>
            </div>
        </div>
    </div>
    <!--Rooms-->
    <div class="panel" data-color="white">
        <h3 class="mt-4 pt-4 text-center fw-bold font-title" style="color: #776B5D; text-shadow: 2px 2px #EBE3D5;">Our Rooms</h3>
        <p class="mb-4 text-center" style="font-size: 14px; margin-top: -10px; color: #B0A695;">Comfortably furnished smaller accommodation</p>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6 my-3">
                    <div class="card shadow" style="max-width: 400px; margin: auto;">
                        <img src="./images/home3.jpg" class="card-img-top">
                        <div class="card-body">
                            <h5 class="card-title" style="color: #222831;">Standard rooms</h5>
                            <p class="card-title" style="color: #31363F; font-size: 14px;">From $99 per night</p>
                            <div class="accommodation mt-4 mb-3">
                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Accommodation</p>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
                            </div>
                            <div class="equipment">
                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Equipment</p>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Air conditioning</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Desk</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Hairdryer</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Television</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wi-Fi</span>
                            </div>
                            <div class="d-flex gap-2 items-center justify-content-center mt-4">
                                <a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
                                <a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 my-3">
                    <div class="card shadow" style="max-width: 400px; margin: auto;">
                        <img src="./images/home3.jpg" class="card-img-top">
                        <div class="card-body">
                            <h5 class="card-title" style="color: #222831;">Standard rooms</h5>
                            <p class="card-title" style="color: #31363F; font-size: 14px;">From $99 per night</p>
                            <div class="accommodation mt-4 mb-3">
                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Accommodation</p>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
                            </div>
                            <div class="equipment">
                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Equipment</p>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Air conditioning</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Desk</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Hairdryer</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Television</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wi-Fi</span>
                            </div>
                            <div class="d-flex gap-2 items-center justify-content-center mt-4">
                                <a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
                                <a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 my-3">
                    <div class="card shadow" style="max-width: 400px; margin: auto;">
                        <img src="./images/home3.jpg" class="card-img-top">
                        <div class="card-body">
                            <h5 class="card-title" style="color: #222831;">Standard rooms</h5>
                            <p class="card-title" style="color: #31363F; font-size: 14px;">From $99 per night</p>
                            <div class="accommodation mt-4 mb-3">
                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Accommodation</p>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
                            </div>
                            <div class="equipment">
                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Equipment</p>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Air conditioning</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Desk</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Hairdryer</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Television</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wi-Fi</span>
                            </div>
                            <div class="d-flex gap-2 items-center justify-content-center mt-4">
                                <a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
                                <a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-3 col-md-6 my-3">
                    <div class="card shadow" style="max-width: 400px; margin: auto;">
                        <img src="./images/home3.jpg" class="card-img-top">
                        <div class="card-body">
                            <h5 class="card-title" style="color: #222831;">Standard rooms</h5>
                            <p class="card-title" style="color: #31363F; font-size: 14px;">From $99 per night</p>
                            <div class="accommodation mt-4 mb-3">
                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Accommodation</p>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Breakfast</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Pools</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wellness & Spa</span>
                            </div>
                            <div class="equipment">
                                <p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Equipment</p>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Air conditioning</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Coffee & tea</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Desk</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Hairdryer</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Television</span>
                                <span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Wi-Fi</span>
                            </div>
                            <div class="d-flex gap-2 items-center justify-content-center mt-4">
                                <a href="#" class="btn-main d-block" style="font-size: 14px;">Book Now</a>
                                <a href="#" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-12 text-center mt-5 mb-2">
                    <a href="" class="btn-th">More</a>
                </div>
            </div>
        </div>
    </div>
    <!--services-->
    <div class="panel" data-color="cream">
        <h3 class="mt-4 pt-4 text-center fw-bold font-title" style="color: #776B5D; text-shadow: 2px 2px #EBE3D5;">Services</h3>
        <p class="mb-5 text-center" style="font-size: 14px; margin-top: -10px; color: #A4907C;">Exceptional service - endless possibilities</p>
        <div class="container">
            <div class="row">
                <div class="col-lg-4">
                    <div class="card">
                        <img src="./images/service1.jpg" style="width: 100%;"/>
                        <div class="card-img-overlay service-card">
                            <h5 class="card-title-service">Swimming Pools</h5>
                            <p class="card-text-service">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <img src="./images/service2.jpg" style="width: 100%"/>
                        <div class="card-img-overlay service-card">
                            <h5 class="card-title-service">Traditional Sauna</h5>
                            <p class="card-text-service">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card">
                        <img src="./images/service3.jpg" style="width: 100%"/>
                        <div class="card-img-overlay service-card">
                            <h5 class="card-title-service">Massages and treatments</h5>
                            <p class="card-text-service">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--testimonials-->
    <div class="panel" data-color="white">
        <img src="./images/logo.png" class="pre-header-testimonials"/>
        <div class="swiper swiper-testimonials">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="profile">
                        <p class="testimonials-text">I recently had the pleasure of staying at the midtown hotel and was blown away by the exceptional service and comfortable accommodations.  
                            I would highly recommend this hotel to anyone looking for a relaxing and enjoyable stay.</p>
                        <p class="testimonials-user">-Jennifer</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="profile">
                        <p class="testimonials-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        <p class="testimonials-user">-anonymous</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--footer-->
    <?php require('./components/footer.php'); ?>


    <?php require('./components/script.php') ?>
</body>
</html>