Skip to content
Submitted over 2 years ago

Skilled e-learning landing page using flex and grid

Xavier•140
@xavCS
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Skilled e-learning landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Enjoyed this one, had some fun using grid for the card pieces and flex to make the top and bottom banner pieces quick and easy as well as responsive. Unfortunately there is only one problem and a fairly big one, I don't know how to make the image scale properly when resizing, so at the 3 design resolutions from figma it works as intended but after that the scaling gets all kinds of weird - would appreciate tips on how to fix that Other than that, I'm aware my usage of the 2x images is probably not the best ( would also take advice on this) and yes this is indeed some messy CSS.

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted over 2 years ago

    👾 Hello Xavier, congratulations for your solution, this is a really hard challenge I've done it too.

    The image scaling was a big issue for me too. Then I've learned that one solution for this image issue is using overflow: hidden; inside the hero section and use position:absolute; in the hero image, this way the image get cropped without move the elements when the widow scale.

    Here's my solution if you want to see the code applied, there's also a comment explaining how to apply it to the hero section:

    https://www.frontendmentor.io/challenges/skilled-elearning-landing-page-S1ObDrZ8q/hub/skilled-elearning-landing-page-vanilla-css-wr-dMF3Qk1

    Hope it helps and congratulations for this tricky challenge. Happy coding.

    Marked as helpful
    1
    Xavier•140
    @xavCSPosted over 2 years ago

    @correlucas Hey Lucas, I tried some absolute positioning and hiding overflows but the image seemed to not want to respond at all, like totally fubar. Nice to know I wasn't the only one struggling with that though! Your link doesn't seem to be working? It won't allow me to access Thanks

    0
    Lucas 👾•104,400
    @correlucasPosted over 2 years ago

    @xavCS https://www.frontendmentor.io/solutions/skilled-elearning-landing-page-vanilla-css-wr-dMF3Qk1

    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