Accordion with plain HTML/CSS/JS

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  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