Design comparison
Solution retrospective
estoy orgulloso de poder lograr aprender de nuevos elementos de css para los contenedores y su lenguaje en cascada. proximamente haré que la pagina sea responsiva en lo maximo posible.
What challenges did you encounter, and how did you overcome them?mi problema fue que al momento de centrar la imagen dentro del contenedor no lo lograba ya que faltaba un elemento que no reconocia hasta ahora.
What specific areas of your project would you like help with?mas elementos de css, los elementos y difernetes opciones de estilos del css.
Community feedback
- @xXOsielXxPosted 4 months ago
Hola. Felicidades por haberle dado solucion a este challenge!
Tu diseño se parece bastante al original; aun asi, quiero darte algunas sugerencias para que mejores tu codigo.
-
Imagen: No necesitas envolverla en un contenedor y centrarla, solo establece esta regla para ella:
img {width: 100%}
, de esa manera tomara todo el ancho del contenedor padre, en este caso, si modificas el codigo seria .card -
Attribution: La atribucion te recomiendo que la saques de la .card. Esto ya es decision tuya, pero en mi opinion se ve mejor afuera, y mas dandole unos estilos personalizados. Por ejemplo, yo lo hago asi:
.attribution { margin-top: auto; background-color: inherit; text-align: center; padding: 8px; border-radius: 16px; z-index: -1; } .attribution a { text-decoration: none; } @media only screen and (min-width: 600px) { .attribution { position: absolute; bottom: 0; } }
Y estos estilos son fundamentalmente los mismo para todas mis paginas
- Active states: Te falto agregarle los active states a algunos elementos. A mi cuando los hice tambien me faltaron jeje, pero una persona se dio cuenta, me lo dijo y lo corregi. En la carpeta que se encuentra en el archivo que debiste descargar, hay otra carpeta que dice "design" y dentro de esta estan los diseños en los que te debes basar. Una de esas imagenes te muestra los active states que debe tener tu pagina, se llama "active-states.jpg".
Pues eso es lo mas importante, espero que te sirvan mis sugerencias.
Que tengas un buen dia y... Happy coding!
0 -
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