adding faq section #6 issue

SnowScriptWinterOfCode · Dec 30, 2023 · 3701122 · 3701122
1 parent cac10c2
commit 3701122
Show file tree

Hide file tree

Showing 2 changed files with 133 additions and 8 deletions.
diff --git 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
@@ -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;
+}