Picture Gallery using HTML and CSS
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
margin: 2px;
border: 2px solid #ccc;
float: left;
width: 180px;
box-shadow: 5px 10px grey;
}
div.gallery:hover {
border: 1px solid #777;
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
div.gallery img {
width: 100%;
height: auto;
border-radius:8px;
}
</style>
</head>
<body>
<div>
<div class="gallery">
<a target="_blank" href="https://tse2.mm.bing.net/th?id=OIP.I1XWKue62yPFvIPHfPU3lgHaNK&pid=Api&P=0&w=300&h=300">
<img src="https://tse2.mm.bing.net/th?id=OIP.I1XWKue62yPFvIPHfPU3lgHaNK&pid=Api&P=0&w=300&h=300" width="600" height="200">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://tse1.mm.bing.net/th?id=OIP.LokGLX1vdokXm5IbVdCtsgHaE6&pid=Api&P=0&w=269&h=179">
<img src="https://tse1.mm.bing.net/th?id=OIP.LokGLX1vdokXm5IbVdCtsgHaE6&pid=Api&P=0&w=269&h=179" alt="red-rose" width="600" height="400">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://tse2.mm.bing.net/th?id=OIP.JV9Uh4LuXnvdZA3dUZgi0gHaHa&pid=Api&P=0&w=300&h=300">
<img src="https://tse2.mm.bing.net/th?id=OIP.JV9Uh4LuXnvdZA3dUZgi0gHaHa&pid=Api&P=0&w=300&h=300" alt="rose" width="600" height="250">
</a>
</div>
<div class="gallery">
<a target="_blank" href="https://tse3.mm.bing.net/th?id=OIP.vrhqw2K28I2jSZP21mPFgQHaK_&pid=Api&P=0&w=300&h=300">
<img src="https://tse3.mm.bing.net/th?id=OIP.vrhqw2K28I2jSZP21mPFgQHaK_&pid=Api&P=0&w=300&h=300" alt="rose" width="600" height="500">
</a>
</div>
</div>
</body>
</html>
No comments:
Post a Comment