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

👾 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!