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

updated contact page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-07 21:11:50 -05:00
parent 3f15ac8252
commit 41b0e3964c
3 changed files with 127 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
hotel_booking/components/header.php
View file

@ -10,10 +10,10 @@
<a class="nav-link" href="../services.php">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php">News</a>
<a class="nav-link" href="#">Dining</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
<a class="nav-link" href="#">News</a>
</li>
</ul>
</div>
@ -64,7 +64,7 @@
<a href="../services.php" class="nav-link">Services</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Gallery</a>
<a href="#" class="nav-link">Dining</a>
</li>
<li class="nav-item">
<a href="../about.php" class="nav-link">About</a>

117
hotel_booking/contact.php
View file

@ -36,12 +36,71 @@
width: 100%;
height: auto;
}
.container-accordion{
display: flex;
flex-direction: column;
max-width: 1000px;
margin-bottom: 50px;
padding: 20px;
}
.accordion{
background-color: white;
padding: 12px;
cursor: pointer;
border-top: 1px solid #B0A695;
border-left: 1px solid #B0A695;
border-right: 1px solid #B0A695;
}
.accordin_{
border-bottom: 1px solid #B0A695;
}
.accordion-header{
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background-color: transparent;
font-size: 28px;
cursor: pointer;
padding: 5px;
color: #271E24;
}
.accordion-header span{
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.accordion-body{
color: #444;
font-size: 14px;
opacity: 0;
height: 0;
overflow: hidden;
transition: opacity .3s
}
.accordion-body.active{
height: 100%;
opacity: 1;
padding: 5px;
}
.arrow{
transition: transform .2s linear;
}
.accordion:has(.active) .arrow{
transform: rotate(180deg);
}
@media (max-width:980px) {
.contact-container{
flex-direction: column;
gap: 50px;
margin: 75px auto;
width: 90%;
width: 95%;
}
.accordion-header{
font-size: 24px;
}
}
@media (max-width:450px) {
@ -51,6 +110,9 @@
.contact-container{
margin: 50px auto;
}
.accordion-header{
font-size: 20px;
}
}
</style>
</head>
@ -76,12 +138,61 @@
</div>
</div>
<div class="contact-wrapper">
<video class="video-contact" autoplay muted>
<video class="video-contact" autoplay muted loop>
<source src="./images/video.mp4" type="video/mp4" >
</video>
</div>
</div>
<div class="container-accordion">
<div class="accordion">
<button class="accordion-header">
<div style="display: flex; flex-direction: column; align-items: start;">
<span>Booking and information</span>
<p style="font-size: 14px;">(Contacts for booking rooms and information)</p>
</div>
<i class='bx bx-chevron-down arrow'></i>
</button>
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo, tortor ac dictum porttitor, leo nisl vehicula ante, a porttitor lectus erat vel odio. Proin ullamcorper urna euismod nisi facilisis tempus.</p>
</div>
</div>
<div class="accordion">
<button class="accordion-header">
<div style="display: flex; flex-direction: column; align-items: start;">
<span>Reservations and events</span>
<p style="font-size: 14px;">(Contacts for events and group bookings)</p>
</div>
<i class='bx bx-chevron-down arrow'></i>
</button>
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo, tortor ac dictum porttitor, leo nisl vehicula ante, a porttitor lectus erat vel odio. Proin ullamcorper urna euismod nisi facilisis tempus.</p>
</div>
</div>
<div class="accordion">
<button class="accordion-header">
<div style="display: flex; flex-direction: column; align-items: start;">
<span>Reception</span>
<p style="font-size: 14px;">(Contacts for guests)</p>
</div>
<i class='bx bx-chevron-down arrow'></i>
</button>
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo, tortor ac dictum porttitor, leo nisl vehicula ante, a porttitor lectus erat vel odio. Proin ullamcorper urna euismod nisi facilisis tempus.</p>
</div>
</div>
<div class="accordion accordin_">
<button class="accordion-header">
<div style="display: flex; flex-direction: column; align-items: start;">
<span>Management</span>
<p style="font-size: 14px;">(Hotel management and HR)</p>
</div>
<i class='bx bx-chevron-down arrow'></i>
</button>
<div class="accordion-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo, tortor ac dictum porttitor, leo nisl vehicula ante, a porttitor lectus erat vel odio. Proin ullamcorper urna euismod nisi facilisis tempus.</p>
</div>
</div>
</div>
</div>

11
hotel_booking/script.js
View file

@ -68,4 +68,13 @@ var swiper = new Swiper(".swiper-testimonials", {
delay: 2500,
disableOnInteraction: false,
},
});
});
//===== Accordio =====//
const accordions = document.querySelectorAll('.accordion')
accordions.forEach((accordion) => {
accordion.addEventListener('click', () => {
const body = accordion.querySelector('.accordion-body')
body.classList.toggle('active')
})
})