:target - website

dabblet.css

/**
 * :target - website
 */

/**
 * Defaults
 */
nav .home {
    font-weight: bold;
}
.page {
	display: none
}
.page.home {
    display: block;
}
/**
 * About page
 */
#about:target .page {
    display: none;
}
#about:target .page.about {
    display: block;
}
#about:target nav .menu-item {
	font-weight: normal;
}
#about:target nav .about {
	font-weight: bold;
}
/**
 * Portfolio page
 */
#portfolio:target .page {
    display: none;
}
#portfolio:target .page.portfolio {
    display: block;
}
#portfolio:target nav .menu-item {
	font-weight: normal;
}
#portfolio:target nav .portfolio {
	font-weight: bold;
}
/**
 * Portfolio page
 */
#contact:target .page {
    display: none;
}
#contact:target .page.contact {
    display: block;
}
#contact:target nav .menu-item {
	font-weight: normal;
}
#contact:target nav .contact {
	font-weight: bold;
}
/**
 * Styling
 */
 
body {
	background: #F2F2F2;
	color: #333;
	font-family: Helvetica, Arial, sans;
	min-height: 100%;
}
.title {
	margin: 0;
}
.tagline {
	color: #999;
	font-size: 1em;
	font-weight: 100;
	margin: .5em 0 0 0;
}
p {
	line-height: 1.45em;
	margin: 0 0 0.754em 0;
}
.wrapper {
	background: white;
	border-radius: 4px;
	box-shadow: 0 0 4px rgba(0, 0, 0, .3);
	font: 14px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
	margin: 0 auto;
	padding: 2.5em 4em;
	width: 445px;
}
nav {
	border: 1px solid #f30;
	border-left: 0 none;
	border-right: 0 none;
	margin: 2.5em 0;
	padding: .75em 0;
}
nav .menu-item {
	color: #333;
	font-size: 1.1em;
	padding-right: 1em;
	text-decoration: none;
}
.page .image {
	border: 3px solid white;
	box-shadow: 0 0 1px 0 black;
	margin: 0 1em 1.5em 0;
}

.page .page-title {
	margin: 0 0 0.754em 0;
}

#portfolio:target .wrapper {
	
} 
.page.contact .contact-list {
	list-style: none;
	margin: 0;
	padding-left: 1.45em;
}
.page.contact .contact-option {
	margin: 0 0 0.754em 0;
}
.footer {
	border-top: 1px solid #f30;
	margin: 2.5em 0 0;
	padding: .75em 0;
}

dabblet.html

<div id="home">
<div id="about">
<div id="portfolio">
<div id="contact">
	<div class="wrapper">
		<div class="header">
			<h1>My awesone website</h1>
			<h3>Made possible by the :target CSS3 pseudo-class</h3>
			<nav>
				<a href="#" class="home">Home</a>
				<a href="#about" class="about">About</a>
				<a href="#portfolio" class="portfolio">Portfolio</a>
				<a href="#contact" class="contact">Contact</a>
	
	
			</nav>
		</div>
		<div class="page home">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, diam eget gravida consequat, erat eros auctor turpis, eget dapibus nulla justo ac tortor.</p>
			<p>Mauris in dolor quis odio ullamcorper adipiscing. Nullam at neque metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam metus mi, vestibulum non sodales vel, lobortis in enim. Aliquam vehicula tortor in mi facilisis ut posuere dolor vulputate.</p>
			<p>Aenean et dictum est. Curabitur auctor sem ut elit tristique tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin aliquam nibh in dolor bibendum non ultrices metus fringilla.</p>
		</div>
		<div class="page about">
			<img src="https://en.gravatar.com/userimage/4002054/b567733eeac55d9eeadf59283dad6dc0.jpeg" align="left" />
			<h2>Vlad Zinculescu</h2>
			<p class="bio ">I'm an UX Engineer currently living in Amsterdam. I like to experiment with CSS on <a href="http://eCSSpert.com" target="_blank" rel="nofollow">http://eCSSpert.com</a> and write articles on <a href="http://thetutlage.com" target="_blank" rel="nofollow">thetutlage.com</a>.</p>
			
		</div>
		<div class="page portfolio">
			<h2>Dribbble shots</h2>
			<img src="http://dribbble.com/system/assets/2508/70691/screenshots/593093/8-face-2.png?1339013649" alt="My new friends" width="200" height="150" />
			<img src="http://dribbble.com/system/assets/2508/70691/screenshots/396772/dribbble-shot.png?1327354127" alt="Happy-Birthday" width="200" height="150" />
			<img src="http://dribbble.com/system/assets/2508/70691/screenshots/311227/dribbble.jpg?1320485051" alt="Dribbble" width="200" height="150" />
			<img src="http://dribbble.com/system/assets/2508/70691/screenshots/309623/iphonelogo---dribbble.png?1320336034" alt="eCSSpert iOS icon" width="200" height="150" />
		</div>
		<div class="page contact">
			<h2>Let's get social</h2>
			<ul>
				<li><a href="http://twitter.com/vladzinculescu" target="_blank" rel="nofollow">@vladzinculescu</a></li>
				<li><a href="http://dribbble.com/ecsspert" target="_blank" rel="nofollow">Dribbble</a></li>
				<li><a href="mailto:[email protected]" target="_blank" rel="nofollow">[email protected]</a></li>
			</ul>
		</div>
		<div class="footer">
		© 2012 My awesome website by Vlad Zinculescu
		</div>
	</div>
</div>
</div>
</div>
</div>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}