From 41b0e3964c216fa6005b43ad81006928d44957d8 Mon Sep 17 00:00:00 2001 From: Juthatip McDevitt Date: Fri, 7 Jun 2024 21:11:50 -0500 Subject: [PATCH] updated contact page --- hotel_booking/components/header.php | 6 +- hotel_booking/contact.php | 117 +++++++++++++++++++++++++++- hotel_booking/script.js | 11 ++- 3 files changed, 127 insertions(+), 7 deletions(-) diff --git a/hotel_booking/components/header.php b/hotel_booking/components/header.php index cb1eff6..251ddc6 100644 --- a/hotel_booking/components/header.php +++ b/hotel_booking/components/header.php @@ -10,10 +10,10 @@ Services
  • - News + Dining
  • - Gallery + News
    • @@ -64,7 +64,7 @@ Services
  • - Gallery + Dining
  • About diff --git a/hotel_booking/contact.php b/hotel_booking/contact.php index 59c7389..4febf5e 100644 --- a/hotel_booking/contact.php +++ b/hotel_booking/contact.php @@ -36,12 +36,71 @@ width: 100%; height: auto; } + .container-accordion{ + display: flex; + flex-direction: column; + max-width: 1000px; + margin-bottom: 50px; + padding: 20px; + } + .accordion{ + background-color: white; + padding: 12px; + cursor: pointer; + border-top: 1px solid #B0A695; + border-left: 1px solid #B0A695; + border-right: 1px solid #B0A695; + } + .accordin_{ + border-bottom: 1px solid #B0A695; + } + .accordion-header{ + border: none; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + background-color: transparent; + font-size: 28px; + cursor: pointer; + padding: 5px; + color: #271E24; + } + .accordion-header span{ + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .accordion-body{ + color: #444; + font-size: 14px; + opacity: 0; + height: 0; + overflow: hidden; + transition: opacity .3s + } + .accordion-body.active{ + height: 100%; + opacity: 1; + + padding: 5px; + } + .arrow{ + transition: transform .2s linear; + } + .accordion:has(.active) .arrow{ + transform: rotate(180deg); + } @media (max-width:980px) { .contact-container{ flex-direction: column; gap: 50px; margin: 75px auto; - width: 90%; + width: 95%; + } + .accordion-header{ + font-size: 24px; } } @media (max-width:450px) { @@ -51,6 +110,9 @@ .contact-container{ margin: 50px auto; } + .accordion-header{ + font-size: 20px; + } } @@ -76,12 +138,61 @@
    -
    - +
    +
    + +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo, tortor ac dictum porttitor, leo nisl vehicula ante, a porttitor lectus erat vel odio. Proin ullamcorper urna euismod nisi facilisis tempus.

    +
    +
    +
    + +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo, tortor ac dictum porttitor, leo nisl vehicula ante, a porttitor lectus erat vel odio. Proin ullamcorper urna euismod nisi facilisis tempus.

    +
    +
    +
    + +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo, tortor ac dictum porttitor, leo nisl vehicula ante, a porttitor lectus erat vel odio. Proin ullamcorper urna euismod nisi facilisis tempus.

    +
    +
    +
    + +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse commodo, tortor ac dictum porttitor, leo nisl vehicula ante, a porttitor lectus erat vel odio. Proin ullamcorper urna euismod nisi facilisis tempus.

    +
    +
    +
    diff --git a/hotel_booking/script.js b/hotel_booking/script.js index 60b648c..5ac69ab 100644 --- a/hotel_booking/script.js +++ b/hotel_booking/script.js @@ -68,4 +68,13 @@ var swiper = new Swiper(".swiper-testimonials", { delay: 2500, disableOnInteraction: false, }, -}); \ No newline at end of file +}); +//===== 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