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

Accordion with plain HTML/CSS/JS

@BerylBucket

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


Feedback on how to arrange the images is great — I spend too long on that haha.

Of course, any other feedback is appreciated.

Community feedback

P
ApplePieGiraffe 30,565

@ApplePieGiraffe

Posted

Hey, BerylBucket! 👋

Nice job on another challenge! Your solution looks great and responds well and the accordion card works well, too! 👍

There are many ways to position the images in this challenge—you could try adding the background SVG as a CSS background image and positioning it with the background-position property. The main illustration could be added in your HTML inside the accordion card and then moved to the left using negative margin (just set overflow to hidden for the accordion card so that the extra part of the illustration isn't visible). When I did this challenge, I think I wrapped the accordion card and the floating cube in a single container which I set position: relative and then used absolute positioning to place the floating cube relative to the container. That way, the floating cube doesn't get cropped from setting overflow to hidden for the accordion card and always remains on the left side of the card.

Those are just some suggestions—of course, play around and experiment with what you like yourself! 😊

Keep coding (and happy coding, too)! 😁

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