Responsive-product-card-preview

Hello there 👋. You did a good job!

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

HTML 📄:

• The heading order is important in the html structure so try to always start your headings and/or titles with an <h1> tag and then you can increase by one if you need to use more headings in your html code. So replace the <h1>Eau De Parfum</h1> by the <h2> tag.
• You could also use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here
• Put the <div class="attribution"> out of the <main> tag and wrap it inside the <footer>.

CSS🎨:

• You can use grid or flexbox to center the content no matter the viewport size. Using grid you can do the following:

body {
min-height: 100vh;
display: grid;
align-items: center;
justify-content: center;
}

With flex:

body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

• You can also use the text-transform: uppercase; property to make the perfume word appear in upper case even though you typed it lower cause in the HTML file.

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

Happy <coding /> 😎!