NFT preview card component challenge solution
Design comparison
Solution retrospective
What do you think? I hope you like it! Any comments are wellcome!
Community feedback
- @Sdann26Posted over 2 years ago
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 helpful1@guilleoemPosted over 2 years ago@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@Sdann26Posted over 2 years ago@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 helpful0
Please log in to post a comment
Log in with GitHubJoin 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