My first one - Summary Card Component - HTML | CSS

Hey @fabricioceppi 👋🏻

I have a couple of suggestions to help you fix the project's accessibility and HTML issues. Also, I believe I know how to get rid of that line at the bottom of the image.

• If you change your <div id="card">...</div> to <main id="card">...</main> and <div class="attribution">...</div> to <footer class="attribution">...</footer>, those will fix your accessibility issues. Don't forget to generate a new report once you fix the code.
• For the HTML issue, I'd suggest adding a class to your image and then giving styles to the class, because inline styling such as this line here, <img src="images/illustration-hero.svg" alt="Illustration of a girl enjoying her music" width="100%"> where you gave width in HTML, is considered bad practice. Here, you can read more about CSS specificity. Once you add a class for the image, add display="block" and it will fix the issue with the bottom line.

I hope this was helpful 👨🏻‍💻 Other than that, you did a great job for the first project, it seems pixel perfect 👌🏻 Cheers!

I'm not 100% sure why, but it seems to be an artefact of the image display property being "inline" by default (this accommodates descenders when placed in-line with text).

Setting your image's display to "block" seems to resolve it.