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

added about page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-07 02:39:02 -05:00
parent e26efa2e8e
commit ebd07a2f0c
1 changed files with 110 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
hotel_booking/about.php
View file

@ -20,11 +20,8 @@
width: 90%; width: 90%;
height: 95vh; height: 95vh;
} }
.about-pre-title{
display: none;
}
.about-title{ .about-title{
font-size: 24px; font-size: 16px;
text-transform: uppercase; text-transform: uppercase;
font-weight: 500; font-weight: 500;
letter-spacing: 3px; letter-spacing: 3px;
@ -33,6 +30,8 @@
} }
.about-subtitle{ .about-subtitle{
font-size: 26px; font-size: 26px;
text-transform: uppercase;
width: 500px;
} }
.about-wrapper{ .about-wrapper{
width: 100%; width: 100%;
@ -50,16 +49,66 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.about-container-title{
font-size: 16px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
color: #776B5D;
text-shadow: 2px 2px 1px #B0A695;
text-align: center;
margin-top: 50px;"
}
.about-wrapper-img{
width: 100%;
height: 90%;
border: 1px solid #B0A695;
padding: 10px;
}
.about-img{ .about-img{
width: 60%; width: 60%;
height: 40%; height: 40%;
object-fit: cover; object-fit: cover;
} }
@media (max-width:980px){ .about-text{
.about-container{ max-width: 650px;
width: 90%; text-align: center;
height: 100vh; margin: auto;
font-size: 16px;
} }
.about-subcontainer{
display: flex;
justify-content: space-between;
margin-top: 50px;
width: 100%;
text-align: center;
gap: 30px;
}
.about-subwrapper{
width: 100%;
justify-content: center;
align-items: center;
}
.about-subwrapper-img{
width: 90%;
}
.about-subwrapper-text{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.about-subwrapper-title{
font-size: 16px;
text-transform: uppercase;
}
@media (max-width:1200px){
.about-wrapper-img{
height: 80%;
}
}
@media (max-width:980px){
.about-pre-title{ .about-pre-title{
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -71,20 +120,45 @@
text-shadow: 2px 2px 1px #EAD8C0; text-shadow: 2px 2px 1px #EAD8C0;
margin-top: 50px; margin-top: 50px;
} }
.about-title{ .about-wrap{
display: none; justify-content: center;
align-items: start;
flex-direction: row;
} }
.about-wrapper{ .about-wrapper{
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
} }
.about-wrap{ .about-subtitle{
justify-content: start; font-size: 18px;
width: 100%;
padding: 0px 20px 0px 20px;
}
.about-wrapper-img{
height: 60%;
} }
.about-img{ .about-img{
width: 100%; width: 100%;
height: 50%; height: 50%;
} }
.about-subcontainer{
flex-direction: column;
width: 100%;
gap: 20px;
}
.about-container-title{;
margin-top: -50px;"
}
}
@media (max-width:550px) {
.about-subtitle{
font-size: 12px;
width: 100%;
padding: 0px 10px 0px 10px;
}
.about-img{
width: 230px;
}
} }
@media (max-width:450px) { @media (max-width:450px) {
.about-pre-title{ .about-pre-title{
@ -93,8 +167,14 @@
.about-hero{ .about-hero{
height: 80vh; height: 80vh;
} }
.about-subtitle{ .about-wrapper-img{
font-size: 20px; height: 100%;
}
.about-text{
font-size: 12px;
}
.about-img{
width: 200px;
} }
} }
</style> </style>
@ -113,14 +193,13 @@
<!--pre section--> <!--pre section-->
<div class="panel" data-color="white"> <div class="panel" data-color="white">
<div class="about-container"> <div class="about-container">
<p class="about-pre-title">Our vision</p>
<div class="about-wrapper"> <div class="about-wrapper">
<div style="width: 100%; height: 90%; border: 1px solid #B0A695; padding: 10px;"> <div class="about-wrapper-img">
<img src="./images/presec1.jpg" style="width: 100%; height: 100%; object-fit: cover;"/> <img src="./images/presec1.jpg" style="width: 100%; height: 100%; object-fit: cover;"/>
</div> </div>
<div class="about-wrap"> <div class="about-wrap">
<img src="./images/home4.jpg" class="about-img"/> <img src="./images/home4.jpg" class="about-img"/>
<div style="margin-top: 20px; width: 350px;"> <div style="margin-top: 20px;">
<p class="about-title">Our vision</p> <p class="about-title">Our vision</p>
<p class="about-subtitle">"The journey began with the aspiration to craft something exceptional"</p> <p class="about-subtitle">"The journey began with the aspiration to craft something exceptional"</p>
</div> </div>
@ -130,7 +209,20 @@
</div> </div>
<div class="panel" data-color="cream"> <div class="panel" data-color="cream">
<div class="about-container"> <div class="about-container">
<p class="about-container-title" >History</p>
<p style="width: 100%; font-size: 24px; text-transform: uppercase; text-align: center; font-weight: 500;">From the <span style="color: #776B5D;">beginning</span></p>
<p class="about-text">We ensure that each guest receives individualized care and attention.
Your visit will be enriched with distinctive and tailored experiences</p>
<div class="about-subcontainer">
<div class="about-subwrapper">
<img src="./images/about.jpg" class="about-subwrapper-img"/>
</div>
<div class="about-subwrapper" style="background-color: pink;">
<div class="about-subwrapper-text">
<p class="about-subwrapper-title">Background and future vision</p>
</div>
</div>
</div>
</div> </div>
</div> </div>