web_php/hotel_booking/about.php

332 lines
No EOL
11 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About the hotel | Midtown Hotel</title>
<?php require('./components/link.php') ?>
<style>
.about-hero{
position: relative;
height: 100vh;
background-size: cover;
background-position: center;
background-image: url(images/about.jpg);
width: 100%;
display: flex;
flex-direction: column;
}
.about-container{
display: none;
}
.about-container1{
display: block;
}
.about-img{
width:90%;
height: 650px;
object-fit: cover;"
}
.about-img2{
width: 100%;
height: 100%;
margin-top: 50px;
}
.about-title{
margin-top: 50px;
font-size: 16px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
color: #74512D;
text-shadow: 2px 2px 1px #AF8F6F;
}
.about-subtitle{
font-size: 26px;
text-transform: uppercase;
}
.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-text{
max-width: 650px;
text-align: center;
margin: auto;
font-size: 16px;
padding: 0px 10px 0px 10px;
}
.timeline{
position:relative;
margin:50px auto;
padding:40px 0;
width:1000px;
box-sizing:border-box;
}
.timeline:before{
content:'';
position:absolute;
left:50%;
width:2px;
height:100%;
background:#c5c5c5;
}
.timeline ul{
padding:0;
margin:0;
}
.timeline ul li{
list-style:none;
position:relative;
width:50%;
padding:20px 40px;
box-sizing:border-box;
}
.timeline ul li:nth-child(odd){
float:left;
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){
.timeline{
width:100%;
}
}
@media (max-width:990px){
.about-container{
display: block;
}
.about-img{
width: 100%;
height: 650px;
}
.about-img2{
margin-top: 20px;
}
.about-title, .about-subtitle{
margin-top: 30px;
text-align: center;
}
.about-pre-title{
display: flex;
justify-content: center;
font-size: 24px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 3px;
color: #B0A695;
text-shadow: 2px 2px 1px #EAD8C0;
margin-top: 50px;
}
.about-container1{
display: none;
}
}
@media (max-width:760px) {
.about-img{
height: 500px;
}
.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:450px) {
.about-img{
height: 450px;
}
.about-pre-title{
margin-top: 30px;
}
.about-hero{
height: 80vh;
}
.about-text{
font-size: 12px;
}
}
</style>
</head>
<body>
<!--Hero & Navbar section-->
<div class="about-hero">
<?php require('./components/header.php') ?>
<div class="hero-content">
<div class="hero-head">
<h1 class="hero-title">About the Hotel</h1>
<p class="hero-subtitle">Midtown hotel, where quality and great atmosphere unite</p>
</div>
</div>
</div>
<!--pre section-->
<div class="panel" data-color="white">
<div class="container" style="margin-bottom: 50px; margin-top: 50px;">
<div class="about-container">
<p class="about-title">Our vision</p>
<p class="about-subtitle">"The journey began with the aspiration to craft something exceptional"</p>
</div>
<div class="row">
<div class="col-lg-8">
<img src="./images/about.jpg" class="about-img"/>
</div>
<div class="col-lg-4">
<div>
<img src="./images/home4.jpg" class="about-img2"/>
<div class="about-container1">
<p class="about-title">Our vision</p>
<p class="about-subtitle">"The journey began with the aspiration to craft something exceptional"</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--pre section2-->
<div class="panel" data-color="cream">
<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="timeline">
<ul>
<li>
<div class="content">
<img src="./images/about.jpg" style="width: 100%; height: 100%;"/>
<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.
<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>
</div>
<div class="time">
<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>
<!--footer-->
<?php require('./components/footer.php'); ?>
<?php require('./components/script.php') ?>
</body>
</html>