Skip to content
Submitted over 1 year ago

Skilled e-learning landing page

doublem•620
@MarioMinchevski
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

This was a fun one! Two things that kinda puzzled me:

  • Did I pull off the image positioning in a correct way? It definitely works, but I don't know if it actually the way to go. Also, when I inspect it in Chrome, the overflow-x:hidden; did not work and there was a horizontal scroll bar. All good on Mozilla.

  • I could not get the height of the cards correct in the Desktop version. I'm sure I am missing something, but couldn't quite figure out what.

Any feedback would be very much appreciated, thank you!

Community feedback

  • Constantine Tereschenkov•230
    @kdubrovskyPosted over 1 year ago

    Hi, Mario! That was a great challenge, wasn't it? ) I'll try to clear for you some things:

    1. you can fix horizontal scroll by setting overflow-x: hidden for html tag (check this out)
    2. you might get rid of large image for hero section for pure css/html reconstruction of that statistics and gradient
    3. cards height is controlled by intrinsic elements size. Check line-heights, font-size and margins there to fix it Wish you the best and feel free to check my solution on GitHub 🙏
    0
    doublem•620
    @MarioMinchevskiPosted over 1 year ago

    @kdubrovsky

    Thank you for the feedback Constantine!

    • I have overflow-x: hidden for my body tag. And it works when you open the page. The scroll bar would appear only when I would open DevTools on Chrome, which I found odd. On Mozilla was fine in every scenario.

    • As for the cards, you're right. Should be something like that :)

    0
    Constantine Tereschenkov•230
    @kdubrovskyPosted over 1 year ago

    @MarioMinchevski You should try to set overflow-x: hidden for html and body.

    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