Utilizando como modelo la imagen que se adjunta al final:
Crea una nueva carpeta en Visual Studio Code llamada ejercicio-2 y añade el archivo index.html con el código proporcionado.
Abre en el navegador la ruta del archivo index.html y comprueba que funciona correctamente.
Crea las carpetas css e img.
Decide si vas a utilizar Sass o SCSS.
Crea, dentro del carpeta css, el fichero style.scss (o style.sass, según tu elección, yo a partir de ahora usare SCSS).
Modifica la configuración de tu IDE o los comandos en la consola para compilar automáticamente el fichero style.scss en el fichero style.css (recuerda que ambos estarán en la misma carpeta y que style.css se creará en la primera compilación).
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. Además, no puedes utilizar directivas de tipo @, salvo @import para la fuente de Google.
Accede a Google Fonts e importa la fuente Nunito en sus variantes light 300, regular 400 y bold 700 dentro del archivo style.scss.
Enlaza el archivo style.css en tu archivo index.html.
Modifica tu hoja de estilos para que la página y las fuentes cumplan los siguientes requisitos (intenta utilizar todo lo aprendido hasta ahora para optimizar tu hoja de estilos):
Ajusta la página a un ancho máximo de 1400px sin márgenes y céntrala en la ventana del navegador
La fuente en toda la página será Nunito y la alternativa será sans-serif.
La fuente del cuerpo de la página tendrá un peso de 400 con un tamaño de 1rem.
La fuente de los titulares (h1 a h3) llevará un peso de 700 y su tamaño será mayor que el cuerpo en cada paso (un 50% más para h3, un 100% mas para h2, un 200% mas para h1)
En este punto, al refrescar tu página deberías ver los cambios en las fuentes. Si no es así, revisa la configuración y los estilos antes de continuar.
Modifica tu hoja de estilos para que el header cumpla los siguientes requisitos
El logo de Sass (que puedes descargar de su página web en svg), debe ir alineado a la izquierda ocupando el 10% del ancho del header.
El título de la página debe aparecer centrado en el espacio restante del header, y el subtítulo debajo y también centrado.
Pinchando en la imagen o en el título la página se debe recargar, pero el título no debe parecer un enlace (de hecho, ningún enlace de la página debe parecerlo).
Resetea los márgenes de los títulos del header.
Añade al header un color de fondo y un pequeño padding a los cuatro lados.
Modifica tu hoja de estilos para que el nav cumpla los siguientes requisitos:
El nav ocupará todo el ancho disponible, tendrá el mismo color de fondo y estará levemente separado del header.
Los ítems de menú deben estar en línea y centrados en pantalla, sin margin y con un mínimo padding entre ellos.
Los ítems de menú estarán en mayúsculas, con un tamaño de letra del 110% respecto del cuerpo, un peso de 400 y uno de 700on hover.
El color de los ítems y los enlaces será negro, salvo en los enlaces on hover que será rojo.
Aplica a la section una altura mínima de 20em para separarla y que se diferencie del footer. Ya trabajaremos con ella en el tercer bloque.
Modifica tu hoja de estilos para que el footer cumpla los siguientes requisitos:
Las dos secciones del footer (div y p) tendrán el mismo color de fondo y estarán separadas levemente.
Descárgate los iconos de las redes sociales en svg de ESTA DIRECCIÓN.
Asócialos con sus correspondientes enlaces en el html.
Los iconos del footer tendrán un ancho de 3em, estarán centrados y en línea, con una cierta separación entre ellos.
La letra del párrafo p será un 80% respecto de la del cuerpo.
Solución
La solución al ejercicio la puedes encontrar en el siguiente enlace (así como el index.html como punto de partida):
ejercicio-2
