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

Equalizer landing page

P

@Sphynxo

Desktop design screenshot for the Equalizer landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P

@tarasis

Posted

Hey congrats on finishing the challenge. There are some issues, particularly in the between sizes.

  1. Add aria-labels to the social links so that a screenreader will read out what the links are for. Particularly regarding the social links.
  2. On tablet size (768x1024) the top right image is over the header text, and that continues to be the case until it swaps to the mobile version.
  3. Below about 560px to mobile version, the social icons go off the side of the page, causing horizontal scrolling. You would be better staying with mobile version till after that point.
  4. Between tablet and desktop sizing the red profile card goes behind the image.(in Safari). The problem here is that the .offer-price-box has a z-index of 0 after 800px. You set z-index: 3 in the media query upto max-width: 50rem.
  5. Don't just support :hover, also add :focus, you could do .ios-btn:where(:focus, :hover) that way someone using the keyboard to navigate around the page gets the effect too.
  6. Little thing, but there should be a <br> after the year in the footer.
  7. Don't use empty alts for images (on patterns, logos). Add a description, and it you feel its not an important thing for not sighted people, then use aria-hidden on them.
  8. You used the apple class for both the apple and android svgs.

Hope this was of some help to you.

Marked as helpful

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