HTML5 STRUCTURAL ELEMENTS
<!DOCTYPE html>
<head>
<title>Floating Images</title>
<link rel="stylesheet" href="image.css">
</head>
<body>
<h1>Floating Images</h1>
<div class="gallery">
<a target="_blank" href="photo1.jpg">
<img src="photo1.jpg" alt="Golden Gate Bridge" width="650" height="450">
</a>
<div class="description">Golden Gate Bridge
</div>
</div>
<div class="gallery">
<a target="_blank" href="photo2.jpg">
<img src="photo2.jpg" alt="Rocky Shoreline" width="650" height="450">
</a>
<div class="description">Rocky Shoreline
</div>
</div>
<div class="gallery">
<a target="_blank" href="photo3.jpg">
<img src="photo3.jpg" alt="Waves Crashing" width="650" height="450">
</a>
<div class="description">Waves Crashing
</div>
</div>
<div class="gallery">
<a target="_blank" href="photo4.jpg">
<img src="photo4.jpg" alt="Ocean Sunset" width="650" height="450">
</a>
<div class="description">Ocean Sunset
</div>
</div>
<div class="gallery">
<a target="_blank" href="photo5.jpg">
<img src="photo5.jpg" alt="Waterfall on the Beach" width="650" height="450">
</a>
<div class="description">Waterfall on the Beach
</div>
</div>
<div class="gallery">
<a target="_blank" href="photo6.jpg">
<img src="photo6.jpg" alt="Fog Moving In" width="650" height="450">
</a>
<div class="description">Fog Moving In
</div>
</div>
</body>
</html>
Code for image.css
.gallery
{
margin:30px;
border:1px solid #ccc;
float:left;
width:160px;
background-color:#e0e0eb;
}
.gallery:hover
{
border:1px solid #777;
}
.gallery img
{
width:100%;
height:40%;
}
.description
{
padding:10px;
text-align:center;
background-color:e0e0eb;
font-size: 16px;
}
Output
No comments:
Post a Comment