Program:
Output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
body {
border: 4px double red;
}
h1 {
text-align: center;
}
section {
display: flex;
flex-wrap: wrap;
}
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
flex: 25%;
}
.gallery img {
margin-top: 8px;
vertical-align: middle;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h1>Image Gallery</h1>
<section>
<div class="gallery">
<img src="img/image4.jpeg" width="600" height="400">
<div class="desc">Image 1</div>
</div>
<div class="gallery">
<img src="img/image6.jpeg" width="600" height="400">
<div class="desc">Image 2</div>
</div>
<div class="gallery">
<img src="img/image5.jpeg" width="600" height="400">
<div class="desc">Image 3</div>
</div>
<div class="gallery">
<img src="img/image4.jpeg" width="600" height="400">
<div class="desc">Image 4</div>
</div>
<div class="gallery">
<img src="img/image6.jpeg" width="600" height="400">
<div class="desc">Image 5</div>
</div>
<div class="gallery">
<img src="img/image5.jpeg" width="600" height="400">
<div class="desc">Image 6</div>
</div>
<div class="gallery">
<img src="img/image6.jpeg" width="600" height="400">
<div class="desc">Image 7</div>
</div>
<div class="gallery">
<img src="img/image4.jpeg" width="600" height="400">
<div class="desc">Image 8</div>
</div>
<div class="gallery">
<img src="img/image6.jpeg" width="600" height="400">
<div class="desc">Image 9</div>
</div>
<div class="gallery">
<img src="img/image5.jpeg" width="600" height="400">
<div class="desc">Image 10</div>
</div>
<div class="gallery">
<img src="img/image6.jpeg" width="600" height="400">
<div class="desc">Image 11</div>
</div>
<div class="gallery">
<img src="img/image4.jpeg" width="600" height="400">
<div class="desc">Image 12</div>
</div>
</section>
</body>
</html>
Output:
