File size: 1,981 Bytes
8574b43 304e528 8574b43 304e528 8574b43 304e528 8574b43 | 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 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<script src="https://cdn.tailwindcss.com"></script>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
}
.gallery-item {
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.gallery-item:hover {
transform: scale(1.03);
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto py-8">
<h1 class="text-3xl font-bold text-center mb-8">Image Gallery</h1>
<div class="gallery">
<div class="gallery-item">
<img src="http://static.photos/nature/640x360/1" alt="Nature Image 1">
</div>
<div class="gallery-item">
<img src="http://static.photos/nature/640x360/2" alt="Nature Image 2">
</div>
<div class="gallery-item">
<img src="http://static.photos/nature/640x360/3" alt="Nature Image 3">
</div>
<div class="gallery-item">
<img src="http://static.photos/nature/640x360/4" alt="Nature Image 4">
</div>
<div class="gallery-item">
<img src="http://static.photos/nature/640x360/5" alt="Nature Image 5">
</div>
<div class="gallery-item">
<img src="http://static.photos/nature/640x360/6" alt="Nature Image 6">
</div>
</div>
</div>
</body>
</html> |