Meet Landing Page

Great design Franco, I also submitted the same challenge recently - my first submission. I'm not really satisfied with mine, so I am going to be having a look at your code to see where I can improve my own, hope you don't mind :)

I think this is a good implementation. It's interesting how you managed the hero section with the faces. Starting as a flexbox for mobile then moving into a grid for wider screens - I will have to look into using something like this myself.

I guess the only design decision I would question would be using .hero-decoration-1 for the main faces image on mobile and then switching out the background image on wider screens for the left side faces image.

I am not saying there is anything wrong with it, but for me, I would probably have another div responsible for the mobile background image and hide the others on mobile. As looking at the structure, that one div is responsible for showing the left image AND the center image - so in my eyes, it makes sense that they should be different elements. But that's just me and this is probably all personal preference! :)

Also interesting that for the steps circle, you used a pseudo-element, I just used a div with a width of 1px. Wondering which is better - I tend to not like using pseudo-elements as they cause me loads of trouble!

Also thanks for introducing me to the 'ch' unit!

Good job mate, some stuff here I can learn from and use in my designs :)

Hello, Franco! 👋

Good job on this one! Your solution responds well and overall looks good. Small thing to fix:

• Change the alt attributes for the .hero__logo, as it doesn't add any extra context for screen reader users. Since your image is decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.

Good luck with that, have fun coding! 💪