product card

Hello Ali, congratulations for your solution!

I saw your repository files and I've some tips for you:

A standard name for the main css file is style.css maybe you can create your new projects with this kind of naming instead of indexcss.css

I saw that you've used a lots of id for styling is a best practice use only class for styling and id for forms or content that needs Javascript.

Hope it helps, happy coding!

Hi Ali, congratulations on completing the challenge!

You can try using <picture> and load the image based on media query instead of loading both images, something like this:

<picture title="Perfume bottle">
          <source media="(min-width:40em)" srcset="./images/image-product-desktop.jpg">
          <img src="./images/image-product-mobile.jpg" alt="Perfume bottle">
</picture>

I also noticed this media query: screen and (min-width: 375px) and (max-width: 400px) Now because of this in screen smaller than 375px, your design falls back to desktop mode and breaks. You don't need that min-width and also update your max-width

You are using fixed height and width on images, try to use max-width for image so that your card can be more responsive in smaller screen.

Your button is also overflowing your card, so you need to update your spacing.

Hope it helps :)