Design comparison
Solution retrospective
Decided to do this one without using Javascript. The irony is that the difficulties I had with this one didn't even come from the FAQ accordion itself, but rather the background image setup. I worked that out with a creative use of psuedo elements and overflows. I even animate the '@' box in desktop mode!
At the end of the day, I had fun with this one. Hope you enjoy it!
Community feedback
- @ApplePieGiraffePosted about 4 years ago
Hey, Dennis Griffin! 👋
Great work on this challenge! 👍
I, too, like the animation of the floating cube! 👏
I only suggest,
- Adding a hover state to the titles of the FAQs (I believe the original design shows they should turn orange upon hover). It's a small detail that I forgot, too, when I tackled this challenge!
Happy coding! 😁
1@dgdev1024Posted about 4 years ago@ApplePieGiraffe Fixed. Thanks for the catch!
0 - @artimysPosted about 4 years ago
Nicely done sir. Never would I have thought to use radio buttons to create the accordion effect. HTML and CSS are also very well organized.
Love the box animation. Since the animation goes off every few seconds it could distract a user as they read the questions and answers...though not lengthy answers anyway.
Awesome work!!
1
Please log in to post a comment
Log in with GitHub
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