CodePen

HTML

            
              <!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>
<body>
<div class="container">
<div class="slide-container">
	<input type="radio" name="radio-set" checked="checked" id="slide-control-1"/>
	<a class="slide-1" href="#slide-panel-1">Page 1</a>
	<input type="radio" name="radio-set" id="slide-control-2"/>
	<a class="slide-2" href="#slide-panel-2">Page 2</a>
	<input type="radio" name="radio-set" id="slide-control-3"/>
	<a class="slide-3" href="#slide-panel-3">Page 3</a>
	<input type="radio" name="radio-set" id="slide-control-4"/>
	<a class="slide-4" href="#slide-panel-4">Page 4</a>
	<input type="radio" name="radio-set" id="slide-control-5"/>
	<a class="slide-5" href="#slide-panel-5">Page 5</a>
    </div>
	</div>
</body>
</html>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              .slide-container {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	font-family: 'Economica', sans-serif;
}

.slide-container > input,
.slide-container > a {
	position: fixed;
	top: 0px;
	width: 20%;
	cursor: pointer;
	font-size: 36px;
	height: 70px;
	line-height: 70px;
}

.slide-container > input {
	opacity: 0;
	z-index: 1000;
}

.slide-container > a {
	z-index: 10;
	font-weight: 200;
	background: #e23a6e;
	color: #fff;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}

.slide-container > input:hover + a:after {
	border-bottom-color: #0C6;
}


/* "Fix" for percentage rounding: add a background bar pseudo element with the same color like the labels */
.slide-container:before {
	content: '';
	position: fixed;
	width: 100%;
	height: 70px;
	background: #e23a6e;
	z-index: 9;
	top: 0;
}

#slide-control-1, #slide-control-1 + a {
	left: 0;
}

#slide-control-2, #slide-control-2 + a {
	left: 20%;
}

#slide-control-3, #slide-control-3 + a {
	left: 40%;
}

#slide-control-4, #slide-control-4 + a {
	left: 60%;
}

#slide-control-5, #slide-control-5 + a {
	left: 80%;
}

/*Active menu arrow*/
.slide-container > input:checked + a:after,
.slide-container > input:checked:hover + a:after{
	top: 100%;
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-top-color: #821134;
	border-width: 20px;
	left: 50%;
	margin-left: -20px;
}
/*Active menu arrow end*/

.slide-scroll,
.slide-panel {
	position: relative;
	width: 100%;
	height: 100%;
}

.slide-scroll {
	top: 0;
	left: 0;
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
	
	/* Let's enforce some hardware acceleration */
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-backface-visibility: hidden;
}

.slide-panel{
	background: #F7F7F7;
	overflow: hidden;
} 

#slide-control-1:checked ~ .slide-scroll {
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	-ms-transform: translateY(0%);
	transform: translateY(0%);
}
#slide-control-2:checked ~ .slide-scroll {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}
#slide-control-3:checked ~ .slide-scroll {
	-webkit-transform: translateY(-200%);
	-moz-transform: translateY(-200%);
	-o-transform: translateY(-200%);
	-ms-transform: translateY(-200%);
	transform: translateY(-200%);
}
#slide-control-4:checked ~ .slide-scroll {
	-webkit-transform: translateY(-300%);
	-moz-transform: translateY(-300%);
	-o-transform: translateY(-300%);
	-ms-transform: translateY(-300%);
	transform: translateY(-300%);
}
#slide-control-5:checked ~ .slide-scroll {
	-webkit-transform: translateY(-400%);
	-moz-transform: translateY(-400%);
	-o-transform: translateY(-400%);
	-ms-transform: translateY(-400%);
	transform: translateY(-400%);
}


/* Content elements */

.slide-deco{
	width: 100%;
	height: 20px;
	position: absolute;
	top: 70px;
	background: #fa96b5;
    
	/*-webkit-transform: translateY(-50%) rotate(45deg);
	-moz-transform: translateY(-50%) rotate(45deg);
	-o-transform: translateY(-50%) rotate(45deg);
	-ms-transform: translateY(-50%) rotate(45deg);
	transform: translateY(-50%) rotate(45deg);*/
}
.slide-panel h2 {
	color: #000;
	text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
	position: absolute;
	font-size: 54px;
	font-weight: 900;
	width: 80%;
	left: 10%;
	text-align: center;
	line-height: 50px;
	margin: -70px 0 0 0;
	padding: 0;
	top: 50%;
	-webkit-backface-visibility: hidden;
}

