5644800.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Puzzle #3</title>

    <style>

	  body, html {
	    height: 100%;
	    margin: 0;
	    font-family: Arial, Helvetica, sans-serif;
	  } 

	.navbar {
  overflow: hidden;
  background-color: #6d6e72;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 10%;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 2.5%;
  padding-bottom: 2.5%;
  text-decoration: none;
  
}

.navbar a:hover {
  background: #f1f1f1;
  color: black;
}

.navbar a.active {
  background-color: #106747;
  color: #99cbec;
}

	.main {
		margin: 2%;
	}

	</style>

  </head>
  <body>

  	<div class="main"> 
	  	<h1>Congratulations!</h1>

	  	<p>You've made it to puzzle number 3, you're one step closer to the end. </p>
	  	<p>Here's the link to the next problem:  <a href="https://docs.google.com/document/d/1hkqKgHaClrrKD4Mbg1yERnVJDpKHxuVEntNlskXYfTw/edit?usp=sharing">Link #3</a></p>

  	</div>


  	<div class="navbar">
	  <a href="">Tracker</a>
	  <a href="">1</a>
	  <a href="">2</a>
	  <a href="" class="active">3</a>
	  <a href="">4</a>
	  <a href="">5</a>
	  <a href="">6</a>
	</div>
  </body>
</html>