updated contact page

hotel_booking/components/header.php

@@ -10,10 +10,10 @@
                     <a class="nav-link" href="../services.php">Services</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="index.php">News</a>
+                    <a class="nav-link" href="#">Dining</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#">Gallery</a>
+                    <a class="nav-link" href="#">News</a>
                 </li>
             </ul>
         </div>
@@ -64,7 +64,7 @@
                     <a href="../services.php" class="nav-link">Services</a>
                 </li>
                 <li class="nav-item">
-                    <a href="#" class="nav-link">Gallery</a>
+                    <a href="#" class="nav-link">Dining</a>
                 </li>
                 <li class="nav-item">
                     <a href="../about.php" class="nav-link">About</a>

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;
+            }
         }
     </style>
 </head>
@@ -76,12 +138,61 @@
                 </div>
             </div>
             <div class="contact-wrapper">
-                <video class="video-contact" autoplay muted>
+                <video class="video-contact" autoplay muted loop>
                     <source src="./images/video.mp4" type="video/mp4" >
                 </video> 
             </div>
         </div>
-        
+        <div class="container-accordion">
+            <div class="accordion">
+                <button class="accordion-header">
+                    <div style="display: flex; flex-direction: column; align-items: start;">
+                        <span>Booking and information</span>
+                        <p style="font-size: 14px;">(Contacts for booking rooms and information)</p>
+                    </div>
+                    <i class='bx bx-chevron-down arrow'></i>
+                </button>
+                <div class="accordion-body">
+                    <p>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.</p>
+                </div>
+            </div>
+            <div class="accordion">
+                <button class="accordion-header">
+                    <div style="display: flex; flex-direction: column; align-items: start;">
+                        <span>Reservations and events</span>
+                        <p style="font-size: 14px;">(Contacts for events and group bookings)</p>
+                    </div>
+                    <i class='bx bx-chevron-down arrow'></i>
+                </button>
+                <div class="accordion-body">
+                    <p>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.</p>
+                </div>
+            </div>
+            <div class="accordion">
+                <button class="accordion-header">
+                    <div style="display: flex; flex-direction: column; align-items: start;">
+                        <span>Reception</span>
+                        <p style="font-size: 14px;">(Contacts for guests)</p>
+                    </div>
+                    <i class='bx bx-chevron-down arrow'></i>
+                </button>
+                <div class="accordion-body">
+                    <p>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.</p>
+                </div>
+            </div>
+            <div class="accordion accordin_">
+                <button class="accordion-header">
+                    <div style="display: flex; flex-direction: column; align-items: start;">
+                        <span>Management</span>
+                        <p style="font-size: 14px;">(Hotel management and HR)</p>
+                    </div>
+                    <i class='bx bx-chevron-down arrow'></i>
+                </button>
+                <div class="accordion-body">
+                    <p>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.</p>
+                </div>
+            </div>
+        </div>
     </div>
 
 

hotel_booking/script.js

@@ -69,3 +69,12 @@ 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')
+  })
+})