Responsive Product Card design

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

• It is best practice ✅ to have separate files for you coding files (HTML, CSS, JS). It helps keep things organized and make it easier to maintain.

• The section element is being used incorrectly ⚠️ and not needed for this challenge .

• The image’s alt tag description needs to be improved upon ⚠️. Assume that you are describing the image to a someone over the phone.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

• This component requires the use of two images 🎑 at different breakpoints ⚠️. The picture element will facilitate this.

Here is how it looks like implemented: EXAMPLE

Syntax:

  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

More Info:📚

https://www.w3schools.com/html/html_images_picture.asp

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

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

Happy Coding! 🎆🎊🪅

There is no need for a width value, min-width value and max-width value.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING