Skip to content
Submitted about 3 years ago

Faq Accordion

Julian•280
@Julr09
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

It's working as intended, but any feedback would be great, especially when it comes to how to make the orange arrow turn up when click and how to place a background image on a background image, they are kind of at the same level and don't really know how to change it. Thank you.

Community feedback

  • Julian•280
    @Julr09Posted about 3 years ago

    Hey, thank you so much, definitely will put in practice what you said and give a try to BEM

    0
  • David Osorio•560
    @osoriodevPosted about 3 years ago

    Hello.

    For the arrow you can use a transform property, specifically rotate. For example, transform: rotate(180deg)

    I see that you set the illustration as the background, it is not necessary, instead it is better to use the picture tag. With this HTML tag you can display different images depending on the viewport and include the mobile illustration and the desktop illustration.

    Last but not least, I suggest you use a CSS methodology like BEM and semantic HTML and try not to use too many div tags.

    I hope I've helped.

    0

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