jairogarcíarincón

Ejercicio 3


42.3K

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.



08 Plantilla avanzada Ordenador
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):

09 Plantilla avanzada tablet
Fuente: Elaboración propia


10 Plantilla avanzada movil
Fuente: Elaboración propia


Publicado el 21 de Noviembre de 2024

csscss3sassscsslesspreprocesadores