Hello buddy 😊
Congratulations on completing your solution and especially for using the mobile-first method!
In HTML maybe you should use the picture tag.
It will load the image according to the screen size as in the example below:
<picture> <source media="(max-width: 1020px)" srcset="images/image-product-mobile.jpg"> <img class="photo-perfume" src="images/image-product-desktop.jpg" alt="perfume photo"> </picture>
Maybe it would be interesting to change some <P> to <span> to leave only what is really paragrade as <P> which in this case is the descriptive text of the perfume.
Speaking of visibility, when I opened the live site in my browser, the perfume box was not centered, maybe you should set an auto margin or use flex-box!
A practice that can help you is to define a pre-reset of the CSS, as it already comes with some pre-styles that can hinder you.
Finally, I recommend that you tidy up your github folder, delete what is not necessary, write your documentation and readme.
If these tips helped you, please mark it as "helpful"
Congratulations my friend!
Marked as helpful
