Skip to content
Submitted over 2 years ago

FAQ page with accordion style card using JS w/ JQUERY

Jon•40
@consumer185
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 couldn't get the images correct - I don't know if they are cropped (which I haven't covered yet in my bootcamp course) or there is manipulation of the Z axis (which came up briefly in the course but I'm not sure it's relevant). Any comments appreciated!

Community feedback

  • Karol Binkowski•1,640
    @GrzywNPosted over 2 years ago

    Great job!

    Not gonna lie, this one isn't newbie challenge at all. It's possible to make it right by manipulating background-size and background-position properties for example background-position: left 100px center or something like that. Also there is need to make one of the images overflow: hidden and to position absolutely the other one (box) with properties e.g. top: 50% and transform: translateY(-50%).

    To match the design in your future projects or even this one if you want to improve it, you can checkout PerfectPixel extension for Google Chrome or Diffchecker.

    Hope this helps! Keep up the great work and good luck!

    Marked as helpful
    1
    Jon•40
    @consumer185Posted over 2 years ago

    @GrzywN Many thanks for your feedback - I will make the changes shortly to get the images correct. Also thanks very much for the PerfectPixel extension tip, I've just installed and played around with it and I can see it will be very useful! Thanks again!

    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