Tarjeta producto web

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  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!

  Marked as helpful

  0
• 

  Enmanuel Otero Montano•2,155

  @Enmanuel-Otero-MontanoPosted over 2 years ago

  Hola Carlos

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

  Saludos

  0