En este ejercicio, aprenderás a crear una página web replicando el diseño de una imagen de referencia. Deberás utilizar HTML, CSS y aplicar media queries para adaptar el diseño a diferentes tamaños de pantalla.
-
Haz fork y clona este repositorio en tu entorno de desarrollo:
git clone (url del repo del ejercicio) -
Utiliza los comandos necesarios en la consola de git para abrir el repositorio.
-
Crea el archivo
index.htmlen VSCode. Este será el punto de inicio para tu proyecto. -
Crea el código necesario para replicar el diseño de la imagen de referencia proporcionada en la carpeta
img. Asegúrate de que el diseño sea fiel a la imagen, incluyendo la estructura del sitio, los colores y las fuentes. -
Implementa las siguientes media queries en tu CSS para cambiar el diseño en función del tamaño de la pantalla:
- Cuando la pantalla sea menor de 480px, el menú del navbar debe convertirse en un menú desplegable u oculto.
- Cuando la pantalla sea mayor de 480px y menor de 768px, el menú tendrá que estar en el lateral.
-
Asegúrate de que el diseño sea responsive.
-
Cuando hayas completado el ejercicio, haz un commit y un push de tus cambios al repositorio.
A continuación, puedes ver la imagen de referencia que debes replicar en tu diseño:
Ejemplo del diseño responsive:
Además, encontrarás la imagen de fondo para trabajar en la misma carpeta de imágenes (debes añadir los botones, frases, etc.)
Paciencia, seguramente no saldrá a la primera.
Puedes consultar la documentación de HTML y CSS para obtener ayuda adicional: