Skip to content
Submitted about 2 years ago

Skilled e-learning Landing Page

LEO•170
@Leo-LC
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

Couple questions to go further

How to properly use a wrapper ? What is it EXACTLY used for Should header/footer be included inside ?

On the tablet design, the text oh the left "paragraph" is like overflowing on the image on the right. Is that something manageable in this setup ?

I couldn't manage to get the space between the top and bottom section right. The height of the image was causing the grid height to be waaaay too big, and was pushing the bottom section quite afar, despite me moving the image. I had to "force" the grid height. How to avoid this ?

I also had to cheat on the size of the pink-ish block of the bottom section, how to make sure it has the same size as the other divs, despite a quite smaller content ?

Thanks to you all.

ps : I kinda rushed it in a few hours straight. If code is (way too) messy please let me know :D

Community feedback

  • Adriano•38,040
    @AdrianoEscarabotePosted about 2 years ago

    Hi LEO, how are you?

    I really liked the result of your project, but I have some tips that I think you will enjoy:

    You did a great job positioning the hero-image, this one gave me a lot of work to position ahuahuahuh I noticed that once the max-width is activated, the content is going to the side to avoid this we could use a margin in the body, to put all the child elements in the center. thus:

    body {
    margin: 0 auto;
}

    The rest is great!

    I hope it helps... 👍

    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