Merge pull request #1476 from aslams2020/FaqPage

✔️ Improved the FAQ Section!
khushi-joshi-05 · Jul 29, 2024 · d561a36 · d561a36
2 parents 881fc1c + e8a5e61
commit d561a36
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 53 deletions.
diff --git a/index.html b/index.html
@@ -719,8 +719,7 @@ <h3 class="overview">Laren Green</h3>
 
     <section class="faq-section" id="FAQ">
         <div class="container faq-container">
-            <h1>Frequently Asked Questions (FAQ)</h1>
-
+            <h1 class="main-faq-head">Frequently Asked Questions !</h1>
             <div class="faq-item">
                 <h2>How do I place an order?</h2>
                 <p>To place an order, browse our menu, select the items you want, and add them to your cart. Once you’re ready, click on the cart icon and proceed to checkout. Follow the instructions to complete your order.
@@ -756,9 +755,22 @@ <h2>Is there a minimum order value?</h2>
                 <h2>Do you offer any discounts or promotions?</h2>
                 <p>We regularly offer discounts and promotions. Check our website or subscribe to our newsletter to stay updated on the latest deals and offers.</p>
             </div>
+
+            <div class="faq-item">
+                <h2>Can I place an order for pickup?</h2>
+                <p>Yes, you can place an order for pickup. During checkout, select the pickup option and choose the time
+                    that is most convenient for you. You will receive a notification when your order is ready for pickup.</p>
+            </div>
+
+            <div class="faq-item">
+                <h2>How do I book a table for dining in?</h2>
+                <p>To book a table, navigate to the 'Book Table' section on our website. Select your preferred date and
+                    time, provide the necessary details, and confirm your booking. You will receive a confirmation email
+                    with your booking details.</p>
+            </div>
         </div>
     </section>
-
+    
     <div class="app_download pb-4">
         <h4>For Free Delivery!</h4>
         <h2 class="text-center">Download This Amazing App Now!</h2>

diff --git a/script.js b/script.js
@@ -11,10 +11,33 @@ document.addEventListener("DOMContentLoaded", function () {
   }, 500);
 });
 
