updated booking, rooms, index page
This commit is contained in:
parent
3e5a18f8f8
commit
66940a8535
3 changed files with 84 additions and 28 deletions
|
@ -22,9 +22,6 @@
|
|||
color: #B0A695;
|
||||
text-shadow: 1px 1px 2px #EAD8C0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media (max-width:765px){
|
||||
.booking-hero{
|
||||
height: 100px;
|
||||
|
@ -39,46 +36,103 @@
|
|||
<p class="booking-title">Rooms available</p>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-lg-3">
|
||||
<div class="col-lg-3 col-md-12 mb-2">
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow rounded">
|
||||
<div class="container-fluid flex-lg-column align-items-stretch">
|
||||
<p class="mt-2" style="text-transform: capitalize; font-weight: 600; font-size: 18px;">Filter bookings</p>
|
||||
<p class="mt-2" style="font-weight: 600; font-size: 18px;">Filter By:</p>
|
||||
<button class="navbar-toggler shadow-none border-none mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#filterDropdown" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<i class="bi bi-sort-down"></i>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse flex-column align-items-stretch" id="filterDropdown">
|
||||
<div class="border bg-white p-3 rounded mb-3">
|
||||
<p class="mb-2" style="font-weight: 500;">Availability</p>
|
||||
<label class="form-label">Check-in</label>
|
||||
<div class="border bg-white p-3 rounded mb-2">
|
||||
<p class="mb-2" style="font-weight: 600;">Availability</p>
|
||||
<label class="form-label" style="font-size: 14px;">Check-in</label>
|
||||
<input type="date" class="form-control shadow-none mb-4" style="font-size: 14px;"/>
|
||||
<label class="form-label">Check-out</label>
|
||||
<label class="form-label" style="font-size: 14px;">Check-out</label>
|
||||
<input type="date" class="form-control shadow-none" style="font-size: 14px;"/>
|
||||
</div>
|
||||
<div class="border bg-white p-3 rounded mb-3">
|
||||
<p class="mb-2" style="font-weight: 500;">Room Types</p>
|
||||
<div class="border bg-white p-3 rounded mb-2">
|
||||
<p class="mb-2" style="font-weight: 600;">Guests</p>
|
||||
<div class="d-flex gap-2">
|
||||
<div class="mb-2" style="font-size: 14px;">
|
||||
<label class="form-label">Adults</label>
|
||||
<input type="number" class="form-control shadow-none" min="1"/>
|
||||
</div>
|
||||
<div class="mb-2" style="font-size: 14px;">
|
||||
<label class="form-label">Children</label>
|
||||
<input type="number" class="form-control shadow-none" min="0"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border bg-white p-3 rounded mb-2">
|
||||
<p class="mb-2" style="font-weight: 600;">Room Types</p>
|
||||
<div class="mb-1">
|
||||
<input type="checkbox" id="f1" class="form-check-input shadow-none"/>
|
||||
<label class="form-check-label" for="f1" style="font-size: 14px;">Standard room</label>
|
||||
<input type="checkbox" id="room1" class="form-check-input shadow-none"/>
|
||||
<label class="form-check-label" for="room1" style="font-size: 14px;">Standard room</label>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<input type="checkbox" id="f1" class="form-check-input shadow-none"/>
|
||||
<label class="form-check-label" for="f1" style="font-size: 14px;">Deluxe room</label>
|
||||
<input type="checkbox" id="room2" class="form-check-input shadow-none"/>
|
||||
<label class="form-check-label" for="room2" style="font-size: 14px;">Deluxe room</label>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<input type="checkbox" id="f1" class="form-check-input shadow-none"/>
|
||||
<label class="form-check-label" for="f1" style="font-size: 14px;">Double room</label>
|
||||
<input type="checkbox" id="room3" class="form-check-input shadow-none"/>
|
||||
<label class="form-check-label" for="room3" style="font-size: 14px;">Double room</label>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<input type="checkbox" id="f1" class="form-check-input shadow-none"/>
|
||||
<label class="form-check-label" for="f1" style="font-size: 14px;">Suit room</label>
|
||||
<input type="checkbox" id="room4" class="form-check-input shadow-none"/>
|
||||
<label class="form-check-label" for="room4" style="font-size: 14px;">Suit room</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border bg-white p-3 rounded mb-2">
|
||||
<p class="mb-2" style="font-weight: 600;">Useful Infomation</p>
|
||||
<div class="mb-2">
|
||||
<p style="font-size: 12px; line-height: 10px;">• Unlimited access to the pools.</p>
|
||||
<p style="font-size: 12px; margin-top: -5px;">• Sauna service (include with room types or for a fee).</p>
|
||||
<p style="font-size: 12px; margin-top: -10px;">• Massage service (include with room types or for a fee).</p>
|
||||
</div>
|
||||
<p class="mb-2" style="font-weight: 600;">Check-in/Check-out</p>
|
||||
<div class="mb-2">
|
||||
<p style="font-size: 12px;"><span style="font-weight: 600;">Check-in:</span> 3:00 pm or anytime afterwards.</p>
|
||||
<p style="font-size: 12px;"><span style="font-weight: 600;">Check-out:</span> until 11:00 am.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-9 col-md-12">
|
||||
<div class="card mb-3 shadow">
|
||||
<div class="row g-0 p-2 align-items-center">
|
||||
<div class="col-lg-4 col-md-5 mb-lg-0 mb-3">
|
||||
<img src="./images/home3.jpg" class="img-fluid rounded" alt="room">
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-5 px-lg-2 px-md-2 px-0">
|
||||
<p class="mb-1" style="font-size: 20px; font-weight: 600;">Standard room</p>
|
||||
<div class="accommodation">
|
||||
<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;">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="extra-accommodation mt-2 mb-2">
|
||||
<p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Additional 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;">Sauna (Steam sauna)</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Massage (Aromatherapy massage)</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<p class="mb-4 text-center mt-lg-0 mt-4">$99 per night</p>
|
||||
<a href="#" class="btn-main d-block mb-2" 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>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -23,6 +23,7 @@
|
|||
<div class="col-lg-12 bg-white shadow p-3 rounded">
|
||||
<form>
|
||||
<div class="row">
|
||||
<p class="d-flex justify-content-center mb-4" style="color: #948979; font-size: 18px; font-weight: 600; text-transform: uppercase;">Quick Reservation</p>
|
||||
<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;"/>
|
||||
|
@ -55,7 +56,7 @@
|
|||
</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>
|
||||
<button type="submit" class="btn btn-dark shadow-none d-block" style="font-size: 14px; font-weight: 500;">Serach</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -122,7 +123,8 @@
|
|||
<p class="fw-bold" style="color: #31363F; font-size: 14px; margin-bottom: 5px;">Extra 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>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Sauna</span>
|
||||
<span class="badge text-dark mb-1" style="border-radius: 25px; background-color: #F3EEEA;">Massages</span>
|
||||
</div>
|
||||
<div class="d-flex gap-2 items-center justify-content-center mt-4">
|
||||
<a href="./rooms.php" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
|
||||
|
@ -216,7 +218,7 @@
|
|||
</div>
|
||||
|
||||
<div class="col-lg-12 text-center mt-5 mb-2">
|
||||
<a href="" class="btn-th">Booking</a>
|
||||
<a href="./booking.php" class="btn-th">Booking</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -179,7 +179,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 items-center justify-content-center m-4">
|
||||
<a href="#" class="btn-main d-block" style="font-size: 14px;">Booking</a>
|
||||
<a href="./booking.php" class="btn-main d-block" style="font-size: 14px;">Booking</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -235,7 +235,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 items-center justify-content-center m-4">
|
||||
<a href="#" class="btn-main d-block" style="font-size: 14px;">Booking</a>
|
||||
<a href="./booking.php" class="btn-main d-block" style="font-size: 14px;">Booking</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -291,7 +291,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 items-center justify-content-center m-4">
|
||||
<a href="#" class="btn-main d-block" style="font-size: 14px;">Booking</a>
|
||||
<a href="./booking.php" class="btn-main d-block" style="font-size: 14px;">Booking</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -347,7 +347,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2 items-center justify-content-center m-4">
|
||||
<a href="#" class="btn-main d-block" style="font-size: 14px;">Booking</a>
|
||||
<a href="./booking.php" class="btn-main d-block" style="font-size: 14px;">Booking</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Reference in a new issue