updated about page
This commit is contained in:
parent
ebd07a2f0c
commit
db0df041d6
1 changed files with 174 additions and 50 deletions
|
|
@ -19,6 +19,7 @@
|
||||||
.about-container{
|
.about-container{
|
||||||
width: 90%;
|
width: 90%;
|
||||||
height: 95vh;
|
height: 95vh;
|
||||||
|
margin: auto;
|
||||||
}
|
}
|
||||||
.about-title{
|
.about-title{
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
|
@ -75,38 +76,113 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
padding: 0px 10px 0px 10px;
|
||||||
}
|
}
|
||||||
.about-subcontainer{
|
.timeline{
|
||||||
display: flex;
|
position:relative;
|
||||||
justify-content: space-between;
|
margin:50px auto;
|
||||||
margin-top: 50px;
|
padding:40px 0;
|
||||||
width: 100%;
|
width:1000px;
|
||||||
text-align: center;
|
box-sizing:border-box;
|
||||||
gap: 30px;
|
|
||||||
}
|
}
|
||||||
.about-subwrapper{
|
.timeline:before{
|
||||||
width: 100%;
|
content:'';
|
||||||
justify-content: center;
|
position:absolute;
|
||||||
align-items: center;
|
left:50%;
|
||||||
|
width:2px;
|
||||||
|
height:100%;
|
||||||
|
background:#c5c5c5;
|
||||||
}
|
}
|
||||||
.about-subwrapper-img{
|
.timeline ul{
|
||||||
width: 90%;
|
padding:0;
|
||||||
|
margin:0;
|
||||||
}
|
}
|
||||||
.about-subwrapper-text{
|
.timeline ul li{
|
||||||
display: flex;
|
list-style:none;
|
||||||
flex-direction: column;
|
position:relative;
|
||||||
justify-content: center;
|
width:50%;
|
||||||
align-items: center;
|
padding:20px 40px;
|
||||||
height: 100%;
|
box-sizing:border-box;
|
||||||
}
|
}
|
||||||
.about-subwrapper-title{
|
.timeline ul li:nth-child(odd){
|
||||||
font-size: 16px;
|
float:left;
|
||||||
text-transform: uppercase;
|
text-align:left;
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
.timeline ul li:nth-child(even){
|
||||||
|
float:right;
|
||||||
|
text-align:left;
|
||||||
|
clear:both;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
padding-bottom:20px;
|
||||||
|
}
|
||||||
|
.timeline ul li:nth-child(odd):before{
|
||||||
|
content:'';
|
||||||
|
position:absolute;
|
||||||
|
width:10px;
|
||||||
|
height:10px;
|
||||||
|
top:24px;
|
||||||
|
right:-6px;
|
||||||
|
background:rgba(140,120,85,1);
|
||||||
|
border-radius:50%;
|
||||||
|
box-shadow:0 0 0 3px rgba(195,175,145,1);
|
||||||
|
}
|
||||||
|
.timeline ul li:nth-child(even):before{
|
||||||
|
content:'';
|
||||||
|
position:absolute;
|
||||||
|
width:10px;
|
||||||
|
height:10px;
|
||||||
|
top:24px;
|
||||||
|
left:-4px;
|
||||||
|
background:rgba(140,120,85,1);
|
||||||
|
border-radius:50%;
|
||||||
|
box-shadow:0 0 0 3px rgba(195,175,145,1);
|
||||||
|
}
|
||||||
|
.timeline ul li h3{
|
||||||
|
padding:0;
|
||||||
|
margin:0;
|
||||||
|
color:rgba(233,33,99,1);
|
||||||
|
font-weight:600;
|
||||||
|
}
|
||||||
|
.timeline ul li p{
|
||||||
|
margin:10px 0 0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.timeline ul li .time h4{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
font-size:14px;
|
||||||
|
}
|
||||||
|
.timeline ul li:nth-child(odd) .time{
|
||||||
|
position:absolute;
|
||||||
|
top:12px;
|
||||||
|
right:-250px;
|
||||||
|
margin:0;
|
||||||
|
padding:8px 16px;
|
||||||
|
background:rgba(140,120,85,1);
|
||||||
|
color:#fff;
|
||||||
|
border-radius:18px;
|
||||||
|
box-shadow:0 0 0 3px rgba(195,175,145,1);
|
||||||
|
}
|
||||||
|
.timeline ul li:nth-child(even) .time{
|
||||||
|
position:absolute;
|
||||||
|
top:12px;
|
||||||
|
left:-250px;
|
||||||
|
margin:0;
|
||||||
|
padding:8px 16px;
|
||||||
|
background:rgba(140,120,85,1);
|
||||||
|
color:#fff;
|
||||||
|
border-radius:18px;
|
||||||
|
box-shadow:0 0 0 3px rgba(195,175,145,1);
|
||||||
}
|
}
|
||||||
@media (max-width:1200px){
|
@media (max-width:1200px){
|
||||||
.about-wrapper-img{
|
.about-wrapper-img{
|
||||||
height: 80%;
|
height: 80%;
|
||||||
}
|
}
|
||||||
|
.timeline{
|
||||||
|
width:100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media (max-width:980px){
|
@media (max-width:980px){
|
||||||
.about-pre-title{
|
.about-pre-title{
|
||||||
|
|
@ -129,11 +205,6 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
.about-subtitle{
|
|
||||||
font-size: 18px;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0px 20px 0px 20px;
|
|
||||||
}
|
|
||||||
.about-wrapper-img{
|
.about-wrapper-img{
|
||||||
height: 60%;
|
height: 60%;
|
||||||
}
|
}
|
||||||
|
|
@ -141,23 +212,53 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50%;
|
height: 50%;
|
||||||
}
|
}
|
||||||
.about-subcontainer{
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
.about-container-title{;
|
.about-container-title{;
|
||||||
margin-top: -50px;"
|
margin-top: -80px;"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width:550px) {
|
@media (max-width:760px) {
|
||||||
.about-subtitle{
|
.about-subtitle{
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0px 10px 0px 10px;
|
padding: 0px 10px 0px 10px;
|
||||||
}
|
}
|
||||||
.about-img{
|
.about-img{
|
||||||
width: 230px;
|
width: 350px;
|
||||||
|
}
|
||||||
|
.timeline{
|
||||||
|
width:100%;
|
||||||
|
padding-bottom:0;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
font-size:40px;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
.timeline:before{
|
||||||
|
left:20px;
|
||||||
|
height:100%;
|
||||||
|
}
|
||||||
|
.timeline ul li:nth-child(odd), .timeline ul li:nth-child(even)
|
||||||
|
{
|
||||||
|
width:100%;
|
||||||
|
text-align:left;
|
||||||
|
padding-left:50px;
|
||||||
|
padding-bottom:50px;
|
||||||
|
}
|
||||||
|
.timeline ul li:nth-child(odd):before, .timeline ul li:nth-child(even):before
|
||||||
|
{
|
||||||
|
top:-18px;
|
||||||
|
left:16px;
|
||||||
|
}
|
||||||
|
.timeline ul li:nth-child(odd) .time, .timeline ul li:nth-child(even) .time
|
||||||
|
{
|
||||||
|
top:-30px;
|
||||||
|
left:50px;
|
||||||
|
right:inherit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width:580px) {
|
||||||
|
.about-img{
|
||||||
|
width: 250px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (max-width:450px) {
|
@media (max-width:450px) {
|
||||||
|
|
@ -207,27 +308,50 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!--pre section2-->
|
||||||
<div class="panel" data-color="cream">
|
<div class="panel" data-color="cream">
|
||||||
<div class="about-container">
|
<p class="about-container-title" >History</p>
|
||||||
<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 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.
|
||||||
<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>
|
||||||
Your visit will be enriched with distinctive and tailored experiences</p>
|
<div class="timeline">
|
||||||
<div class="about-subcontainer">
|
<ul>
|
||||||
<div class="about-subwrapper">
|
<li>
|
||||||
<img src="./images/about.jpg" class="about-subwrapper-img"/>
|
<div class="content">
|
||||||
</div>
|
<img src="./images/about.jpg" style="width: 100%; height: 100%;"/>
|
||||||
<div class="about-subwrapper" style="background-color: pink;">
|
<p>Midtown hotel is a beloved destination for travelers worldwide. With a commitment to excellence and personalized experiences, we've built a reputation that stands the test of time.
|
||||||
<div class="about-subwrapper-text">
|
<br/></br/> We continue to elevate the guest experience and shape the future of travel. Welcome to the next generation of hospitality at our hotel</p>
|
||||||
<p class="about-subwrapper-title">Background and future vision</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="time">
|
||||||
</div>
|
<h4>Background and future vision</h4>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="content">
|
||||||
|
<img src="./images/home2.jpg" style="width: 100%; height: 100%;"/>
|
||||||
|
<p>Every room is meticulously crafted, boasting ceilings towering at 4½ meters, creating an atmosphere of vastness and magnificence.
|
||||||
|
Savor artisanal cocktails expertly crafted by our master mixologists while basking in the ambiance of refined charm and unparalleled comfort</p>
|
||||||
|
</div>
|
||||||
|
<div class="time">
|
||||||
|
<h4>Ultimate luxury and elegance</h4>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="content">
|
||||||
|
<img src="./images/home1.jpg" style="width: 100%; height: 100%;"/>
|
||||||
|
<p>We strive to anticipate and exceed your every need, ensuring your experience with us is nothing short of extraordinary.
|
||||||
|
From personalized attention to seamless assistance, our dedicated team is here to elevate your stay and leave a lasting impression of unparalleled hospitality.</p>
|
||||||
|
</div>
|
||||||
|
<div class="time">
|
||||||
|
<h4>Exceptional customer service</h4>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<div style="clear: both;"></div>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--footer-->
|
<!--footer-->
|
||||||
<?php require('./components/footer.php'); ?>
|
<?php require('./components/footer.php'); ?>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue