Order summary component

Community feedback

• 

  Candela Bramucci•680

  @bramuccciPosted almost 3 years ago

  Hola! Felicidades por tu solución, muy parecida a la original. Acá van algunos detalles que te pueden servir:

  • main no debería ser directamente tu card, en ves de eso usa un div o un article ( main>article.card )
  • Dentro de .card yo tendría .card__header y .card__content, de esta manera podés darle un padding y un gap al contenido, así no tendrías que ajustar cada elemento manualmente.
  • Olvidaste de poner sombras (en la card y en el botón azul)
  • Olvidaste la imagen de fondo

  Espero ayudar 😊

  Marked as helpful

  1

  ---

  

  Julian Reyes•130

  @Julian17xdPosted almost 3 years ago

  @bramuccci Muchas gracias por tu comentario bro!

  1
• 

  Travolgi 🍕•31,400

  @denieldenPosted almost 3 years ago

  Hi Julian, good job!

  • For center the card give flexbox and height properties to the body and remove all margin from main tag. Note: Flexbox aligns to the size of the parent container.
  • Read the guide -> Flexbox
  • You can use the vh measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.
  • To insert the photo at the top in the background add these properties to the body:

  background: url("../img/pattern-background-desktop.svg") no-repeat top center;
  background-size: contain;
  background-color: #e0e8ff;
  

  • Try to adding a little transition on the button hover effect

  Also to find a better understanding of the appropriate use of the section read here -> section tag

  Overall you did well :) keep it up

  Happy coding!

  Marked as helpful

  0

  ---

  

  Julian Reyes•130

  @Julian17xdPosted almost 3 years ago

  @denielden Muchas gracias por tu comentario, tomaré en cuenta todo lo que me dijiste.

  1