#slide-control-1:checked ~ .slide-scroll #slide-panel-1 h2,
#slide-control-2:checked ~ .slide-scroll #slide-panel-2 h2,
#slide-control-3:checked ~ .slide-scroll #slide-panel-3 h2,
#slide-control-4:checked ~ .slide-scroll #slide-panel-4 h2,
#slide-control-5:checked ~ .slide-scroll #slide-panel-5 h2{
	-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
	animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
	0% { 
		-webkit-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-webkit-transform: translateY(0px);  
		opacity: 1;
	}
}

@-moz-keyframes moveDown{
	0% { 
		-moz-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-moz-transform: translateY(0px);  
		opacity: 1;
	}
}

@-o-keyframes moveDown{
	0% { 
		-o-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-o-transform: translateY(0px);  
		opacity: 1;
	}
}

@-ms-keyframes moveDown{
	0% { 
		-ms-transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		-ms-transform: translateY(0px);  
		opacity: 1;
	}
}

@keyframes moveDown{
	0% { 
		transform: translateY(-40px); 
		opacity: 0;
	}
	100% { 
		transform: translateY(0px);  
		opacity: 1;
	}
}

.slide-panel p {
	position: absolute;
	text-align: center;
	font-size: 16px;
	line-height: 22px;
	color: #8b8b8b;
	z-index: 2;
	padding: 0;
	width: 50%;
	left: 25%;
	top: 50%;
	margin: 10px 0 0 0;
	-webkit-backface-visibility: hidden;
}
#slide-control-1:checked ~ .slide-scroll #slide-panel-1 p,
#slide-control-2:checked ~ .slide-scroll #slide-panel-2 p,
#slide-control-3:checked ~ .slide-scroll #slide-panel-3 p,
#slide-control-4:checked ~ .slide-scroll #slide-panel-4 p,
#slide-control-5:checked ~ .slide-scroll #slide-panel-5 p{
	-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
	-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
	-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
	-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
	animation: moveUp 0.6s ease-in-out 0.2s backwards;
}

@-webkit-keyframes moveUp{
	0% { 
		-webkit-transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		-webkit-transform: translateY(0px);  
		opacity: 1;
	}
}

@-moz-keyframes moveUp{
	0% { 
		-moz-transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		-moz-transform: translateY(0px);  
		opacity: 1;
	}
}

@-o-keyframes moveUp{
	0% { 
		-o-transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		-o-transform: translateY(0px);  
		opacity: 1;
	}
}

@-ms-keyframes moveUp{
	0% { 
		-ms-transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		-ms-transform: translateY(0px);  
		opacity: 1;
	}
}

@keyframes moveUp{
	0% { 
		transform: translateY(40px); 
		opacity: 0;
	}
	100% { 
		transform: translateY(0px);  
		opacity: 1;
	}
}

/* Colored sections */

.slide-color,
.slide-deco{
	background: #fa96b5;
}
.slide-color .slide-deco {
	background: #fff;
}
.slide-color h2 {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
} 
.slide-color p {
	color: #fff;
	color: rgba(255,255,255,0.8);
}

@media screen and (max-width: 520px) {
	.slide-panel h2 {
		font-size: 42px;
	}
	
	.slide-panel p {
		width: 90%;
		left: 5%;
		margin-top: 0;
	}
	
	.slide-container > a {
		font-size: 13px;
	}
}
@media screen and (max-width: 360px) {
	.slide-container > a {
		font-size: 10px;
	}
	
	.slide-deco{
		width: 100%;
		height: 10px;
	}
}

input:hover + .slide-1 {
  background: pink;
}

input:hover + .slide-2 {
  background: blue!important;
}

input:hover + .slide-3 {
  background: green;
}

input:hover + .slide-4 {
  background: grey;
}

input:hover + .slide-5 {
  background: brown;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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