romeovs/index.html

## index.html
<!doctype html>
<html>
	<head>
		<title>littlehouse</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />

		<!-- facebook / opengraph info -->

		<!-- twitter cards -->

	</head>
	<body>

	<section id="intro">
		<hgroup>
			<h1 class="logo logo-big fade-in fade-in-one">Little Houses</h1>
			<h2 class="fade-in fade-in-two">We <b>simplify</b> the way you live</h2>
		</hgroup>
		<a href="#learn" class="popup">learn more</a>
	</section>

	<main>
		<nav id="main-nav">
			<h1 class="logo logo-small">Little Houses</h1>
			<ul>
				<li><a href="/#learn">learn more</a></li>
				<li><a href="/#about-me">about me</a></li>
				<li><a href="/#signup">sign up</a></li>
			</ul>
		</nav>
		<section id="learn">

			ok
		</section>

		<section id="about-me">

		</section>

		<section id="signup">

		</section>
	</main>

	<script src="//code.jquery.com/jquery-1.10.2.min.js" ></script>
	<script src="waypoints.min.js"></script>
	<script src="waypoints-sticky.min.js"></script>
	<script src="main.js"></script>
	</body>
</html>

## main.js
// the commented out if statements fix my particular goal
// (having the middle section not trigger a waypoint when clicking
// on its anchor link in the nav bar).
// but this code should reflect that $.waypoints("disable") does
// not work from a fired event. But then again, setting a 'lock'
// from a firing event (for instance a bool) would not work either,
// because javascripts prevents stuff from leaking out of events
// since it is event loop concurrent...

$(function(){

	(function(){
		// make an element sticky
		var navh = $("#main-nav").height();
		var scrolling = false;
		$("#main-nav").waypoint("sticky");

		$("#learn").waypoint(function(direction){
				$("nav a").removeClass("active");
				if ( direction === "down" ) {
						$("nav a[href='/#learn']").addClass("active");
				}
		}, {offset: navh, continuous: false});

		$("#about-me").waypoint(function(direction){
			// if ( !$("html,body").is(":animated")) {
				$("nav a").removeClass("active");
				if ( direction === "down" ) {
					$("nav a[href='/#about-me']").addClass("active");
				} else {
					$("nav a[href='/#learn']").addClass("active");
				}
			// }
		}, {offset: navh, continuous: false});

		$("#signup").waypoint(function(direction){
			//if ( !$("html,body").is(":animated")) {
			  $("nav a").removeClass("active");
			  if ( direction === "down" ) {
				  $("nav a[href='/#signup']").addClass("active");
			  } else {
				  $("nav a[href='/#about-me']").addClass("active");
			  }
			//}
		}, {offset: navh, continuous: false});

		var scrollToAnchor = function() {
		  $.waypoints('disable');
			if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
				var target = $(this.hash);
				$(this).parent().parent().find(".active").removeClass("active");
				$("nav a[href='/" + this.hash + "']").addClass("active");
				target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
				if (target.length) {
					setTimeout(function(){
					$('html,body').animate({
							scrollTop: target.offset().top - navh + 1
						}, 800);}, 10);
				}
			}
			$.waypoints('enable');
			return
		}
		$('a[href*=#]:not([href=#])').click(scrollToAnchor);
	})();


	(function() {
		var h = $(window).height();
		var start = 200;
		var end = h - 200;
		var fadeEl = $("#intro hgroup");
		var fadeIntro = function() {
			var st = $(window).scrollTop();

			var op = 1;
			if ( st >= start ) {
				op = (st - end) / (start - end);
			}

			fadeEl.css("opacity", op);
		}
		$(window).scroll(fadeIntro);
	})();
});

## style.css
html {
  font-size: 100%;
  font-family: "Helvetica";
  color: #393734;
  z-index: 0; }

body {
  margin: 0; }

section {
  height: 90vh;
  padding: 2.61803rem; }

main {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  top: 100vh;
  background: white; }

#intro {
  width: 100vw;
  height: 100vh;
  padding: 0;
  background: url("/assets/intro.jpg") center center;
  background-size: cover;
  position: relative;
  min-height: 17rem;
  position: fixed;
  z-index: 1;
  top: 0; }

#intro a {
  z-index: 1;
  position: fixed;
  display: block;
  width: 5rem;
  text-align: center;
  height: 1.61803rem;
  bottom: 0;
  padding-bottom: 1rem;
  left: 0;
  right: 0;
  margin: auto;
  color: #393734;
  background: url("/assets/arrow_d.svg") center 1rem no-repeat;
  background-size: 1rem;
  transition: background-position 0.6s;
  -webkit-transition: background-position 0.6s; }

