Design comparison
Solution retrospective
Hello all, I decided to try my hand at the bonus challenge listed in the project notes (no JS). The accordion is a pure css approach, with no use of JS to toggle the accordion. Please let me know if there is a better solution!
At first this layout seemed obvious, but I ran into a few issues, such as how does the card behave if more than one accordion is open, and how it should wrap down for tablet views (no design provided). I made a few decisions myself, and I hope it works well.
As always, I look forward to any advice.
Community feedback
- @DraghonitePosted almost 3 years ago
I see, what you mean...for tablet and below, you made it scale down infinitely, which is a great idea though a min-width would've been good.
Also, there's currently a javascript error in the console, when loading the favicon.
I missed the active state and the bonus part...I got stuck on getting the images positioned right and couldn't get the shadow under the orange box with my method, which you accomplished. So I will be digging into your code for some pointers, especially given your css-only approach.
Overall, a solid attempt.
Marked as helpful1@BenjaDotMinPosted almost 3 years ago@Draghonite Yea that could be a good idea to add a min-width, good catch.
But yea feel welcome to take out parts of my code, it may not be the perfect solution, but I am fine with sharing it if it helps you achieve the look you want.
Thanks for the comment!
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