# Proyecto: Sitio Web 7THCA ## Contexto Sitio web para la banda **7THCA**, dúo de música electrónica/rock progresivo integrado por **Claudio González** (sintetizadores & composición) y **Jorge Albornoz** (guitarras & composición). El diseño replica una maqueta existente con estética **dark/cyberpunk**, acentos en cian `#00e5ff` y naranja `#ff6d00`, tipografías Google Fonts (Orbitron, Inter, Space Mono). --- ## Estado actual - [x] Archivo `index.html` creado con estructura completa - [ ] Imágenes: actualmente usan URLs de Unsplash (temporales) - [ ] Audio: los players tienen UI funcional pero sin archivos MP3 reales - [ ] Videos: los thumbnails de YouTube son placeholders --- ## Estructura de carpetas objetivo ``` 7thca/ ├── index.html ├── proyecto.md ├── assets/ │ ├── img/ │ │ ├── hero-bg.jpg │ │ ├── album-midnight-drive.jpg │ │ ├── album-life.jpg │ │ ├── release-just-another-day.jpg │ │ ├── release-just-another-day-acustico.jpg │ │ ├── member-claudio.jpg │ │ ├── member-jorge.jpg │ │ ├── genesis-estudio.jpg │ │ └── fotos/ │ │ ├── foto-01.jpg │ │ ├── foto-02.jpg │ │ ├── foto-03.jpg │ │ ├── foto-04.jpg │ │ ├── foto-05.jpg │ │ └── foto-06.jpg │ └── audio/ │ ├── just-another-day.mp3 │ ├── just-another-day-acustico.mp3 │ ├── midnight-drive.mp3 │ ├── permanent-postcard.mp3 │ └── the-ascent.mp3 ``` --- ## Secciones del HTML | ID | Sección | Estado | |----|---------|--------| | `#inicio` | Hero con fondo ciudad + título 7THCA | ✅ Listo | | `#ultimos-lanzamientos` | 2 tarjetas: Just Another Day + versión acústica | ✅ Listo | | `#albumes` | 2 álbumes: The Midnight Drive / Life | ✅ Listo | | `#nosotros` | Génesis del sonido + 2 miembros | ✅ Listo | | `#fotos` | Grilla 3×2 + enlace galería | ✅ Listo | | `#videos` | 2 tarjetas con embed YouTube | ✅ Listo | --- ## Pendientes principales ### 1. Reemplazar imágenes Unsplash por imágenes reales Buscar en el HTML las etiquetas `

` y reemplazarlas por rutas locales: ```html Claudio González

``` También reemplazar los `background` en CSS del hero: ```css /* Antes */ background: ... url('https://images.unsplash.com/photo-xxx') ... /* Después */ background: ... url('assets/img/hero-bg.jpg') ... ``` --- ### 2. Conectar players MP3 Cada track tiene un `

` con un botón `.play-btn`. El plan es: **a)** Agregar elementos `