<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="css/flex_ejemplo.css" rel="stylesheet"/>
</head>
<body>
<head><img src="img/mascotas.jpg"><h1>Mis mascotas</h1>
<h5>Tu mejor tienda de mascotas</h5></head>
<div id="galeria">
<div class="tarjeta"><h5>Gatito</h5><img src="img/gato.webp"/></div>
<div class="tarjeta"><h5>Gatito</h5><img src="img/gato.webp"/></div>
<div> <div class="tarjeta"><h5>Gatito</h5><img src="img/gato.webp"/></div>
<div class="tarjeta"><h5>Gatito</h5><img src="img/gato.webp"/></div></div>
<div class="tarjeta"><h5>Gatito</h5><img src="img/gato.webp"/></div>
<div class="tarjeta"><h5>Gatito</h5><img src="img/gato.webp"/></div>
</div>
</body>
</html>
#galeria{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
height: 600px;
background-color: bisque;
align-content: stretch;
}
.tarjeta{
background-color: chartreuse;
border-style: solid;
border-radius: 5px;
border-width: 2px;
margin: 1em;
padding: .5em;
}
.tarjeta img{ /* pon estas propiedades a las img dentro de la clase tarjeta */
width: 190px;
}
.tarjeta h5{
color:red;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
