HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mis Favoritos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Mis Favoritos</h1>
<p>Una recopilación de mis cosas favoritas: películas, series, música y más.</p>
</header>
<section class="favoritos">
<h2> Películas Favoritas</h2>
<div class="grid">
<div class="card">
<img src="pelicula1.jpg" alt="Película 1">
<p>Inception</p>
</div>
<div class="card">
<img src="pelicula2.jpg" alt="Película 2">
<p>Interstellar</p>
</div>
</div>
</section>
<section class="favoritos">
<h2> Series Favoritas</h2>
<div class="grid">
<div class="card">
<img src="serie1.jpg" alt="Serie 1">
<p>Breaking Bad</p>
</div>
<div class="card">
<img src="serie2.jpg" alt="Serie 2">
<p>Stranger Things</p>
</div>
</div>
</section>
<section class="favoritos">
<h2> Música Favorita</h2>
<div class="grid">
<div class="card">
<img src="musica1.jpg" alt="Música 1">
<p>Bohemian Rhapsody - Queen</p>
</div>
<div class="card">
<img src="musica2.jpg" alt="Música 2">
<p>Shape of You - Ed Sheeran</p>
</div>
</div>
</section>
<footer>
<p>Creado con por [Tu Nombre]</p>
</footer>
</body>
</html>
CSS
/* Estilos generales */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
text-align: center;
}
/* Encabezado */
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
/* Secciones */
.favoritos {
margin: 30px auto;
padding: 20px;
max-width: 900px;
background-color: white;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* Estilos para el grid */
.grid {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
/* Tarjetas de favoritos */
.card {
background: white;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 15px;
width: 200px;
text-align: center;
}
.card img {
width: 100%;
border-radius: 10px;
}
.card p {
margin-top: 10px;
font-weight: bold;
}
/* Pie de página */
footer {
background-color: #333;
color: white;
padding: 10px;
margin-top: 30px;
}