Merge pull request #827 from AswaniBolisetti/enhance-faq

enhanced faq section
ankit071105 · Oct 31, 2024 · 63b52af · 63b52af
2 parents 2b0dcb0 + 7107f85
commit 63b52af
Showing 1 changed file with 73 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -183,7 +183,80 @@
             align-items: center;
             text-align: center;
         }
+        #faq {
+        background-color: #f9f9f9;
+        padding: 3rem 0;
+    }
+
+    .faq-container {
+        max-width: 800px;
+        margin: auto;
+        padding: 2rem;
+        border-radius: 8px;
+    }
 
+    /* Heading styling */
+    #faq h2 {
+        text-align: center;
+        font-size: 2.5rem;
+        font-weight: bold;
+        margin-bottom: 2rem;
+        color: #333;
+    }
+
+    /* FAQ item styling */
+    .faq-item {
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        margin-bottom: 1rem;
+        overflow: hidden;
+    }
+
+    /* Question button styling */
+    .faq-question {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        background-color: #f1f1f1;
+        padding: 1rem;
+        font-size: 1.25rem;
+        font-weight: 500;
+        color: #333;
+        cursor: pointer;
+        border: none;
+        outline: none;
+        transition: background-color 0.3s;
+    }
+
+    .faq-question:hover {
+        background-color: #e1e1e1;
+    }
+
+    /* Answer text styling */
+    .faq-answer {
+        padding: 1rem;
+        font-size: 1rem;
+        line-height: 1.6;
+        color: #555;
+        display: none;
+    }
+
+    /* Toggle icon styling */
+    .expand-toggle {
+        font-size: 1.5rem;
+        transition: transform 0.3s;
+    }
+
+    /* Toggle open state */
+    .faq-item.active .expand-toggle {
+        transform: rotate(45deg); /* Rotate the plus to form an "X" */
+    }
+
+    .faq-item.active .faq-answer {
+        display: block;
+    }
         #next,
         #prev {
             position: absolute;