Product preview card component

Hey there! 👋 Here are some suggestions to help improve your code:

Congrats on completing your first challenge!🎊🎆

• Best practice ✅, before moving on to the next challenge, always check your FEM report, to see what is incorrect and update your code with it so that you would not make the same mistake over again. This something that should be done right after submitting your challenge.

• Since the images in this component add value and serve a purpose (displaying the product) it needs to be accessible ⚠️. The image needs to be applied using the picture element and not the background-image property, as it will not only let you use different images during different breakpoints it will let apply an alt tag description to image stating what the image is.

• Do not uppercase ❌ "perfume" in HTML as it is not accessible friendly. Instead you will want to style it in CSS.

• The only heading ⚠️ in this component, is the name of the perfume; “Gabrielle Essence Eau De Parfum” . The rest of the text should be wrapped in a paragraph element.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎆🎊🪅