Trinchera WP
En esta clase vamos a crear el apartado de destacados de la web de Meta. Como veréis, es un diseño más avanzado, pero iremos paso a paso.
Lo primero que vamos a hacer es crear el archivo feat.html. Después, creamos la estructura básica de la página.
Primero, necesitamos un div con un padding por arriba y por abajo. Este div debe contener otro contenedor con un padding a los lados. Para ello, podemos usar el contenedor con clase container, y en lugar de usar esta clase, podemos optar por un max-w para limitar el ancho.
En cuanto al diseño, podemos hacer que el contenedor sea de tres columnas. En este caso, se decidió que la primera columna ocupe un tercio del ancho. Para ello, utilizamos un max-w y ajustamos el ancho de la columna para que se vea de forma correcta.
Comenzamos añadiendo un título, por ejemplo, h1, con un fondo oscuro y texto blanco para visualizar mejor los cambios. Ajustamos el tamaño de la fuente para que sea más legible, utilizando clases como text-4xl o text-6xl para obtener el tamaño adecuado.
A continuación, ajustamos el margen superior e inferior de los elementos para que se vean bien alineados. Esto también incluye los botones y enlaces, que tendrán un margen propio para separar las secciones de manera eficiente.
Para el botón "Comprar ahora", le damos un fondo azul, padding superior e inferior, bordes redondeados y un tamaño de fuente adecuado. El enlace "Más información" tiene un color de texto azul y fondo blanco, con un borde redondeado similar al botón.
Añadimos efectos de hover a los botones utilizando la clase group, lo que permite cambiar el color del texto o el fondo cuando el usuario pasa el mouse por encima del grupo de elementos.
En este diseño, algunos elementos, como el texto de fondo o el vídeo, deben tener una posición absoluta para que se alineen correctamente. Ajustamos el contenedor con position: relative y el elemento con position: absolute para lograr este efecto.
Por último, agregamos un vídeo de fondo utilizando la etiqueta <video>, configurada con autoplay, loop y muted para asegurar que el vídeo se reproduzca automáticamente y en segundo plano. A continuación, ajustamos el z-index para asegurarnos de que el contenido se muestre sobre el vídeo.
Recargamos la página y vemos cómo el diseño se va tomando forma. Aunque no es exactamente igual al ejemplo de Meta, la estructura y el funcionamiento están listos para ser personalizados.
Hemos creado una estructura básica con Tailwind CSS para el apartado de destacados, incluyendo títulos, botones y un vídeo de fondo. A lo largo de las clases posteriores, mejoraremos el diseño y agregaremos más funcionalidades.