Pure CSS Semantic Horizontal Content Slider

dabblet.css

/* Pure CSS Semantic Horizontal Content Slider */

body {
	display: block;
	position: fixed;
	top: 0;
	left: -400%;
	width: 500%;
	text-align: right;
	padding: 0;
	margin: 0;
	background: #eee;
}

section {
	width: 20%;
	display: inline-block;
	text-align: left;
	transition: all 1s linear; /* older webkit */
	transition: all 1s cubic-bezier(0.175, 0.885, 0.320, 1.15); 
	margin-top: 4em;
	color: #fff;
	text-shadow: 1px 1px #000;
	padding: 1.5em 0;
	text-indent: 1em;
	font-size: 1.25em;
	border-top: 1px solid #666;
	border-bottom: 1px solid #fff;
}

#one {
	background: purple;
}

#two {
	background: red;
}

#three {
	background: green;
}

#four {
	background: blue;
}

#four,
#one:target ~ #four {
	margin-right: -60%;
}

#two:target ~ #four {
	margin-right: -40%;
}

#three:target ~ #four {
	margin-right: -20%;
}

#four:target {
	margin-right: 0%;
}

#nav {
	display: block;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	background: #333;
	padding: 0;
	list-style: none;
	margin: 0;
	font-size: 1.25em;
}

#nav li {
	display: block;
	float: left;
	width: 25%;
}
	#nav li a {
		display: block;
		text-decoration: none;
		padding: 1em 0;
		color: #ddd;
		text-align: center;
		transition: all .1s linear;
		font-weight: bold;
		text-shadow: 1px 1px #000;
	}
	
	#nav li a:hover {
		background: #000;
		color: #fff;
	}

#one:target ~ #nav .one a,
#two:target ~ #nav .two a,
#three:target ~ #nav .three a,
#four:target ~ #nav .four a {
	background: orange;
}

dabblet.html

<section id='one'>
	One &mdash; Proin facilisis sapien eget mi gravida et fringilla libero suscipit.
</section><!--#one--><section id='two'>
	Two &mdash; Mauris sed tristique magna. Aliquam et arcu quis turpis scelerisque bibendum eget vel mauris.
</section><!--#two--><section id='three'>
	Three &mdash; Etiam sagittis, magna malesuada interdum dapibus, ipsum sem imperdiet massa, pretium fringilla augue arcu at metus.
</section><!--#three--><section id='four'>
	Four &mdash; Curabitur ut ligula felis. Morbi id eros odio. The end!
</section><!--#four-->

<ul id='nav'>
	<li class='one'>
		<a href='#one'>One</a>
	</li><!--.one-->
	<li class='two'>
		<a href='#two'>Two</a>
	</li><!--.two-->
	<li class='three'>
		<a href='#three'>Three</a>
	</li><!--.three-->
	<li class='four'>
		<a href='#four'>Four</a>
	</li><!--.four-->
</ul><!--#nav-->

settings.json

{"view":"separate","fontsize":"110","seethrough":"","prefixfree":"1","page":"html"}