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
Lisviks 690

@Lisviks

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 @Lisviks just wanted to say congrats on the challenge solution, I think it looks great across all three sizes. Also yours is the first solution I've commented on so far that correctly put the <br> after the All rights reserved © Equalizer 2021 🤪

<picture>
          <source media="(min-width: 1440px)" srcset="./assets/bg-main-desktop.png" />
          <source media="(min-width: 768px)" srcset="./assets/bg-main-tablet.png" />
          <source media="(min-width: 375px)" srcset="./assets/bg-main-mobile.png" />
          <img src="./assets/bg-main-desktop.png" alt="background image" class="bg-image" />
        </picture>

Was a good way of handling the bg images.

For the Footer, I'd recommend against doing that social links the way you have. They should be links (even if they aren't going to real pages), with some sort of aria-label to indicate where they are going.

I'd recommend using aria-hidden on the various images / product logos.

Don't put the hover for the socials only on the Desktop media query. You never know if the user might just have their browser window at tablet size because they are using a different app beside it.

footer .socials div:hover {
    cursor: pointer;
    background: #fa7453;
  }

Hope this was of some help. Wishing you the all the best.

Marked as helpful

1

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