#intro a:hover {
  background-position: bottom center; }

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    bottom: 30px; }

  to {
    opacity: 1;
    bottom: 0; } }

.fade-in {
  -webkit-animation: fadeIn ease-out 1;
  position: relative; }

.fade-in-one {
  -webkit-animation-duration: 0.8s; }

.fade-in-two {
  -webkit-animation-duration: 0.8s; }

@-webkit-keyframes popUp {
  from {
    bottom: -2.10344rem;
    opacity: 0; }

  to {
    bottom: 0;
    opacity: 1; } }

.popup {
  -webkit-animation: popUp ease-out 1;
  -webkit-animation-duration: 0.8s; }

.logo {
  border-radius: 100%;
  background: #84ffe7;
  color: #84ffe7;
  overflow: hidden; }

.logo-big {
  display: block;
  width: 6.8541rem;
  height: 6.8541rem;
  margin: 0 auto;
  margin-bottom: 2rem; }

.logo-small {
  display: inline-block;
  width: 2.61803rem;
  height: 2.61803rem;
  position: absolute;
  left: 0.61803rem;
  top: 0.61803rem;
  margin: 0;
  padding: 0; }

hgroup {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 15rem; }

h2 {
  text-align: center;
  font-weight: inherit;
  color: white; }

nav {
  position: relative;
  background: rgba(255, 255, 255, 0.8); }

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: right; }

nav ul li {
  display: inline-block;
  text-align: center;
  color: inherit;
  padding: 0 1.61803rem 0 0; }

a {
  text-decoration: none; }

nav a {
  color: #393734;
  padding: 1.61803rem 0 1rem 0;
  display: inline-block;
  border-bottom: 3px solid transparent;
  transition: border 0.2s, color 0.3s; }

nav.stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0; }

