From 3701122695862a6a7215f7f6cdd5dea404cd006f Mon Sep 17 00:00:00 2001
From: aarushisingh2004 <120239056+aarushisingh2004@users.noreply.github.com>
Date: Sat, 30 Dec 2023 17:06:08 +0530
Subject: [PATCH] adding faq section #6 issue

---
 index.html |  35 ++++++++++++++----
 styles.css | 106 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 133 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 04e8e9c..f517ada 100644
--- a/index.html
+++ b/index.html
@@ -122,17 +122,36 @@ <h3>Backend Development</h3>
                                 <i class="fas fa-database"></i>
                             </div>
                             <span>MongoDB</span>
-                     
-                </div>
-        
-           
-        
-            </div>
+                        </div>
+                        <!-- Add more skills with similar structure -->
+                    </div>
+             
         </section>
         
 
-
-<!-- FAQ section  -->
+<!-- FAQ section -->
+
+<section class="faq">
+    <div class="container">
+        <h2>Frequently Asked Questions</h2>
+
+        <details>
+            <summary>In which year do I  study?</summary>
+            <p>I study currently in 2nd year.</p>
+        </details>
+
+        <details>
+            <summary>Am I a member of any of the college societies?</summary>
+            <p>Yes , I am the member of __name of societies__</p>
+        </details>
+        <details>
+            <summary>What are my hobbies?</summary>
+            <p>I have various hobbies , I like to __name of hobbies__</p>
+        </details>
+      
+
+    </div>
+</section>
 
 
 
diff --git a/styles.css b/styles.css
index e0dd507..34285f1 100644
--- a/styles.css
+++ b/styles.css
@@ -225,3 +225,109 @@ h2 {
     display: block;
 }
 
+/* style of  FAQ section */
+
+/* FAQ section styling */
+.faq {
+    background-color: #f5f5f5;
+    padding: 50px 0;
+    text-align: center;
+}
+
+.container {
+    width: 80%;
+    margin: 0 auto;
+}
+
+h2 {
+    color: #333;
+    font-size: 2em;
+    margin-bottom: 30px;
+}
+
+.faq-item {
+    margin-bottom: 20px;
+}
+
+.question {
+    background-color: #0277bd;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 15px 20px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    width: 100%;
+    text-align: left;
+}
+
+.question:hover {
+    background-color: #01579b;
+}
+
+.answer {
+    display: none;
+    padding: 15px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    margin-top: 10px;
+    text-align: left;
+}
+
+.answer p {
+    margin: 0;
+}
+
+ /* FAQ section  */
+/* FAQ section styling */
+.faq {
+    background-color: #f5f5f5;
+    padding: 50px 0;
+    text-align: left; /* Align content to the left */
+}
+
+.container {
+    width: 80%;
+    margin: 0 auto;
+}
+
+h2 {
+    color: #333;
+    font-size: 2em;
+    margin-bottom: 30px;
+}
+
+details {
+    margin-bottom: 20px;
+    border-radius: 5px;
+    overflow: hidden;
+}
+
+summary {
+    background-color: #0277bd;
+    color: #fff;
+    padding: 15px 20px;
+    font-size: 1em;
+    cursor: pointer;
+    outline: none;
+}
+
+summary::-webkit-details-marker {
+    display: none;
+}
+
+summary:focus {
+    outline: none;
+}
+
+p {
+    background-color: #fff;
+    padding: 15px;
+    margin: 0;
+    border: 1px solid #ddd;
+    border-top: none;
+    border-radius: 0 0 5px 5px;
+    text-align: left;
+}