Product Card Component

Buenas Veronica, enorabuena por terminar el challenge, hiciste un buen trabajo!

Con tu permiso me gustaría darte algunos consejos que pueden servirte para otros challenges.

1. Primero que todo intentaría centrar bien el product card completo usando flex-box en vez de margins, te va a costar mucho menos y para ello solo tienes que darle al body un min-height de 100vh (para que ocupe toda la pantalla) y usar flex para centrar, algo mas o menos así (primero quitando todos los margins del div class 'card'):

body {
  background-color: hsl(30, 38%, 92%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Con eso ya te quedaría completamente centrado!

1. Para la imagen del producto, en este caso sería mejor que la pusieras directamente en el html, como tienes que poner una para desktop y otra para mobile, en vez de usar el tag img, usa los tags <picture></picture> y dentro de ese tag pones dos <source> tags, uno con la imagen para mobile y otro para la imagen desktop, con esto puedes poner la imagen condicionalmente dependiendo del tamaño de la pantalla (como si fuese un media querie, pero en una imagen html), si tienes dudas del tag picture, aquí lo explican bastante bien!

2. Finalmente te aconsejaría que siempre que tengas un botón, le agregues un cursor: pointer (para que se vea la manita de como que se puede pulsar) y si además le añades una pequeña transición tipo transition: all 0.5s ease; ya queda incluso con una apariencia más bonita y fluida!

Espero que mi feedback te ayude en tus futuros proyectos, cualquier duda que tengas no dudes en preguntarmela que estoy aquí para ayudarte! Un saludo!

Hi Veronica, how are you?

I really liked your project, but I have some tips that I think you will like:

1- document should have one main landmark. click here to read about it

2- To centralize the content you could have done as follows:

body { display: flex; align-items: center; justify-content: center; flex-direction: column; min height: 100vh; }

try to avoid using margin to center the content.

The rest is really good! Hope it helps...👍