Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.
<a class="navbar-brand" href="#">
<img class="nav-logo" sr...</a>
Looking to hire developers?
<a class="navbar-brand" href="#">
<img class="nav-logo" sr...</a>
<img class="test-img" src="images\profile-1.jpg">
<img class="test-img" src="images\profile-2.jpg">
<img class="test-img" src="images\profile-3.jpg">
<a href="#"> <i class="fab fa-twitter-squa...</a>
<a href="#"> <i class="fab fa-facebook-squ...</a>
<a href="#"> <i class="fab fa-instagram fa...</a>
If you would like to get feedback on my code
Hey Patel, nice solution. Looks pretty close to the design :) I just have a few suggestions.
Your images look a bit squashed (like the right and left sides have been squeezed together). You can avoid this by giving the width a value and setting height: auto;
The features are not centered at all screen widths.
In future projects, I would try to avoid using id names for CSS selectors and instead use class names. You can read more about the rationale for that here: https://paulcpederson.com/articles/css-for-people-who-hate-css/
On screen widths below 1128px, the features section and the productive section could use more whitespace between them.
Keep it up! -Jen
1
Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!