Skip to content
Submitted almost 4 years ago

FAQ Accordian Card Using HTML CSS & JS

Priyanshu•40
@priyanshu769
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

Community feedback

  • Atharva Shandilya•160
    @Atharva-ShandilyaPosted almost 4 years ago

    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.
    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