Tarjeta producto web

Hola Carlos Alberto, que tal? Congratulations for your solution.

I've looked your live site and I have some advices you take in consideration to apply in your challenge solution:

• You can build this solution using Flex or Grid, I've chosen Grid because was easier to divide the container in two columns. To create the card with:

GRID you'll need an element as a div/main/section and apply the property display: grid; and also grid-template-column: 1fr 1fr to divide this card in two columns.

FLEX the approach is similar, but inside the container you'll need to set display: flex; and flex-direction: columns / flex-direction: row; depending if you want the card columns vertically or horizontally.

For more info about these flex properties read this article:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

To see how a did this challenge using GRID you can look my solution here:

https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

• You've used the same class for the overline heading (perfume) on the paragraph. So your .container p has a inappropriate letter-spacing

I hope it helps you bro!

Hola Carlos

Si puedes especifica cuales son tus dudas, así te podremos ayudar mejor.

Saludos