Order-summary with html, css and flexbox

Community feedback

• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Jorge, que tal!

  Ahora reviso tu segundo reto, ha este le falta los active-states, que son cuando pasas el cursor por encima o haces click en un elemento. Asi que eso esta pendiente.

  Por otro lado al body agregale los siguiente:

  background-size: contain;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  

  Con lo primero hacemos que el fondo sea responsive y se achique según cierres la pantalla y lo demás solo es para centrar verticalmente para que cuando generes un nuevo SCREENSHOOT este centrada la card como en el diseño. Dan 5 screenshot gratis por mes aprovecha antes que acabe el mes.

  Por ultimo solo faltaría cambiar:

  • <div class="container"> por <main class="container">
  • <div class="attribution"> por <footer class="attribution">

  Así como hiciste en el primer proyecto y cuando generes un nuevo reporte debe salirte con ningún error y solo eso.

  Por ultimo un pequeño detalle que casi se me escapa. Las palabra Annual Plan y Order Summary son de color: color: rgb(31, 47, 86), colocalo así y queda 10 de 10.

  Por el maquetado te ha quedado perfecto la verdad esta muy fiel al diseño final solo esos detalles que te digo.

  Marked as helpful

  0