Product preview card component using FlexBox

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Muy buenas Jorge, enorabuena por finalizar el challenge!, muy buen trabajo

  Me gustaría ayudarte un poco con mi feedback para que lo puedas aplicar en este o futuros proyectos!

  Primero que todo en el tema de tags html más semanticos, en vez de usar directamente un section dentro del main para englobarlo todo, podrías usar main para englobarlo todo y después dividirlo en sections, además de usar la imagen directamente en el html con un <picture></picture> para poder usar ambas imagenes (desktop y mobile) en dos <source> tags, y renderizar entre la imagen mobile o la desktop dependiendo del tamaño de la pantalla!

  Otra cosa es la forma de centrar el card en medio de la pantalla, en vez de usar margin en el main, prueba usando flex directamente en el body para centrar, algo más o menos así:

  body {
  background-color: var(--cream);
  font-size: 14px;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  

  Quitando el max-width ya que si no en pantallas de más de 1440px no te quedará centrado.

  Finalmente, podrías usar un transition: background-color 0.5s ease; en tu botton para que quede una transitición chula cuando hagas hover en el botón!

  Espero que mi feedback te sea de ayuda, cualquier duda que tengas no te lo pienses y pregunta! buen trabajo!

  Marked as helpful

  1