Merge pull request #1070 from Devanshukoli/faq_page

<add> : Adding Faq page built with simple html, css & js
thinkswell · Jan 12, 2024 · 64ffc79 · 64ffc79
2 parents 4f7dc8e + ef0567a
commit 64ffc79
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 0 deletions.
diff --git a/FAQ_page/Devanshukoli/Index.html b/FAQ_page/Devanshukoli/Index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FAQ Page</title>
+    <link rel="stylesheet" href="./style.css" />
+    <style></style>
+  </head>
+  <body>
+    <section>
+      <h2 class="title">FAQ</h2>
+
+      <div class="faq">
+        <div class="question">
+          <h3>Is your website is secure?</h3>
+          <svg width="15" height="10" viewBox="0 0 42 25">
+            <path d="M3 3L21 12L39 3" stroke="white" stroke-width="7" storke-linecap="round"/>
+          </svg>
+        </div>
+
+        <div class="answer">
+          <p>Yes, it is :)</p>
+        </div>
+      </div>
+
+      <div class="faq">
+        <div class="question">
+          <h3>Do you charge Deals?</h3>
+          <svg width="15" height="10" viewBox="0 0 42 25">
+            <path d="M3 3L21 12L39 3" stroke="white" stroke-width="7" storke-linecap="round" />
+          </svg>
+        </div>
+
+        <div class="answer">
+          <p>NO, We don't ;(</p>
+        </div>
+      </div>
+      <div class="faq">
+        <div class="question">
+          <h3>What about price?</h3>
+          <svg width="15" height="10" viewBox="0 0 42 25">
+            <path d="M3 3L21 12L39 3" stroke="white" stroke-width="7" storke-linecap="round"/>
+          </svg>
+        </div>
+
+        <div class="answer">
+          <p>navigate through price page.</p>
+        </div>
+      </div>
+    </section>
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/FAQ_page/Devanshukoli/app.js b/FAQ_page/Devanshukoli/app.js
@@ -0,0 +1,7 @@
+const faqs = document.querySelectorAll('.faq')
+
+faqs.forEach(faq => {
+    faq.addEventListener('click', () => {
+        faq.classList.toggle('active')
+    })
+})
diff --git a/FAQ_page/Devanshukoli/style.css b/FAQ_page/Devanshukoli/style.css
@@ -0,0 +1,81 @@
+@import url("https://fonts.googleapis.com/css2?family=Sometype+Mono&display=swap");
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box: 
+}
+
+body {
+    font-family: "Sometype+Mono", sans-serif;
+    background: #e5d2d28a;
+    color : #160b0b
+}
+
+section {
+    min-height: 100vh;
+    width: 80%;
+    margin: 0 auto;
+    display : flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.title {
+    font-size: 3rem;
+    margin: 2rem 0rem;
+}
+
+.faq {
+    max-width: 700px;
+    margin-top: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 2px solid #ccc;
+    cursor: pointer;
+}
+
+.question {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.question h3 {
+    font-size: 1.8rem;
+}
+
+.answer {
+    max-height: 0;
+    overflow: hidden; 
+    transition: max-height 1.4s ease;
+}
+
+.answer p {
+    padding-top: 1rem;
+    line-height: 1.6;
+    font-size: 1.4rem;
+}
+
+.faq.active .answer {
+    max-height: 300px;
+    animation : fade 1s ease-in-out;
+}
+
+.faq.active svg {
+    transform: rotate(180deg)
+}
+
+svg {
+    transition: transform 0.5s ease-in;
+}
+
+@keyframes fade {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0px)
+    }
+}