CodePen

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="stylesheets/normalize.css" />
<link type="text/css" rel="stylesheet" href="stylesheets/style.css" />

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/waypoints.min.js"></script>
<script type="text/javascript" src="scripts/jquery.scrollTo-1.4.3.1-min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>

<body>

<!-- pages -->
<div id="container">
    
    <div class="page" id="homePage">
    	<div id="slider-space">
        	
    	</div>
    </div><!-- end of homePage -->
    
    <div class="page" id="aboutusPage">
    	
    </div><!-- end of aboutusPage -->
    
    
    <div class="page" id="brandsPage">
        <!--<div id="brands-slider-space">
        	
        </div>-->
    </div><!-- end of brandsPage -->
    
    
    <div class="page" id="musicPage">
        
    </div><!-- end of musicPage -->
    

    <div class="page" id="contactusPage">
        
    </div><!-- end of contactusPage -->

</div><!-- end of container -->


<!-- navigation menu -->
<div id="navigation">
	<ul>
    	<li><div class="menubutton" id="homeLink"><a class="menuitem" href="#"></a></div></li>
        <li><div class="menubutton" id="aboutLink"><a class="menuitem" href="#"></a></div></li>
        <li><div class="menubutton" id="musicLink"><a class="menuitem" href="#"></a></div></li>
        <li><div class="menubutton" id="brandsLink"><a class="menuitem" href="#"></a></div></li>
        <li><div class="menubutton" id="contactLink"><a class="menuitem" href="#"></a></div></li>
    </ul>
</div><!-- end of navigation -->

</body>
</html>

            
          
!
via HTML Inspector

CSS

            
              a {text-decoration:none; }

li { list-style-type:none; }

body {
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	background-color:#FFF;
	/*overflow-y: hidden;*/
}

tr {  vertical-align: top; }

.page { 
	width: 1250px;
	height: 800px;
	position:relative;
}

/* navigation */

#navigation {
	position:fixed;
	z-index:5;
	bottom:80px;
	left:-26px;
	background-color:#FFF;
	width:70px;
	height:190px;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
}

.menubutton {
	float:left;
	width:20px;
	height:20px;
	border-radius: 50%;
	background-color:#F00;
	margin-bottom:15px;
}

.menubutton:hover { cursor:pointer;	}

#homeLink { background-color:#007FD2; }
#aboutLink { background-color:#C7007A; }
#musicLink { background-color:#FFDB1A; }
#brandsLink { background-color:#000; }
#contactLink { background-color:#F90; }

/* home page */
#slider-space {
	height:486px;
	width:1025px;
	background-color:#FF5;
	margin-top:30px;
	margin-left:auto;
	margin-right:auto;
}


/* pages */
#homePage { background-color:#096; }

#aboutusPage { background-color:#09F; }

#musicPage { background-color:#C66; }

#brandsPage { background-color:#CC6; }

#contactusPage { background-color:#96C; }


/* brands page */
#brands-slider-space {
	width:1000px;
	height:500px;
	background-color:#C39;
	margin-top:30px;
	margin-left:auto;
	margin-right:auto;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              function resizePages() {
	$('.page').css({
		'width' : $(window).width(),
		'height' : $(window).height()
	});
}

$(document).ready(function(e) {
    $("#container").wrapInner("<table><tr>");
	$(".page").wrap("<td></td>");
	
	$('#aboutusPage').waypoint(function(direction){

	},{
		offset 		: '35%',
		horizontal 	: true
	});

	//navigation
	$('#homeLink').click(function(e) {
		$.scrollTo(0,0, {duration: 2000});
    });
	$('#aboutLink').click(function(e) {
        $.scrollTo('#aboutusPage', {duration: 2000});
    });
	$('#musicLink').click(function(e) {
        $.scrollTo('#brandsPage', {duration: 2000});
    });
	$('#brandsLink').click(function(e) {
        $.scrollTo('#musicPage', {duration: 2000});
    });
	$('#contactLink').click(function(e) {
        $.scrollTo('#contactusPage', {duration: 2000});
    });
	
	resizePages();
});

//reset page height and width when the browser is resized
$(window).resize(function(e) {
	resizePages();
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................