From 126cebac2a35fa00e58d7a3ec57242ae130aaea4 Mon Sep 17 00:00:00 2001
From: MuraliDharan7 <ngmurali007@gmail.com>
Date: Thu, 20 Jun 2024 14:18:07 +0530
Subject: [PATCH] FAQ Section added

---
 index.html | 105 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css  |   2 +-
 2 files changed, 106 insertions(+), 1 deletion(-)
diff --git a/index.html b/index.html
index 69b57ece..6959e5c9 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,64 @@
     <link rel="stylesheet" href="Css-files/footer.css">
     <link rel="stylesheet" href="./style.css">
     <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+    <style>
+        .faq-container {
+            max-width: 800px;
+            margin: 50px auto;
+            padding: 20px;
+            background-color: brown;
+            color: white;
+            border-radius: 10px;
+        }
+
+        .faq-container h1 {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .faq-item {
+            margin-bottom: 20px;
+            border-bottom: 1px solid #ddd;
+            padding-bottom: 10px;
+        }
+
+        .faq-item h2 {
+            cursor: pointer;
+            margin: 0;
+            padding: 10px;
+            background-color: brown;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: relative;
+        }
+
+        .faq-item h2:hover {
+            background-color: brown;
+        }
+
+        .faq-item p {
+            display: none;
+            margin: 10px 0 0;
+        }
+
+        .faq-item.active p {
+            display: block;
+        }
+
+        .faq-item h2::after {
+            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 */
+        }
+    </style>
 </head>
 
 <body>
@@ -488,6 +546,53 @@ <h3 class="overview">Laren Green</h3>
             </div>
         </div>
     </section>
+    <section class="faq-container">
+        <h1>Frequently Asked Questions (FAQ)</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.</p>
+        </div>
+
+        <div class="faq-item">
+            <h2>What payment methods do you accept?</h2>
+            <p>We accept various payment methods including credit/debit cards, net banking, and popular digital wallets. You can select your preferred payment method at the checkout page.</p>
+        </div>
+
+        <div class="faq-item">
+            <h2>Can I schedule an order for later?</h2>
+            <p>Yes, you can schedule an order for a later time. During checkout, select the delivery time that suits you best.</p>
+        </div>
+
+        <div class="faq-item">
+            <h2>How can I track my order?</h2>
+            <p>Once your order is confirmed, you will receive a tracking link via email or SMS. You can use this link to track the status of your delivery in real-time.</p>
+        </div>
+
+        <div class="faq-item">
+            <h2>What should I do if I have a problem with my order?</h2>
+            <p>If you encounter any issues with your order, please contact our customer support immediately. You can reach us via the contact form on our website, email, or phone. We’re here to help you!</p>
+        </div>
+
+        <div class="faq-item">
+            <h2>Is there a minimum order value?</h2>
+            <p>Yes, there is a minimum order value depending on your location. The minimum order amount will be displayed during the checkout process.</p>
+        </div>
+
+        <div class="faq-item">
+            <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>
+    </section>
+
+    <script>
+        document.querySelectorAll('.faq-item h2').forEach(item => {
+            item.addEventListener('click', () => {
+                const parent = item.parentNode;
+                parent.classList.toggle('active');
+            });
+        });
+    </script>
 
     <div class="app_download pb-4">
         <h4>Free Delivery!</h4>
diff --git a/style.css b/style.css
index 639fbee6..ee67f44f 100644
--- a/style.css
+++ b/style.css
@@ -6,7 +6,7 @@
 }
 
 body{
-  background-color: black;
+  background-color:brown;
   overflow-x: hidden;
 }
 
