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
Request failed with status code 502
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Sunnyside Agency Landing Page

@vishalnirmal

Desktop design screenshot for the Sunnyside agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback is appreciated

Community feedback

P
tediko 6,580

@tediko

Posted

Hello, Vishal Nirmal! 👋

Good job on this one! 🎉 Your solution responds well and overall looks good. Here's my suggestions:

  • Change the alt attributes for the logo img, section backgrounds, .testimonial__item__image images, as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.
  • You should use anchor tags inside .menu__item li elements or in .section-2__elaborate-features__item__button so they behave like real links.

Good luck with that, have fun coding! 💪

Marked as helpful

1
eruj22 410

@eruj22

Posted

Overall your design is quite good, but you can improve it a little bit. Possible improvements:

  • mobile menu should be wider
  • hamburger icon should have cursor: pointer
  • social icons on hover should turn white; following code can help you .footer__social img:hover { filter: invert(95%) sepia(5%) saturate(0%) hue-rotate(16deg) brightness(160%) contrast(107%); }

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