jairogarcíarincón

Ejercicio 2


1.37K

Ejercicio 2

Utilizando como plantilla el código html propuesto 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 700 on 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.


  • Extra: Haz una copia del ejercicio, añádele Bootstrap 4 y crea un menú con sub-niveles y sus estilos necesarios.

Archivo index.html de ejemplo:



Se adjunta una imagen de cómo podría ser la solución a nivel visual:


Publicado el 21 de Mayo de 2022

csscss3sassscsslesspreprocesadores