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 adaptar el diseño en función del tamaño de la pantalla:
- Cuando la pantalla sea inferior a 480px, el menú del navbar debe cambiar de color.
- Cuando la pantalla sea menor de 768px, el menú del navbar debe convertirse en un menú desplegable u oculto.
-
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:
Puedes consultar la documentación de HTML y CSS para obtener ayuda adicional: