Submitted almost 4 years ago

Pure CSS FAQ Accordion Card With Sweet CSS Animations

accessibility, sass/scss

LVL 5

ApplePieGiraffe•30,545

@ApplePieGiraffe

A solution to the FAQ accordion card challenge

Preview Code

Solution retrospective

Hey, everybody! 👋

This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.

I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.

I'm quite happy with the result! 😊

Any feedback on both the design and code is welcome and appreciated! 😃

Happy coding! 😁

EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on ApplePieGiraffe’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord