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

created room page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-11 22:15:01 -05:00
parent 382088f921
commit ae6b05df15
4 changed files with 186 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
hotel_booking/about.php
View file

@ -45,12 +45,6 @@
font-size: 26px;
text-transform: uppercase;
}
.about-container-title{
font-size: 16px;
text-transform: uppercase;
@ -236,7 +230,6 @@
right:inherit;
}
}
@media (max-width:450px) {
.about-img{
height: 450px;

6
hotel_booking/components/header.php
View file

@ -4,7 +4,7 @@
<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>
<a class="nav-link" href="../rooms.php">Rooms</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../services.php">Services</a>
@ -28,7 +28,7 @@
<a class="nav-link" href="../contact.php">Contact</a>
</li>
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" style="outline: none; box-shadow: none; background-color: transparent;" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Join us</a>
<a class="btn btn-secondary dropdown-toggle" style="outline: none; box-shadow: none; background-color: transparent;" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">Join</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" style="background-color: #272829;">
<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>
@ -56,7 +56,7 @@
<a href="../index.php" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Rooms</a>
<a href="../rooms.php" class="nav-link">Rooms</a>
</li>
<li class="nav-item">
<a href="../services.php" class="nav-link">Services</a>

57
hotel_booking/index.php
View file

@ -69,7 +69,6 @@
<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">
@ -110,14 +109,8 @@
<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">
<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;">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>
@ -125,6 +118,12 @@
<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-4 mb-3">
<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>
</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>
@ -139,14 +138,8 @@
<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">
<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;">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>
@ -154,6 +147,12 @@
<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-4 mb-3">
<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>
</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>
@ -168,14 +167,8 @@
<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">
<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;">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>
@ -183,6 +176,12 @@
<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-4 mb-3">
<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>
</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>
@ -197,14 +196,8 @@
<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">
<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;">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>
@ -212,6 +205,12 @@
<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-4 mb-3">
<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>
</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>

155
hotel_booking/rooms.php Normal file
View file

@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rooms & Accommodation | Midtown Hotel</title>
<?php require('./components/link.php') ?>
<style>
.room-hero{
position: relative;
height: 100vh;
background-size: cover;
background-position: center;
background-image: url(images/home4.jpg);
width: 100%;
display: flex;
flex-direction: column;
}
.frame{
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 50px;
margin-top: 100px;
}
.frame1{
width: 60px;
height: 80px;
border: 1px solid black;
}
.frame2{
width: 40px;
height: 60px;
border: 1px solid black;
margin-top: 10px;
margin-left: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}
.frame-title{
text-transform: uppercase;
letter-spacing: 5px;
font-size: 12px;
}
.about-img{
width: 100%;
height: 600px;
object-fit: cover;
border-radius: 5px;
}
.room-title{
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
}
.room-detail{
border: 1px solid #E7E1D8;
border-radius: 5px;
background-color: #F6F4F2;
}
@media (max-width:990px){
.frame1{
width: 40px;
height: 60px;
}
.frame2{
width: 20px;
height: 40px;
font-size: 16px;
}
.about-img{
width:100%;
height: 500px;
}
}
@media (max-width:768px){
.room-detail{
margin-top: 5px;
}
}
@media (max-width:450px) {
.about-img{
height: 450px;
}
}
</style>
</head>
<body>
<!--Hero & Navbar section-->
<div class="room-hero">
<div class="load"></div>
<?php require('./components/header.php') ?>
<div class="hero-content">
<div class="hero-head">
<h1 class="hero-title">Rooms</h1>
<p class="hero-subtitle">Comfortable accommodation directly in the hotel with extensive services</p>
</div>
</div>
</div>
<!--Rooms section-->
<div class="panel" data-color="white">
<div class="frame">
<div class="frame1">
<div class="frame2">I</div>
</div>
<p class="frame-title">Standard room</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 d-flex justify-content-center">
<img src="./images/home3.jpg" class="about-img"/>
</div>
<div class="col-md-6">
<div class="room-detail">
<div class="my-3 mx-2">
<p class="room-title">Accommodation</p>
<div>
<p><i class='bx bx-checkbox-checked'></i> A king bed size (76" x 80").</p>
<p><i class='bx bx-checkbox-checked'></i> A bathroom with a shower or bathtub, toilet, and sink including toiletries.</p>
<p><i class='bx bx-checkbox-checked'></i> Furniture: A closet, bedside tables, a desk, and chairs.</p>
<p><i class='bx bx-checkbox-checked'></i> Electronic Devices: A television, telephone, mini-fridge, coffee maker, hairdryer.</p>
<p><i class='bx bx-checkbox-checked'></i> Heating and air conditioning</p>
<p><i class='bx bx-checkbox-checked'></i> Wi-Fi and wired internet access</p>
<p><i class='bx bx-checkbox-checked'></i> Housekeeping</p>
</div>
</div>
<div class="my-3 mx-2">
<p class="room-title">Extra Accommodation</p>
<div>
<p><i class='bx bx-checkbox-checked'></i> Breakfast</p>
<p><i class='bx bx-checkbox-checked'></i> Swimming Pools</p>
<p><i class='bx bx-checkbox-checked'></i> Sauna (Steam sauna)</p>
<p><i class='bx bx-checkbox-checked'></i> Massage (Aromatherapy massage)</p>
</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>
</div>
</div>
</div>
</div>
</div>
</div>
<!--footer-->
<?php require('./components/footer.php'); ?>
<?php require('./components/script.php') ?>
</body>
</html>