<!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>
    <link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Tangerine:wght@400;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Righteous&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
</head>
<body>
    <!--Hero & Navbar section-->
    <div class="hero">
        <div class="load"></div>
        <!--Navbar section (bootstrap)-->
        <div class="wrap w-100">
            <div class="row align-items-center m-0 d-none d-md-flex sticky-top" style="padding-top: 50px;">
                <div class="col-5 text-center rounded-pill" >
                    <ul class="d-flex list-unstyled justify-content-center m-0">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Rooms</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="index.php">News</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Gallery</a>
                        </li>
                    </ul>
                </div>
                <div class="col-2 bg-transparent px-3">
                    <a href="index.php" style="text-decoration: none;">
                        <h1 class="text-center fw-bold figure-img logo-font" style="color: white;">Midtown Hotel</h1>
                    </a>
                </div>
                <div class="col-5 text-center rounded-pill">
                    <ul class="d-flex list-unstyled justify-content-center m-0">
                        <li class="nav-item">
                            <a class="nav-link" href="#">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="cursor: pointer;">Login</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="cursor: pointer;">Register</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--Navbar responsive (css)-->
            <div>
                <div class="nav-parent sticky-top">
                    <div class="nav-wrapper">
                        <div class="branding">
                            <a href="#" class="logo-font" style="color: white;" >Midtown Hotel</a>
                        </div>
                        <a class="burger" onclick="burgerButton()">
                            <div class="bar"></div>
                            <div class="bar"></div>
                        </a>
                    </div>
                </div>
                <div class="burger-links">
                    <ul>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Home</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Rooms</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Services</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Gallery</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">About</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link">Contact</a>
                        </li>
                        <li style="padding-top: 50px">
                            <buton type="button" class="nav-link btn shadow-none" data-bs-toggle="modal" data-bs-target="#loginBackdrop" style="border: 1px solid white; font-weight: 500; color: white;">Login</button>
                        </li>
                        <li style="padding-top: 5px">
                            <buton type="button" class="nav-link btn shadow-none" data-bs-toggle="modal" data-bs-target="#registerBackdrop" style="background-color: #EEEEEE; font-weight: 500; color: black;">Register</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--backdrop login-->
        <div class="modal fade" id="loginBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form>
                        <div class="modal-header" style="border: none;">
                            <button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="mb-3">
                            <h5 class="text-center" style="font-size: 22px;">Login</h5>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label class="form-label">Email address</label>
                                <input type="email" class="form-control shadow-none">
                            </div>
                            <div class="mb-2">
                                <label class="form-label">Password</label>
                                <input type="password" class="form-control shadow-none">
                            </div>
                            <div class="mb-3">
                                <a href="javascript: void(0)" style="font-size: 14px; color: gray;">Forgot your password?</a>
                            </div>
                            <div class="mb-3 d-grid">
                                <button type="submit" class="btn btn-dark shadow-none d-block ">Login</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--backdrop register-->
        <div class="modal fade" id="registerBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <form>
                        <div class="modal-header" style="border: none;">
                            <button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="mb-3">
                            <h5 class="text-center" style="font-size: 22px;">Register</h5>
                        </div>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="mb-3 col-md-6">
                                    <label>First Name</label>
                                    <input type="text" class="form-control shadow-none"/>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label>Last Name</label>
                                    <input type="text" class="form-control shadow-none"/>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label>Phone Number</label>
                                    <input type="tel" class="form-control shadow-none"/>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label>Date of Birth</label>
                                    <input type="date" class="form-control shadow-none"/>
                                </div>
                                <div class="mb-3 col-md-12">
                                    <label>Address</label>
                                    <textarea type="text" rows="3" class="form-control shadow-none" style="resize: none;"></textarea>
                                </div>
                                <div class="mb-3 col-md-12">
                                    <label>Email</label>
                                    <input type="email" class="form-control shadow-none"/>
                                </div>
                                <div class="mb-3 col-md-6">
                                    <label>Password</label>
                                    <input type="password" class="form-control shadow-none"/>
                                </div>
                                <div class="mb-5 col-md-6">
                                    <label>Confirm Password</label>
                                    <input type="password" class="form-control shadow-none"/>
                                </div>
                                <div class="mb-3 d-grid">
                                    <button type="submit" class="btn btn-dark shadow-none d-block ">Register</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--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="pt-4 text-center fw-bold logo-font" style="color: #776B5D; font-size: 56px;  text-shadow: 2px 2px #EBE3D5;">Rooms</h3>
        <p class="mb-5 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-4 col-md-6 my-3">
                    <div class="card shadow" style="max-width: 300px; margin: auto;">
                        <img src="./images/single_room.jpg" class="card-img-top">
                        <div class="card-body">
                            <h5 class="card-title" style="color: #222831;">Single room</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-4 col-md-6 my-3">
                    <div class="card shadow" style="max-width: 300px; margin: auto;">
                        <img src="./images/single_room.jpg" class="card-img-top">
                        <div class="card-body">
                            <h5 class="card-title" style="color: #222831;">Single room</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-4 col-md-6 my-3">
                    <div class="card shadow" style="max-width: 300px; margin: auto;">
                        <img src="./images/single_room.jpg" class="card-img-top">
                        <div class="card-body">
                            <h5 class="card-title" style="color: #222831;">Single room</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-5">
                    <a href="" class="btn-th">More</a>
                </div>
            </div>
        </div>
    </div>
        








    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>    
    <script src="./script.js"></script>
</body>
</html>