Partiendo del ejercicio 2 y utilizando como modelo la imagen que se adjunta al final:
Partiendo del ejercicio-2, crea una copia en una nueva carpeta llamada ejercicio-3.
Abre en el navegador la ruta del archivo index.html y comprueba que funciona correctamente.
Si quieres aprovechar bien el ejercicio, no debes escribir nada en el archivo style.css, todo el código de dicho archivo se compilará a partir del fichero style.scss.
Cuando lo consideres necesario, utiliza las opciones de @debug, @error y @warn.
Traslada todas las variables de la hoja de estilos a una nueva hoja llamada _variables.scss e impórtala en la actual
Modifica tu hoja de estilos para que cumpla los siguientes requisitos:
El color del título de la página debe venir de una @function escrita en _variables.scss que genere un color aleatorio al compilar de componente rojo (0 en el resto).
El color del subtítulo de la página debe venir de una @function escrita en _variables.scss que genere un color aleatorio al compilar de componente verde (0 en el resto).
Simplifica las reglas de estilo de fuentes de los títulos mediante un @mixin, @include y @extend.
Los estilos de lista horizontal del nav (salvo los enlaces) deben ser reutilizables mediante un @mixin.
Modifica tu hoja de estilos para que la section cumpla los siguientes requisitos:
Añade 6 article en columnas de 3.
Añade a cada article un enlace a la red social (de las del footer), su logo a la izquierda, un título a la derecha y una descripción de la empresa debajo.
Cada article tendrá un color de fondo aleatorio, con opacidad de 0.5 y diferente de los otros (puedes utilizar como punto de partida la @function definida anteriormente).
El logo del article tendrá un ancho del 25% y el resto del contenido ocupará el espacio restante del article
Modifica tu hoja de estilos para adaptarla a diferentes dispositivos:
En pantallas de menos de 992px, los articles pasan a columnas de 2, en pantallas de menos de 768px, aparecen uno debajo de otro.
En pantallas de menos de 768px, el logo aparece centrado encima del título y el subtítulo.
En pantallas de menos de 768px, el margen de separación entre secciones desaparece.
En pantallas de menos de 768px, los ítems del nav aparecen uno debajo de otro (quedando así preparados para implementar un menú oculto).
En todos los casos, las fuentes e imágenes se adaptan según las necesidades.
Fuente: Elaboración propia
Solución
La solución completa al ejercicio la puedes encontrar en el siguiente enlace (así como el index.html como punto de partida):
ejercicio-3
Además, se adjuntan imágenes de cómo podría ser la solución a nivel visual en tablet y móvil (en escritorio sería la anterior):
Fuente: Elaboración propiaFuente: Elaboración propia
