Layout 3a - by Chloe

<!DOCTYPE html>
<html>
<head>
	<!--Don't be a douche and delete the credit-->
	<title>Nav Page</title><!--Page Title-->
	<link rel="shortcut icon" href="{Favicon}">
	<script src="https://dl.dropboxusercontent.com/s/o9k67nbw3tvczys/modernizr.custom.97074.js?dl=0"></script>
	<style type="text/css">
		body {
			/*by default the background is tiled*/
    		background:#fff url('http://static.tumblr.com/i5s2zks/N2Dno83x9/tumblr_nammtbumtw1rqdh9fo2_500.png') repeat;
    		-webkit-background-size:70px;
    		   -moz-background-size:70px;
    		     -o-background-size:70px;
    		        background-size:70px;
    		        background-attachment: fixed;
    		font-size: 12px;
    		font-family: 'Consolas'; /*font*/
    		color:#000;
		}
		h2 {
			margin: 0;
			padding: 0;
			text-align: center;
			text-transform: uppercase;
		}
		#box {
			width:800px;
			height:500px;
			border: 1px solid #000; /*main content border color*/
			margin: 0px auto 20px auto;
			background: white; /*main content background*/
			box-shadow: 5px 5px black; /*shadow color*/
		}
		.boxies {
			list-style: none;
			width: 760px;
			height: 460px;
			position: relative;
			margin: 20px auto;
			padding: 0;
		}
		.boxies li {
			float: left;
			margin: 5px;
			background: #fff;
			position: relative;
			width: 370px;
			height: 220px;
		}
		.boxies li img {
			display: block;
			position: relative;
			height: 220px;
			width: 370px;
		}
		.boxies li {
			overflow: hidden;
		}
		hr {
		    display: block;
		    margin-top: 0.5em;
		    margin-bottom: 0.5em;
		    margin-left: auto;
		    margin-right: auto;
		    border-style: solid;
		    border-width: 1px;
		    color: #fff; /*line under title color*/
		}
		.boxies li div {
			position: absolute;
			width: 100%;
			height: 100%;
			text-align: justify;
			overflow-x: hidden;
			overflow-y: scroll;
		}
		.boxies li div span {
			display: block;
			padding: 10px 0;
			margin: 20px;
			font-weight: normal;
			color: #fff; /*main color text color*/
			text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
		}
		.boxies a, .boxies a:visited {
			text-decoration: none;
			color: white; /*main content link color*/
		}
		.boxies a:hover {
			text-decoration: underline;
			color: white; /*main content link color on hover*/
		}
		#linkies ul {
			list-style-type: none;
			padding: 0;
			margin: 0;
			width: 800px;
			margin:90px auto 0px auto;
			height: 16px;
			line-height: 16px;
		}
		#linkies ul li {
			display: inline-block;
			margin:0px 2px;
		}
		#linkies a, #linkies a:visited {
			text-decoration: none;
			color: black;
			text-transform: uppercase;
			letter-spacing: 2px;
			font-weight: bold;
		 	-webkit-transition: all 0.5s ease-in-out;
			   -moz-transition: all 0.5s ease-in-out;
			     -o-transition: all 0.5s ease-in-out;
				    transition: all 0.5s ease-in-out;
		}
		#linkies a:hover {
			text-decoration: none;
			color: black;
			text-transform: uppercase;
			letter-spacing: 5px; /*delete this line if you don't want the nav link transitions*/
			font-weight: bold;
		 	-webkit-transition: all 0.5s ease-in-out;
			   -moz-transition: all 0.5s ease-in-out;
			     -o-transition: all 0.5s ease-in-out;
				    transition: all 0.5s ease-in-out;
		}
		.copyright {
		    position:fixed;
		    bottom:10px;
		    left:10px;
		    font-size: 14px;
		}
		.copyright a, .copyright a:visited, .copyright a:hover {
			color: black;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<div id="linkies">
		<ul>
			<li><a href="/">home</a></li>
			<li><a href="/ask">message</a></li>
			<li><a href="http://dontbrag.tumblr.com">credit</a></li>
		</ul>
	</div>
	<div id="box">
		<ul id="boxies" class="boxies">
					<li>
							<img src="http://static.tumblr.com/i5s2zks/i1vnoehb1/1.png" /> <!--the image will be stretched to fit the box properly-->
							<div style="background: rgba(64,249,251,0.9);"><!--search for hex to rgba to change colors. keep the opacity at 90%-->
								<span>
									<h2>About Me</h2><!--heading-->
									<hr><!--line-->
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut accumsan velit. Quisque ac leo vitae felis fermentum convallis at vitae sapien. Maecenas ac erat faucibus, rutrum est in, placerat magna. Proin nec venenatis elit. Cras fermentum aliquam risus sed sagittis. Suspendisse velit tellus, sollicitudin in maximus at, blandit vitae odio. Cras laoreet imperdiet urna, in interdum risus euismod at. Nulla ornare varius porta. Phasellus a dui malesuada, dictum dui vel, dictum nisi. <!--content, same stuff aplies for the other 3 boxes.-->
								</span>
							</div>
					</li>
					<li>
							<img src="http://static.tumblr.com/i5s2zks/PrBnoehch/2.png" />
							<div style="background: rgba(248,53,150,0.9);">
								<span>
									<h2>Favourite Books</h2>
									<hr>
									Pellentesque rhoncus massa sem. Etiam non malesuada lorem. Fusce placerat ac urna eget vehicula. Sed vitae quam nec quam rhoncus viverra. Phasellus eu quam nisl. Suspendisse iaculis tempus tristique. Nunc bibendum maximus nunc, vitae vestibulum risus hendrerit a. Vivamus eget tellus vitae libero pulvinar porta. Suspendisse nec gravida diam, eget aliquam felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Duis eu urna accumsan, lacinia elit id, auctor nunc. Vivamus efficitur mi ac laoreet suscipit. Cras mollis molestie facilisis. Aenean eu risus velit.
								</span>
							</div>
					</li>
					<li>
							<img src="http://static.tumblr.com/i5s2zks/Pc6noehdp/3.png" />
							<div style="background: rgba(164,43,249,0.9);">
								<span>
									<h2>Favourite Musicians / Bands</h2>
									<hr>
									Maecenas vitae ex risus. Curabitur nibh nisi, finibus in mauris sed, laoreet laoreet justo. Nullam ornare in augue sed maximus. Pellentesque vitae lacinia diam, a mollis lacus. Pellentesque eu sem lorem. Duis at cursus odio, vitae aliquam felis. Nulla facilisi. Donec congue egestas quam id ultricies. Sed eget tempus odio. Nullam aliquam imperdiet pellentesque. Suspendisse potenti. Mauris tristique vehicula diam.
								</span>
							</div>
					</li>
					<li>
							<img src="http://static.tumblr.com/i5s2zks/OAOnoehec/4.png" />
							<div style="background: rgba(248,241,53,0.9);">
								<span>
									<h2>Links</h2>
									<hr>
									<a href="/">I am a link</a>, <a href="/">I am another link</a>
								</span>
							</div>
					</li>
				</ul>
	</div>
	<div class="copyright"><a href="http://dontbrag.tumblr.com">&copy;</a></div>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="http://static.tumblr.com/i5s2zks/Z6Nnoefit/jquery.hoverdir.js"></script>
		<script type="text/javascript">
			$(function() {

				$(' #boxies > li ').each( function() { $(this).hoverdir(); } );

			});
		</script>
</body>
</html>