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-08 15:18:46 -05:00
parent 41b0e3964c
commit f7b6348f4d
2 changed files with 104 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
hotel_booking/components/footer.php
View file

@ -20,7 +20,7 @@
<p style="font-size: 22px;">Midtown Hotel</p>
<p style="margin-top: 10px;">36381 Trantow Hill,</p>
<p style="margin-top: -10px;">New Port, FL 57941</p>
<p style="margin-top: 50px;">+123 45 678 90 00</p>
<p style="margin-top: 50px;">(123) 456-7890</p>
<p style="margin-top: -10px;">reception@midtownhotel.com</p>
</div>
<div style="display: flex; margin-bottom:50px; gap: 10px; font-size: 30px;">

110
hotel_booking/contact.php
View file

@ -39,7 +39,7 @@
.container-accordion{
display: flex;
flex-direction: column;
max-width: 1000px;
min-width: 950px;
margin-bottom: 50px;
padding: 20px;
}
@ -83,15 +83,46 @@
.accordion-body.active{
height: 100%;
opacity: 1;
padding: 5px;
}
.accordion-wrapper{
width: 100%;
background-color: #F6F4F3;
border: 1px solid #ECE4DC;
display: flex;
flex-direction: column;
}
.accordion-text{
display: flex;
width: 90%;
justify-content: space-between;
margin: auto;
margin-top: 20px;
font-size: 20px;
font-weight: 500;
}
.accordion-area{
width: 90%;
padding: 10px 10px 0px 10px;
display: flex;
justify-content: space-between;
margin: auto;
border-top: 1px solid #ECE4DC;
border-left: 1px solid #ECE4DC;
border-right: 1px solid #ECE4DC;
background-color: white;
}
.accordion-area_{
border-bottom: 1px solid #ECE4DC;
margin-bottom: 20px;
}
.arrow{
transition: transform .2s linear;
}
.accordion:has(.active) .arrow{
transform: rotate(180deg);
}
@media (max-width:980px) {
.contact-container{
flex-direction: column;
@ -102,6 +133,19 @@
.accordion-header{
font-size: 24px;
}
.container-accordion{
min-width: 100%;
}
}
@media (max-width:760px) {
.accordion-text{
font-size: 15px;
font-weight: 600;
}
.accordion-area{
flex-direction: column;
align-items: center;
}
}
@media (max-width:450px) {
.contact-hero{
@ -148,12 +192,25 @@
<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>
<p style="font-size: 14px;">(Contacts for booking rooms and info)</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 class="accordion-wrapper">
<div class="accordion-text">
<p>Monday-Saturday</p>
<p>8:00am - 5:00pm</p>
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Phone</p>
<p>(123) 456-7891</p>
</div>
<div class="accordion-area accordion-area_">
<p style="font-weight: 500; font-size: 18px">Email</p>
<p>accombooking@midtownhotel.com</p>
</div>
</div>
</div>
</div>
<div class="accordion">
@ -165,7 +222,20 @@
<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 class="accordion-wrapper">
<div class="accordion-text">
<p>Monday-Friday</p>
<p>9:00am - 5:00pm</p>
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Phone</p>
<p>(123) 456-7892</p>
</div>
<div class="accordion-area accordion-area_">
<p style="font-weight: 500; font-size: 18px">Email</p>
<p>reservationsg@midtownhotel.com</p>
</div>
</div>
</div>
</div>
<div class="accordion">
@ -177,7 +247,20 @@
<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 class="accordion-wrapper">
<div class="accordion-text">
<p>Monday-Saturday</p>
<p>8:00am - 5:00pm</p>
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Phone</p>
<p>(123) 456-7890</p>
</div>
<div class="accordion-area accordion-area_">
<p style="font-weight: 500; font-size: 18px">Email</p>
<p>reception@midtownhotel.com</p>
</div>
</div>
</div>
</div>
<div class="accordion accordin_">
@ -189,7 +272,20 @@
<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 class="accordion-wrapper">
<div class="accordion-text">
<p>Monday-Saturday</p>
<p>9:00am - 5:00pm</p>
</div>
<div class="accordion-area">
<p style="font-weight: 500; font-size: 18px">Jane Doe <span style="font-size: 12px">(Office manager)</span></p>
<p>(123) 456-7899 || jdoe@midtownhotel.com</p>
</div>
<div class="accordion-area accordion-area_">
<p style="font-weight: 500; font-size: 18px">Fakey McFaker <span style="font-size: 12px">(General manager)</span></p>
<p>(123) 456-7898 || fmcfaker@midtownhotel.com</p>
</div>
</div>
</div>
</div>
</div>