Exercise: Responsive HTML

Given an HTML page as in this example with a bunch of images, resize the images to be small and of the same size when the screen is small, but larger as the screen grows. Have at least 2 breaking points.

examples/html/thumbnails.html

<html>
<head>
  <title>Thumbnails</title>
  <meta name="viewport"
     content="width=device-width, initial-scale=1, user-scalable=yes">
</head>
<body>
 <ul id="images">
     <li class="image">
         <ul>
               <li class="img-elem"><img src="https://i.ytimg.com/vi/rrWYiPkLW60/maxresdefault.jpg" /></li>
               <li class="text-elem">Tiger</li>
         </ul>
     </li>
     <li class="image">
         <ul>
               <li class="img-elem"><img src="http://img.xooimage.com/files110/3/6/9/cam3-49f169f.jpg" /></li>
               <li class="text-elem">Cameleon</li>
         </ul>
     </li>
     <li class="image">
         <ul>
               <li class="img-elem"><img src="http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Reptiles/H-P/komodo-dragon-head-on.jpg" /></li>
               <li class="text-elem">Komodo Dragon</li>
         </ul>
     </li>
     <li class="image">
         <ul>
               <li class="img-elem"><img src="https://s-media-cache-ak0.pinimg.com/236x/aa/5a/e3/aa5ae3f068e8453615f46b093dc02491.jpg" /></li>
               <li class="text-elem">Hippo</li>
         </ul>
     </li>
     <li class="image">
         <ul>
               <li class="img-elem"><img src="http://d3lp4xedbqa8a5.cloudfront.net/s3/digital-cougar-assets/AusGeo/2014/08/08/49110/Leafy-Sea-Dragon---Rapid-Bay-Smaller_WEB.jpg" /></li>
               <li class="text-elem">Sea Dragon</li>
         </ul>
     </li>
</ul>
</body>
</html>