Product Preview Card Component with HTML and CSS

Hi, @Ax-cd. How are you?

You've done an awesome job implementing the design.

1. You can fix the image border angle turning into a right angle by removing the radius property from image and setting the overflow: hidden, property on the ".card" element. When you set overflow:hidden, the image overflowing from the corners of the card is hidden and the curved angle of the card is shown.

2. In the CSS reset, you've already written "margin: 0;". You don't need it in this style declaration after that. body, h1, h2, h3, h4, h5, h6, p, figure, picture { margin: 0; }

3. For the prices section, you've used <span>. You use <span> for the text when you don't have any other semantic element available. Instead of <span>, i'd use <li> element there.

You've done a great job working with utilities. I like how how wrote your css.