Aquí mi código HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>IMPENDING DOOM DISCOS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img id="banner" src="banner/banner.jpg">
<div class="principal">
<h1>Bienvenido a tu nueva casa de vinilos. Bienvenido a Impending Doom Discos.</h1>
<p id="intro">Bienvenidos a Impending Doom Discos, el último bastión para los amantes de la música que valoran el sonido puro, la estética <em>vintage</em> y la sensación tangible de poner una aguja sobre un disco de vinilo. En un mundo dominado por lo digital, nuestra tienda es un santuario para los entusiastas del vinilo, coleccionistas y aquellos que buscan redescubrir el arte perdido de la escucha profunda.</p>
<p>Desde clásicos atemporales hasta joyas ocultas y lanzamientos contemporáneos, Impending Doom Discos ofrece una experiencia de descubrimiento musical sin igual. Nuestro catálogo, cuidadosamente curado, abarca una amplia gama de géneros, asegurando que cada visita a nuestra tienda sea una aventura auditiva única.</p>
<p>Conéctate con la música de una manera que solo el vinilo puede ofrecer. Explora colecciones que cuentan historias, portadas de álbumes que son obras de arte y sonidos que llenan el alma. Ya sea que seas un aficionado experimentado o nuevo en el mundo del vinilo, Impending Doom Discos es tu destino para sumergirte en la riqueza de la música que espera ser redescubierta o amada de nuevo.</p>
<p>Sumérgete en nuestra comunidad, participa en eventos exclusivos, lanzamientos especiales y noches de escucha. En Impending Doom Discos, no solo vendemos discos; <strong>creamos conexiones, cultivamos la cultura del vinilo y celebramos la pasión por la música que resuena a través de los tiempos</strong>.</p>
</div>
<div class="diferenciales">
<h2>Diferenciales</h2>
<u1>
<li class="items">Variedad de catálogo musical.</li>
<li class="items">Selección de cervezas artesanales.</li>
<li class="items">Servicio técnico calificado.</li>
</u1>
<img src="diferenciales/diferenciales.jpeg" class="imagenDiferenciales">
</div>
</body>
</html>
Aquí mi código CSS:
#banner{
width:100%;
}
.principal{
background: darkgray;
padding: 20px;
}
h1{
text-align: center;
}
p{
text-align: center;
background: darkgray;
}
.diferenciales{
background: white;
padding: 30px;
}
h2{
text-align: center;
}
.items{
font-style: italic;
}
ul{
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%;
}
.imagenDiferenciales{
width: 50%;
}
strong{
color: rgb(100, 8, 26);
}
#intro{
font-size: 20px;
}
