Diversidad Digital: maquetación de una página web responsive
Módulo 1: Ejercicio de evaluación intermedia
En este ejercicio vamos a maquetar una versión simplificada de la Home de la página web de Adalab.
Elementos:
La web simplificada que hemos preparado, consta de estos elementos:
Una cabecera fija, que ocupa todo el ancho de la pantalla y que contiene: El logo de Adalab con un enlace a la home. Un menú de opciones en línea. Hay una sección principal que tiene un color de fondo y un título que dice "Creando Diversidad Digital". Este texto tiene que estar centrado tanto vertical como horizontalmente en toda la ventana de la página. Información de estilo:
La tipografía usada es Rubik La paleta de colores usados son:
4a4a4a (Texto del menú)
3CDBC0 (Color de fondo de la página)
FFFFFF (Color de texto de "Creando diversidad digital")
La web realizada tiene que ser responsive, es decir, debe funcionar correctamente para los siguientes tamaños:
Móvil
Por defecto:
El logo tiene un tamaño de 155px de ancho. El menú de la cabecera se coloca bajo el logo. El texto de las opciones del menú tiene un tamaño de 16px. El texto del título "Creando Diversidad Digital" tiene un tamaño de 30px. Ejemplo de web para móvil:
Tablet y desktop
A partir de 768px:
El menú de la cabecera se coloca a la derecha. El texto de las opciones del menú tiene un tamaño de 16px. El texto del título "Creando Diversidad Digital" tiene un tamaño de 40px. Ejemplo de web a partir de tablet:
Entrega
La evaluación solo se considerará terminada cuando:
El último commit de código subido a GitHub debe hacerse antes de las 11.10. El código esté correctamente indentado o formateado. Esté publicada en GitHub Pages y esté funcionando. El servidor de GitHub Pages tiene algunas diferencias respecto al Live Server de VS Code. Os recomendamos que todas las rutas de vuestro código sean relativas, es decir, que empiecen por ./ o ../ El enlace a GitHub Pages esté en la página página principal del repositorio, en la parte superior, al lado de la descripción.