Desafío Final CSS: Página de Artista

🏆 Desafío Final: Página Completa de Artista

🎯 Objetivo

Crear una página web completa sobre el tema que más te guste aplicando TODAS las técnicas CSS que has aprendido: colores, Box Model, tipografía, listas y tablas. Este es tu proyecto final donde demostrarás todo tu conocimiento.

🔧 Todo lo que DEBES aplicar

✅ Ejercicio 01 - Colores y Conexión CSS:

Usar los 3 métodos de CSS (externo, interno, en línea)
Aplicar los 4 formatos de colores (nombre, hex, RGB, HSL)

✅ Ejercicio 02 - Box Model:

Centrar elementos con margin: auto
Aplicar padding, border, margin a diferentes secciones
Usar width, height para controlar tamaños
Experimentar con outline y overflow

✅ Ejercicio 03 - Tipografía:

Diferentes font-family para títulos y párrafos
Varios font-size para crear jerarquía
Usar font-weight para destacar
Aplicar text-transform, text-align, text-shadow

✅ Ejercicio 04 - Listas y Tablas:

Lista de álbumes con list-style personalizado
Tabla de canciones con border-collapse, spacing
Hacer la tabla responsive con overflow

📄 Plantilla HTML - Copia y Personaliza

Cambia "Joji" por tu tema favorito (artista, deporte, videojuego, película, etc.) y personaliza todo el contenido:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tu Artista Favorito - Discografía</title>
    
    <!-- CSS EXTERNO -->
    <link rel="stylesheet" href="estilos-artista.css">
    
    <!-- CSS INTERNO -->
    <style>
        /* Aquí va tu CSS interno */
    </style>
</head>
<body>

    <!-- HEADER PRINCIPAL -->
    <header class="heroe">
        <img src="artista.jpg" alt="Tu Artista" class="imagen-artista">
        <h1 class="nombre-artista">JOJI</h1>
        <p class="descripcion-artista">
            George Kusunoki Miller, conocido como Joji, es un cantante, compositor 
            y productor japonés. Su música combina elementos de R&B, lo-fi y trip hop.
        </p>
    </header>

    <main>
        <!-- SECCIÓN DE INFORMACIÓN -->
        <section class="info-artista">
            <h2>📍 Información del Artista</h2>
            
            <div class="tarjetas-info">
                <div class="tarjeta">
                    <h3>🎵 Géneros Musicales</h3>
                    <ul class="lista-generos">
                        <li>R&B Alternativo</li>
                        <li>Lo-fi Hip Hop</li>
                        <li>Trip Hop</li>
                        <li>Indie Pop</li>
                    </ul>
                </div>

                <div class="tarjeta">
                    <h3>🏆 Logros Principales</h3>
                    <ul class="lista-logros">
                        <li>Más de 1B reproducciones en Spotify</li>
                        <li>Top 10 en Billboard</li>
                        <li>Certificación Platino</li>
                        <li>Giras mundiales</li>
                    </ul>
                </div>

                <div class="tarjeta">
                    <h3>📅 Datos Personales</h3>
                    <ul class="lista-datos">
                        <li>Nacimiento: 18 septiembre 1992</li>
                        <li>Nacionalidad: Japonés-Australiano</li>
                        <li>Debut musical: 2017</li>
                        <li>Discográfica: 88rising</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- SECCIÓN DE DISCOGRAFÍA -->
        <section class="discografia">
            <h2>💿 Discografía Principal</h2>
            
            <div class="album-destacado">
                <img src="nectar-album.jpg" alt="Álbum Nectar" class="portada-album">
                <div class="info-album">
                    <h3 class="titulo-album">NECTAR (2020)</h3>
                    <p class="descripcion-album">
                        Su segundo álbum de estudio que consolidó su carrera musical 
                        con una mezcla perfecta de melancolía y producción moderna.
                    </p>
                </div>
            </div>

            <!-- TABLA DE CANCIONES POPULARES -->
            <h3>🎶 Top 5 Canciones Más Populares</h3>
            <div class="contenedor-tabla">
                <table class="tabla-canciones">
                    <caption>Las canciones más escuchadas del artista</caption>
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Canción</th>
                            <th>Álbum</th>
                            <th>Año</th>
                            <th>Reproducciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Glimpse of Us</td>
                            <td>SMITHEREENS</td>
                            <td>2022</td>
                            <td>800M+</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Slow Dancing in the Dark</td>
                            <td>BALLADS 1</td>
                            <td>2018</td>
                            <td>600M+</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Sanctuary</td>
                            <td>Nectar</td>
                            <td>2020</td>
                            <td>400M+</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>Yeah Right</td>
                            <td>BALLADS 1</td>
                            <td>2018</td>
                            <td>300M+</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>Gimme Love</td>
                            <td>Nectar</td>
                            <td>2020</td>
                            <td>250M+</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- SECCIÓN CON CSS EN LÍNEA (EJEMPLO) -->
        <section style="background: linear-gradient(45deg, #667eea, #764ba2); padding: 40px; margin: 30px 0; text-align: center; border-radius: 15px;">
            <h2 style="color: white; font-size: 2.5em; text-shadow: 2px 2px 4px rgba(0,0,0,0.5);">
                🌟 ¡Tu Turno de Personalizar!
            </h2>
            <p style="color: #f1f1f1; font-size: 1.2em; max-width: 600px; margin: 0 auto;">
                Cambia este contenido por tu tema favorito. Aplica todo lo que has aprendido 
                y crea algo increíble. ¡Este es tu momento de brillar!
            </p>
        </section>
    </main>

    <footer>
        <p>Página creada como desafío de CSS | Tu Nombre © 2025</p>
    </footer>

</body>
</html>

🚀 Instrucciones del Desafío

Personaliza el contenido: Cambia Joji por tu tema favorito (artista, deporte, videojuego, etc.)
Busca imágenes: Fotos relacionadas con tu tema elegido
Crea tu CSS externo: estilos-artista.css con la mayoría de estilos
Usa CSS interno: En <style> para algunos elementos específicos
Mantén CSS en línea: La sección ya tiene algunos ejemplos
Aplica TODAS las propiedades: Usa el checklist como guía
Haz que se vea profesional: Colores que combinen, tipografía legible, espaciado equilibrado
Responsive: Que la tabla funcione bien en móviles