Lección: 14 Como hacer el FOOTER en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack

14 Como hacer el FOOTER en mi PÁGINA WEB en el SISTEMA VETERINARIO (PHP y MySql)FullStack

Duración: 21 min

Módulo: 🎨 Fundamentos e Interfaz Pública (Front-End con Bootstrap) Lección 14 de 14

Descripción

🎬 Lección 14: Cómo hacer el FOOTER (Pie de Página) de la WEB 💻

Esta lección se enfoca en la creación y estructuración del footer de la página web del sistema veterinario, utilizando un diseño de tres columnas que garantiza el acceso rápido a la información clave y el cumplimiento de estándares de diseño moderno y responsive.

Estructura y Estilizado General 🎨

Etiqueta Principal: Se utiliza la etiqueta HTML <footer> con una clase CSS propia (.footer) para aplicar estilos específicos. [02:14]
Estilo Visual: Se configura un color de fondo oscuro para el footer y el color de texto se establece en blanco (color: white) para lograr un contraste adecuado y legible. [04:37]
Responsive: Se mantiene la adaptabilidad para que el contenido se ajuste correctamente a cualquier tamaño de pantalla. [00:27]

Distribución del Contenido (Grilla de 3 Columnas) 📊

El footer se organiza dentro de un contenedor (Container) usando el sistema de grillas de Bootstrap, dividiendo el espacio en tres columnas iguales (col-md-4): [03:30]

1. Columna de Identidad (Logo/Icono)

Se inserta un icono o imagen que representa al sistema o a la clínica veterinaria.
Se ajusta su tamaño al 50% de la columna y se centra para un diseño limpio. [05:53]

2. Columna de Acceso Rápido (Quick Links) 🔗

Esta sección lista los enlaces directos a las secciones principales de la página, facilitando la navegación al usuario. [07:41]
Los enlaces incluyen: Inicio, Sobre Nosotros, Galería, Testimonios y Tienda en Línea.

3. Columna de Contacto (Iconografía) 📞

Se presenta la información de contacto esencial usando iconos de Bootstrap para mejorar la estética y la experiencia de usuario:

Detalle	Contenido de Ejemplo	Icono Bootstrap	Timestamp
Propietario	Nombre del Propietario	👤 person	[12:38]
WhatsApp	Número de celular	💬 whatsapp	[13:24]
Correo Electrónico	info@gmail.com	✉️ envelope-open	[14:39]

Finalmente, se añade una franja separada al final del footer para los avisos legales: [17:39]

Se establece un fondo de color negro.

Con esta lección, se completa el diseño de la página web estática. El próximo paso será el desarrollo de la parte administrativa y las funcionalidades dinámicas (como la reserva de citas).

Hilari Web