Simple product card with flex

Hey there! Good job on completing the challenge🙌🏻

One thing you could improve is how you've used absolute positioning for the desktop image. You can use <picture> element for the images instead of absolutely positioning them like this:

<picture>
<source srcset="images/image-product-desktop.jpg" media="(min-width: 768px)">
<img src="images/image-product-mobile.jpg" alt="Product preview">
</picture>

Here the srcset is being used for the desktop image URL and the media attribute is being used as a media query as to when the desktop image should show up. Initially, the image will be mobile but as soon as it hits 748px the image will be switched up to a desktop one.

This will save you from writing all the unnecessary code to absolute position the images.

📱 The <picture> element is great for responsiveness! Here you can read more about it!

I hope this will be helpful in your future projects 🙂

Happy Coding!🕺🏻

It looks good.

You should try putting your css styles in a different file so your code doesn't look as messy.

Fix your media query :)

Happy coding.