Product Preview Card Component

Hi Dhia, great work to solve this challenge, I looked to your code because I need to solve a problem that I encountered and I found something where I can give you some tips.

1. To render proper images based on display size you need to use a <picture> tag instead of two <img> tags with display: none set on it; Here is a useful article for getting started with picture element

2. Use relative units instead of px, for example for padding and media queries you can use em while for margin, border-radius or font-size you can use rem; Here an article to getting started with relative units

3. Try to make your alt text more descriptive and avoid the word image because the screen readers start with ' image of ', in your case this will sound like ' image of product image '. Try with something like this ' A bottle of Chanel Gabrielle Parfum ' this is still poor alt text but it describes better the image to people with disabilities.

Hoping you find this useful ✌️

Keep Learning 📖 Keep Coding 💻