JoePotchen/Index

## Index
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />


<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/waypoints.min.js"></script>
<script src="scripts/scroll.js"></script>

<!--Below is the script I was trying to use to do it but didn't get very far, it wasn't triggering-->

<script>$('#wrapper').waypoint(function() {
  notify('Basic example callback triggered.');
});
</script>

</head>


<body>


<div id="wrapper">
<div id="logo">
<img src="logoweb.png" usemap="#Map" border="0"/>
<map name="Map" id="Map">
  <area shape="rect" coords="343,173,440,205" href="#"/>
  <area shape="rect" coords="618,172,712,206" href="#about" class="scroll" />
  <area shape="rect" coords="735,172,857,209" href="#contact" />
<area shape="rect" coords="461,172,597,206" href="#Portfolio" class="scroll" />
</map>
</div>

<!--Once it gets past this div I would like it to position:fixed a new navigation div at the top with a width of 100% but a lot thinner than the header, to move to the different parts of the page-->


</div><div id="wrapper2">
<div id="mission">
My <span class="emp">mission</span> is to bring your ideas to life in a <span class="emp">creative</span> and <span class="emp">intuitive</span> way. <br /><br />I <span class="emp">strive</span> to create the <span class="emp">best</span> work I can while making things <span class="emp">easy</span> for you.
</div>
</div>

<div id="wrapper3">
<div class="heading">
<a id="Portfolio"></a>Portfolio
</div>
<div id="test">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce metus lectus, porta et ullamcorper eu, tincidunt a sem. In nulla nisi, sagittis et laoreet interdum, fermentum porta nunc.
</div>
</div>

<!--Below is just a filler I was using to see what the page looks like-->

<div id="wrapper2">
<div id="mission">
<a id="about"></a>
My <span class="emp">mission</span> is to bring your ideas to life in a <span class="emp">creative</span> and <span class="emp">intuitive</span> way. <br /><br />I <span class="emp">strive</span> to create the <span class="emp">best</span> work I can while making things <span class="emp">easy</span> for you.
</div>
</div>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	<link href="stylesheet.css" rel="stylesheet" type="text/css" />


	<script src="scripts/jquery-1.9.1.min.js"></script>
	<script src="scripts/waypoints.min.js"></script>
	<script src="scripts/scroll.js"></script>

	<!--Below is the script I was trying to use to do it but didn't get very far, it wasn't triggering-->

	<script>$('#wrapper').waypoint(function() {
	notify('Basic example callback triggered.');
	});
	</script>

	</head>


	<body>


	<div id="wrapper">
	<div id="logo">
	<img src="logoweb.png" usemap="#Map" border="0"/>
	<map name="Map" id="Map">
	<area shape="rect" coords="343,173,440,205" href="#"/>
	<area shape="rect" coords="618,172,712,206" href="#about" class="scroll" />
	<area shape="rect" coords="735,172,857,209" href="#contact" />
	<area shape="rect" coords="461,172,597,206" href="#Portfolio" class="scroll" />
	</map>
	</div>

	<!--Once it gets past this div I would like it to position:fixed a new navigation div at the top with a width of 100% but a lot thinner than the header, to move to the different parts of the page-->



	</div><div id="wrapper2">
	<div id="mission">
	My <span class="emp">mission</span> is to bring your ideas to life in a <span class="emp">creative</span> and <span class="emp">intuitive</span> way. <br /><br />I <span class="emp">strive</span> to create the <span class="emp">best</span> work I can while making things <span class="emp">easy</span> for you.
	</div>
	</div>

	<div id="wrapper3">
	<div class="heading">
	<a id="Portfolio"></a>Portfolio
	</div>
	<div id="test">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce metus lectus, porta et ullamcorper eu, tincidunt a sem. In nulla nisi, sagittis et laoreet interdum, fermentum porta nunc.
	</div>
	</div>

	<!--Below is just a filler I was using to see what the page looks like-->

	<div id="wrapper2">
	<div id="mission">
	<a id="about"></a>
	My <span class="emp">mission</span> is to bring your ideas to life in a <span class="emp">creative</span> and <span class="emp">intuitive</span> way. <br /><br />I <span class="emp">strive</span> to create the <span class="emp">best</span> work I can while making things <span class="emp">easy</span> for you.
	</div>
	</div>

	</body>
	</html>