From 2c99c13d5b1d8442ec0db80233cdd3257d234ab1 Mon Sep 17 00:00:00 2001
From: Juthatip McDevitt <jtp@mcdevitt.tech>
Date: Wed, 5 Jun 2024 19:08:07 -0500
Subject: [PATCH] updated service page

---
 hotel_booking/services.php | 222 +++++++++++++++++++++++++++++++++----
 hotel_booking/style.css    |  10 +-
 2 files changed, 209 insertions(+), 23 deletions(-)

diff --git a/hotel_booking/services.php b/hotel_booking/services.php
index 15fd058..e693a0b 100644
--- a/hotel_booking/services.php
+++ b/hotel_booking/services.php
@@ -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>
-
             
 
 
diff --git a/hotel_booking/style.css b/hotel_booking/style.css
index c4b3a98..ec919e6 100644
--- a/hotel_booking/style.css
+++ b/hotel_booking/style.css
@@ -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;