Este proyecto es una réplica (maquetación) del diseño "Boombox", desarrollado exclusivamente con HTML5 y CSS3 (utilizando Flexbox para el layout). El objetivo es crear una maquetación inspirada en el diseño original: https://p.w3layouts.com/demos/boom_box/web/?_gl=1*8o1wzv*_ga*NTY1NDYwMTcwLjE3NjUzMzQyNjE.*_ga_9HSZ46TKMQ*czE3NjUzMzQyNjEkbzEkZzEkdDE3NjUzMzQ0NTEkajI0JGwwJGgw*_ga_EGV5GTJEP5*czE3NjUzMzQyNjEkbzEkZzEkdDE3NjUzMzQ0NTEkajI0JGwwJGgw*_ga_FFZF56TTWE*czE3NjUzMzQyNjEkbzEkZzEkdDE3NjUzMzQ0NTEkajMwJGwwJGgw&_ga=2.61685420.1050872575.1765334262-565460170.1765334261
El sitio web consta de una sola página (Landing Page) dividida en 5 secciones principales:
- Inicio (Hero): Banner principal con diseño de pantalla dividida y efecto diagonal.
- Nosotros: Sección informativa sobre el propósito del sitio.
- Servicios: Grid de 3 columnas destacando las ofertas.
- Galería: Mosaico de imágenes con efectos de hover.
- Contacto: Formulario estilizado y pie de página.
- HTML5: Estructura semántica.
- CSS3: Estilos, variables (Custom Properties), Flexbox para la maquetación y Media Queries para el diseño responsivo.
- Git: Control de versiones (incluye
.gitignoreconfigurado para futura integración con React).
/
├── index.html # Archivo principal con la estructura
├── css/
│ └── style.css # Hoja de estilos con todas las reglas visuales
├── images/ # Carpeta de assets (imágenes optimizadas)
└── js/ # Carpeta reservada para futura lógica (actualmente vacía)
No se requiere instalación de dependencias para ver el proyecto actual.
- Clona este repositorio o descarga los archivos.
- Abre el archivo
index.htmlen tu navegador web de preferencia (Chrome, Firefox, Safari, etc.).
Este proyecto está preparado para ser migrado a React en futuras etapas. Se ha incluido un archivo .gitignore optimizado para entornos de desarrollo en React.
Desarrollado por Miguel Tabares como el entregable 01 para la clase de JS, React & Firebase.