swp mock up

dabblet.css

/* swp mock up */
*{
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding:0;
	margin:0;
}

html {
	/* box model */
	height: 100%;
	/* always provide a scrollbar so they don't affect the page when they do appear */
	overflow-y:scroll;
	/* fonts*/
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-moz-font-feature-settings: "kern=1";
	-ms-font-feature-settings: "kern" 1;
	-webkit-font-smoothing: subpixel-antialiased;
}

body {
	/* sets the base font-size to 13 and line-height to 22 */
	font:100%/1.69 sans-serif;
	/* colours */
	color: #efefef;
	background-color: #333;
	/* box model */
	padding:1em;
	margin: 0;
}


a{
    text-decoration:none;
    color:#ddd;
}
    a:hover{
        color:#bbb;
    }​

/*--
Nav module
	--*/
/* We set up a none styled list [1] and reset the left margin [2] which is applied to all lists by default.
 * We then get all the list items to display horizontally [3].
 */
.nav{
    list-style:none; /*[1]*/
    margin-left:0; /*[2]*/
}
    .nav > li,
        .nav > li > a{
            display:inline-block; /*[3]*/
        }

/*--
Photo slider
	--*/
.content{
	overflow:auto;
        width:100%;
        padding: 0 1em;
        margin: 0 -1em;
        /* make touch friendly on iOS */
        -webkit-overflow-scrolling:touch;
}
.photo-slider{
	list-style:none;
	position:relative;
	width: 500%;
	overflow:hidden;
	margin: 1em 0;
	background-color: #000;

}
	.photo-slider > li{
		position:relative;
                float:left;
	}
		.photo-slider img{
			display:block;
                    	max-width:100%;
                    	max-height: 645px;

		}


/*--
Header
	--*/
.logo,
	.logo > img {
		display:block;
		width: 20px;
		height: 20px;
		float:left;
	}

/*--
Footer
	--*/
/* we are giving each element inside the footer a third in page width [1] */
.photo-category-selector,
.offsite-links,
.contact-details{
	width:33.333%; /*[1]*/
}

/*--
Offsite social links
	--*/
.offsite-links {
	text-align: center;
	overflow: hidden;
}
	.offsite-links > li:after { content:" / "; }
	.offsite-links > li:last-of-type:after { content:""; }

/*--
Photo category selector
	--*/
.photo-category-selector{ float:left; }

/*--
Contact address
	--*/
.contact-details {
	text-align: right;
	float: right;
}

dabblet.html

<header>
	<nav>
		<a href=/ title="Go back home" class=logo>
			<img src=../img/logo.png alt=logo>
		</a>
		
		<ul class=nav>
			<li><a href=/ title="Go back home">Home</a></li>
			<li><a href=/about title="Find out a little more about SWP">About</a></li>
			<li><a href=# title="Purchase SWP goods."><s>Store</s></a></li>
			<li><a href=/contact title="Get in touch with SWP">Contact</a></li>
		</ul>
	</nav>
</header>
<section class=content>
	<ul class=photo-slider>
		<li><img src=http://farm5.staticflickr.com/4043/4238453793_02842f89e1_z.jpg></li>
		<li><img src=http://farm3.staticflickr.com/2652/4238447929_954d054d8b_z.jpg></li>
		<li><img src=http://farm3.staticflickr.com/2620/4238439033_e55550e887_z.jpg></li>
	</ul>
</section>
<footer>
	<div class=photo-category-selector>
		<select>
			<option>Events</option>
			<option>People</option>
			<option>Merc</option>
			<option>Action</option>
		</select>
	</div>
	<address class=contact-details>
	(+44)7881 863624<br>
	SWP HQ<br>
	Drayton Avenue<br>
	Stratford-upon-Avon<br>
	Warwickshire<br>
	CV37<br>
	</address>
	<ul class="nav offsite-links">
		<li><a href=mailto:[email protected] title="Get in touch with SWP">[email protected]</a></li>
		<li><a href=http://twitter.com/swp-s title="Tweet at me">@swp-s</a></li>
		<li><a href=fc.bk/swp-s title="Like SWP on Facebook">fc.bk/swp-s</a></li>
	</ul>
</footer>

settings.json

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