Image gallery can be create using HTML and CSS. The following image gallery is created with CSS and simple HTML Code.
Add a description of the image here
Add a description of the image here
Add a description of the image here
Add a description of the image here
Add a description of the image here
Add a description of the image here
HTML and CSS codes are given below:
CSS
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
| .main{
margin: 20px;
padding: 50px;
}
div.gallery {
margin: 10px;
border: 1px solid #ccc;
float: left;
width: 180px;
box-shadow: 4px 3px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
|
HTML
Save All the pictures in images folder
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
| <!DOCTYPE>
<html>
<body>
<div class="main">
<div class="gallery">
<a target="_blank" href="images/image_1.jpg">
<img src="images/image_1.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/image_2.jpg">
<img src="images/image_2.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/image_3.jpg">
<img src="images/image_4.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="images/image_4.jpg">
<img src="images/image_5.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</div>
</body>
</html>
|
Check Out the following too
0 comments:
Post a Comment