Gallery.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="gallery.css">
<title>Gallery</title>
<meta name="viewport" content="width=device-width , initial-scale=1.0">
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
overflow: hidden;
background: #e74c3c;
padding: 60px 0;
text-align: center;
color: white;
text-transform: uppercase;
}
footer{
overflow: hidden;
background: #e74c3c;
padding: 20px 0;
text-align: center;
color: white;
text-transform: uppercase;
}
.gallerys{
padding: 10px;
overflow: hidden;
text-align: center;
}
.img{
display: inline-block;
width: 100%;
max-width: 340px;
height: 220px;
overflow: hidden;
margin: 10px;
cursor: pointer;
}
.img img{
width: 100%;
height: 220px;
transition: 0.4s;
}
.img img:hover{
transform: scale(1.2);
}
@media (max-width:400px){
.img{
margin: 10px 0;
}
}
</style>
</head>
<body>
<header>
<h1>Gallery Welcome</h1>
</header>
<div class="gallerys">
<div class="img">
<img src="image1.jpg" alt="">
</div>
<div class="img">
<img src="image2.jpg" alt="">
</div>
<div class="img">
<img src="image3.jpg" alt="">
</div>
<div class="img">
<img src="image4.jpg" alt="">
</div>
<div class="img">
<img src="imag/5.jpg" alt="">
</div>
<div class="img">
<img src="image6.jpg" alt="">
</div>
<div class="img">
<img src="image7.jpg" alt="">
</div>
<div class="img">
<img src="image8.jpg" alt="">
</div>
<div class="img">
<img src="image9.jpg" alt="">
</div>
<div class="img">
<img src="image10.jpg" alt="">
</div>
<div class="img">
<img src="image11.jpg" alt="">
</div>
<div class="img">
<img src="image12.jpg" alt="">
</div>
</div>
<footer>
<span>All Gallery Copyright By ... Rahul Gupta </span>
</footer>
</body>
</html>
