🎧 Spotify Landing Page Clone Este proyecto es una recreación fiel de la página de aterrizaje de Spotify, desarrollada como un ejercicio de maquetación avanzada. El objetivo fue replicar la estética visual de la marca utilizando únicamente HTML5 y CSS3 puro, enfrentando retos de diseño asimétrico y adaptabilidad.
🎯 Retos Técnicos Superados
- El "Efecto Kanye" (Diseño Asimétrico) El mayor desafío fue la sección de Kanye West. Se logró replicar el diseño original que incluye:
Un Grid de 3 columnas en escritorio para separar el título, los puntos de información y la imagen del dispos Uso de Pseudoelementos (::after) para crear la línea decorativa blanca debajo del título, ajustada dinámicamente al ancho del texto.
Posicionamiento Absoluto para colocar el logotipo de Spotify blanco flotando entre las columnas, tal cual el diseño oficial.
- Estructura de Características (Features) Se implementó un sistema de columnas horizontales que se transforma automáticamente:
Desktop: 3 columnas alineadas horizontalmente con grid-template-columns: 1fr 1fr 1fr.
Mobile: Transición a una sola columna vertical para garantizar la legibilidad en pantallas pequeñas.
- Fichas de Equipo (Team Section) Uso de contenedores tipo "wrapper" para las imágenes, permitiendo que fotos de diferentes proporciones luzcan perfectamente circulares y uniformes mediante la propiedad object-fit: cover.
🛠️ Tecnologías HTML5 Semántico: Para una mejor accesibilidad.
CSS Custom Properties (Variables): Para gestionar la paleta de colores oficial (Verde Spotify: #1DB954).
Flexbox & CSS Grid: Para todo el control del layout.