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

@devignasrocys

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

Hi 👋 congrats on your solution. Aside from the validation errors above, which you should try and have a look at.

First did you try looking at your solution at different sizes? For instance in the mobile version, the icons for the buttons overlap the words. Then get very far away from the words as you scale up close to the tablet breakpoint. You would be better putting the image in the button tag <button><img>text</button> rather than using a before pseudo class and setting the icon as a background image.

You can't put a Header in a footer. Its considered invalid html. See "Permitted content" on mdn

Generally good use of classnames. smaller isn't particularly descriptive, smaller than what? To me smaller sounds more like a utility class.

Your <br> should be after "All rights reserved © Equalizer 2021"

For the main black background of the tablet version, set a max-width (iirc 600px)) and then use something like margin: 0 auto; to center it on the page.

You missed the hero images for the tablet version, although you do have them for the desktop version (although clipped). Be careful to check against the design.

Anyway, all the best and good luck with your next challenge! I hope this was some help, feel free to ask if something wasn't clear.

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