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

Pure HTML and CSS

Santiago 150

@SantiRomero27

Desktop design screenshot for the Order summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestion?

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

Santiago!

Acabo de revisar tu proyecto creo que el header de la card es más grande .order-card__header y en lo personal le daría:

height: 190px;
background-size: contain;

Aparte has usado un h2 y h3 sin antes haber usado un h1, mejor usar h1 y h2, siempre toda página antes debería tener uno antes de usar los demás ya que es como tener una página sin titulo pero con subtitulos.

Por cierto al icono de musica no le has puesto la etiqueta alt eso te genera un error en el reporte si puedes agregale y si la vas a dejar vacia osea alt="" agregale aria-hidden="true", esto es un tema de accesibilidad que indica que para el lector de pantalla el icono no es importante de leer si quieres investiga lo de aria elements en la web.

Lo demás creo que te ha quedado muy bien aunque el botón de cancel order tambien cambia de color la letra a un color más oscuro chekalo en el diseño.

Por cierto todo lo que te menciono aquí intenta aplicarlo en los proyectos anteriores para que elimines los errores del reporte, cada que actualizas tu github luego puedes generar un nuevo reporte y ver si ya no tienes errores, esto te ayudará a mejorar y darte cuenta a simple vista esos errores.

Por todo lo demás felicitaciones por haber acabo el reto siempre intenta hacer el diseño más apegado al reto posible.

Good coding!

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