Cómo Crear Un Footer Responsive Con Iconos

Paso 1

El código se basa en un <div> con las siguientes clases:


    <div class="block xl:hidden fixed bottom-0 left-0 z-50 w-full h-16 border-t bg-theme-10 border-theme-10">
    Contenido del div
    </div>

Analicemos cada una de estas clases:

block: Esta clase establece el elemento como un bloque, lo que significa que ocupará todo el ancho disponible.
xl:hidden: Esta clase oculta el elemento en pantallas con un ancho de pantalla igual o mayor que xl (tamaño extra grande). En otras palabras, el elemento solo será visible en pantallas más pequeñas que xl.
fixed: Esta clase posiciona el elemento de forma fija en la ventana del navegador. Permanecerá en la misma posición incluso si el usuario desplaza la página.
bottom-0: Esta clase establece el borde inferior del elemento en la posición 0, lo que significa que estará fijo en la parte inferior de la ventana del navegador.
left-0: Esta clase establece el borde izquierdo del elemento en la posición 0, lo que significa que estará fijo en el lado izquierdo de la ventana del navegador.
z-50: Esta clase establece la propiedad z-index del elemento en 50. El z-index determina la posición de apilamiento de elementos superpuestos. Un valor más alto de z-index coloca el elemento por encima de los elementos con valores de z-index más bajos.
w-full: Esta clase establece el ancho del elemento al 100% del ancho disponible en su contenedor.
h-16: Esta clase establece la altura del elemento en 16 unidades. La unidad utilizada puede variar dependiendo de la configuración de estilo.
border-t bg-theme-10 border-theme-10: Estas clases establecen el estilo del borde superior (border-t) del elemento, el color de fondo (bg-theme-10) y el color del borde (border-theme-10).

En resumen, el código define un bloque fijo en la parte inferior izquierda de la ventana del navegador. Este bloque estará visible en pantallas más pequeñas que xl y contendrá los iconos de redes sociales.

Paso 2

Después del primer <div>, se utiliza otro <div> con las siguientes clases: "grid h-full max-w-lg grid-cols-3 mx-auto font-medium". Analicemos cada una de estas clases:

grid Esta clase establece el elemento como un contenedor de cuadrícula. Permite organizar los elementos internos en filas y columnas.
h-full Esta clase establece la altura del elemento al 100% de la altura disponible en su contenedor. En este caso, asegura que el <div> ocupe toda la altura del contenedor padre.
max-w-lg Esta clase establece el ancho máximo del elemento en lg (grande). Limita el ancho del <div> para evitar que ocupe demasiado espacio horizontalmente.
grid-cols-3 Esta clase establece el número de columnas de la cuadrícula en 3. Divide el contenedor en tres columnas de igual ancho.
mx-auto Esta clase establece los márgenes izquierdo y derecho del elemento como "automáticos", lo que centra el <div> horizontalmente en su contenedor.
font-medium Esta clase establece el grosor de la fuente del texto dentro del <div> como "medio".

En resumen, el segundo <div> crea una cuadrícula con tres columnas en el que se colocarán los iconos de las redes sociales. La cuadrícula se ajusta automáticamente al ancho máximo de lg, se centra horizontalmente y utiliza un grosor de fuente medio para el texto dentro de ella.

Paso 3

Después del segundo <div>, se utilizan tres elementos <a> para crear enlaces a diferentes plataformas de redes sociales (Facebook, Instagram y WhatsApp). Cada elemento <a> tiene clases y atributos específicos para darle estilo y funcionalidad. Analicemos cada uno de ellos:

Después del segundo <div>, se utilizan los siguientes enlaces:

Enlace de Facebook:
```
<a href="https://www.facebook.com/TU-PERFIL/?locale=es_ES" type="button" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-800  group">
```
Este enlace dirige al perfil de Facebook y tiene las siguientes características:
- href: El atributo href especifica la URL a la que el enlace debe dirigir.
- type="button": El atributo type especifica el tipo del elemento.
- Clases: Las clases proporcionan estilos y comportamientos al enlace.

Enlace de Instagram:

<a href="https://www.instagram.com/TU-PERFIL/" type="button" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-800  group">

Este enlace dirige al perfil de Instagram y tiene características similares al enlace de Facebook.

Enlace de WhatsApp:
```
<a href="https://api.whatsapp.com/send?phone=TU-TELEFONO" type="button" class="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-800  group">
```
Este enlace permite enviar un mensaje de WhatsApp a un número de teléfono específico y tiene características similares a los enlaces anteriores.

En resumen, los enlaces se crean utilizando elementos <a> con diferentes URL y clases. Cada enlace se muestra como un botón en línea con contenido centrado y estilos de fondo cambiantes al pasar el cursor sobre ellos.

Paso 4

Se coloca un elemento <svg> seguido de un elemento <span> que contiene el texto de la aplicación correspondiente. Veamos el ejemplo del enlace de Facebook:

      
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="w-6 h-6 mb-1 text-theme-900 group-hover:text-theme-500"
          fill="currentColor"
          viewBox="0 0 24 24">
          <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
        </svg>
        <span class="text-sm text-theme-900 group-hover:text-theme-500">Facebook</span>

SVG:

El elemento <svg> es utilizado para mostrar gráficos vectoriales escalables en el documento HTML. En este caso, se utiliza un icono de Facebook. Los atributos xmlns, class, fill y viewBox son específicos del SVG y se utilizan para definir el tamaño, color y posición del ícono.

Path:

Dentro del elemento <svg>, se encuentra el elemento <path> que define la forma y el contorno del icono de Facebook. El atributo d contiene una serie de comandos que describe la trayectoria del trazo.

Span:

El elemento <span> se utiliza para mostrar el texto de la aplicación, en este caso, "Facebook". Las clases utilizadas en el elemento <span> proporcionan estilos de texto específicos, como el tamaño de fuente y los colores.

En resumen, después de cada enlace se coloca un ícono SVG que representa la plataforma de redes sociales correspondiente, y un texto descriptivo utilizando el elemento <span>. Esto crea una combinación visualmente atractiva de un ícono y el nombre de la aplicación en cada enlace.

Cómo crear un footer responsive con iconos