CodePen

HTML

            
              <body>
	<div id="page">
		<div id="splash_container">
			<div id="splash">
				<div id="splash_content_line1">
					<div id="splash_content_line1_align">
						<H1>TEST</H1>
					</div>
				</div>
				<div id="splash_content_line1">
					<div id="splash_content_line2_align">
						<H1>test test test</H1>
					</div>
				</div>
			</div>
		</div>
		<div id="menu_bottom">
			<div id="menu_option1"><a href="#main1">One</a></div>
			<div id="menu_option2"><a href="#main2">Two</a></div>
			<div id="menu_option3"><a href="#main3">Three</a></div>
			<div id="menu_option4"><a href="#main4">Four</a></div>
			<div id="menu_option5"><a href="#main5">Five</a></div>
		</div>
		<div id="main1"><a>1111 1111 1111</a></div>
		<div id="main2"><a>2222 2222 2222</a></div>
		<div id="main3"><a>3333 3333 3333</a></div>
		<div id="main4"><a>4444 4444 4444</a></div>
		<div id="main5"><a>5555 5555 5555</a></div>
		<div id="main_gradient"></div>
		<div id="footer">
			<p>Project: Kyvaith</p>
		</div>
	</div>
</body>
            
          
!
via HTML Inspector

CSS

            
              body { 
	height: 100%;
	width: 100%;
	background-color: #222;
	background-repeat: repeat;
	-webkit-animation: bugfix infinite 1s; 
	}
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

* {
margin:0;
padding:0;
border-width:0;
}

#page {
	height: 100%;
	width: 100%;
}

#splash_container {
	height: 100%;
	width: 100%;
	overflow: hidden;
	position: absolute;
}

#splash {
	height: 100%;
	width: 100%;
	position: absolute;
	-webkit-transform: all;
	-webkit-transition-duration:99999s;
	background-color: #222;
	text-align: center;
    vertical-align:middle;
    display: table-cell;
	overflow: hidden;
	z-index: 999;
}

#splash:hover {
	-webkit-transform: scale(15);
	-webkit-transition-duration:1.5s;
	transition-timing-function: ease-in;
	opacity:0.0;
	z-index: -2;
	overflow: hidden;
}

#splash_content_line1 {
	height: 50%;
	position: relative;
	overflow: hidden;
}

#splash_content_line1_align h1 {
    position:absolute;
    bottom:0;
	text-align: center;
	font-size: 170px;
	color: white;
	font-family:"Calibri Light", Calibri, sans-serif;
	width: 100%;
	overflow: hidden;
}


#splash_content_line2 {
	height: 50%;
	position: relative;
	overflow: hidden;
}

#splash_content_line2_align h1 {
    position:absolute;
    top:0;
	text-align: center;
	font-size: 70px;
	color: white;
	font-family:"Calibri Light", Calibri, sans-serif;
	width: 100%;
	overflow: hidden;
}

#menu_option1, #menu_option2, #menu_option3, #menu_option4, #menu_option5 {
	width: 200px;
	height: 75px;
	display: block;
	position: relative;
	float: left;
	clear:left;
	left: 0px;
}

#menu_option1 { background-color:#CCC; }
#menu_option2 { background-color:#999; }
#menu_option3 { background-color:#666; }
#menu_option4 { background-color:#BBB; }
#menu_option5 { background-color:#CCC; }

#menu_bottom {
	background-color:#333;
	position: absolute;
	display: block;
	width: 220px;
	height: 100%;
	float: left;
	clear:left;
	left: 0px;
	z-index: 4;
	-webkit-transform-origin: 100% 50%;
	-webkit-transform: translateX(-200px);
	-webkit-transition-property:all;
	-webkit-transition-duration:.5s;
}

#menu_bottom:hover { -webkit-transform: translateX(0); }
#menu_bottom:hover ~ #main1 { -webkit-transform: translateX(220px) perspective( 500 ) rotateY( 8deg ) scaleX(0.8); }
#menu_bottom:hover ~ #main2 { -webkit-transform: translateX(220px) perspective( 500 ) rotateY( 8deg ) scaleX(0.8); }
#menu_bottom:hover ~ #main3 { -webkit-transform: translateX(220px) perspective( 500 ) rotateY( 8deg ) scaleX(0.8); }
#menu_bottom:hover ~ #main4 { -webkit-transform: translateX(220px) perspective( 500 ) rotateY( 8deg ) scaleX(0.8); }
#menu_bottom:hover ~ #main5 { -webkit-transform: translateX(220px) perspective( 500 ) rotateY( 8deg ) scaleX(0.8); }
#menu_bottom:hover ~ #main_gradient { -webkit-transform: translateX(220px) perspective( 500 ) rotateY( 8deg ) scaleX(0.8); opacity:1.0; visibility:visible; }

#main1, #main2, #main3, #main4, #main5 {
	height: 100%;
	width: 100%;
	width: -webkit-calc(100% - 20px);
	display: block;
	position: absolute;
	float: left;
	clear:left;
	z-index: -1;
	margin-right: 20px;
	background-color:#eee;
	-webkit-transform-origin: 0% 50%;
	-webkit-transform: translateX(20px) perspective( 400 ) rotateY( 0deg ) scaleX(1.0);
	-webkit-transition-duration:.5s;
	opacity:0.0;
}

#main_gradient{
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65)));
	-webkit-transform-origin: 0% 50%;
	-webkit-transform: translateX(20px) perspective( 400 ) rotateY( 0deg ) scaleX(1.0);
	-webkit-transition-duration:.5s;
	width: -webkit-calc(100% - 20px);
    height: 100%;
    position: absolute;
	z-index: 3;
	opacity:0.0;
	visibility:hidden;
}

#main1 { z-index: 1; opacity:1.0; }
#main1:target { z-index: 2; opacity:1.0; }
#main2:target { z-index: 2; opacity:1.0; }
#main3:target { z-index: 2; opacity:1.0; }
#main4:target { z-index: 2; opacity:1.0; }
#main5:target { z-index: 2; opacity:1.0; }

#footer {
	width: 100%;
    height: 20px;
    background-color:#c2575b;
	color: white;
	float:bottom;
	position: absolute;	
	z-index: 5;
	bottom: 0px;
	text-align: right;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................