FAQ UI (#645)

* Updated Masthead Design

* New

* Added animation

* Changed UI issue page

* Added

* UI changed of home page

* Made text readable

* Checking

* Fixed Bugs

* Added

* Contact form addition

* Contact form

* Style change of our journey

* FAQ ui change

---------

Co-authored-by: Kritika Singh <kritikasingh6881@gmail.com>

Author: sneha-tech03

faq.css

@@ -172,22 +172,96 @@ main {
   border-bottom: 3px solid #fdf0d5;
 }
 
+.heading-faq h1{
+  transform: translateY(-3vh);
+}
+
+.question-paragraph{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.para{
+  background: linear-gradient(45deg, teal, #d24848);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: bold;
+  text-align: center;
+  padding: 0.8rem;
+  margin: 4vh;
+  font-style: italic;
+  font-size: 1.25rem;
+}
+
+.question-paragraph i {
+  color: #8b0000;
+  font-weight: 600;
+  font-size: 7vh;
+  margin-bottom: 3vh;
+  display: inline-block;
+  animation: bounceIcon 1.2s ease-in-out infinite;
+}
+
+@keyframes bounceIcon {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-8px);
+  }
+}
+
+.faq-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+
 .faq {
+  position: relative;
+  width: 100%;
+  max-width: 900px;
+  box-sizing: border-box;
   color: #780000;
-  border-left: 4px solid #780000;
-  background: #fff;
-  border-top-right-radius: 1rem;
-  border-bottom-right-radius: 1rem;
   margin: 1rem auto;
-  max-width: 900px;
-  padding: 1rem;
+  padding: 1.5rem;
+  background: rgb(248, 246, 246);
+  border-radius: 1rem;
+  border-left: 4px solid #780000;
   box-shadow: 0 4px 8px rgba(120, 0, 0, 0.2);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
+  overflow: hidden;
+  z-index: 1;
 }
+
+.faq::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 4px;
+  width: 0%;
+  background: linear-gradient(to right, #ff4d4d, #780000); 
+ transition: width 0.9s cubic-bezier(0.25, 1, 0.5, 1);
+  z-index: 2;
+}
+
+/* On hover, animate the border across X-axis */
+.faq:hover::before {
+  width: 100%;
+}
+
 .faq:hover {
-  transform: translateY(-3px);
+  transform: translateX(-3px);
   box-shadow: 0 6px 12px rgba(120, 0, 0, 0.3);
 }
+
+
 .faq summary {
   cursor: pointer;
   font-size: 1.1rem;
@@ -207,7 +281,7 @@ a {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: #780000;
+  background:linear-gradient(-135deg,rgb(216, 94, 94) , rgb(147, 101, 132));
   color: #fdf0d5;
   width: 90%;
   max-width: 25rem;
@@ -218,10 +292,30 @@ a {
   text-align: center;
 }
 .ask h3 {
+  color: #802d2d;
   font-size: 1.5rem;
 }
+
+.ask:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
+  transition: all 0.9s ease-in-out;
+}
+
+
 .mail {
-  background-color: #fdf0d5;
+  background: linear-gradient(45deg, white, rgb(197, 195, 195));
+  border: none;
+  border-radius: 2rem;
+  padding: 0.75rem 1.5rem;
+  font-weight: bold;
+  color: #333;
+  box-shadow:
+    inset 0 2px 4px rgba(255, 255, 255, 0.6), /* inner shine */
+    inset 0 -2px 4px rgba(0, 0, 0, 0.1),      /* inner depth */
+    0 4px 8px rgba(0, 0, 0, 0.3);             /* outer shadow */
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+  transition: all 0.3s ease-in-out;
   width: 80%;
   border-radius: 1.5rem;
   text-align: center;
@@ -230,8 +324,14 @@ a {
   white-space: nowrap;
 }
 .mail a {
-  color: #780000;
+  color: #802d2d;
   font-weight: bold;
+  font-size: small;
+}
+
+.mail:hover{
+  
+  transition: all 0.8s ease-in-out;
 }
 
 .seperator {

faq.html

@@ -189,7 +189,14 @@
       <div class="heading-faq">
         <h1>Frequently Asked Questions</h1>
       </div>
-    
+
+      <div class="question-paragraph">
+        <span class="para"><p>Do you have question in mind ?</p>
+            <p>Know everything about The Cawnpore magazines</p></span>
+              <i class="fa-solid fa-circle-question"></i>
+            </div>
+          
+      <div class="faq-container">
 
       <div class="faq">
         <details>
@@ -234,7 +241,6 @@ <h1>Frequently Asked Questions</h1>
         </details>
       </div>
 
-      
       <div class="faq">
         <details>
         <summary><strong>Q: How to get involved as a developer or designer?</strong></summary>
@@ -249,13 +255,15 @@ <h1>Frequently Asked Questions</h1>
         </details>
       </div>
       </div>
+      </div>
+      
 
 
       <div class="ask">
         <h3>Got more questions?</h3>
         <span>Drop us an email at </span>
         <div class="mail">
-          <a href="mailto:thecawnporemagofficial@gmail.com">@thecawnporemagofficial@gmail.com</a>
+          <a href="mailto:thecawnporemagofficial@gmail.com"><i class="fa-solid fa-envelope">&nbsp;</i>thecawnporemagofficial@gmail.com</a>
         </div>
         <p>— we're here to help!</p>
       </div>