huddle landing page

Replace <div class="container"> with the main tag to fix the accessibility issue. the class of the icon tag should replace the class you gave the <a> anchor tag. e.g: <a href= "#" class="fa-brands fa-twitter fa-lg"> </a> repeat this for all the social media icons. In the styling use fa-brands to style the icons.

for the hero-image to responsive give .hero-image a max-width of 100% instead of a fixed width value. Add a max-width value to .container and replace the margin value with margin: 0 auto; e.g: .container{ max-width:1440px; width: 90%; margin: 0 auto; }

Give .header a padding value and margin-bottom value.

Hope am helpful HAPPY CODING

Hello!. Your solution looks fantastic and I have gone through your code. There are a few issues found in your codes. Here are my findings.

1. You don't set ALT attributes in some of your images. Try to set proper alt attributes in your coding because it is important for accessibility reasons as well as SEO
2. You don't put the default CSS reset coding in a CSS file. It is essential to reset the default CSS in order to minimize conflicts with your custom CSS. [Read this
3. In small screen sizes, your social media icons still right side so you fix that to the center to look more consistent
4. Also, the logo is centered on small device sizes, which is different than the design files. You can ignore this only suggestion

I think, my findings will help you to improve your coding.

Happy coding😊