-
Notifications
You must be signed in to change notification settings - Fork 0
/
grillas-y-gatitos.html
48 lines (48 loc) · 1.69 KB
/
grillas-y-gatitos.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600&display=swap" rel="stylesheet">
<link href="estilos.css" rel="stylesheet">
<meta name="viewport" content="width=device-width">
</head>
<body>
<section class="intro">
<div class="grilla">
<div class="contenedor">
<h1 class="titulo">Diseño Responsive</h1>
<h2 class="subtitulo">¡con gatitos!</h2>
</div>
<div class="contenedor">
<img class="imagen-gatito" src="gatito-de-intro.jpg" alt="Gatito"/>
</div>
</div>
</section>
<section class="razones">
<h3>¿Por qué me gustan?</h3>
<div class="grilla">
<div class="tarjeta">
<img src="lindos.jpeg" alt="Gatito tierno en la cucha"/>
<h4>Son lindos</h4>
<p>¿Quién puede resistirse al encanto de esas suaves caritas?</p>
</div>
<div class="tarjeta">
<img src="duermen.jpeg" alt="Gatito durmiendo"/>
<h4>Duermen mucho</h4>
<p>Ojalá yo también pudiese estar todo el día en la cama...</p>
</div>
<div class="tarjeta">
<img src="graciosos.jpeg" alt="Gatito con cara graciosa"/>
<h4>Son graciosos</h4>
<p>¡Son los protagonistas perfectos para video memes!</p>
</div>
</div>
</section>
<section class="ahora-que">
<h3>¿Y ahora qué?</h3>
<div class="grilla">
<img class="ver-mas" src="convenci.jpeg" alt="Dos gatitos tirados uno encima del otro"/>
</div>
<a href="https://unsplash.com/s/photos/cat" target="_blank">¡Ver más fotos!</a>
</section>
</body>
</html>