Skip to content
Submitted over 4 years ago

FAQ Accordion Card using HTML and CSS

Pau S•40
@pcls25
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello! This is the first ever challenge I've joined. and this is the best solution I built that I can think of for this challenge.

I had a hard time implementing the toggleable dropdown without using JavaScript. Thankfully I found this code (Toggle dropdown CSS - CodePen https://codepen.io/desaraev/pen/MeybXw...). So, I built the said feature based on this.

Another struggle I found was positioning the bg-pattern-image and the box-illustration responsively since these two are absolute positioned. I wasn't able to implement this.

If you have suggestions on how to improve my solution or any feedback please feel free to comment. They are very much appreciated. Thank you!

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Pau S! 👋

    Great job on this challenge! It looks good and your accordion works great! 👍

    And congratulations upon completing your first Frontend Mentor challenge! 🎉

    I suggest,

    • Allowing the body to grow to the full height of the screen so that the background fills the entire viewport (even on large screens).
    • Setting a fixed width on the component so that it doesn't become too squeezed when the width of the screen grows smaller (you can always use a media query to immediately adjust its height when the component is simply too wide for the screen).
    • Making sure the background SVG is always centered in the mobile layout of the page (currently, it moves around when the page is resized).

    Keep coding (and happy coding, too)! 😁

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