Trinchera WP
En esta clase, comenzaremos a desarrollar la sección central de nuestro proyecto. Nos enfocaremos en la creación de una serie de tarjetas dinámicas que mostrarán información variada, y cuyas imágenes cambiarán con cada recarga de la página. La prioridad será establecer la estructura de estas tarjetas, más allá de los datos específicos que contengan.
Para empezar, eliminaremos cualquier separación existente que hayamos creado previamente. El contenido principal se alojará dentro de un elemento main en nuestro archivo index. Dentro de este main, construiremos la base para nuestras tarjetas.
Analizando el diseño, observamos que las tarjetas se organizan utilizando un sistema de grid. Por lo tanto, replicaremos esta estructura creando un div con la propiedad grid. Inicialmente, estableceremos un grid-cols-1, con la intención de ajustar este valor para lograr un diseño responsivo en futuras etapas.
Cada tarjeta contendrá principalmente una imagen en la parte superior y una descripción textual en la inferior. Para la descripción, emplearemos una estructura de dos columnas, utilizando flexbox para posicionar el contenido de manera eficiente.
Dentro de cada tarjeta, la sección de la derecha contendrá la valoración del elemento, representada por estrellas y un valor numérico. Utilizaremos flexbox con items-center y un gap para alinear estos elementos.
La sección de la izquierda albergará el título de la tarjeta, que puede variar en su etiqueta (como div, h2 o h1 según el diseño original), seguido de un span para información adicional como el "anfitrión particular". También incluiremos la fecha seleccionada y el precio por noche.
Ajustaremos el tamaño del texto para que el título sea ligeramente más grande que el resto de la información, y aplicaremos un color específico a ciertas partes del texto para mejorar la legibilidad y el atractivo visual.
La parte superior de cada tarjeta estará dedicada a la imagen. Esta imagen se insertará dentro de un div que tendrá un border-radius para esquinas redondeadas. La imagen en sí tendrá una position: absolute y object-fit: cover para asegurar que ocupe el espacio designado de manera adecuada, y su contenedor será relative.
Además, añadiremos un pequeño margen inferior a la imagen para separarla del texto y aplicaremos un padding general a toda la sección para mantener una consistencia visual con otras partes del diseño, como el pie de página.
Finalmente, sobre la imagen, tendremos un espacio para mostrar información adicional como "recomendación del viajero" o un icono de corazón, posicionado con flexbox y justify-between para una distribución adecuada. Aplicaremos un fondo blanco y un padding para mejorar su visibilidad, ajustando la opacidad para un efecto sutil.