heytomsmith/index.html

## index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /><!-- Responsive on mobile -->
<title>Samuel C. Allen - Web Developer</title>

<link rel="stylesheet" type="text/css" href="style.css"><!--Singular-->
<style>
	a,a:visited {
		color: inherit;
	}
	/*
	When you are calling design-specific selectors, do it by class and always include the parent classes
	*/
	.site .site-nav .site-item .site-link {
		text-decoration: none
	}
	body {
		background-color: white;
		color: black;
		font-family: sans-serif;
		margin: 0;
		width: 100%;
	}
	.site-sidebar, .site-content {
		padding-top: 5em;
	}

	.site .site-sidebar {
		width: 300px;
		position: fixed;
		height: 100%;
		left: 0;
		top:0;
		margin: 0;
	}

	.site .site-header {
		width: 200px;
		margin: 0;
		padding: 0;
	}

	.site .site-nav {
		display: block;
		position: relative;
	}

	.site .site-header .site-name {
		color:black;
		float: left; /* Avoid floats*/
		float: none;
		font-weight: bold;
		font-size: 1.10em;
		margin: 0;
	}


	.site .site-content {
		margin: 0;
		margin-left: 300px;
		height: 100%;
	}


	.site .site-nav .site-list {
		list-style: none;
		padding-left: 75px;
	}

	.site .site-list .site-item:hover {
		text-decoration: underline;
	}
	.site .site-footer {
		position: relative;
		display: block;
	}
</style>
</head>

<body class="site">
	<menu class="site-sidebar">
		<header id="site-header" class="site-header">
			<hgroup class="site-hgroup">  <!--<hgroup> tells the browser that the <p> is dependant on the <h1>-->
				<h1 id="site-name" class="site-name"><a href="/" rel="home" class="site-home-link">Samuel C. Allen</a></h1> <!--
		    	ID and class same for your own good (think large scale, you don't want to have to memorize two)
		    	Add class to make CSS calls, shouldn't call ID's
		    	For SEO, changing this to <h1>
		    	-->
				<p id="site-tagline" class="site-tagline">Web Developer/Photographer</p> <!--Add class to make CSS calls, shouldn't call ID's-->
			</hgroup>

		</header>

	    <nav id="site-nav" class="site-nav">
	    	<ul class="nav-list">
	        	<li class="nav-item"><a href="#" class="nav-link">Web</a></li>
	            <li class="nav-item"><a href="#" class="nav-link">Photo</a></li>
	            <li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
	        </ul>
	    </nav>
	</menu>

    <main id="site-content" class="site-content" role="main">
    	<div>Content here.</div>
    	<footer id="site-footer" class="site-footer" role="info">
    			<p class="copyright">© 2015 Sameul C. Allen</p>
    	</footer>
    </main>


</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" /><!-- Responsive on mobile -->
	<title>Samuel C. Allen - Web Developer</title>

	<link rel="stylesheet" type="text/css" href="style.css"><!--Singular-->
	<style>
	a,a:visited {
	color: inherit;
	}
	/*
	When you are calling design-specific selectors, do it by class and always include the parent classes
	*/
	.site .site-nav .site-item .site-link {
	text-decoration: none
	}
	body {
	background-color: white;
	color: black;
	font-family: sans-serif;
	margin: 0;
	width: 100%;
	}
	.site-sidebar, .site-content {
	padding-top: 5em;
	}

	.site .site-sidebar {
	width: 300px;
	position: fixed;
	height: 100%;
	left: 0;
	top:0;
	margin: 0;
	}

	.site .site-header {
	width: 200px;
	margin: 0;
	padding: 0;
	}

	.site .site-nav {
	display: block;
	position: relative;
	}

	.site .site-header .site-name {
	color:black;
	float: left; /* Avoid floats*/
	float: none;
	font-weight: bold;
	font-size: 1.10em;
	margin: 0;
	}


	.site .site-content {
	margin: 0;
	margin-left: 300px;
	height: 100%;
	}


	.site .site-nav .site-list {
	list-style: none;
	padding-left: 75px;
	}

	.site .site-list .site-item:hover {
	text-decoration: underline;
	}
	.site .site-footer {
	position: relative;
	display: block;
	}
	</style>
	</head>

	<body class="site">
	<menu class="site-sidebar">
	<header id="site-header" class="site-header">
	<hgroup class="site-hgroup"> <!--<hgroup> tells the browser that the <p> is dependant on the <h1>-->
	<h1 id="site-name" class="site-name"><a href="/" rel="home" class="site-home-link">Samuel C. Allen</a></h1> <!--
	ID and class same for your own good (think large scale, you don't want to have to memorize two)
	Add class to make CSS calls, shouldn't call ID's
	For SEO, changing this to <h1>
	-->
	<p id="site-tagline" class="site-tagline">Web Developer/Photographer</p> <!--Add class to make CSS calls, shouldn't call ID's-->
	</hgroup>

	</header>

	<nav id="site-nav" class="site-nav">
	<ul class="nav-list">
	<li class="nav-item"><a href="#" class="nav-link">Web</a></li>
	<li class="nav-item"><a href="#" class="nav-link">Photo</a></li>
	<li class="nav-item"><a href="#" class="nav-link">Contact</a></li>
	</ul>
	</nav>
	</menu>

	<main id="site-content" class="site-content" role="main">
	<div>Content here.</div>
	<footer id="site-footer" class="site-footer" role="info">
	<p class="copyright">© 2015 Sameul C. Allen</p>
	</footer>
	</main>


	</body>
	</html>