Thoko Shplash Page

by Marcus

HTML

<body>
	
		<svg style="display: none;">
			
			<symbol id="logo">
				<path d="M57.116,24.354c19.359,0.001,25.388,15.766,23.206,25.045c0.165,0.04,0.342,0.078,0.519,0.122
				c0.869-0.673,2.415-2.109,3.526-4.494c1.958-4.213-0.054-9.087-0.054-9.087c5.053,5.551,6.335,11.487,5.646,16.775
				c2.396,1.123,4.442,2.358,6.158,3.579c-0.759,1.431-1.66,2.931-2.688,4.381c-3.955,5.55-8.197,9.277-8.197,9.277
				c4.554-0.752,10.594-5.785,14.811-10.451c2.255,2.144,3.302,3.737,3.302,3.737c0.619-0.069,1.229-0.103,1.83-0.103
				c9.61,0,16.539,8.638,13.807,18.391c-0.891,3.184-3.398,5.959-3.398,5.959s6.634,3.223,10.609,20.165
				c1.207,5.174,2.099,10.353,2.617,15.506c-8.032-3.714-13.815-4.735-13.815-4.735s5.139,2.974,14.252,10.925
				c0.978,4.429-2.677,12.238-4.478,14.886c-5.894-8.259-11.334-12.511-11.334-12.511s3.296,5.29,7.775,17.187
				c-3.1,3.724-6.612,7.095-10.468,10.051c-1.46-7.218-3.423-11.551-3.423-11.551s0.364,4.762-0.592,14.397
				C92.767,177.32,68.77,192.333,68.77,192.333l-10.376-8.586c8.896-8.867,39.989-39.565,40.744-54.145
				c0.002-0.053-0.005-0.075-0.02-0.075c-0.079,0-0.381,0.714-0.539,0.966c-10.634,16.724-29.391,34.916-45.54,48.347
				c-8.639-7.547-17.176-15.325-17.74-17.035c-0.949-9.642-0.591-14.397-0.591-14.397s-1.961,4.333-3.42,11.551
				c-3.849-2.956-7.364-6.327-10.47-10.051c4.482-11.896,7.778-17.187,7.778-17.187s-5.438,4.252-11.333,12.511
				c-2.501-3.748-5.012-10.237-4.476-14.886c9.114-7.951,14.249-10.925,14.249-10.925s-5.785,1.021-13.811,4.735
				c0.515-5.153,1.404-10.332,2.617-15.506c3.978-16.941,10.604-20.165,10.604-20.165s-2.504-2.776-3.395-5.959
				c-2.733-9.753,4.193-18.392,13.806-18.391c0.6,0,1.211,0.034,1.83,0.103c0,0,1.045-1.593,3.304-3.737
				c2.306,2.552,5.154,5.211,8.009,7.219c-6.804-5.936-7.021-18.376-0.053-24.788c0.244,3.696,3.313,6.618,7.073,6.618
				c7.514,0,8.399-9.844,6.598-15.123c-2.506-7.39-8.565-9.017-8.565-9.017C55.757,24.373,56.443,24.354,57.116,24.354...

CSS

*{
				margin: none;
				padding: none;
			}
			
			body{
				/*background-color: #333;*/
				background: #fbcf62; /* Old browsers */
				background: -moz-linear-gradient(left,  #fbcf62 0%, #fbcf62 50%, #f2c75e 50%, #f2c75e 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(left,  #fbcf62 0%,#fbcf62 50%,#f2c75e 50%,#f2c75e 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(to right,  #fbcf62 0%,#fbcf62 50%,#f2c75e 50%,#f2c75e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbcf62', endColorstr='#f2c75e',GradientType=1 ); /* IE6-9 */

			}
			
			header{
				width: 100%;
				height: 4.4em;
				background-color: #414149;
				border-bottom: #FF985E .33em solid;
				position: absolute;
				right: 0;
				top: 0;
				left: 0;
				text-align: center;
				display: block;
			}
			
			footer{
				width: 100%;
				height: 2.9em;
				background-color: #414149;
				border-top: #FF985E .33em solid;
				position: absolute;
				right: 0;
				bottom: 0;
				left: 0;
				text-align: center;
				display: block;
			}
			
			
			
			.foot-nav{
				width: 22%;
				height: 66%;
				/*background-color: aliceblue;*/
				color: #F2F9FF;
				margin: .22em auto;
				font-family: 'Roboto', sans-serif;
				font-size: 1.46em;
			}
			
			.page{
				height: 83vh;
				/*background-color: #777;*/
				margin: auto;
				display: none;
			}
			
			/*.page.active{
				display: block;
			}*/
			
			#page01{
				display: block;
			}
			
			#page02{
				display: none;
			}
			
			#page03{
				display: none;
			}
			
			#page04{
				display: none;
			}
			
			#back-link{
				float: left;
				margin-left: 17%;
			}
			
			#next-link{
				float: right;
				margin-right: 17%;
			}
			
			.header_link{
				float: right;
				margin-right: .44em;
				margin-top: .7em;
				width: 22%;
				height: 3em;
				background-color: #fbcf62;
				color: #F2F9FF;
				font-family: 'Roboto',...

JavaScript

jQuery(function($){
			var $pages = $('.page');
			var pageNum = $('.page').length;

			function adjustPage(adjustment){
			var currentPageIndex = $pages.index($('.page.active')),
				nextPage = (currentPageIndex + adjustment) % $pages.length;

			if (nextPage < 0) nextPage = $pages.length - 1;

				$pages.removeClass('active').hide().eq(nextPage).show("slide", {direction: 'right'}, 333).addClass('active');

				$('#pnum').html($('.page.active').data('page'));

			}
			
			$('#ptotal').html(pageNum);

			$('#back-link').on('click', function(){ adjustPage(-1) });
			$('#next-link').on('click', function(){ adjustPage(1) });
		});