Responsive product card

Hello there 👋. Good job on completing the challenge !

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

• div.product shouldn't have a width because a div is a block-level element and takes up 100% width by default. Additionally, you should use min-height: 100vh in that selector to prevent it from becoming too short on small screens. The .page selector has unnecessary height (min-height), as the inner div overwrites that height with 100vh.

• Use the <footer> tag to wrap the footer of the page instead of the <div class="attribution">. The <footer> element contains information about the author of the page, the copyright, and other legal information.

• The <h1> is the most important heading on the page, In this challenge the perfumer's name can be considered like the title of the page, so it should be the <h1>

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Hello Eugenia!

Your solution looks excellent!

I just have one suggestion:

• I noticed that you used 3 different tags (main, div and article) to wrap the main content.

Unless you have a specific reason to do that, it's not necessary.

The tag article would make more sense if the card was part of a bigger website (and it certainly would in real world), but here it is all we have on the screen.

The tag div is good, but it has no semantic value.

The tag main is the one for this case, since the main content goes inside of it.

I hope it helps!

Other than that, you did an excellent job!