https://github.com/gustedeveloper/bootcampjs-laboratorio-modulo1-html

Este proyecto es la entrega del Módulo 1 - HTML del Bootcamp de Javascript de Lemoncode. Consiste en la creación de una página web de una tienda de moda online, utilizando HTML y CSS. Incluye una estructura básica con navegación, secciones de productos y un pie de página.
https://github.com/gustedeveloper/bootcampjs-laboratorio-modulo1-html

Last synced: 5 months ago
JSON representation

Este proyecto es la entrega del Módulo 1 - HTML del Bootcamp de Javascript de Lemoncode. Consiste en la creación de una página web de una tienda de moda online, utilizando HTML y CSS. Incluye una estructura básica con navegación, secciones de productos y un pie de página.

• Host: GitHub
• URL: https://github.com/gustedeveloper/bootcampjs-laboratorio-modulo1-html
• Owner: gustedeveloper
• Created: 2024-06-11T12:58:41.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-13T17:46:38.000Z (about 2 years ago)
• Last Synced: 2025-10-11T02:20:20.232Z (9 months ago)
• Language: HTML
• Homepage: https://gustedeveloper.github.io/bootcampjs-laboratorio-modulo1-html/
• Size: 313 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Bootcamp JavaScript 2 - Lemoncode

## Laboratorio Módulo 1 - HTML

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.

## Estructura del Proyecto

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.

## Contenido

### HTML

El archivo `index.html` está estructurado en varias secciones:

1. **Cabezera (``):**

    - 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.

2. **Cuerpo (``):**

    - **Navegación (``):**

        - Contiene un menú de hamburguesa y enlaces a diferentes secciones de la tienda.

        - Incluye íconos para usuario, favoritos y carrito de compras.

    - **Contenido Principal (``):**

        - 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 (``):**

        - 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.

### CSS

El archivo `styles.css` proporciona el estilo visual de la página web, con diferentes secciones:

1. **Estilos Generales:**

    - Configuración de box-sizing, familia de fuentes y márgenes.

    - Importación de la fuente `Montserrat` desde Google Fonts.

2. **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 `flex` para alinear y distribuir los elementos dentro de la barra de navegación.

3. **Contenido Principal:**

    - Estilos para la sección de nuevas colecciones, incluyendo el título y la disposición de los productos.

    - Utilización de `grid` para la disposición de las imágenes de los productos.

4. **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 `flex` para alinear y distribuir los elementos dentro del pie de página.

5. **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.

## Cómo Visualizar el Proyecto

Para ver el proyecto en tu navegador local, sigue estos pasos:

1. Clona este repositorio en tu máquina local.

2. Abre el archivo `index.html` en tu navegador preferido.

## Tecnologías Utilizadas

- **HTML5:** Para la estructura de la página.

- **CSS3:** Para el diseño y la disposición visual.

- **Google Fonts:** Para la tipografía.

## Autor

Este proyecto ha sido desarrollado por Guste Gaubaite, como parte del Bootcamp de Javascript de Lemoncode.