index.html

<html>
<!--Hi there! Interesting to see someone looking into the code, if you have found this there is a surprise! I've made a little bit of a challenge for you guys... I'd look into the images a little bit if I were you. Good luck!-->
	<head>
		<title>Project D | Home</title>
		<link href="ProjectD.css" rel="stylesheet">
	</head>
	<body>
		<center>
			<a class="logo" href="index.html"> <img src="assets/projectd.png" alt="Go to Homepage" title="Go to Homepage"> </a></center>
			<img class="map" src="assets/kanto.png" type="button" onclick="clue1()"></img>
				<p id="demo"></p>
			<img class="trail" src="assets/trails.png"></img>
				
		<div id="wrapper">
			
				
				<h2> Homepage </h2>
			
			<div class="sidebar" id="sidebar">
				<div id="choice">
					<a href="Momiji_line.html"> <p>Momiji Line</p> </a>
				</div>
				<script>
			function clue1() {
				document.getElementById("demo").innerHTML = "If you're reading this, congratulations! Did you know the second driver of the Seven Star Leaf team is very interesting?";
			}
		</script>
				<div id="choice">
					<a href="Enna_Skyline.html"> <p>Enna Skyline</p> </a>
				</div>
				<div id="choice2">
					<a href="Northern_Saitama.html"> <p>Northern Saitama</p> </a>
				</div>
				<div id="choice2">
					<a href="MazePass.html"> <p>Maze Pass</p> </a>
				</div>
				<div id="choice2">
					<a href="Tsuchisaka.html"> <p>Tsuchisaka</p> </a>
				</div>
				<div id="choice2">
					<a href="MountTsukuba.html"> <p>Mount Tsukuba</p> </a>
				</div>
				<div id="choice2">
					<a href="Yabitsu.html"> <p>Yabitsu</p> </a>
				</div>
				<div id="choice2">
					<a href="Nagao.html"> <p>Nagao</p> </a>
				</div>
				<div id="choice2">
					<a href="Nanamagari.html"> <p>Nanamagari</p> </a>
				</div>
				<div id="choice2">
					<a href="TsubakiLine.html"> <p>Tsubaki Line</p> </a>
				</div>
				<div id="choice2">
					<a href="messageBoard.html"><p>Messages</p></a>
				</div>
			</div>
			<footer>
				<div id="myProgress">
					<div id="myBar"></div>
				</div>
			</footer>
<script>
var i = 0;
  if (i == 0) {
    i = 1;
    var elem = document.getElementById("myBar");
    var width = 1;
    var id = setInterval(frame, 50);
    function frame() {
      if (width >= 100) {
        clearInterval(id);
        i = 0;
      } else {
        width++;
        elem.style.width = width + "%";
      }
    }
  }
</script>
		</div>
	</body>
</html>