<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width">
<title>Recomienda</title>
<style>
html {
font-family: sans-serif;
}
body {
display: grid;
gap: 0.5rem;
margin: 0;
padding: 0.5rem;
max-height: 100vh;
grid-template-columns:
8rem 2fr;
grid-template-areas:
"h1 h1"
"ul section";
}
h1 {
grid-area: h1;
text-align: center;
}
ul {
grid-area: ul;
}
section {
grid-area: section;
}
figure {
display: none;
flex: 1;
margin: 0;
width: 100%;
}
figure:target {
display: block;
}
img {
flex: 1;
width: 100%;
}
</style>
</head>
<body>
<h1>Recomienda</h1>
<ul>
<li>
<p>
<a href="#pop">Pop</a>
</p>
</li>
<li>
<p>
<a href="#reg">Reguetón</a>
</p>
</li>
</ul>
<section>
<figure id="pop">
<figcaption>
Para el pop te recomiendo a
Dua Lipa.
</figcaption>
<img alt="Gif de Dua Lipa"
src="https://media.giphy.com/media/3o7WIQin38ZjlwiKOs/giphy.gif">
</figure>
<figure id="reg">
<figcaption>
Para el reguetón te recomiendo
a Bad Bunny.
</figcaption>
<img alt="Gif de Bad Bunny"
src="https://media.giphy.com/media/kfcsiSjQUyMvEZ1khq/giphy.gif">
</figure>
</section>
</body>
</html>