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

NFT preview card component challenge solution

#accessibility

@guilleoem

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What do you think? I hope you like it! Any comments are wellcome!

Community feedback

Danilo Blas• 6,300

@Sdann26

Posted

Guillermo, felicitaciones por acabar este reto!!

Respecto al maquetado te ha quedado muy bien el diseño esta bastante fiel al diseño final. Has usado bastante bien las etiquetas aunque el texto Challenge by Frontend Mentor. Coded by Guillermo Mulvihill. le podrías dar un color un poco más claro para que haga contraste con el fondo azul marino.

Respecto al div con la clase .user podrías darle border-top: 1px solid hsla(214.9, 51.6%, 70%, 0.3), para que sea un poco más transparente como el diseño final.

Un tip para que tus diseños tengan un acabado más profesional es agregarle transiciones, osea con el atributo transition puedes generar que haya un retraso para pasar de un estado a otro generando un efecto de transición y no espontaneidad en los elementos que tienen :hover, :focus, :active, etc. Por ejemplo a la etiqueta a que tiene el nombre Jules Wyvern puedes agregarle el atributo transition: all 240ms y verás como queda con efecto bastante bueno. Por si quieres la documentación: https://www.w3schools.com/css/css3_transitions.asp

Lo único que te recomendaría cambiar en tus etiquetas es el h2 por h1 ya que siempre vas a necesitas uno por página en tu proyecto como titulo principal y a tu proyecto el falta ya con ese cambio puedes generar un nuevo reporte de frontend mentor sin errores.

Y bueno esa son las únicas recomendaciones que puedo darte por ahora, buena suerte :D!

Marked as helpful

1

@guilleoem

Posted

@Sdann26 ¡Muchas gracias! Por supuesto que aprecio todos los consejos que me das. Con respecto a los acabados y transiciones que me sugieres, no quería agregar nada de más porque solo hago la maquetación y trato de seguir lo que dice el archivo de guía de estilo, pero lo voy a tener en cuenta de ahora en adelante. 🙂

1
Danilo Blas• 6,300

@Sdann26

Posted

@guilleoem A claro, en la mayoría de retos no mencionan transiciones ni animaciones pero puedes agregarselos por tu cuenta para darle un mejor acabado o un toque personal :D!

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