Product card solution

For the button, you can actually put a <a href=""></a> instead of <button>. It's a fake button for this component, so you can also just put a css rules pointer: cursor when the button is hovered.

👾Hello Phúc, congratulations for your new solution!

I saw your code and in this case is better you use picture to manage these images instead of using a <img> and display: none to swap the images.

You can manage the product image inserting the tag <picture> to wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html If you're not familiar with the picture tag you can look at the documentation to see how to set it: https://www.w3schools.com/tags/tag_picture.asp

👨‍💻 Here's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

👋 I hope this helps you and happy coding!

Hey, I am not sure about the font family but on the product image thing you can use the flex wrap property of the flexbox to wrap it........you can also change the flex direction to column when you hit the media query.

You can put button:active to change the behavior of the button when clicked....