Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Order-summary with html, css and flexbox

@fcojsanchez55

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord