Submitted 2 months ago

Página de destino adaptable con CSS Grid y Flexbox

#pure-css

tathanz98•90

@tathanz98

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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

Anlia•100

@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;
 }
```

Haz las cambios que necesites o adaptalo a tu gusto, espero que te haya ayudado :)

Please log in to post a comment

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