
Página de destino adaptable con CSS Grid y Flexbox
Design comparison
Solution retrospective
Estoy muy orgulloso del diseño responsivo que pude implementar usando CSS Grid y Flexbox. La página se ve genial en todos los tamaños de pantalla y dispositivos. La próxima vez, me gustaría experimentar con animaciones para mejorar la experiencia del usuario y hacer que la página sea más atractiva.
What challenges did you encounter, and how did you overcome them?Uno de los principales desafíos que encontré fue asegurarme de que el diseño fuera totalmente adaptable a múltiples tamaños de pantalla. Lo superé aprovechando CSS Grid para la estructura y Flexbox para elementos más pequeños, lo que me permitió crear un diseño flexible y escalable.
What specific areas of your project would you like help with?Agradecería recibir comentarios sobre cómo mejorar la accesibilidad del sitio, especialmente en términos de navegación con teclado y compatibilidad con lectores de pantalla. Además, cualquier sugerencia para optimizar el rendimiento del sitio será de gran ayuda.
Community feedback
- @book-AnliaPosted 2 months ago
¡buen trabajo!. Para que el diseño sea un poco mas parecido al design, sugiero algunos puntos como:
- cambiar el fondo a amarillo;
body{ background-color: #f4d04e; }
- añadir un borde, una sombra y un padding al card;
.card { display: flex;(Flexbox es mejor para organizar y posicionar los elementos) flex-direction: column; gap: 24px; background-color: #fff; border: 1px solid #111111; border-radius: 20px; box-shadow: 8px 8px #111111; padding: 24px; }
- decorar e posicionar el texto;
.card-content { padding: 20px;(en este caso el padding no es necesario) display: flex; flex-direction: column; gap: 12px; } .tag { color: #000000; background-color: #f4d04e; align-self: flex-start; padding: 4px 12px; border-radius: 4px; }
- añadir el footer con un solo parágrafo e posicionarlo debajo del card o al pie de la pagina;
- al pie de la pagina:
footer ou .attribution{ position: absolute; bottom: 10px; }
- debajo del card:
body{ flex-direction: column; gap:15px; }
- al pie de la pagina:
Haz las cambios que necesites o adaptalo a tu gusto, espero que te haya ayudado :)
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