added about page
This commit is contained in:
parent
e26efa2e8e
commit
ebd07a2f0c
1 changed files with 110 additions and 18 deletions
|
|
@ -20,11 +20,8 @@
|
|||
width: 90%;
|
||||
height: 95vh;
|
||||
}
|
||||
.about-pre-title{
|
||||
display: none;
|
||||
}
|
||||
.about-title{
|
||||
font-size: 24px;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
|
|
@ -33,6 +30,8 @@
|
|||
}
|
||||
.about-subtitle{
|
||||
font-size: 26px;
|
||||
text-transform: uppercase;
|
||||
width: 500px;
|
||||
}
|
||||
.about-wrapper{
|
||||
width: 100%;
|
||||
|
|
@ -50,16 +49,66 @@
|
|||
justify-content: 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{
|
||||
width: 60%;
|
||||
height: 40%;
|
||||
object-fit: cover;
|
||||
}
|
||||
@media (max-width:980px){
|
||||
.about-container{
|
||||
width: 90%;
|
||||
height: 100vh;
|
||||
.about-text{
|
||||
max-width: 650px;
|
||||
text-align: center;
|
||||
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{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -71,20 +120,45 @@
|
|||
text-shadow: 2px 2px 1px #EAD8C0;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.about-title{
|
||||
display: none;
|
||||
.about-wrap{
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
flex-direction: row;
|
||||
}
|
||||
.about-wrapper{
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
.about-wrap{
|
||||
justify-content: start;
|
||||
.about-subtitle{
|
||||
font-size: 18px;
|
||||
width: 100%;
|
||||
padding: 0px 20px 0px 20px;
|
||||
}
|
||||
.about-wrapper-img{
|
||||
height: 60%;
|
||||
}
|
||||
.about-img{
|
||||
width: 100%;
|
||||
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) {
|
||||
.about-pre-title{
|
||||
|
|
@ -93,8 +167,14 @@
|
|||
.about-hero{
|
||||
height: 80vh;
|
||||
}
|
||||
.about-subtitle{
|
||||
font-size: 20px;
|
||||
.about-wrapper-img{
|
||||
height: 100%;
|
||||
}
|
||||
.about-text{
|
||||
font-size: 12px;
|
||||
}
|
||||
.about-img{
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -113,14 +193,13 @@
|
|||
<!--pre section-->
|
||||
<div class="panel" data-color="white">
|
||||
<div class="about-container">
|
||||
<p class="about-pre-title">Our vision</p>
|
||||
<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;"/>
|
||||
</div>
|
||||
<div class="about-wrap">
|
||||
<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-subtitle">"The journey began with the aspiration to craft something exceptional"</p>
|
||||
</div>
|
||||
|
|
@ -130,7 +209,20 @@
|
|||
</div>
|
||||
<div class="panel" data-color="cream">
|
||||
<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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue