html/lesson2/example.html

<!DOCTYPE html>
<html>
  <head>
    <title>I love owls</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="top-line"></div>
    <div id="main">
      <div id="logo"><img src="images/logo.png" alt="codebar.io"></div>
      <h1>Owls...</h1>
      <h2>Why do I like owls so much?</h2>
      <ul class="pictures">
        <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 class="bigimg"><img src="images/img4.jpg" alt="cute owl"/></div>
      <div class="bigimg"><img src="images/img5.jpg" alt="another cute owl"/></div>
      <a href="https://www.youtube.com/watch?v=gBjnfgnwXic">Watch this video here</a>
      <div id="the-quote">
        <h4>
          <i>&#34;A wise old owl sat on an oak;  The more he saw the less he spoke; <br>
             The less he spoke the more he heard; Why aren&#39;t we like that wise old bird?&#34;
          </i>
        </h4>
        <p><small>- nursery rhyme</small></p>
      </div>
      <div class="right-box">
        <div id="text-block">
          <h3>Owls:</h3>
          <p>
            Most birds of prey sport eyes on the sides of their heads,<br>
            but the stereoscopic nature of <br>
            the owl's forward-facing <strong>eyes permits the greater <br>
            sense of depth perception </strong>necessary for low-light hunting. <br>
            <br>
            <a href="https://en.wikipedia.org/wiki/Owl">More information about owls...</a>
          </p>
        </div>
        <ul id="links">
        <li>
           <a href="mailto:social@codebar.io?subject=I love owls :: codebar">Email us</a>
        </li>
        <li>
           <a href="mailto:?subject=I love owls :: codebar">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>
      </div>
      <div class="left-box">
        <img src="images/img6.jpg" alt="two owls"/>
      </div>
    </div>
    <div id="bottom-line"></div>
  </body>
</html>