Responsive Product preview card component page using HTML and CSS

Hello Rafael

You’re doing quite well on the project. 😃

There are few parts would suggest change, and it would improve the code.

1.) In order to set the image border-radius in each angle, it will be better to set overflow: hidden; to the parent container.
 Then you won't need to do it every single time, the border keeps the radius.


preview-card{
overflow: hidden;  // add this line
}

content-img{
Border-radius: 10px 0 0 10px; // delete this line
Background-size: cover; // this could complete show the whole image without setting any specific unit
}

2.) The other is the cart icon didn’t show up in the button. That is cause the src you add one **/ ** before images, delete this / and it can work.

 Also, give specific width and height to the icon.

<img src="images/icon-cart.svg">

3.) If you only want to have an empty container to set image in CSS, then better use <div> instead of <img> element.

When use empty <div> for image, we can set role=“img” and aria-label=“(brief description of the image)”.

<div class=“img” role=“img” aria-label=“perfume picture”>




Hope this help :)
 Have a nice day

• I don't think your code is too long, but I suggest ensuring your indentation is correct. It looks like a simple thing, but believe me, it helps a lot for code readability. If you use vscode, try prettier extension
• Your project structure is a bit unusual. It works but does not follow the best practice. For instance, you should put the CSS files in the style folder instead of the src

Hey @R4f0so, add align-items: center; in price-container class. also remove margin-top: 10px; from .previous-price class