all in one // nevillles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- nevillles.tumblr.com -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>

<title>{Title}</title>

<link rel="shortcut icon" href="{Favicon}" />
<link rel="alternate" type="application/rss+xml" href="{RSS}" />

		<script src="http://tympanus.net/Blueprints/GridGallery/js/modernizr.custom.js"></script>

<style type="text/css">

::-webkit-scrollbar-thumb {
height:auto;
background-color:#47afda;
}

::-webkit-scrollbar {
height:9px;
width:4px;
background-color:#f0f0f0;
}

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #da4766;
}

a {
	color: #f0f0f0;
	text-decoration: none;
	outline: none;
}

a:hover {
	color: #000;
}

l1{background-color:#47afda;
padding:2px;
font-family:arial;
text-transform:uppercase;
font-size:9px;
letter-spacing:2px;
color:#f0f0f0;
display:inline-block;
width:100%;}

l2{background-color:#97bfd7;
padding:2px;
font-family:arial;
text-transform:uppercase;
font-size:9px;
letter-spacing:2px;
color:#f0f0f0;
display:inline-block;
width:100%;}

blockquote {border-left: solid 2px black;
    padding-left:5px;
    background-color:#efefef;
    padding:5px;
}

.container{
    margin-left:20%;
    margin-top:-50px;
}

.container > header {
	width: 90%;
	max-width: 69em;
	margin: 0 auto;
	padding: 2.875em 1.875em 1.875em;
}

.container > header h1 {
	font-size: 2.125em;
	line-height: 1.3;
	margin: 0 0 0.6em 0;
	float: left;
	font-weight: 400;
}

.container > header > span {
	display: block;
	position: relative;
	z-index: 200;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5em;
	padding: 0 0 0.6em 0.1em;
}

.container > header > span span:after {
	width: 30px;
	height: 30px;
	left: -12px;
	font-size: 50%;
	top: -8px;
	font-size: 75%;
	position: relative;
}

.container > header > span span:hover:before {
	content: attr(data-content);
	text-transform: none;
	text-indent: 0;
	letter-spacing: 0;
	font-weight: 300;
	font-size: 110%;
	padding: 0.8em 1em;
	line-height: 1.2;
	text-align: left;
	left: auto;
	margin-left: 4px;
	position: absolute;
	color: #fff;
	background: #da4766;
}


 /*--title--*/

    #title {
    margin-top:0px;
    margin-left:0px;
    padding:20px;
    background-color:#da4766;
    color:#fff;
    margin-left:21%;
    width:750px;
    }

 /*--links--*/

    #links {
    width:786px;
    margin-left:21%;
    padding:2px;
    font-family:courier;
    text-transform:uppercase;
    text-align:center;
    margin-top:0px;
    margin-left:21%;
    background-color:#47afda;
    }

    #links a {
    padding:2px;
    font-size:8px;
    width:100%;
    width:60%;
    display:inline-block;
    letter-spacing:3px;
    color:#47afda;
    }

     #link2 {
    width:786px;
    padding:2px;
    font-family:courier;
    text-transform:uppercase;
    text-align:center;
    margin-top:0px;
    margin-left:21%;
    background-color:#97bfd7;
    }

    #link2 a {
    padding:2px;
    font-size:8px;
    width:100%;
    display:inline-block;
    letter-spacing:3px;
    color:#47afda;
    }

       #link3 {
    width:786px;
    padding:2px;
    font-family:courier;
    text-transform:uppercase;
    text-align:center;
    margin-top:0px;
    margin-left:21%;
    background-color:#bdced9;
    }

    #link3 a {
    padding:2px;
    font-size:8px;
    width:100%;
    display:inline-block;
    letter-spacing:3px;
    color:#47afda;
    }

#blogroll {
    overflow: auto;
    width:200px;
    background-color:white;
    position: relative;
    padding:5px;
    height:155px;
    margin-top:-20px;
    margin-left:10px;
    line-height: 11px;
    font-size: 11px;
}

#blogroll img {
    margin:4px;
    width: 43px;
    border:solid #fff 2px;
}

#navi{
    text-align:center;
    font-weight:normal;
    margin-left:235px;
    color:#fff;
    width:140px;
    margin-top:-168px;
    font-family:tahoma;
    z-index:9999999999999;
}

#navi a{
    width:45px;
    font-weight:normal;
    color:white;
    padding-bottom:solid 2px white;
    display:inline-block;
    z-index:9999999999999;
    font-style:none;
    margin-top:4px;
    text-transform:uppercase;
    font-size:7px;
    letter-spacing:2px;
    padding:10px;
    background-color:#47afda;
}

#tags{
    text-align:center;
    font-weight:normal;
    color:#fff;
    margin-top:-35px;
    font-family:tahoma;
    z-index:9999999999999;
}

#tags a{
    width:90%;
    font-weight:normal;
    color:white;
    padding-bottom:solid 2px white;
    display:inline-block;
    z-index:9999999999999;
    font-style:none;
    margin-top:4px;
    text-transform:uppercase;
    font-size:7px;
    letter-spacing:2px;
    padding:5px;
    background-color:#47afda;
}

 #icon{margin-left:-9px;
margin-top:-5%;
margin-left:45%;
position:fixed;
}

#icon img{width:100px;
height:100px;
    border-radius:70px;
    border:solid 2px white;
}

@font-face {
	font-family: 'fontawesome';
	src:url('../fonts/fontawesome/fontawesome.eot?-e43dk9');
	src:url('../fonts/fontawesome/fontawesome.eot?#iefix-e43dk9') format('embedded-opentype'),
		url('../fonts/fontawesome/fontawesome.woff?-e43dk9') format('woff'),
		url('../fonts/fontawesome/fontawesome.ttf?-e43dk9') format('truetype'),
		url('../fonts/fontawesome/fontawesome.svg?-e43dk9#fontawesome') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* General style */
.grid-gallery ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.grid-gallery figure {
	margin: 0;
}

.grid-gallery figure img {
	display: block;
	width: 100%;
}

.grid-gallery figcaption h3 {
	margin: 0;
	padding:5px;
	background-color:#47afda;
	font-family:arial;
	color:#e4e4e4;
	letter-spacing:-1px;
	text-transform:lowercase;
}

.grid-gallery figcaption p {
	padding:10px;
	line-height:13px
}

/* Grid style */
.grid-wrap {
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1em 1.875em;
}

.grid {
	margin: 0 auto;
}

.grid li {
	width: 25%;
	float: left;
	cursor: pointer;
}

.grid figure {
	padding: 15px;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.grid li:hover figure {
	opacity: 0.7;
}

.grid figcaption {
	background: #efefef;
	padding: 25px;
}

/* Slideshow style */
.slideshow {
	position: fixed;
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 500;
	opacity: 0;
	visibility: hidden;
	overflow: hiiden;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.slideshow-open .slideshow {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.slideshow ul {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translate3d(0,0,150px);
	transform: translate3d(0,0,150px);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.slideshow ul.animatable li {
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.slideshow-open .slideshow ul {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.slideshow li {
	width: 660px;
	height: 560px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -280px 0 0 -330px;
	visibility: hidden;
}

.slideshow li.show {
	visibility: visible;
}

.slideshow li:after {
	content: '';
	position: absolute;
	width: 60%;
	height: 60%;
	top: 20%;
	left: 20%;
	background: rgba(255,255,255,0.8);
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.slideshow li.current:after {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
	transition: opacity 0.3s, visibility 0s 0.3s;
}

.slideshow figure {
	width: 60%;
	margin-left:20%;
	margin-top:20%;
	height: 40%;
	background: #fff;
	border: 50px solid #fff;
	overflow: hidden;
}

.slideshow figcaption {
	padding-bottom: 20px;
	font-size:9px;
	color:black;
	line-height:200%;
	font-family:arial;
}

.slideshow figcaption h3 {
	font-weight: 300;
	font-size: 200%;
	color:white;
}

/* Navigation */
.slideshow nav span {
	position: fixed;
	z-index: 1000;
	color: #59656c;
	text-align: center;
	padding: 3%;
	cursor: pointer;
	font-size: 2.2em;
}

.slideshow nav span.nav-prev,
.slideshow nav span.nav-next {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	color: #fff;
}

.slideshow nav span.nav-next {
	right: 0;
	color: #fff;
}

.slideshow nav span.nav-close {
	top: 0;
	right: 0;
	padding: 0.5em 1em;
	color: #fff;
}

.icon:before,
.icon:after {
	font-family: 'fontawesome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	color: #fff;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

span.nav-prev:before {
	color: #fff;
}

span.nav-next:before  {
	color: #fff;
}

span.nav-close:before {
	color: #fff;
}

/* Info on arrow key navigation */
.info-keys {
	position: fixed;
	top: 10px;
	left: 10px;
	width: 60px;
	font-size: 8px;
	padding-top: 20px;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: 1px;
	text-align: center;
}

.info-keys:before,
.info-keys:after {
	position: absolute;
	top: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #fff;
	text-align: center;
	line-height: 14px;
	font-size: 12px;
}

.info-keys:before {
	left: 10px;
	content:"«"
}

.info-keys:after {
	right: 10px;
	content:"»";
}

/* Example media queries (reduce number of columns and change slideshow layout) */

@media screen and (max-width: 60em) {
	/* responsive columns; see "Element sizing" on http://masonry.desandro.com/options.html */
	.grid li {
		width: 33.3%;
	}

	.slideshow li {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		margin: 0;
	}

	.slideshow li figure img {
		width: auto;
		margin: 0 auto;
		max-width: 100%;
	}

	.slideshow nav span,
	.slideshow nav span.nav-close {
		font-size: 1.8em;
		padding: 0.3em;
	}

	.info-keys {
		display: none;
	}

}

@media screen and (max-width: 35em) {
	.grid li {
		width: 50%;
	}
}

@media screen and (max-width: 24em) {
	.grid li {
		width: 100%;
	}
}

.icons img {
        -webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
    }

	</head></style>
	<body>
	<div id="title">TITLE HERE</div>
	<div id="icon"><img src="http://i60.tinypic.com/350mpz8.png"></div>
	<div id="links">
<a href="/"></a></div>
<div id="link2"><a href="/ask"></a></div>
<div id="link3"><a href="http://nevillles.tumblr.com"> </a>
</div>

		<div class="container">
			<header class="clearfix">
			</header>
			<div id="grid-gallery" class="grid-gallery">
				<section class="grid-wrap">
					<ul class="grid">
						<li class="grid-sizer"></li><!-- for Masonry column width -->
						<li>
							<figure>
								<img src="http://i62.tinypic.com/v6n7kp.png" alt="img01"/>
								<figcaption><h3>ABOUT ME</h3><p><l1>Name</l1>
<l2>Age</l2>
<l1>Location</l1>
<l2>Click for more</l2>
</p></figcaption>
							</figure>
						</li>
						<li>
							<figure>
								<img src="http://i62.tinypic.com/v6n7kp.png" alt="img02"/>
								<figcaption><h3>LINKS and blogroll</h3><p>
<l1><a href="/tags">Tags</a></l1>
<l2><a href="/resources">Resources</a></l2>
<l1><a href="/selfies">Face</a></l1>
<l2>Click for more</l2></p></figcaption>
							</figure>
						</li>
						<li>
							<figure>
								<img src="http://i62.tinypic.com/v6n7kp.png" alt="img03"/>
								<figcaption><h3>Tags</h3><p>
<l1><a href="/tagged/swag">Harry Potter</a></l1>
<l2><a href="/tagged/swagg">Merlin</a></l2>
<l1><a href="/tagged/swaggg">My edits</a></l1>
<l2>Click for more</l2>
								</p></figcaption>
							</figure>
						</li>

					</ul>
				</section><!-- // grid-wrap -->
				<section class="slideshow">
					<ul>
						<li>
							<figure>
								<figcaption>
									<h3>about me</h3>
									<hr>
									<p><blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dignissim quis ante et placerat. Morbi consectetur tempor dapibus. Sed sodales nunc nulla, vitae adipiscing nisl convallis quis. Vivamus condimentum augue id est vestibulum gravida. Aenean dictum neque ut porta convallis. Aliquam erat volutpat. Curabitur interdum sodales varius. Duis fermentum dui orci, sed euismod nunc convallis vel. Etiam nisl nulla, volutpat non mauris et, bibendum blandit nibh. Sed congue lectus risus, vitae posuere metus sollicitudin egestas. Nunc tempus ipsum in est bibendum, interdum interdum eros venenatis. Sed non erat ut justo cursus ullamcorper. Proin vitae fringilla est, quis pharetra metus. Pellentesque scelerisque augue ut felis posuere, ac accumsan turpis aliquet.<br></blockquote>

</p>
								</figcaption>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Links and Blogroll</h3>
									<hr>
									<p><div id="content">
<div id="blogroll">
  {block:Following}{block:Followed}
<a href="{FollowedURL}"><img src="{FollowedPortraitURL-40}" align="left"></a>
{/block:Followed}{/block:Following}
</div>
<div id="navi">
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<br>
</div>
</div>
								</figcaption>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Tags</h3>
<hr>
<p><div id="tags">
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<a href="URL">LINK</a>
<br>
</div></p>
								</figcaption>
								<img src="img/large/3.png" alt="img03"/>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Chillwave nihil occupy</h3>
									<p>Vice cliche locavore mumblecore vegan wayfarers asymmetrical letterpress hoodie mustache. Shabby chic lomo polaroid, scenester 8-bit Portland Pitchfork VHS tote bag.</p>
								</figcaption>
								<img src="img/large/4.png" alt="img04"/>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Kale chips lomo biodiesel</h3>
									<p>Chambray Schlitz pug YOLO, PBR Tumblr semiotics. Flexitarian YOLO ennui Blue Bottle, forage dreamcatcher chillwave put a bird on it craft beer Etsy.</p>
								</figcaption>
								<img src="img/large/5.png" alt="img05"/>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Exercitation occaecat</h3>
									<p>Cosby sweater hella lomo Thundercats VHS occupy High Life. Synth pop-up readymade single-origin coffee, fanny pack tousled retro. Fingerstache mlkshk ugh hashtag, church-key ethnic street art pug yr.</p>
								</figcaption>
								<img src="img/large/6.png" alt="img06"/>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Selfies viral four</h3>
									<p>Ethnic readymade pug, small batch XOXO Odd Future normcore kogi food truck craft beer single-origin coffee banh mi photo booth raw denim. XOXO messenger bag pug VHS. Forage gluten-free polaroid, twee hoodie chillwave Helvetica.</p>
								</figcaption>
								<img src="img/large/1.png" alt="img01"/>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Photo booth skateboard</h3>
									<p>Thundercats pour-over four loko skateboard Brooklyn, Etsy sriracha leggings dreamcatcher narwhal authentic 3 wolf moon synth Portland. Shabby chic photo booth Blue Bottle keffiyeh, McSweeney's roof party Carles.</p>
								</figcaption>
								<img src="img/large/2.png" alt="img02"/>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Ex fashion axe</h3>
									<p>Ennui Blue Bottle shabby chic, organic butcher High Life tattooed meggings jean shorts Brooklyn sartorial polaroid. Cray raw denim +1, bespoke High Life Odd Future banh mi chillwave Marfa kogi disrupt paleo direct trade 90's Godard. </p>
								</figcaption>
								<img src="img/large/3.png" alt="img03"/>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Thundercats next level</h3>
									<p>Typewriter authentic PBR, iPhone mixtape fixie post-ironic fingerstache Pitchfork artisan. Wayfarers master cleanse occupy, Tonx lo-fi swag Truffaut irony whatever Blue Bottle readymade PBR gluten-free. Lomo Pinterest Banksy fap. Retro ennui you probably haven't heard of them iPhone, PBR fashion axe polaroid.</p>
								</figcaption>
								<img src="img/large/4.png" alt="img04"/>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Bushwick selvage synth</h3>
									<p>Schlitz deserunt pour-over consectetur. Selfies plaid asymmetrical farm-to-table, cred gastropub photo booth narwhal non roof party velit raw denim slow-carb meggings pug. Tempor post-ironic seitan cliche bicycle rights. Meh viral Williamsburg, quinoa 8-bit kale chips YOLO Marfa accusamus.</p>
								</figcaption>
								<img src="img/large/5.png" alt="img05"/>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Bottle wayfarers locavore</h3>
									<p>Aliqua High Life art party fixie farm-to-table. Kitsch Echo Park shabby chic, narwhal fugiat Cosby sweater asymmetrical gastropub tofu. Authentic minim Pinterest Blue Bottle beard, aliqua chia XOXO dolor freegan banh mi vegan fugiat.</p>
								</figcaption>
								<img src="img/large/1.png" alt="img01"/>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Letterpress asymmetrical</h3>
									<p>Pickled hoodie Pinterest 90's proident church-key chambray. Salvia incididunt slow-carb ugh skateboard velit, flannel authentic hoodie lomo fixie photo booth farm-to-table. Minim meggings Bushwick, semiotics Vice put a bird.</p>
								</figcaption>
								<img src="img/large/1.png" alt="img01"/>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Vice velit chia</h3>
									<p>Tattooed assumenda chambray cray officia. 90's mollit ethnic church-key ex eu pop-up gentrify. Tonx raw denim eu, bitters nesciunt distillery Neutra pop-up. Drinking vinegar Helvetica Truffaut tattooed.</p>
								</figcaption>
								<img src="img/large/2.png" alt="img02"/>
							</figure>
						</li>
						<li>
							<figure>
								<figcaption>
									<h3>Brunch semiotics</h3>
									<p>Gentrify High Life adipisicing, duis slow-carb kogi Tumblr raw denim freegan Echo Park. Fingerstache laboris pork belly messenger bag, you probably haven't heard of them vegan twee Intelligentsia Vice Etsy pickled put a bird on it Godard roof party. Meggings small batch dreamcatcher velit.</p>
								</figcaption>

								<img src="img/large/1.png" alt="img01"/>
							</figure>
						</li>
					</ul>
					<nav>
						<span class="icon nav-prev">«</span>
						<span class="icon nav-next">»</span>
						<span class="icon nav-close">x</span>
					</nav>
					<div class="info-keys icon">Navigate with arrow keys</div>
				</section><!-- // slideshow -->
			</div><!-- // grid-gallery -->
		</div>
		<script src="http://tympanus.net/Blueprints/GridGallery/js/imagesloaded.pkgd.min.js"></script>
		<script src="http://tympanus.net/Blueprints/GridGallery/js/masonry.pkgd.min.js"></script>
		<script src="http://tympanus.net/Blueprints/GridGallery/js/classie.js"></script>
		<script src="http://tympanus.net/Blueprints/GridGallery/js/cbpGridGallery.js"></script>
		<script>
			new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
		</script>
	</body>
</html>