Product preview card component

Hello there 👋. You did a good job!

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

HTML 📄:

• Since the mobile design has a different image, you can use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here

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

Happy <coding /> 😎!

Add a tittle tag ,<tittle> within the head tag of the html file to fix the error issue. the content of the tittle tage is the tittle of the html document.

Wrap the entire content in the html tag within the main and replace the main tag with a section tag and the div containing the img with a figure tag. sample:

<main>
<figure><img></figure>
<section>
----content is here
</section>
</main>

Replace the height in .card with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

In the mobile design, give the main a max-width value for a responsive content. max-width: 500px and in the media query add display: grid and grid-template-columns: 1fr 1fr to the main instead of giving the body grid-template values in the css.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING