Four card feature section

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

HTML 🏷️:

• This solution generates accessibility error reports, "All page content should be contained by landmarks" is due to incorrect usage of semantic markup, which causes lacking of landmark for a webpage

• So fix it by replacing the wrapper <div class="content"> element with the semantic element <main> in your index.html file to improve accessibility and organization of your page.

• What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers

• For example:
  • The <main> element should include all content directly related to the page's main idea, so there should only be one per page
  • The <footer> typically contains information about the author of the section, copyright data or links to related documents.

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hello there 👋. Good job on completing the challenge !

I have SOME suggestions about your code that might interest you.

• Regards naming your CSS Custom properties . It's okay to use the names provided in the style-guide.md .Peronsally, for best practices try using Variable names instead, as this will also be the type of naming conventions you might use in bigger projects or challenges Example --red --cyan , Try --clr-primary-1 --clr-primary-1 .

• As regards your <div class="content" > </div> .Wrap all your body content inside a <main>...</main> as this solves the accessibility issue in your code.

.body {
    display:grid;
    place-items:center;
    min-height:100%;
}

The code above will help with centering the content and providing a much cleaner code

• As regards the Card-Icon. If you decide to use a Flex or Grid Layout for the Card Design. Adding margin-left: auto to the card-icon should push it to the extreme right. Example

.card{
    display:grid;
    gap:2rem;
}
.card__icon{
    margin-left:auto;
}

• To solve the issue of the responsive design. Change the media-queries to adjust when the 4 Cards can no longer be visible on a large screen @media (min-width: 1100px){ }.

• Extra Tip: Check out BEM for better naming of classes and practice using order measurement units such as rem em % as it boosts responsive design

I hope you these comments useful! 😄 And I was able to answer your questions

Happy coding!