Huddle landing page hero section

Hello, Parvathy! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉 Your solution looks pretty good! 😀

About the social media icons, I would highly recommend removing the !important flag to change the color of the icons on :hover and :active states. The hover state is still working even without the !important. So, I highly suggest avoiding using !important whenever you can.

Also, I recommend wrapping all the social icons with anchor tags instead of a div. It's important that a link element should be wrapped by the link element (not a div or anything else). Right now, the screen reader users don't know that there are social media links of the company.

I have some feedback on this solution:

• Alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.
• For the logo, the alternative text should be the company name, in this case, Huddle.

I hope you find this information beneficial. Happy coding! 😄

I downloaded your code and after experimenting with it, it seems the color property in this rule is affecting the hover state:

*,
::after,
::before {
  ...
  color: #fff;
}

If you remove it from there and put it in the body for instance, the social media icons will change color on hover.

oh ..Thanks a bunch. I might have accidentally added that in the pseudo class. Thanks for pointing it out. That was fast! I really appreciate it.

Thanks :)