Product Preview Card Component Main using HTML/CSS

Ciao Jo!

Congrats on your solution, it really looks good!

For the images I personally used the HTML picture tag, with the below code:

<picture>
        <source media="(max-width: 640px)" srcset="images/image-product-mobile.jpg">
        <source media="(min-width: 641px)" srcset="images/image-product-desktop.jpg">
        <img class="p-img" src="./images/image-product-desktop.jpg" alt="">
</picture>

Hope this helps!

Hello, congratulations on finishing the challenge and submitting your solution.

• For starters, like @SHMITEnZ said the <picture> element is a good solution for responsive images in HTML, to learn more about it in depth I suggest you read this guide by MDN.
• You should wrap all sections of your document in landmarks to improve accessibility, in this case, you should wrap your card component in a <main> element since it is the only thing on the page, however if you have a bigger document with more content you would probably wrap it in a <section> or <article> or it would be in a bigger component wrapped in one of these.
• Lastly your .card class has an overflow: hidden attribute, this will prevent people from scrolling on shorter screens, try decreasing your browser window's vertical size to see for yourself. you should remove it, I'm curious as to why you added it?

Otherwise you did a fantastic job, good luck and keep coding :).