Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

faq-accordion-card-main

Benjamin Durandā€¢ 105

@Esquinte

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey! I would have liked to know, out of curiosity, how to complete this challenge without javascript. I know it's a bonus part but I searched for it and I didn't figure out how to do it.

Community feedback

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hi Benjamin, check out this article for a few other ways to do it. Here's another one using <details> + <summary> option as stated here. Congrats on this project BTW! The only observation I have is that if the viewport height is smaller than the content (I'm viewing this on a 600vh screen), the woman image on top is getting cut off. Other than that, awesome job! I really like the smooth transitions on your project and it stayed true to the design. Hope this helps! :-)

1

Benjamin Durandā€¢ 105

@Esquinte

Posted

@emestabillo Thank you for pointing me the way to do it. I like the technique in the first link but I guess the second one is more elegant. Regarding the issue about the viewport, I have setted min-height to 700px and we can see the woman image. I'm not sure if this is the best way to do it. I assumed the min-height was that of the design.

Thank you for your feedback, I appreciate it

1

Please log in to post a comment

Log in with GitHub
Discord logo

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