Completar un proyecto web implica cuidar cada detalle visual, desde la ubicación del negocio hasta el pie de página. En esta fase final se construyen dos secciones fundamentales: la de location, que muestra un mapa con la dirección del negocio, y el footer, que contiene el logotipo, enlaces importantes e íconos de redes sociales. Todo se trabaja con Sass aprovechando mixins, variables locales y buenas prácticas de maquetación.
¿Cómo estructurar la sección de location con HTML y Sass?
El primer paso es revisar el diseño en Figma para identificar los elementos necesarios [0:12]. La sección de location incluye un título con etiqueta H2, una imagen del mapa y un párrafo con la dirección. Se agrega además un H3 para mostrar la ubicación específica del negocio.
Es importante destacar que se utiliza una imagen estática del mapa en lugar de consumir una API [0:30]. Esto permite avanzar sin conocimientos adicionales sobre integración de servicios externos, aunque queda abierta la posibilidad de implementar una API si se cuenta con ese conocimiento.
La imagen se coloca dentro de la carpeta assets/image y se referencia directamente en el HTML [1:07].
¿Qué estilos aplicar al mapa y la dirección?
Dentro del archivo de estilos, después de la sección de gallery y antes del footer, se crean los estilos para .location [1:30]. La clase .mapa recibe un display flex utilizando el mixin flex-center previamente creado:
- Se establece la dirección como row.
- Se centra el contenido en ambos ejes.
- Se agrega un
padding-bottom de 50 píxeles a la imagen para separarla de la dirección [2:02].
Para el color del texto se introduce una variable local llamada $text-color [2:25]. Esta variable se reutiliza tanto en el H3 como en otros elementos de la sección, evitando repetir valores hexadecimales. Las variables locales existen únicamente dentro del contexto del selector donde se declaran.
¿Cómo ajustar el espaciado y tamaño tipográfico?
El H2 recibe un padding-bottom y un padding-top de 60 píxeles para generar separación con la sección superior de galería [3:15]. Al inspeccionar los elementos en el navegador se ajustan los valores en tiempo real.
Para el tamaño de fuente del H3 se prueba con 2.2em, mientras que el párrafo con la dirección utiliza la variable $paragraph-size [4:30]. Cuando dos selectores comparten los mismos estilos, se combinan separándolos con una coma, optimizando así el código [5:22].
¿Cómo construir el footer con logotipo y redes sociales?
El footer contiene tres grupos de elementos: el logotipo de Eco Store, información estática como careers y terms and conditions, y los íconos de redes sociales [5:40].
En el HTML se crea una sección con la clase .social-media donde se insertan las imágenes de los íconos de Instagram, Twitter y Facebook, almacenados en la carpeta assets/image [6:15].
¿Qué propiedades de Sass aplicar al footer?
El footer ya tiene un background-color y un width definidos. El height se cambia a auto para que crezca según el contenido [5:55]. El color del texto interior se establece en blanco.
- Se agrega un
padding general de 40 píxeles para que los elementos no queden pegados a los bordes [6:50].
- La clase
.social-media utiliza el mixin flex-center con dirección horizontal y centrado en ambos ejes [7:05].
- Se aplica un
gap de 40 píxeles para espaciar los íconos entre sí [7:35].
- Un
padding-bottom adicional de 40 píxeles separa la sección inferior del borde del footer [7:42].
El contenido del footer es flexible: se pueden agregar enlaces a políticas, información corporativa como "Eco Store Inc" o cualquier dato relevante de la empresa [7:55].
¿Qué buenas prácticas se aplican en esta fase final?
Durante toda la construcción se refuerzan prácticas clave de desarrollo con Sass:
- Reutilización de mixins como
flex-center para evitar escribir las mismas propiedades de flexbox repetidamente.
- Variables locales para colores que se usan en un contexto específico.
- Semántica HTML correcta al distinguir entre H2, H3 y etiquetas P según la jerarquía del contenido [4:45].
- Inspección en navegador para probar estilos antes de llevarlos al código fuente.
Con estas dos secciones completadas, el proyecto queda listo para su fase de despliegue en GitHub Pages. Si quieres compartir tu implementación o tienes dudas sobre algún estilo, déjalas en los comentarios.
