diff --git a/faq-collapse/index.html b/faq-collapse/index.html new file mode 100644 index 0000000..a690091 --- /dev/null +++ b/faq-collapse/index.html @@ -0,0 +1,82 @@ + + + + + + + + FAQ + + +

Frequently Asked Questions

+
+
+

+ Why shouldn't we trust atoms? +

+ +

+ They make up everything +

+ + +
+ +
+

+ What do you call someone with no body and no nose? +

+

+ Nobody knows. +

+ +
+ +
+

+ What's the object-oriented way to become wealthy? +

+

+ Inheritance. +

+ +
+ +
+

+ How many tickles does it take to tickle an octopus? +

+

+ Ten-tickles! +

+ +
+ +
+

+ What is: 1 + 1? +

+

+ Depends on who are you asking. +

+ +
+
+ + + diff --git a/faq-collapse/script.js b/faq-collapse/script.js new file mode 100644 index 0000000..f1d63bb --- /dev/null +++ b/faq-collapse/script.js @@ -0,0 +1,7 @@ +const toggles = document.querySelectorAll('.faq-toggle') + +toggles.forEach(toggle => { + toggle.addEventListener('click', () => { + toggle.parentNode.classList.toggle('active') + }) +}) \ No newline at end of file diff --git a/faq-collapse/style.css b/faq-collapse/style.css new file mode 100644 index 0000000..cc2db22 --- /dev/null +++ b/faq-collapse/style.css @@ -0,0 +1,107 @@ +@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); + +* { + box-sizing: border-box; +} + +body { + font-family: 'Muli', sans-serif; + background-color: #f0f0f0; +} + +h1 { + margin: 50px 0 30px; + text-align: center; +} + +.faq-container { + max-width: 600px; + margin: 0 auto; +} + +.faq { + background-color: transparent; + border: 1px solid #9fa4a8; + border-radius: 10px; + margin: 20px 0; + padding: 30px; + position: relative; + overflow: hidden; + transition: 0.3s ease; +} + +.faq.active { + background-color: #fff; + box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1); +} + +.faq.active::before, +.faq.active::after { + content: '\f075'; + font-family: 'Font Awesome 5 Free'; + color: #2ecc71; + font-size: 7rem; + position: absolute; + opacity: 0.2; + top: 20px; + left: 20px; + z-index: 0; +} + +.faq.active::before { + color: #3498db; + top: -10px; + left: -30px; + transform: rotateY(180deg); +} + +.faq-title { + margin: 0 35px 0 0; +} + +.faq-text { + display: none; + margin: 30px 0 0; +} + +.faq.active .faq-text { + display: block; +} + +.faq-toggle { + background-color: transparent; + border: 0; + border-radius: 50%; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + padding: 0; + position: absolute; + top: 30px; + right: 30px; + height: 30px; + width: 30px; +} + +.faq-toggle:focus { + outline: 0; +} + +.faq-toggle .fa-times { + display: none; +} + +.faq.active .faq-toggle .fa-times { + color: #fff; + display: block; +} + +.faq.active .faq-toggle .fa-chevron-down { + display: none; +} + +.faq.active .faq-toggle { + background-color: #9fa4a8; +}