tajulafreen · tajulafreen · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024
diff --git a/README.md b/README.md
@@ -260,7 +260,18 @@ In order to run this project you need:
 <p>Analog Watch is a visually appealing and functional timekeeping tool built using HTML, CSS, and JavaScript. This project features a classic analog clock design with distinct hour, minute, and second hands. The clock displays the current time with real-time updates, and its stylish design includes subtle shadowing and color adjustments to enhance its aesthetic appeal. The clock’s hands are dynamically styled with CSS for a modern and engaging look.</p>
 <ul>
 <li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/AnalogWatch/">Live Demo</a></li>
-<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/AnalogWatch/Calculator">Source</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/AnalogWatch">Source</a></li>
+</ul> 
+</details>
+</li>
+
+<li>
+<details>
+<summary>FAQ Application</summary>
+<p>The FAQ Application is a responsive web-based tool designed to provide users with quick and easy access to frequently asked questions and their answers. Built with HTML, CSS, and JavaScript, this project showcases a clean and intuitive interface that allows users to expand and collapse answers with a simple click.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/FAQApplication/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/FAQApplication">Source</a></li>
 </ul> 
 </details>
 </li>

diff --git a/Source-Code/FAQApplication/index.html b/Source-Code/FAQApplication/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FAQ Application</title>
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
+      integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <section>
+      <h1 class="title">Frequently Asked Questions</h1>
+      <div class="faq">
+        <div class="question">
+          <h3>1. What are the prerequisites for the training ?</h3>
+          <i class="fas fa-chevron-down"></i>
+        </div>
+        <div class="answer">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
+            vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum
+            quidem dolorem commodi laborum possimus voluptatibus quod minus, id
+            ipsum quo ducimus!
+          </p>
+        </div>
+      </div>
+      <div class="faq">
+        <div class="question">
+          <h3>2. When can I start my training ?</h3>
+          <i class="fas fa-chevron-down"></i>
+        </div>
+        <div class="answer">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
+            vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum
+            quidem dolorem commodi laborum possimus voluptatibus quod minus, id
+            ipsum quo ducimus!
+          </p>
+        </div>
+      </div>
+      <div class="faq">
+        <div class="question">
+          <h3>3. What will be the timings of the training ?</h3>
+          <i class="fas fa-chevron-down"></i>
+        </div>
+        <div class="answer">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
+            vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum
+            quidem dolorem commodi laborum possimus voluptatibus quod minus, id
+            ipsum quo ducimus!
+          </p>
+        </div>
+      </div>
+      <div class="faq">
+        <div class="question">
+          <h3>4. Will I get a hard copy of the certificate ?</h3>
+          <i class="fas fa-chevron-down"></i>
+        </div>
+        <div class="answer">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
+            vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum
+            quidem dolorem commodi laborum possimus voluptatibus quod minus, id
+            ipsum quo ducimus!
+          </p>
+        </div>
+      </div>
+      <div class="faq">
+        <div class="question">
+          <h3>5. What are the benifits of this training ?</h3>
+          <i class="fas fa-chevron-down"></i>
+        </div>
+        <div class="answer">
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore,
+            vitae officia? Modi, ut? Eius, voluptatum commodi. Porro voluptatum
+            quidem dolorem commodi laborum possimus voluptatibus quod minus, id
+            ipsum quo ducimus!
+          </p>
+        </div>
+      </div>
+    </section>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Source-Code/FAQApplication/script.js b/Source-Code/FAQApplication/script.js
@@ -0,0 +1,7 @@
+const faqs = document.querySelectorAll('.faq');
+
+faqs.forEach((faq) => {
+  faq.addEventListener('click', () => {
+    faq.classList.toggle('active');
+  });
+});
diff --git a/Source-Code/FAQApplication/style.css b/Source-Code/FAQApplication/style.css
@@ -0,0 +1,108 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Times New Roman", Times, serif;
+  background: linear-gradient(to right, #26265a, #2f1532);
+  color: white;
+  background-attachment: fixed;
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+section {
+  justify-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto;
+}
+
+.title {
+  font-size: 35px;
+  margin: 40px 0;
+  color: rgb(234, 209, 231);
+}
+
+.faq {
+  max-width: 700px;
+  margin-top: 20px;
+  padding: 20px;
+  border: 2px solid greenyellow;
+  cursor: pointer;
+  border-radius: 15px;
+}
+
+.question {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+h3 {
+  font-size: 25px;
+  color: rgb(234, 209, 231);
+}
+
+.answer {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 1.4s ease;
+  color: rgb(191, 253, 233);
+}
+
+.answer p {
+  padding-top: 20px;
+  line-height: 1.6;
+  font-size: 20px;
+}
+
+.faq.active .answer {
+  max-height: 300px;
+  animation: fade 1s ease-in-out;
+}
+
+i {
+  transition: transform 0.5s ease-in;
+  color: yellow;
+}
+
+.faq.active i {
+  transform: rotate(180deg);
+}
+
+@keyframes fade {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* @media screen and (max-width: 768px) {
+    section {
+      margin: 0 auto;
+    }
+  }
+
+  @media screen and (max-width: 1024px) {
+    section {
+      margin: 0 auto;
+    }
+  } */
+
+::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+body::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}