walkerstone/index.html

## index.html
<html>
	<head>
		<style>
			html { height: 101%; }
			body { margin: 0; padding: 0; font-family: sans-serif;}
			h1, h2, h3 { margin: 0; }
			a { font-weight: ; text-decoration: none; color: #586FB2;}

			.active { background: #586FB2; color: white;}

			#n { position: fixed; width: 100%;}
			#n ul { padding: 0; margin: 0; float: right; }
			#n li { display: inline-block; }
			#n a { display: block; padding: 20px; }
			#n a:hover { background: #B1C5FF; color: white;}


			#n div:first-child,
			#a div:first-child,
			#b div:first-child,
			#c div:first-child,
			#f div:first-child
				{ max-width: 1200px; margin: 0 auto; min-height: 100%; padding: 20px;}

			#f div:first-child { min-height: 100px;}

			#a { background: #B29E6A; }
			#b { background: #FFF0CB; }
			#c { background: #FFE9B1; }
		</style>
	</head>
	<body>
		<div id="n">
			<div>
				<ul>
					<li><a href="#a" class="active">Home</a></li>
					<li><a href="#b">Services</a></li>
					<li><a href="#c">Buy Us</a></li>
				</ul>
			</div>
		</div>
		<div id="a">
			<div>
				<h1>Welcome</h1>
			</div>
		</div>
		<div id="b">
			<div>
				<h1>Services</h1>
			</div>
		</div>
		<div id="c">
			<div>
				<h1>Buy Us</h1>
			</div>
		</div>
		<div id="f">
			<div>
				<p>Copyright &copy; 2014. YourSite lTd.</p>
			</div>
		</div>

		<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
		<script type="text/javascript">
			$(function() {
			  $('a[href*=#]:not([href=#])').click(function() {
			    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			      var target = $(this.hash);
			      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			      if (target.length) {
			        $('html,body').animate({
			          scrollTop: target.offset().top
			        }, 1000);
			      }
			    }
			    $.each($(this).parent().siblings(), function(i, v){
			    	$(v).children().first().removeClass('active');
			    });
			    $(this).addClass('active');
		        return false;
			  });
			});
		</script>
	</body>
</html>
	<html>
	<head>
	<style>
	html { height: 101%; }
	body { margin: 0; padding: 0; font-family: sans-serif;}
	h1, h2, h3 { margin: 0; }
	a { font-weight: ; text-decoration: none; color: #586FB2;}

	.active { background: #586FB2; color: white;}

	#n { position: fixed; width: 100%;}
	#n ul { padding: 0; margin: 0; float: right; }
	#n li { display: inline-block; }
	#n a { display: block; padding: 20px; }
	#n a:hover { background: #B1C5FF; color: white;}


	#n div:first-child,
	#a div:first-child,
	#b div:first-child,
	#c div:first-child,
	#f div:first-child
	{ max-width: 1200px; margin: 0 auto; min-height: 100%; padding: 20px;}

	#f div:first-child { min-height: 100px;}

	#a { background: #B29E6A; }
	#b { background: #FFF0CB; }
	#c { background: #FFE9B1; }
	</style>
	</head>
	<body>
	<div id="n">
	<div>
	<ul>
	<li><a href="#a" class="active">Home</a></li>
	<li><a href="#b">Services</a></li>
	<li><a href="#c">Buy Us</a></li>
	</ul>
	</div>
	</div>
	<div id="a">
	<div>
	<h1>Welcome</h1>
	</div>
	</div>
	<div id="b">
	<div>
	<h1>Services</h1>
	</div>
	</div>
	<div id="c">
	<div>
	<h1>Buy Us</h1>
	</div>
	</div>
	<div id="f">
	<div>
	<p>Copyright © 2014. YourSite lTd.</p>
	</div>
	</div>

	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script type="text/javascript">
	$(function() {
	$('a[href*=#]:not([href=#])').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
	var target = $(this.hash);
	target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	if (target.length) {
	$('html,body').animate({
	scrollTop: target.offset().top
	}, 1000);
	}
	}
	$.each($(this).parent().siblings(), function(i, v){
	$(v).children().first().removeClass('active');
	});
	$(this).addClass('active');
	return false;
	});
	});
	</script>
	</body>
	</html>