muayjtp/web_php
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

created booking page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-12 11:43:04 -05:00
parent cd053173c6
commit 3e5a18f8f8
1 changed files with 103 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
hotel_booking/booking.php Normal file
View file

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booking | Midtown Hotel</title>
<?php require('./components/link.php') ?>
<style>
.booking-hero{
position: relative;
width: 100%;
background-color: #194141;
display: flex;
flex-direction: column;
box-shadow: 0px 3px 3px #BFCBCB;
}
.booking-title{
margin: 50px;
text-align: center;
text-transform: uppercase;
font-size: 22px;
color: #B0A695;
text-shadow: 1px 1px 2px #EAD8C0;
}
@media (max-width:765px){
.booking-hero{
height: 100px;
}
}
</style>
</head>
<body>
<div class="booking-hero">
<?php require('./components/header.php') ?>
</div>
<p class="booking-title">Rooms available</p>
<div class="container">
<div class="row">
<div class="col-lg-3">
<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>
<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>
<input type="date" class="form-control shadow-none mb-4" style="font-size: 14px;"/>
<label class="form-label">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="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>
</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>
</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>
</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>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
<!--footer-->
<?php require('./components/footer.php'); ?>
<?php require('./components/script.php') ?>
</body>
</html>