Get up to 80 % extra points for free! More info:

Discussion – Lesson 12 - Navigation menu, footer and HTML entities

Back

 

Comments
Avatar
sadhath
Member
Avatar
sadhath:3/15/2017 5:31

<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}

div.gallery:hover {
border: 1px solid #777;
}

div.gallery img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
<a target="_blank" href="fjords.jpg">
<img src="fjords.jpg" alt="Fjords" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="forest.jpg">
<img src="forest.jpg" alt="Forest" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="lights.jpg">
<img src="lights.jpg" alt="Northern Lights" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
<a target="_blank" href="mountain­s.jpg">
<img src="mountains.jpg" alt="Mountains" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div>
</div>

</body>
</html

 
Reply
3/15/2017 5:31
Avatar
IT Man
Member
Avatar
Replies to sadhath
IT Man:3/15/2017 11:16
  1. Next time use button </> for code. It's hard to read it now.
  2. Stylesheet should be in own file with CSS. So put it in style.css and link it in HTML in head:
<link rel="stylesheet" href="style.css" />
 
Reply
3/15/2017 11:16
To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

2 messages from 2 displayed.