nav li a.active,
nav li a:hover {
  border-bottom: 3px solid #84ffe7; }

nav li:nth-child(1) a.active,
nav li:nth-child(1) a:hover {
  border-color: #84ffe7;
  color: #84ffe7; }

nav li:nth-child(2) a.active,
nav li:nth-child(2) a:hover {
  border-color: #ffd184;
  color: #ffd184; }

nav li:nth-child(3) a.active,
nav li:nth-child(3) a:hover {
  border-color: #ff8495;
  color: #ff8495; }
	<!doctype html>
	<html>
	<head>
	<title>littlehouse</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="style.css" />

	<!-- facebook / opengraph info -->

	<!-- twitter cards -->

	</head>
	<body>

	<section id="intro">
	<hgroup>
	<h1 class="logo logo-big fade-in fade-in-one">Little Houses</h1>
	<h2 class="fade-in fade-in-two">We <b>simplify</b> the way you live</h2>
	</hgroup>
	<a href="#learn" class="popup">learn more</a>
	</section>

	<main>
	<nav id="main-nav">
	<h1 class="logo logo-small">Little Houses</h1>
	<ul>
	<li><a href="/#learn">learn more</a></li>
	<li><a href="/#about-me">about me</a></li>
	<li><a href="/#signup">sign up</a></li>
	</ul>
	</nav>
	<section id="learn">

	ok
	</section>

	<section id="about-me">

	</section>

	<section id="signup">

	</section>
	</main>

	<script src="//code.jquery.com/jquery-1.10.2.min.js" ></script>
	<script src="waypoints.min.js"></script>
	<script src="waypoints-sticky.min.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	// the commented out if statements fix my particular goal
	// (having the middle section not trigger a waypoint when clicking
	// on its anchor link in the nav bar).
	// but this code should reflect that $.waypoints("disable") does
	// not work from a fired event. But then again, setting a 'lock'
	// from a firing event (for instance a bool) would not work either,
	// because javascripts prevents stuff from leaking out of events
	// since it is event loop concurrent...

	$(function(){

	(function(){
	// make an element sticky
	var navh = $("#main-nav").height();
	var scrolling = false;
	$("#main-nav").waypoint("sticky");

	$("#learn").waypoint(function(direction){
	$("nav a").removeClass("active");
	if ( direction === "down" ) {
	$("nav a[href='/#learn']").addClass("active");
	}
	}, {offset: navh, continuous: false});

	$("#about-me").waypoint(function(direction){
	// if ( !$("html,body").is(":animated")) {
	$("nav a").removeClass("active");
	if ( direction === "down" ) {
	$("nav a[href='/#about-me']").addClass("active");
	} else {
	$("nav a[href='/#learn']").addClass("active");
	}
	// }
	}, {offset: navh, continuous: false});

	$("#signup").waypoint(function(direction){
	//if ( !$("html,body").is(":animated")) {
	$("nav a").removeClass("active");
	if ( direction === "down" ) {
	$("nav a[href='/#signup']").addClass("active");
	} else {
	$("nav a[href='/#about-me']").addClass("active");
	}
	//}
	}, {offset: navh, continuous: false});

	var scrollToAnchor = function() {
	$.waypoints('disable');
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
	var target = $(this.hash);
	$(this).parent().parent().find(".active").removeClass("active");
	$("nav a[href='/" + this.hash + "']").addClass("active");
	target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
	if (target.length) {
	setTimeout(function(){
	$('html,body').animate({
	scrollTop: target.offset().top - navh + 1
	}, 800);}, 10);
	}
	}
	$.waypoints('enable');
	return
	}
	$('a[href*=#]:not([href=#])').click(scrollToAnchor);
	})();


	(function() {
	var h = $(window).height();
	var start = 200;
	var end = h - 200;
	var fadeEl = $("#intro hgroup");
	var fadeIntro = function() {
	var st = $(window).scrollTop();

	var op = 1;
	if ( st >= start ) {
	op = (st - end) / (start - end);
	}

	fadeEl.css("opacity", op);
	}
	$(window).scroll(fadeIntro);
	})();
	});
	html {
	font-size: 100%;
	font-family: "Helvetica";
	color: #393734;
	z-index: 0; }

	body {
	margin: 0; }

	section {
	height: 90vh;
	padding: 2.61803rem; }

	main {
	position: absolute;
	z-index: 10;
	left: 0;
	right: 0;
	top: 100vh;
	background: white; }

	#intro {
	width: 100vw;
	height: 100vh;
	padding: 0;
	background: url("/assets/intro.jpg") center center;
	background-size: cover;
	position: relative;
	min-height: 17rem;
	position: fixed;
	z-index: 1;
	top: 0; }

	#intro a {
	z-index: 1;
	position: fixed;
	display: block;
	width: 5rem;
	text-align: center;
	height: 1.61803rem;
	bottom: 0;
	padding-bottom: 1rem;
	left: 0;
	right: 0;
	margin: auto;
	color: #393734;
	background: url("/assets/arrow_d.svg") center 1rem no-repeat;
	background-size: 1rem;
	transition: background-position 0.6s;
	-webkit-transition: background-position 0.6s; }

	#intro a:hover {
	background-position: bottom center; }

	@-webkit-keyframes fadeIn {
	from {
	opacity: 0;
	bottom: 30px; }

	to {
	opacity: 1;
	bottom: 0; } }

	.fade-in {
	-webkit-animation: fadeIn ease-out 1;
	position: relative; }

	.fade-in-one {
	-webkit-animation-duration: 0.8s; }

	.fade-in-two {
	-webkit-animation-duration: 0.8s; }

	@-webkit-keyframes popUp {
	from {
	bottom: -2.10344rem;
	opacity: 0; }

	to {
	bottom: 0;
	opacity: 1; } }

	.popup {
	-webkit-animation: popUp ease-out 1;
	-webkit-animation-duration: 0.8s; }

	.logo {
	border-radius: 100%;
	background: #84ffe7;
	color: #84ffe7;
	overflow: hidden; }

	.logo-big {
	display: block;
	width: 6.8541rem;
	height: 6.8541rem;
	margin: 0 auto;
	margin-bottom: 2rem; }

	.logo-small {
	display: inline-block;
	width: 2.61803rem;
	height: 2.61803rem;
	position: absolute;
	left: 0.61803rem;
	top: 0.61803rem;
	margin: 0;
	padding: 0; }

	hgroup {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	height: 15rem; }

	h2 {
	text-align: center;
	font-weight: inherit;
	color: white; }

	nav {
	position: relative;
	background: rgba(255, 255, 255, 0.8); }

	nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: right; }

	nav ul li {
	display: inline-block;
	text-align: center;
	color: inherit;
	padding: 0 1.61803rem 0 0; }

	a {
	text-decoration: none; }

	nav a {
	color: #393734;
	padding: 1.61803rem 0 1rem 0;
	display: inline-block;
	border-bottom: 3px solid transparent;
	transition: border 0.2s, color 0.3s; }

	nav.stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0; }

	nav li a.active,
	nav li a:hover {
	border-bottom: 3px solid #84ffe7; }

	nav li:nth-child(1) a.active,
	nav li:nth-child(1) a:hover {
	border-color: #84ffe7;
	color: #84ffe7; }

	nav li:nth-child(2) a.active,
	nav li:nth-child(2) a:hover {
	border-color: #ffd184;
	color: #ffd184; }

	nav li:nth-child(3) a.active,
	nav li:nth-child(3) a:hover {
	border-color: #ff8495;
	color: #ff8495; }