-document.querySelectorAll('.faq-item h2').forEach(item => {
-  item.addEventListener('click', () => {
-      const parent = item.parentNode;
-      parent.classList.toggle('active');
+
+document.addEventListener('DOMContentLoaded', () => {
+  const faqItems = document.querySelectorAll('.faq-item');
+
+  faqItems.forEach(item => {
+    item.querySelector('h2').addEventListener('click', () => {
+      // Close all other items
+      faqItems.forEach(otherItem => {
+        if (otherItem !== item) {
+          otherItem.classList.remove('active');
+          const otherContent = otherItem.querySelector('p');
+          otherContent.style.maxHeight = 0;
+          otherContent.style.opacity = 0;
+        }
+      });
+
+      // Toggle the clicked item
+      item.classList.toggle('active');
+      const content = item.querySelector('p');
+      if (item.classList.contains('active')) {
+        content.style.maxHeight = content.scrollHeight + 'px';
+        content.style.opacity = 1;
+      } else {
+        content.style.maxHeight = 0;
+        content.style.opacity = 0;
+      }
+    });
   });
 });
 function getVisitorCount() {

diff --git a/style.css b/style.css
@@ -710,8 +710,11 @@ body {
 /* FAQS CONTAINER */
 
 .faq-section {
-    background-color: brown;
-    padding: 50px 20px;
+
+  background-color: rgb(173, 204, 255);
+  /* background: linear-gradient(345deg, #f7adad, #f01d1d); */
+  padding: 50px 20px;
+
 }
 
 @keyframes slideIn {
@@ -740,36 +743,53 @@ body {
     opacity: 1;
 }
 
+.main-faq-head {
+  font-weight: 800;
+  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif !important;
+  text-shadow: 1px 1px 2px rgb(255, 142, 142), 0 0 1em rgb(255, 46, 178), 0 0 0.2em blue;
+}
+
+.main-faq-head:hover {
+  text-shadow: 1px 1px 0px rgb(141, 255, 240), 0 0 0.6em rgb(0, 123, 142), 0 0 0.2em rgb(255, 0, 242);
+  cursor: pointer;
+}
+
 .faq-container {
-    max-width: 800px;
-    margin: 0 auto;
-    color: white;
-    border-radius: 10px;
-    background-color: #aa5858;
-    padding: 20px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
+
+  max-width: 900px;
+  margin: 0 auto;
+  color: white;
+  /* border-radius: 10px; */
+  /* background-color: #aa5858; */
+  /* background: linear-gradient(135deg, #c4c0c0, #ff7300); */
+  padding: 20px;
+  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); */
+
 }
 
 .faq-container h1 {
 
   text-align: center;
   margin-bottom: 30px;
-  font-size: 2.5rem;
+  font-size: 2.8rem;
   color: #fef8f6;
-  font-family: 'Times New Roman', Times, serif;
+  /* font-family: 'Times New Roman', Times, serif; */
 }
 
+
 .faq-item {
-  background-color: #c4c0c0;
-  margin-bottom: 20px;
+  background: linear-gradient(135deg, #c4c0c0, #d1a7a7);
+  margin-bottom: 15px;
   border-bottom: 1px solid #ffddcc;
-  padding-bottom: 10px;
+  /* padding-bottom: 10px; */
   transition: background-color 0.3s ease, transform 0.3s ease;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  border-radius: 5px;
 }
 
 .faq-item:hover {
 
-  transform: scale(1.02);
+  transform: translateY(3px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
   background-color: brown;
   color: white;
@@ -779,39 +799,46 @@ body {
   cursor: pointer;
   margin: 0;
   padding: 15px;
-  background-color: brown;
+  background: linear-gradient(135deg, #ff6347, #b22222);
   border-radius: 5px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: background-color 0.3s ease, box-shadow 0.3s ease;
-  font-family: 'Times New Roman', Times, serif;
-  font-weight: 50;
-  font-size: 20px;
 
+  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-weight: 500;
+  font-size: 24px;
+  color: white;
 }
 
 .faq-item h2:hover {
-    background-color: #460d0d;
-    box-shadow: 0 4px 8px rgba(91, 19, 19, 0.5);
+  text-shadow: 2px 2px 4px rgba(0, 98, 125, 0.821), 2px 2px 4px rgba(155, 92, 255, 0.821);
+  background: linear-gradient(135deg, #da3232, #ff6347);
+
 }
 
 .faq-item p {
 
   font-family: 'Poppins', sans-serif;
-  font-size: 10px;
-  display: none;
-  margin: 10px 10px 15px;
+  font-size: 18px !important;
+  display: block;
   line-height: 1.6;
   opacity: 0;
-  transition: opacity 0.3s ease, max-height 0.3s ease,box-shadow 0.3s ease;
+  transition: opacity 0.5s ease, max-height 0.5s ease;
   max-height: 0;
+  padding: 0px 3px;
   overflow: hidden;
 
+  background: linear-gradient(135deg, #ff907c, #ff4e4e);
+  margin-bottom: 0px !important;
+
 }
+
 .faq-item p:hover{
-  background-color: brown;
-  color: white;
+  /* background-color: brown; */
+  /* color: white; */
+  background: linear-gradient(135deg, #ff5f43, #fd7c7c);
 }
 
 .faq-item.active p {
@@ -825,39 +852,29 @@ body {
 
 
 .faq-item h2::after {
-    content: "\25BC";
-    /* Unicode for downward arrow */
-    font-size: 1rem;
-    background-color: br;
-    color: white;
-    transition: transform 0.3s ease;
+
+  content: "\25BC"; /* Unicode for downward arrow */
+  font-size: 1rem;
+  color: white;
+  transition: transform 0.3s ease;
 }
 
 .faq-item.active h2::after {
-    transform: rotate(-180deg);
-    /* Rotate the arrow when active */
+  transform: rotate(-180deg); 
 }
 
 
-/* Additional styles for a more attractive look */
-
-.faq-container p {
-
-  font-size: 1.4rem;
-  font-family: "Verdana", sans-serif;
-  color: #212123;
-
 
-}
 
 .faq-container a {
     color: #ffddcc;
     text-decoration: underline;
 }
 
 .faq-container a:hover {
-    color: #ffc7b2;
-    /* Slightly lighter peach color on hover */
+
+  color: #ffc7b2; 
+
 }
 
 @media (max-width: 600px) {