Skilled e-Learning Landing Page (Vanilla CSS + Easter Egg Hover Card)
Design comparison
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
- @AdrianoEscarabotePosted about 2 years ago
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.heroestá 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 helpful1 - @elaineleungPosted about 2 years ago
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 helpful0@correlucasPosted about 2 years ago@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
overflowbefore 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
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