Product preview card component First Solution HTML CSS y JS

The first thing I did was analyze the composition comparing similarities between the mobile version and the desktop version, with this I defined the HTML structure and the classes.

Later I styled it to match the mobile design and later I made the necessary adaptations to make it responsive to desktops according to the included design.

At the end of the css I added the hover to change the color of the button with a small transition to make it more dynamic.

I noticed that the style guide had 2 images of the same product: one for the desktop and mobile versions respectively, so I decided to use an eventListener with JavaScript to detect the screen size. This eventListener calls a function that changes the "src" of the depending on the size of the screen.