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

flexbox-css hover-effects

@boudgnosis

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Danilo Blas• 6,300

@Sdann26

Posted

Juanpa, hola!

Lo primero que quería mencionarte es que no has agregado la tipografía supongo que se te ha pasado porque justo has agarrado los colores de style-guide.md así que eso esta pendiente.

Lo otro es que le agregues siempre a tus imagenes display: block es por eso que cuando agregas el sombreado del apartado del hover te no te encaja porque las imagenes tienen un espaciado blanco abajo por defecto que se le quita haciendolas block.

Otro detalle para eliminar los errores del reporte es que te falta la etiqueta <main> que es muy importarla tener dentro de tu body ya que esta se encarga de englobar el esquema principal de tu html así que agregala y que ocupe toda la card.

Por ultimo puedes agregar transiciones con la propiedad transition a los elementos para que cambien de un estado a otro como los que le has agregado :hover para que el cambio no se brusco, sino sea más suave.

Si tienes alguna duda consultame :D!

Marked as helpful

0

@boudgnosis

Posted

@Sdann26 , ¡Hola!

No sabía lo de las imágenes con el display:block , me sirvió bastante y también no había agregado el main porque tenía mis dudas si era adecuado usarlo simplemente para contener la card , espero que ahora este todo bien.

Muchas gracias por las correcciones ya actualicé el repositorio.

0
Danilo Blas• 6,300

@Sdann26

Posted

@boudgnosis En mi primer reto, que fue el de Resumen de Orden me paso lo mismo me di cuenta de un espaciado blanco y googleando como que tiene ese efecto por defecto y creo que depende del navegador pero ya cambiando el display, solucionado.

Sobre esa duda es muy normal y lo que pasa es que los retos de nivel Newbie son componentes osea una parte que se suele repetir en una página por lo general aunque cuando los desarrolles asume que estas creando una página y ponlo.

Por cierto genera un nuevo reporte para ver si ya no te salen más errores, ahí en la sección de Reporte sale para generar uno nuevo.

Si puedes descargate AxeDev Tools es una extensión para tu navegador que te permite ver problemas de accesibilidad es bastante sencilla y gratis, yo la uso en el trabajo jejeje.

Marked as helpful

0

@boudgnosis

Posted

@Sdann26 gracias por aclarar esa duda de los retos nivel newbie y con respecto a los resportes si me salen tres de HTML Validations, pero hay dos que me pide usar algún título y el otro me pide que use el h1 en un header o bien arriba de todo.

1
Danilo Blas• 6,300

@Sdann26

Posted

@boudgnosis Claro lo que pasa es que has usado article y section y por lo general estas etiquetas reciben dentro de ellas h2 a más, el motivo es que el <main> por lo general estará compuesto por diversas secciones, secciones de página <section> y secciones independientes <article>, la diferencia entre una y otra es que article puede ir en cualquier página y no altera el flujo si esta o no está sin embargo los section aunque cambien la tematica porque son secciones siguen siendo contenido que debe mantenerse en la misma página y que si estuviera en otra carecería de sentido.

Por eso ambos son recomendables usarlos para apartados de bastante información y etiquetas, para estos retos casi no son necesarios porque creamos componentes, que son pequeños trozos de código HTML, que para maquetarlos como nos piden es mejor solo con puro div.

Ese es el motivo, si deseas solucionarlo esos cambialos a puros div.

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