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

Huddle landing page with alternating feature blocks, using Flexbox

@LesleyWesley


Design comparison


SolutionDesign

Solution retrospective


Hey guys! Any feedback is welcome!

Community feedback

P
Grace 27,870

@grace-snow

Posted

This looks really great, well done! Very nice solution

The only things I'd tweak are in the footer, all relating to semantics

  • I'd make phone and email into links
  • I'd wrap the nav items in the footer in a nav element (labeled with aria-label footer)
  • I'd make that nav list into one list and use the column property on larger screens
  • if wrap those social icon in anchor tags, label them, set them to open in a new window and use rel="no opener"

Then after all that I'd make sure interactive elements all have clear and consistent focus-visible states.

Pretty small suggestions really, as this is already great ☺

0

@LesleyWesley

Posted

@grace-snow Thanks for the suggestions! :) I'll try to make those changes when I get a chance!

0
P
Patrick 14,325

@palgramming

Posted

Looks good the only thing I see is at about 1000px wide in the footer look how far your social icons become spaced apart from each other you might want to put them in a container or control the size of their container

0

@LesleyWesley

Posted

@palgramming Thanks for the heads up! I updated the solution and gave the container a max width so the icons would stay closer together :)

0
P
Patrick 14,325

@palgramming

Posted

@LesleyWesley glad it was a simple solution... Looks great

0

@LesleyWesley

Posted

@palgramming Thank you!

0

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