Product Preview Card Component

Hey there Sayani,

congrats on completing the challenge!

I'd suggest having height: 100%; for the img as with auto it seems to leave some space below when the page is resized to a bigger width. In general it is also good practice to have images display:block.

Best practice regarding responsive image sources is using <picture> tag. E.g.

<picture> <source media="(min-width:650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width:465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>

You can read more in detail here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

Hope you find this feedback helpful!

Hi Sayani👋. Good solution! Apart from the aforementioned tips. I noticed a few things like:

• For the word PERFUME, you don't need to use spaces to space it out. A better fit here would be the letter-spacing css property like so: selector {letter-spacing: 5px;}

• On accessibility, the page generates the warning, All page content should be contained by landmarks. What this means is that all your page content should live in semantic, unique, elements, most likely these three(header, main and footer): like in this case you could structure your content like so;

<main class="card">
     ....
</main>

<footer>
    Challenge....
</footer>

Also, try to use more semantic elements where necessary, for example, for the price, it doesn't make a lot of sense for it to be a heading, you could use the <strong> element. You can find out more about this on the MDN docs as well

I hope this helps. Again, this is a cool solution. Feel free to ask any questions and keep coding👍,

Ayobami