Design comparison
Community feedback
- @Sdann26Posted over 2 years ago
Jorge que tal!
Te daré unas recomendaciones para que quede bastante bien tus proyectos.
Agregale al body los siguientes atributos:
min-height: 100vh; margin: 0;
Con esto mantendremos a la card centrada para todo tipo de pantalla vertical y el margen 0 es para que no forme el scroll vertical.
Ahora hablando de ese margen feo que se forma es porque todos los navegadores tienen unos estilos definidos por si mismos por eso siempre debemos reiniciar los estilos.
Para ellos puedes agregarle a todos tus proyectos la hoja de estilos normalize.css o reset.css, esta hoja de estilos la puedes buscar por internet y agregarla antes de tu hoja de estilos principal que es tu css para tu página, cosa que primero agregar por ejemplo el normalize.css y luego style.css (suponiendo que así llamas a tu hoja de estilos principal).
Por otra parte tu reto carece de estados activos, si ves la carpeta design verás que una de las imagenes dice active-states.jpge, la cosa es que esta imagen muestra como se verán diferentes elementos de tu diseño cuando le pases el cursor por encima o los clickees ya sea :hover, :active, :focus, etc. Intenta agregar estos para terminar el reto.
Por ultimo te recomendaría cambiar <div class="card"> por <main class="card"> ya que siempre se necesita tener mínimamente una etiqueta <main> dentro de tu body que contenda el flujo principal de tu página y dentro de esta colocale un <h1> que podría ser <span>Equilibrium #3429</span> pero con <h1>Equilibrium #3429</h1> ya que siempre debes tener un titulo por página. Con esto creo que eliminarías todos los errores del reporte de frontend mentor cuando generes uno nuevo :D!
Si tienes más duda puedes consultarme, buena suerte!
Marked as helpful0 - @fcojsanchez55Posted over 2 years ago
@sdann26 MUCHISIMAS GRACIAS POR TUS CONSEJOS! ME ALEGRA SABER QUE EXISTA GENTE COMO TU! TOMARE TODAS TUS RECOMENDACIONES! Y DE VERDAD MUCHAS GRACIAS.
1
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