about.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>ABOUT</title>
</head>
<style media="screen">
  div ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }

  div li {
    float: left;
  }

  div li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  div li a:hover {
    background-color: #111;
  }

  div li a.active {
    background-color: red;
  }
</style>

<body style="background-color: #00b8a9;">
  <div>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="hobbies.html">News</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="about.html" class="active">About</a></li>
    </ul>
  </div>
  <hr size = "2" noshade color = "green">
</body>

</html>