From 39f761e934474f38e7e7b8fb156058551d75a728 Mon Sep 17 00:00:00 2001
From: Shaik Arshid Banu <arshidbanushaik@gmail.com>
Date: Wed, 24 Jan 2024 01:25:01 +0530
Subject: [PATCH] Fix Bugs and Design Issues in FAQs Section

---
 index.html |  26 +++---
 styles.css | 230 +++++++++++++++--------------------------------------
 2 files changed, 77 insertions(+), 179 deletions(-)

diff --git a/index.html b/index.html
index c56491f..2d170f9 100644
--- a/index.html
+++ b/index.html
@@ -711,38 +711,40 @@ <h2 id="certificate-heading">Certificates</h2>
         <h1>
           <span id="faq-head">Frequently Asked Questions?</span>
         </h1>
-
+        <div class="tabss-container">
+          <section>
         <div class="tabss" data-aos="zoom-in">
-          <input type="radio" name="acc" id="acc1" />
+          <input type="checkbox" name="acc1" id="acc1" />
           <label for="acc1">
-            <h2>01</h2>
-            <h3>In which year do I study?</h3>
+          01 In which year do I study? 
           </label>
           <div class="contentfaqs"><p>I currently study in 2nd year.</p></div>
         </div>
-
+      </section>
+      <section>
         <div class="tabss" data-aos="zoom-in">
-          <input type="radio" name="acc" id="acc2" />
+          <input type="checkbox" name="acc2" id="acc2" />
           <label for="acc2">
-            <h2>02</h2>
-            <h3>Am I a member of any of the college societies?</h3>
+            02 Am I a member of any of the college societies? 
           </label>
           <div class="contentfaqs">
             <p>Yes, I am the part of college societies named_____</p>
           </div>
         </div>
-
+         </section>
+         <section>
         <div class="tabss" data-aos="zoom-in">
-          <input type="radio" name="acc" id="acc3" />
+          <input type="checkbox" name="acc3" id="acc3" />
           <label for="acc3">
-            <h2>03</h2>
-            <h3>What are my hobbies?</h3>
+           03 What are my hobbies? 
           </label>
           <div class="contentfaqs">
             <p>I have various hobbies, I like to ___name of hobbies___</p>
           </div>
+        </section>
         </div>
       </div>
+      </div>
     </section>
     <!----FAQ Section ending------------->
 
