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

updated room page & index page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-12 08:24:46 -05:00
parent ae6b05df15
commit cd053173c6
3 changed files with 251 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
hotel_booking/index.php
View file

@ -125,8 +125,7 @@
<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>
<a href="./rooms.php" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
</div>
</div>
</div>
@ -154,8 +153,7 @@
<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>
<a href="./rooms.php" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
</div>
</div>
</div>
@ -183,8 +181,7 @@
<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>
<a href="./rooms.php" class="btn-minor d-block" style="font-size: 14px;">More Details</a>
</div>
</div>
</div>
@ -212,15 +209,14 @@
<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>
<a href="./rooms.php" 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>
<a href="" class="btn-th">Booking</a>
</div>
</div>
</div>
@ -288,5 +284,24 @@
<?php require('./components/script.php') ?>
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
effect: "fade",
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});
var swiper = new Swiper(".swiper-testimonials", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});
</script>
</body>
</html>

229
hotel_booking/rooms.php
View file

@ -60,6 +60,27 @@
border-radius: 5px;
background-color: #F6F4F2;
}
.swiper{
width: 100%;
height: 600px
}
.swiper-slide{
text-align: center;
font-size: 18px;
background: #F6F4F2;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-slide img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-pagination-bullet-active{
background-color: #E7E1D8 !important;
}
@media (max-width:990px){
.frame1{
@ -71,6 +92,10 @@
height: 40px;
font-size: 16px;
}
.swiper{
width: 100%;
height: 500px
}
.about-img{
width:100%;
height: 500px;
@ -82,10 +107,14 @@
}
}
@media (max-width:450px) {
.swiper{
width: 100%;
height: 450px
}
.about-img{
height: 450px;
}
}
}
</style>
</head>
<body>
@ -111,7 +140,20 @@
<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 class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/home3.jpg" class="about-img"/>
</div>
<div class="swiper-slide">
<img src="./images/home3.jpg" class="about-img"/>
</div>
<div class="swiper-slide">
<img src="./images/home3.jpg" class="about-img"/>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="col-md-6">
<div class="room-detail">
@ -139,17 +181,198 @@
<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>
<div class="panel" data-color="white">
<div class="frame">
<div class="frame1">
<div class="frame2">II</div>
</div>
<p class="frame-title">Deluxe room</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 d-flex justify-content-center">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/home3.jpg" class="about-img"/>
</div>
<div class="swiper-slide">
<img src="./images/home3.jpg" class="about-img"/>
</div>
<div class="swiper-slide">
<img src="./images/home3.jpg" class="about-img"/>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</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>
<div class="panel" data-color="white">
<div class="frame">
<div class="frame1">
<div class="frame2">III</div>
</div>
<p class="frame-title">Double room</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 d-flex justify-content-center">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/home3.jpg" class="about-img"/>
</div>
<div class="swiper-slide">
<img src="./images/home3.jpg" class="about-img"/>
</div>
<div class="swiper-slide">
<img src="./images/home3.jpg" class="about-img"/>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</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>
<div class="panel" data-color="white">
<div class="frame">
<div class="frame1">
<div class="frame2">IV</div>
</div>
<p class="frame-title">Suit room</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 d-flex justify-content-center">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/home3.jpg" class="about-img"/>
</div>
<div class="swiper-slide">
<img src="./images/home3.jpg" class="about-img"/>
</div>
<div class="swiper-slide">
<img src="./images/home3.jpg" class="about-img"/>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</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') ?>
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>
</body>
</html>

19
hotel_booking/script.js
View file

@ -51,21 +51,4 @@ $(window).scroll(function() {
}
});
}).scroll();
//===== swiper =====//
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
effect: "fade",
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});
var swiper = new Swiper(".swiper-testimonials", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
});