Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Skilled e-Learning Landing Page (Vanilla CSS + Easter Egg Hover Card)

Lucas 👾 104,580

@correlucas

Desktop design screenshot for the Skilled e-learning landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


👾 Hello, Frontend Mentor coding community. This is my solution for the Skilled e-Learning Landing Page!

🤯 The main struggle I had with this challenge was positioning the hero-image overlapping the container. It took 2 days until I get help from Ahmed Bayoumi https://www.frontendmentor.io/profile/Bayoumi-dev that explained me how to create a better html structure and the overflow:hidden; property. I'm really grateful for that!

I added some hover features:

  • 👨‍🔬 Custom hover state on the gradient card using the ~ general sibling combinator .
  • 👻 Custom hover state on card icons.
  • 🎨 custom design improvements: I fixed some box-shadows that were cropped from Figma, If you take a look in the design you'll see that the left shadow from the tablet/mobile image are cropped. I fixed it changing the shadow position on Figma.

🕵 Happy to hear any feedback or advice!

Community feedback

Adriano 33,950

@AdrianoEscarabote

Posted

Falaa lucas! tudo bem?

Gostei muito do resultado, observei que você tomou um cuidado com a imagem hero em resoluções maiores e em resoluções menores, o posicionamento dela ficou ótimo!

Os efeitos que você colocou deu total diferença para a página, mas tenho uma dica:

Eu abri a página no celular e observei que o padding top da section.hero está um pouco grande, mas nada que tenho um impacto muito grande, só uma opinião mesmo, eu aconselho você a retirar o padding top!

O resto está perfeito, o prêmio de melhor skilled landing page vai para você!!!

Tamo junto man!

Marked as helpful

1

Lucas 👾 104,580

@correlucas

Posted

@AdrianoEscarabote Valeu man!

0
Elaine 11,420

@elaineleung

Posted

Hi Lucas, this is a really tough one! I remember I was helping someone do some troubleshooting for this challenge, and the positioning of the image was just almost impossible to do. There's still some overlapping of the image and the text at a certain breakpoint, but yes, I think this just really requires a lot of patience to get right, which might be why I haven't done this one yet as my own solution!

Anyway, I really like what you did in the "popular courses" box (is that the Easter egg? haha!), and the spinning icons are also really cool. As for feedback, the only thing I'd suggest is super minor, and that would be to make the logo a link that links back to the home page, since that is something normally done with a site's logo.

Great work here as usual, I just love the effort and thought you put into each of your designs. Got lots to learn from you! 😊

Marked as helpful

0

Lucas 👾 104,580

@correlucas

Posted

@elaineleung Thank you Elaine! Indeed this challenge was by far the hardest one, the image positioning made me cry a lots hahahahha Fortunately I went to a solution an asked help to Ahmed and he said me how to add the image properly, I think this was by far one of the best things I've learned here, I didn't knew how to use overflow before it! =) I'll fix soon the logo link.

Anyway, thank you for the time you spent writing this comment and the kind words.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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