html/lesson1/example.html

<!DOCTYPE html>
<html>
  <head>
    <title>I love owls</title>
  </head>
  <body>
    <div>
      <!-- Note to self: this is where the header goes -->

      <div>
        <img src="images/logo.png" alt="codebar.io" />
      </div>

      <h1>Owls</h1>

      <p>
        Most birds of prey sport eyes on the sides of their heads,
        but the stereoscopic nature of
        the owl's forward-facing <strong>eyes permits the greater
        sense of depth perception</strong> necessary for low-light hunting.
      </p>

      <a href="https://en.wikipedia.org/wiki/Owl">More information about owls...</a>
    </div>

    <h2>Why do I like owls so much?</h2>
    <ul>
      <li><img src="images/img1.jpg" alt="adorable"></li>
      <li><img src="images/img2.jpg" alt="lovely"></li>
      <li><img src="images/img3.jpg" alt="cuddly"></li>
    </ul>
    <ol>
      <li>they are adorable</li>
      <li>and lovely</li>
      <li>and cuddly</li>
    </ol>

    <div>
      <a href="https://www.youtube.com/watch?v=gBjnfgnwXic">
        <img src="images/img4.jpg" alt="cute owl">
        <img src="images/img5.jpg" alt="another cute owl">
        <br>
        Watch the video
      </a>
    </div>

    <div>
      <p>
        <strong>
           "The Owl &amp; the Pussy-cat went to sea <br> 
            In a beautiful pea-green boat"
        </strong>
      </p>
      <small>&mdash; nursery rhyme</small>
    </div>

    <ul>
      <li>
        <a href="mailto:social@codebar.io?subject=I%20love%20owls%20::%20codebar">Email us</a>
      </li>
      <li>
        <a href="mailto:?subject=I%20love%20owls%20::%20codebar">Email a friend</a>
      </li>
      <li>
        <a href="https://twitter.com/home?status=I love owls! via @codebar">Share your love of owls on twitter</a>
      </li>
    </ul>
  </body>
</html>