From d8560019e60cbd15d5f69b9db6df1210efb5c278 Mon Sep 17 00:00:00 2001 From: Devanshukoli Date: Thu, 26 Oct 2023 12:14:39 +0530 Subject: [PATCH 1/2] : Initial commit, Added FAQ_page folder. --- FAQ_page/Devanshukoli/Index.html | 31 +++++++++++++++++++ FAQ_page/Devanshukoli/app.js | 1 + FAQ_page/Devanshukoli/style.css | 51 ++++++++++++++++++++++++++++++++ 3 files changed, 83 insertions(+) create mode 100644 FAQ_page/Devanshukoli/Index.html create mode 100644 FAQ_page/Devanshukoli/app.js create mode 100644 FAQ_page/Devanshukoli/style.css diff --git a/FAQ_page/Devanshukoli/Index.html b/FAQ_page/Devanshukoli/Index.html new file mode 100644 index 000000000..66f3d5dd0 --- /dev/null +++ b/FAQ_page/Devanshukoli/Index.html @@ -0,0 +1,31 @@ + + + + + + FAQ Page + + + + +
+

FAQ

+ +
+
+

Is your website is secure?

+ + + +
+ +
+

Yes, it is :)

+
+
+
+ + + diff --git a/FAQ_page/Devanshukoli/app.js b/FAQ_page/Devanshukoli/app.js new file mode 100644 index 000000000..c9cd42ff2 --- /dev/null +++ b/FAQ_page/Devanshukoli/app.js @@ -0,0 +1 @@ +console.log('hello world') \ No newline at end of file diff --git a/FAQ_page/Devanshukoli/style.css b/FAQ_page/Devanshukoli/style.css new file mode 100644 index 000000000..73717b632 --- /dev/null +++ b/FAQ_page/Devanshukoli/style.css @@ -0,0 +1,51 @@ +@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 p { +padding-top: 1rem; +line-height: 1.6; +font-size: 1.4rem; +} \ No newline at end of file From ef0567a817e82329ffa785c3e422306d5bec7e1a Mon Sep 17 00:00:00 2001 From: Devanshukoli Date: Thu, 26 Oct 2023 12:28:48 +0530 Subject: [PATCH 2/2] final production based code. --- FAQ_page/Devanshukoli/Index.html | 31 ++++++++++++++--- FAQ_page/Devanshukoli/app.js | 8 ++++- FAQ_page/Devanshukoli/style.css | 60 ++++++++++++++++++++++++-------- 3 files changed, 79 insertions(+), 20 deletions(-) diff --git a/FAQ_page/Devanshukoli/Index.html b/FAQ_page/Devanshukoli/Index.html index 66f3d5dd0..6a5faef08 100644 --- a/FAQ_page/Devanshukoli/Index.html +++ b/FAQ_page/Devanshukoli/Index.html @@ -5,9 +5,7 @@ FAQ Page - +
@@ -16,13 +14,38 @@

FAQ

Is your website is secure?

+ + + +
+ +
+

Yes, it is :)

+
+
+ +
+
+

Do you charge Deals?

-

Yes, it is :)

+

NO, We don't ;(

+
+
+
+
+

What about price?

+ + + +
+ +
+

navigate through price page.

diff --git a/FAQ_page/Devanshukoli/app.js b/FAQ_page/Devanshukoli/app.js index c9cd42ff2..237fe569d 100644 --- a/FAQ_page/Devanshukoli/app.js +++ b/FAQ_page/Devanshukoli/app.js @@ -1 +1,7 @@ -console.log('hello world') \ No newline at end of file +const faqs = document.querySelectorAll('.faq') + +faqs.forEach(faq => { + faq.addEventListener('click', () => { + faq.classList.toggle('active') + }) +}) \ No newline at end of file diff --git a/FAQ_page/Devanshukoli/style.css b/FAQ_page/Devanshukoli/style.css index 73717b632..91a1bb8fc 100644 --- a/FAQ_page/Devanshukoli/style.css +++ b/FAQ_page/Devanshukoli/style.css @@ -22,30 +22,60 @@ section { } .title { - font-size: 3rem; - margin: 2rem 0rem; - } + font-size: 3rem; + margin: 2rem 0rem; +} .faq { -max-width: 700px; -margin-top: 2rem; -padding-bottom: 1rem; -border-bottom: 2px solid #ccc; -cursor: pointer; + 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; + display: flex; + justify-content: space-between; + align-items: center; } .question h3 { -font-size: 1.8rem; + 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; + 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) + } } \ No newline at end of file