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

updated service page

Browse source
This commit is contained in:
Juthatip McDevitt 2024-06-05 19:08:07 -05:00
parent a8b371a391
commit 2c99c13d5b
2 changed files with 209 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

222
hotel_booking/services.php
View file

@ -7,7 +7,7 @@
<title>Midtown Hotel | Services</title>
<?php require('./components/link.php') ?>
<style>
.service-hero{
.service-hero, .sauna-service{
position: relative;
height: 100vh;
background-repeat: no-repeat;
@ -41,15 +41,6 @@
.pre-header-subtitle{
width: 30%;
}
.service-container{
display: flex;
width: 90%;
height: 100vh;
flex-direction: column;
align-items: center;
text-align: center;
margin: 20px;
}
.service-frame{
display: flex;
align-items: center;
@ -82,7 +73,104 @@
font-size: 50px;
font-weight: 500;
margin-bottom: 50px;
text-align: center;
}
.flip-container{
display: flex;
flex-direction: row;
gap: 20px;
width: 90%;
align-items: center;
justify-content:center;
}
.flip-card{
background-color: transparent;
width: 400px;
height: 500px;
}
.flip-card-inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner{
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-font-title{
position: absolute;
align-items: center;
display: flex;
justify-content: center;
width:100%;
height:100%;
padding: 20px;
font-size: 34px;
font-weight: 500;
color: white;
background-color: rgba(255, 255, 255, 0.2);
}
.flip-card-back{
background-color: white;
color: #1F1914;
transform: rotateY(180deg);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sauna-container{
width: 90%;
height: 100vh;
display:flex;
justify-content: space-between;
gap: 50px;
}
.sauna-wrapper{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.sauna-service{
animation: sauna-slide 5s infinite;
height: 80vh;
width: 60%;
}
@keyframes sauna-slide{
0%{
background-image: url(images/service2.jpg);
}
50%{
background-image: url(images/service2.jpg);
}
50.01%{
background-image: url(images/service_page2.jpg);
}
100%{
background-image: url(images/service_page2.jpg);
}
}
.sauna-text{
width: 90%;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #B3A398;
padding-top: 30px;
padding-bottom: 30px;
font-size: 20px;
}
/*----- Responsive -----*/
@media (max-width:980px){
.pre-header-subtitle{
width: 80%;
@ -99,11 +187,31 @@
.service-subtilte{
width: 90%;
}
.sauna-container{
width: 100%;
flex-direction: column;
}
.sauna-service{
height: 50vh;
width: 90%;
}
}
@media (max-width:768px) {
.service-subtilte{
font-size: 40px;
}
.flip-container{
flex-direction: column;
}
.flip-card {
width: 320px;
height: 450px;
}
.sauna-text{
padding-top: 20px;
padding-bottom: 20px;
font-size: 16px;
}
}
@media (max-width:450px) {
.service-subtilte{
@ -132,18 +240,94 @@
</div>
<!--pool section-->
<div class="panel" data-color="blue">
<div class="service-container">
<div class="service-frame">
<div class="service-frame1">
<div class="service-frame2">I</div>
</div>
<p class="service-title">Pools</p>
<div class="service-frame">
<div class="service-frame1">
<div class="service-frame2">I</div>
</div>
<p class="service-title">Pools</p>
</div>
<p class="service-subtilte">Relax with massaging spa jets in the perfect water temperature</p>
<div class="flip-container">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip-card-font-title">
<p>Outdoor Relaxation Pool</p>
</div>
<img src="./images/presec2.jpg" alt="Avatar" style="width:100%; height:100%;">
</div>
<div class="flip-card-back">
<p style="color: #B0A695; font-size: 12px; text-transform: uppercase; letter-spacing: 2px;">Seasonal</p>
<h3>Outdoor Pool</h3>
<p style="font-size: 14px; padding: 10px;">Our guests can enjoy an outdoor relaxation and leisure pool with a summer bar from May until September</p>
</div>
</div>
</div>
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<div class="flip-card-font-title">
<p> Indoor Relaxation Pool</p>
</div>
<img src="./images/service_page1.jpg" alt="Avatar" style="width:100%; height:100%;">
</div>
<div class="flip-card-back">
<p style="color: #B0A695; font-size: 12px; text-transform: uppercase; letter-spacing: 2px;">All season</p>
<h3>Indoor Pool</h3>
<p style="font-size: 14px; padding: 10px;"> Throughout the year and regardless of the weather conditions,
there is an indoor pool dedicated to relaxation and rest with measuring 22 x 20 m</p>
</div>
</div>
</div>
</div>
</div>
<!--sauna section-->
<div class="panel" data-color="pink">
<div class="service-frame" style="margin-top: 100px;">
<div class="service-frame1">
<div class="service-frame2">II</div>
</div>
<p class="service-title">Sauna</p>
</div>
<p class="service-subtilte">Recharge batteries and strengthen immune system with sauna</p>
<p class="pre-header" style="font-size: 18px;">Imagine the blissful experience of indulging in the rejuvenating benefits of a Finnish or steam sauna.
Enhance your immune system in an infrared sauna. Immerse yourself in the aromatic essence of herb, eucalyptus, or menthol saunas, and feel the instant refreshment </p>
</div>
<div class="panel" data-color="pink">
<div class="sauna-container">
<div class="sauna-wrapper">
<div class="sauna-service">
<div class="load"></div>
</div>
</div>
<div class="sauna-wrapper">
<div class="sauna-text">
<p>Eucalyptus sauna</p>
<p>45 - 50°C</p>
</div>
<div class="sauna-text">
<p>Finnish sauna</p>
<p>70 - 95°C</p>
</div>
<div class="sauna-text">
<p>Herbal sauna</p>
<p>45 - 50°C</p>
</div>
<div class="sauna-text">
<p>Infrared sauna</p>
<p>40 - 60°C</p>
</div>
<div class="sauna-text">
<p>Mentol sauna</p>
<p>45 - 58°C</p>
</div>
<div class="sauna-text">
<p>Steam sauna</p>
<p>45 - 55°C</p>
</div>
</div>
<p class="service-subtilte">Relax with massaging spa jets in the perfect water temperature</p>
<img src="./images/service_page1.jpg" style="width: 100%; height: 100%; objectfit: cover;"/>
</div>
</div>

10
hotel_booking/style.css
View file

@ -35,6 +35,9 @@ ul{
.color-blue{
background-color: #EEF7FF;
}
.color-pink{
background-color: #EDD8D8;
}
/*---Btn---*/
.btn-main{
background-color: #3C3633;
@ -327,8 +330,8 @@ ul{
}
.pre-header-testimonials{
width: 100px;
margin-bottom: 50px;
margin-top: 200px;
margin-bottom: -50px;
margin-top: 100px;
}
/*--Footer--*/
.footer{
@ -524,8 +527,7 @@ ul{
padding-right: 30px;
}
.pre-header-testimonials{
margin-top: 300px;
margin-bottom: 30px;
margin-bottom: -100px;
}
.footer-grid-1 a{
color: #93B1A6;