jairogarcíarincón
Enunciado
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.
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):
Publicado el 21 de Noviembre de 2024
csscss3sassscsslesspreprocesadores