Meet Landing Page

Community feedback

• 

  Reinhardt Venter•25

  @RingoFloydPosted over 3 years ago

  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 :)

  1

  ---

  

  Franco A.•200

  @franco-aPosted over 3 years ago

  @RingoFloyd Go ahead! I'd be happy if you could learn from it :)

  0
• 

  Wayne Haworth•90

  @WayneHaworthPosted over 3 years ago

  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 :)

  1

  ---

  

  Franco A.•200

  @franco-aPosted over 3 years ago

  Hey @WayneHaworth . Pseudo-elements are great when it comes to purely decorative elements as you wouldn't need to change your html markup if you'd want to change or remove it. Ch is also really awesome when it comes to setting widths on text. Glad you liked it!

  0

  

  Wayne Haworth•90

  @WayneHaworthPosted over 3 years ago

  @franco-a That's a really good point about decorative pseudo-elements, I never thought of that. Thanks :)

  0
• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

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

  1