CodePen

HTML

            
              <article>
  <h1>Pictures</h1>
  <p>Please click below to see pictures of some of our past events.</p>
  <ul class="album-list">
  
    <li>
      <a href="#">
        
          <figure>
      <img src="http://placehold.it/120x90">
      <figcaption>
        Album 1
      </figcaption>
    </figure>
        
      </a>
      </li>
        <li>
      <a href="#">
        
          <figure>
      <img src="http://placehold.it/120x90">
      <figcaption>
        Album 2
      </figcaption>
    </figure>
        
      </a>
      </li>
  </ul>
</article>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              article {
  margin:25px;
}

h1 {
  font-size:2em;
}

p {
  padding:1em 0;
}

.album-link {
  padding:0;
  margin:0;
}

li {
  list-style:none;
  width:140px;
}

a {
  margin:0;
  padding:0;
  text-decoration:none;
  color:black;
  font-weight:bold;
}


figure {
  margin-bottom:5px;
  border:1px solid grey;

}

figure img {
  padding:10px 10px 0 10px;
}

figcaption {
  text-align:center;
  padding:10px;

}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................