Skip to content
Submitted over 4 years ago

FAQ Accordian Card Using HTML CSS & JS

Priyanshu•40
@priyanshu769
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I haven't made it responsive. It works on desktop so any feedback regarding desktop will be helpful.

Code

Please log in to post a comment

Log in

Community feedback

  • Atharva Shandilya•160
    @Atharva-Shandilya

    Here are some suggestions, hope you like it : -

    1. Use 'margin: 145px 0px;' to vertically center your .page on your viewport.
    2. Avoid using position relative to position your elements. Instead use absolute for positioning. It will be easy for you to make your webpage responsive later.
    3. Reduce the size of card-bg-img.
    4. You didn't use the specified font colors in your build, So i would suggest you use that to make it look clean.
    5. You specified 'overflow: hidden;' but it seems that it is not working. So look into it.
    6. Use 'outline: none;' to hide the outline around the arrow button, when you click it.

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