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