From 3d5688735b60ba971238d0da59584e0922792bff Mon Sep 17 00:00:00 2001 From: Juthatip McDevitt Date: Sun, 9 Jun 2024 21:44:04 -0500 Subject: [PATCH] updated service page --- hotel_booking/components/header.php | 4 +- hotel_booking/contact.php | 12 +- hotel_booking/script.js | 9 - hotel_booking/services.php | 264 +++++++++++++++++++++------- hotel_booking/style.css | 3 - 5 files changed, 215 insertions(+), 77 deletions(-) diff --git a/hotel_booking/components/header.php b/hotel_booking/components/header.php index 251ddc6..3e2786b 100644 --- a/hotel_booking/components/header.php +++ b/hotel_booking/components/header.php @@ -10,7 +10,7 @@ Services
  • - Dining + Dining
  • News @@ -64,7 +64,7 @@ Services
  • - Dining + Dining
  • About diff --git a/hotel_booking/contact.php b/hotel_booking/contact.php index f5d510b..fb3ae7b 100644 --- a/hotel_booking/contact.php +++ b/hotel_booking/contact.php @@ -291,12 +291,18 @@ - - - + \ No newline at end of file diff --git a/hotel_booking/script.js b/hotel_booking/script.js index 5ac69ab..54449ef 100644 --- a/hotel_booking/script.js +++ b/hotel_booking/script.js @@ -69,12 +69,3 @@ var swiper = new Swiper(".swiper-testimonials", { disableOnInteraction: false, }, }); -//===== Accordio =====// -const accordions = document.querySelectorAll('.accordion') - -accordions.forEach((accordion) => { - accordion.addEventListener('click', () => { - const body = accordion.querySelector('.accordion-body') - body.classList.toggle('active') - }) -}) \ No newline at end of file diff --git a/hotel_booking/services.php b/hotel_booking/services.php index b9a0e13..f705321 100644 --- a/hotel_booking/services.php +++ b/hotel_booking/services.php @@ -40,6 +40,9 @@ .pre-header-subtitle{ width: 30%; } + .pool-pannel, .pool-frame{ + margin-top: 200px; + } .service-frame{ display: flex; align-items: center; @@ -119,7 +122,7 @@ background-color: rgba(255, 255, 255, 0.2); } .flip-card-back{ - background-color: white; + background-color: #EEF7FF; color: #1F1914; transform: rotateY(180deg); display: flex; @@ -129,10 +132,11 @@ } .sauna-container{ width: 90%; - height: 100vh; + height: 100%; display:flex; justify-content: space-between; gap: 50px; + margin-bottom: 50px; } .sauna-wrapper{ width: 100%; @@ -143,8 +147,8 @@ } .sauna-service{ animation: sauna-slide 5s infinite; - height: 80vh; - width: 60%; + height: 750px; + width: 80%; } @keyframes sauna-slide{ 0%{ @@ -165,11 +169,93 @@ display: flex; justify-content: space-between; border-bottom: 1px solid #B3A398; - padding-top: 30px; - padding-bottom: 30px; + padding-top: 20px; + padding-bottom: 20px; font-size: 20px; } + .accordion-container{ + background-color: white; + width: 90%; + height: 100%; + margin-bottom: 50px; + } + .accordion{ + display: flex; + align-items: stretch; + height: 700px; + background-color: #eee; + } + .accordion-slide{ + position: relative; + padding-left: 130px; + max-width: 130px; + width: 100%; + background-color: #777; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + transition: max-width 0.3s; + } + .accordion-slide-label{ + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 140px; + display: flex; + align-items: center; + justify-content: flex-start; + padding-top: 30%; + writing-mode: vertical-lr; + transform: rotate(180deg); + transition: background-color 0.3s; + cursor: pointer; + user-select: none; + color: #fff; + font-size: 20px; + font-weight: 600; + text-transform: uppercase; + } + .accordion-slide:nth-child(1) .accordion-slide-label{ + background-color: #4F6F52; + } + .accordion-slide:nth-child(2) .accordion-slide-label{ + background-color: #739072; + } + .accordion-slide:nth-child(3) .accordion-slide-label{ + background-color: #86A789; + } + .accordion-slide:nth-child(4) .accordion-slide-label{ + background-color: #BFD8AF; + } + .accordion-slide:nth-child(5) .accordion-slide-label{ + background-color: #D2E3C8; + } + .accordion-slide.active{ + max-width: 1404px; + background-color: #ccc; + } + .accordion-slide .accordion-slide-label{ + background-color: transparent; + } /*----- Responsive -----*/ + @media (max-width: 1200px) { + .accordion { + height: 500px; + } + .accordion-slide { + padding-left: 50px; + max-width: 50px; + } + .accordion-slide-label { + font-size: 16px; + letter-spacing: 0.5px; + width: 50px; + } + .sauna-service{ + width: 100%; + } + } @media (max-width:980px){ .pre-header-subtitle{ width: 80%; @@ -189,13 +275,22 @@ .sauna-container{ width: 100%; flex-direction: column; + justify-content: start; } .sauna-service{ - height: 50vh; + height: 550px; width: 90%; } + .sauna-text{ + padding-top: 10px; + padding-bottom: 10px; + font-size: 16px; + } } @media (max-width:768px) { + .pool-pannel, .pool-frame{ + margin-top: 100px; + } .service-subtilte{ font-size: 40px; } @@ -206,22 +301,55 @@ width: 320px; height: 450px; } - .sauna-text{ - padding-top: 5px; - padding-bottom: 5px; - font-size: 16px; + .accordion-slide{ + padding-left: 0; + max-width: 0; + width: 0; } + .accordion-slide-label{ + font-size: 10px; + font-weight: 400; + letter-spacing: 2px; + width: 0; + overflow: hidden; + } + .accordion-slide.active{ + padding-left: 20px; + max-width: 100%; + width: 100%; + } + .accordion-slide.active .accordion-slide-label{ + width: 20px; + } + .accordion-slide.active + .accordion-slide{ + padding-left: 20px; + width: 20px; + } + .accordion-slide.active + .accordion-slide .accordion-slide-label{ + width: 20px; + } + .accordion-slide-prev{ + padding-left: 20px; + width: 20px; + } + .accordion-slide-prev .accordion-slide-label{ + width: 20px; + } } @media (max-width:450px) { .service-subtilte{ font-size: 30px; } .sauna-container{ - gap: 0px; + gap: 20px; } .service-hero{ height: 80vh; } + .sauna-service{ + height: 450px; + width: 90%; + } } @@ -237,22 +365,21 @@ - -
    + +

    We craft enchanting moments of tranquility and serenity, far away from the chaos and stress of daily life

    -

    We ensure the well-being of your body, invigorate your senses, and provide tranquility for your mind. Our pools, suana, and massage therapy have become synonymous with relaxation and wellness.

    -
    - -
    -
    +

    We ensure the well-being of your body, invigorate your senses, and provide tranquility for your mind. Our pools, suana, and massage therapy have become synonymous with relaxation and wellness.

    +
    I

    Pools

    Relax with massaging spa jets in the perfect water temperature

    -
    +

    By blending expertise, hospitality, and a commitment to excellence, + these dedicated professionals ensure that every splash is met with delight, making the hotel pool a cherished haven for travelers far and wide.

    +
    @@ -286,8 +413,50 @@
    + +
    +
    +
    +
    III
    +
    +

    Massage

    +
    +

    Relax, Rejuvenate, and Unwind with Every Touch

    +

    The challenges of everyday life can place a significant burden on your physical well-being. + This is why it is crucial to prioritize self-care. Our massage sessions are dedicated to ensuring your body functions optimally, + enabling you to participate in activities such as completing a half marathon without any hindrances

    +
    +
    +
    +
    + 01 | Aromatherapy massages +
    +
    +
    +
    + 02 | Deep tissue massages +
    +
    +
    +
    + 03 | Hot stone massages +
    +
    +
    +
    + 04 | Thai massages +
    +
    +
    +
    + 05 | Swedish massage +
    +
    +
    +
    +
    -
    +
    II
    @@ -297,8 +466,6 @@

    Recharge batteries and strengthen immune system with sauna

    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

    -
    -
    @@ -333,45 +500,22 @@
    - -
    -
    -
    -
    III
    -
    -

    Massage

    -
    -

    Relax, Rejuvenate, and Unwind with Every Touch

    -

    The challenges of everyday life can place a significant burden on your physical well-being. - This is why it is crucial to prioritize self-care. Our massage sessions are dedicated to ensuring your body functions optimally, - enabling you to participate in activities such as completing a half marathon without any hindrances

    -
    -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    -
    -

    Aromatherapy massages

    -

    Deep tissue massages

    -

    Hot stone massages

    -

    Thai massages

    -

    Swedish massage

    -
    -
    -
    -
    + + - + \ No newline at end of file diff --git a/hotel_booking/style.css b/hotel_booking/style.css index 1c18e1a..9089483 100644 --- a/hotel_booking/style.css +++ b/hotel_booking/style.css @@ -32,9 +32,6 @@ ul{ .color-cream{ background-color: #DDD8D0; } -.color-blue{ - background-color: #EEF7FF; -} .color-pink{ background-color: #EDD8D8; }