Galeria de imagenes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Galería de Imágenes</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
padding: 20px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 8px;
transition: transform 0.3s, box-shadow 0.3s;
}
.gallery img:hover {
transform: scale(1.05);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1 style="text-align: center; margin-top: 20px;">Galería de Imágenes</h1>
<div class="gallery">
<img src="https://images.unsplash.com/photo-1730722005859-f93a79460bae?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8fA%3D%3D" alt="Imagen 1">
<img src="https://images.unsplash.com/photo-1730305948811-a40b70800118?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8M3x8fGVufDB8fHx8fA%3D%3D" alt="Imagen 2">
<img src="https://images.unsplash.com/photo-1727640851526-9dd11cc6bd07?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8N3x8fGVufDB8fHx8fA%3D%3D" alt="Imagen 3">
<img src="https://images.unsplash.com/photo-1730815664512-238cea535eff?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTR8fHxlbnwwfHx8fHw%3D" alt="Imagen 4">
<img src="https://images.unsplash.com/photo-1730970238526-c4b4f42425cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTZ8fHxlbnwwfHx8fHw%3D" alt="Imagen 5">
<img src="https://images.unsplash.com/photo-1730886732293-f3e1f1810df2?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTV8fHxlbnwwfHx8fHw%3D" alt="Imagen 6">
</div>
</body>
</html>
Galería de Imágenes
Galería de Imágenes