diff --git a/styles.css b/styles.css
index 2ed13f9..56b0429 100644
--- a/styles.css
+++ b/styles.css
@@ -227,7 +227,7 @@ input[type="file"] {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: "Poppins", sans-serif;
+  font-family: "Arial", sans-serif;
 }
 
 .faqs {
@@ -235,14 +235,7 @@ input[type="file"] {
   justify-content: center;
   align-items: center;
   min-height: 110vh;
-  background: linear-gradient(
-    45deg,
-    skyblue,
-    #d0eafa,
-    #b0ccdf,
-    #d0eafa,
-    skyblue
-  ); /* Change the gradient colors as needed */
+  background-color: #ffffff;
   border-radius: 0 !important;
   padding: 50px 0;
 }
@@ -256,172 +249,77 @@ input[type="file"] {
 }
 
 .containerfaqs h1 {
-  color: #333;
   font-size: 2.5em;
   text-align: center;
-  text-decoration: underline;
-  text-decoration-color: black;
-}
-
-.containerfaqs .tabss {
-  position: relative;
-  background: #fff;
-  padding: 15px 10px 0;
-  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.05);
-  border-radius: 5px;
-  overflow: hidden;
-  padding-right: 70px;
-}
-
-.containerfaqs .tabss input {
-  appearance: none;
-}
-
-.containerfaqs .tabss label {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  background-color: white;
-}
-
-.containerfaqs .tabss label::after {
-  content: "+";
-  position: absolute;
-  right: -35px;
-  font-size: 2em;
-  color: rgba(0, 0, 0, 0.1);
-  transition: transform 1s;
-}
-
-.containerfaqs .tabss:hover label::after {
-  color: #333;
-}
-
-.containerfaqs .tabss input:checked ~ label::after {
-  transform: rotate(135deg);
-  color: hidden;
-  overflow: hidden;
-}
-
-.containerfaqs .tabss input:checked ~ label h2 {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  color: rgba(255, 255, 255, 0.2);
-  font-size: 8em;
-  justify-content: flex-end;
-  padding: 20px;
-}
-
-.containerfaqs .tabss label h2 {
-  width: 50px;
-  height: 50px;
-  background: #333;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #fff;
-  font-size: 1.25em;
-  border-radius: 5px;
-  margin-right: 60px;
-  margin-top: 15px;
-  font-weight: 800;
-}
-
-.containerfaqs .tabss input:checked ~ label h2 {
-  position: absolute;
-  left: -10px;
-  width: 290%;
-  height: 320%;
-  color: rgba(255, 255, 255, 0.2);
-  font-size: 9em;
-  justify-content: flex-end;
-  margin-top: 10px;
-  border-radius: 0;
-}
-
-.containerfaqs .tabss:nth-child(2) label h2 {
-  background: linear-gradient(135deg, #70f570, #49c628);
-}
-
-.containerfaqs .tabss:nth-child(3) label h2 {
-  background: linear-gradient(135deg, #3c8ce7, #00eaff);
-}
-
-.containerfaqs .tabss:nth-child(4) label h2 {
-  background: linear-gradient(135deg, #ff96f9, #c32bac);
-}
-
-.containerfaqs .tabss:nth-child(5) label h2 {
-  background: linear-gradient(135deg, #fd6e6a, #ffc600);
-}
-
-.containerfaqs .tabss:nth-child(6) label h2 {
-  background: linear-gradient(135deg, #6c8bd8, #83719a);
-}
-
-.containerfaqs .tabss label h3 {
-  position: relative;
-  font-weight: 500;
-  color: #333;
-  z-index: 10;
-  margin-left: -50px;
-  margin-top: -5px;
-  font-size: larger;
 }
 
 #faq-head {
-  text-decoration: underline;
-  text-decoration-color: #3252a8;
-  color: #3252a8;
-}
-
-.containerfaqs .tabss .contentfaqs {
-  max-height: 0;
-  transition: 0.5s;
-  overflow: hidden;
-}
-
-.containerfaqs .tabss input:checked ~ .contentfaqs {
-  max-height: 100vh;
+  color:#0277bd;
+}
+
+.tabss-container {
+  section {
+    background-color:#ffffff;
+    label {
+     border-bottom: 1px solid #416378;
+     background-color:#1b577c;
+     padding: 15px 10px 0;
+     box-shadow: 0 15px 25px rgba(0, 0, 0, 0.05);
+     cursor:pointer;
+     display:block;
+     color:#fff;
+     margin:10px;
+     position:relative;
+     font-size: 20px;
+     &::after{
+      content:"+";
+      position:absolute;
+      right:20px;
+      top:50%;
+      transform:translateY(-50%);
+      color: #fff;
+      opacity:0.5;
+      font-weight:bold;
+      font-size:20px;
+     }
+    }
+    .contentfaqs {
+      max-height:0;
+      visibility:hidden;
+      overflow:hidden;
+      padding: 0 20px;
+      max-width:650px;
+      * {
+        opacity:0;
+      }
+    }
+    input{
+     &:checked + label + .contentfaqs {
+      max-height:100vh;
+      visibility:visible;
+      opacity:1;
+      padding:20px;
+      * {
+        opacity:1;
+      }
+     }
+     &:checked + label::after {
+      content:"X";
+      font-weight: bold;
+      font-size: 16px;
+    }
+    }
+  }
 }
 
-.containerfaqs .tabss .contentfaqs p {
-  position: relative;
-  padding: 10px 0;
-  color: #333;
-  z-index: 10;
-  font-weight: 500;
-  font-size: larger;
-}
 
-.containerfaqs .tabss input:checked ~ label h3 {
-  background-color: #fff;
-  padding: 2px 10px;
-  color: #333;
-  border-radius: 5px;
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
-  margin-top: 25px;
-}
 
-.containerfaqs .tabss input:checked ~ .contentfaqs p {
-  color: black;
-}
 /*************FAQs section ending********************/
 
 /************Feedback section starting********************/
 .feedbacksssection {
   min-height: 100vh;
-  background: linear-gradient(
-    45deg,
-    skyblue,
-    #d0eafa,
-    #b2c9d8,
-    #d0eafa,
-    skyblue
-  ); /* Change the gradient colors as needed */
+  background-color: #e0f7fa;
   border-radius: 0 !important;
   padding: 20px;
 }
@@ -432,9 +330,7 @@ input[type="file"] {
 }
 
 .feedbacksssection h1 span {
-  text-decoration: underline;
-  text-decoration-color: #3252a8;
-  color: #3252a8;
+  color: #0277bd;
 }
 
 .feedbacksssection .contact-right {
@@ -459,7 +355,7 @@ input[type="file"] {
 }
 
 .feedbacksssection button {
-  background-color: #3252a8;
+  background-color: #0277bd;
   color: #fff;
   padding: 10px 20px;
   border: none;
@@ -472,7 +368,7 @@ input[type="file"] {
 }
 
 #feed-item {
-  color: #3252a8;
+  color: #0277bd;
   font-weight: 600;
 }
 
@@ -480,7 +376,7 @@ input[type="file"] {
 .feedbacksssection #msg {
   display: block;
   margin-top: 15px;
-  color: #1a2c5b;
+  color: #0277bd;
   font-weight: bold;
 }