Product preview card component

Hello Michal :D

Congratulation on finishing this challenge, here are my suggestions detailed below:

-HTML:

-- <picture>: Using a picture tag you avoid using background-image setting width and height, inside of the picture tag set a main img and a source tag setting when the image will change with media query. Example with a mobile first workflow: Documentation, Video.

<picture>
<source media="(max-width: 810px)" srcset="img-mobile-location.jpg">
<img src="img-desktop-location.jpg" alt="img-desktop"/>
</picture>

-- <h2> or <span>:

• You can use an h2 or a span rather than h3 in <h3>Perfume</h3> because in order to use an h3 it needs to come after an h2 and so on. In my opinion the best solution for this is using a span. documentation

-- SVG:

• Since this SVG does not contain any visible text that describes the graphic, we need to add the alternative text (invisible) by:
• Inside the <svg>, add: <title>A short title of the SVG</title>
• Add the appropriate ID’s to the <title>: <title id="uniqueTitleID">The title of the SVG</title>
• On the <svg> tag, add: aria-labelledby="uniqueTitleID documentation

-CSS:

-- rem:

• For font-size is a must for accessibility, because px in some browsers doesn't resize when the browser settings are changed. documentation
• Website to converte px to rem easly: PX to REM

Best Regards, Jean Ruiz

Good job on completing the challenge! :)

Please remember to set font-family as well as font-weight for the different kind of sections.