index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page: Don't Panic</title>
    <meta charset="utf-8">
    <style>
      /*  GLOBAL STYLES  */
      a {
        color: red;
      }
      /* SOCIAL STYLES */
      .social-link {
        color: blue;
      }
      /* BIO STYLES */  
      .bio-box {
        border: 1px solid black;
      }
      .bio-copy a {
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>I'm an h1</h1>
    <ul>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
      <li>
        <a href="https://example.com/">Link</a>
      </li>
    </ul>
    <h2>I'm an h2</h2>
    <div class="bio-box">
      <h3>Michael Hartl</h3>
      <a href="https://twitter.com/mhartl" class="social-link">here</a>
      <div class="bio-copy">
        <p>
          Known for his dazzling charm, rapier wit, and unrivaled humility,
          Michael is the creator of the
          <a href="https://www.railstutorial.org/">Ruby on Rails
          Tutorial</a> and principal author of the
          <a href="https://learnenough.com/">
          Learn Enough to Be Dangerous</a> introductory sequence. Michael
          is also notorious as the founder of
          <a href="http://tauday.com/">Tau Day</a> and author of
          <a href="http://tauday.com/tau-manifesto"><em>The Tau
          Manifesto</em></a>, but rumors that he's secretly a supervillain
          are slightly exaggerated.
        </p>
      </div>
    </div>
    <div class="bio-box">
      <h3>Lee Donahoe</h3>
      <a href="https://twitter.com/leedonahoe" class="social-link">here</a>
      <div class="bio-copy">
        <p>
          When he's not literally swimming with sharks or hunting powder stashes on
          his snowboard, you can find Lee in front of his computer designing
          interfaces, doing front-end development, or writing some of the
          interface-related Learn Enough tutorials.
        </p>
      </div>
    </div>
    <div class="bio-box">
      <h3>Nick Merwin</h3>
      <a href="https://twitter.com/nickmerwin" class="social-link">here</a>
      <div class="bio-copy">
        <p>
          You may have seen him shredding guitar live with Capital Cities on Jimmy
          Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
          heart. He's just as happy shredding well-spec'd lines of code from a tour
          bus as he is from his kitchen table.
        </p>
      </div>
    </div>
    <div class="bio-box">
      <h3>??</h3>
      <div class="bio-copy">
        <p>
          The Future
        </p>
      </div>
    </div>
  </body>
</html>