Este proyecto es parte del Bootcamp de Javascript de Lemoncode y representa la segunda entrega correspondiente al Módulo 1 de HTML. El objetivo de esta entrega es aplicar los conocimientos adquiridos sobre HTML y CSS para construir una página web que presenta una tienda de moda online.
El proyecto consta de los siguientes archivos:
index.html: Contiene la estructura principal de la página web.styles.css: Contiene los estilos CSS para la página web.- Carpeta
Iconos: Contiene los íconos utilizados en la navegación y el pie de página. - Carpeta
Imágenes: Contiene las imágenes de los productos.
El archivo index.html está estructurado en varias secciones:
-
Cabezera (
<head>):- Incluye metadatos como el charset y la configuración de la vista.
- Incluye la referencia al archivo de estilos
styles.css. - Contiene el título de la página.
-
Cuerpo (
<body>):- Navegación (
<nav>):- Contiene un menú de hamburguesa y enlaces a diferentes secciones de la tienda.
- Incluye íconos para usuario, favoritos y carrito de compras.
- Contenido Principal (
<main>):- Presenta una sección con el título "NUEVAS COLECCIONES".
- Muestra una galería de productos con imágenes y detalles de precio.
- Pie de Página (
<footer>):- Incluye enlaces a la información de entrega, devoluciones y cambios, contacto telefónico y correo electrónico.
- Utiliza íconos para mejorar la estética y usabilidad.
- Navegación (
El archivo styles.css proporciona el estilo visual de la página web, con diferentes secciones:
-
Estilos Generales:
- Configuración de box-sizing, familia de fuentes y márgenes.
- Importación de la fuente
Montserratdesde Google Fonts.
-
Navegación:
- Estilos para la barra de navegación, incluyendo su posición fija y diseño responsivo.
- Estilos para el menú de hamburguesa, enlaces de navegación y íconos.
- Se usa
flexpara alinear y distribuir los elementos dentro de la barra de navegación.
-
Contenido Principal:
- Estilos para la sección de nuevas colecciones, incluyendo el título y la disposición de los productos.
- Utilización de
gridpara la disposición de las imágenes de los productos.
-
Pie de Página:
- Estilos para el pie de página, con una disposición flexible y elementos alineados.
- Estilos para los enlaces y los íconos dentro del pie de página.
- Se usa
flexpara alinear y distribuir los elementos dentro del pie de página.
-
Media Queries:
- Estilos específicos para diferentes tamaños de pantalla, asegurando que la página sea responsiva y se vea bien en dispositivos de diferentes resoluciones.
Para ver el proyecto en tu navegador local, sigue estos pasos:
- Clona este repositorio en tu máquina local.
- Abre el archivo
index.htmlen tu navegador preferido.
- HTML5: Para la estructura de la página.
- CSS3: Para el diseño y la disposición visual.
- Google Fonts: Para la tipografía.
Este proyecto ha sido desarrollado por Guste Gaubaite, como parte del Bootcamp de Javascript de Lemoncode.