Product preview card component

Hi 👋🏻, some of this may interest you:

HTML / ACCESSIBILITY:

• The images are in the same folder as the HTML file and therefore, in order for them to be displayed, you should use the following paths: src="image-product-desktop.jpg" and src="icon-cart.svg".

• The main content of every page (the card in this case) should be wrapped with the <main> tag.

• If you're going to use more than one heading, it is good not to skip levels (start with <h1>, then <h2>, and so on).

CSS:

• Consider to center the content using Grid or Flexbox. As follows:

body {
min-height: 100vh;
display: grid;
place-content: center;
}

And in this way the attribution will be well positioned and not overlapping the card.

• Think about using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals 16px by default). Consider this suggestion especially for the font-size.

• If you have any questions about how to make the mobile version just ask.

I hope it’s useful : )

Regards,

Your images are broken. You should check their paths.