Skip to content
Submitted almost 4 years ago

Used HTML, CSS and JS.

Paritosh Sahni•80
@Paritosh7
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 had a hard time positioning the images and even more so trying to make the images be responsive. Used position - absolute and more for this. Also my I am repeating code in JS, which doesn't seem correct.

  1. Can someone help me regarding positioning images, in general? Like, what's a decent way of doing it, provided it can be responsive?

  2. Also, what could I have done better in my JS file. Thank you again, any help is good enough! Links to some better practices would be amazing too!

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted almost 4 years ago

    Hey, Paritosh Sahni! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉 Good work on this one! 👍

    I think using absolute positioning to position some of the SVGs in this challenge (such as the floating cube and the hero illustration in the mobile layout) is completely fine. You can use CSS background images for the hero illustration and background pattern (since those two elements don't overflow their container) and absolute positioning for the floating cube in the desktop layout. For the mobile layout, there should be an image for the hero illustration for the mobile layout that already includes the floating cube so you don't have to add yourself, then. You can use absolute positioning for the entire illustration in the mobile layout since it overflows its container.

    You might be able to make your JS more concise if you write some active and inactive classes for the elements that you want to change the styles of using JS and then simply toggle those classes on/off in JS. That way, you won't have to individually add all of those styles in your JS. 😉

    Keep coding (and happy coding, too)! 😁

    And happy holidays! 🎄

    2
    Paritosh Sahni•80
    @Paritosh7Posted almost 4 years ago

    @ApplePieGiraffe Hey! Thank you so much for taking the time to explain this in detail. Really appreciate your help! Yea, makes sense. I'll keep making changes on the fly and have more challenges to complete, so yes - I'll keep coding!

    Happy holidays to you too! Enjoy!

    1
  • Luca•210
    @DucknaroPosted almost 4 years ago

    Hi bro, I would suggest adding cursor: pointer to your sections and arrows because it looks a bit odd without it.

    1
    Paritosh Sahni•80
    @Paritosh7Posted almost 4 years ago

    @Ducknaro Yea, thanks! I'll do that.

    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