goldsmith/index.html

## index.html
<html>
<head>
  <title>Grid</title>
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
	<link href='http://fonts.googleapis.com/css?family=Arvo|PT+Sans|Kreon|Crete+Round' rel='stylesheet' type='text/css'>
	<style type="text/css">
		body {
			background-image: url("http://subtlepatterns.com/patterns/project_papper_@2X.png")
		}

		a:hover {
			text-decoration: none;
		}
		.wrapper {
			width: 50%;
			margin: 0 auto;
		}

		#header {
			padding: 50px 0;
		}

		#logo {
			position: relative;
		}

		#logo a span {
			font-family: 'Crete Round';
			font-size: 4em;
			text-decoration: none;
			text-shadow: 1px 1px 1px black;
		}

		#menu {
			position: relative;
			margin: -20px 0 0 0;
		}

		#menu {
			font-size: 1.25em;
		}

		#intro {
			width: 100%;
			height: 350px;
		}

		#introi {
			padding: 10px 35px 0 40px;
			height: 100%;
		}

		#introl	{
			float: left;
			width: 45%;
			padding-left: 10px;
		}

		#introl h1 {
			margin-bottom: 30px;
			font-family: 'Crete Round', serif;
			font-size: 44.5px;
		}

		#introimg	{
			background-image: url("http://placehold.it/400x300&text=Screenshot");
			width: 400px;
			height: 100%;
			float: right;
		}

		#main {
			margin: 60px auto;
			width: 100%;
		}

		.feature-block {
			position: relative;
			display: inline-block;
			height: 400px;
			width: 25%;
			font-size: 1.2em;
			line-height: 1.4em;
		}

		.feature-block h2 {
			display: inline-block;
			text-align: center;
			margin-bottom: 20px;
		}

		#mainc {
			margin-right: 12%;
			margin-left: 12%;
		}

		.feature-block img {
			width: 100%;
			height: 200px;
		}


	</style>
</head>
<body>
	<!-- <div id="grid"> -->
		<div class="wrapper">
			<div id="header">
				<div id="logo">
					<a href="#"><span>CourseGraph</span></a>
				</div>
				<ul id="menu" class="nav-pills pull-right">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Graph</a></li>
					<li><a href="#">Connect</a></li>
				</ul>
			</div>
			<div id="intro">
				<div id="introi">
					<div id="introl">
						<h1>All your education <br />in one place.</h1>
						<p class="lead">CourseGraph lets you create a record of every course you've taken, at anywhere from Caltech to Coursera.</p>
						<a href="#" class="btn btn-large btn-primary">Start building your CourseGraph</a>
					</div>
					<div id="introimg"></div>
				</div>
			</div>
			<div id="main">
				<div id="mainl" class="feature-block pull-left">
					<h2>Connect With Learners</h2>
					<img src="http://placehold.it/200x210&text=Screenshot">
				</div>
				<div id="mainc" class="feature-block">
					<h2>Discover New Classes</h2>
					<img src="http://placehold.it/200x210&text=Screenshot">
				</div>
				<div id="mainr" class="feature-block pull-right">
					<h2>Find a Great Job</h2>
					<img src="http://placehold.it/200x210&text=Screenshot">
				</div>
			</div>
		</div>
	<!-- </div> -->
</body>
</html>
	<html>
	<head>
	<title>Grid</title>
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
	<link href='http://fonts.googleapis.com/css?family=Arvo\|PT+Sans\|Kreon\|Crete+Round' rel='stylesheet' type='text/css'>
	<style type="text/css">
	body {
	background-image: url("http://subtlepatterns.com/patterns/project_papper_@2X.png")
	}

	a:hover {
	text-decoration: none;
	}
	.wrapper {
	width: 50%;
	margin: 0 auto;
	}

	#header {
	padding: 50px 0;
	}

	#logo {
	position: relative;
	}

	#logo a span {
	font-family: 'Crete Round';
	font-size: 4em;
	text-decoration: none;
	text-shadow: 1px 1px 1px black;
	}

	#menu {
	position: relative;
	margin: -20px 0 0 0;
	}

	#menu {
	font-size: 1.25em;
	}

	#intro {
	width: 100%;
	height: 350px;
	}

	#introi {
	padding: 10px 35px 0 40px;
	height: 100%;
	}

	#introl {
	float: left;
	width: 45%;
	padding-left: 10px;
	}

	#introl h1 {
	margin-bottom: 30px;
	font-family: 'Crete Round', serif;
	font-size: 44.5px;
	}

	#introimg {
	background-image: url("http://placehold.it/400x300&text=Screenshot");
	width: 400px;
	height: 100%;
	float: right;
	}

	#main {
	margin: 60px auto;
	width: 100%;
	}

	.feature-block {
	position: relative;
	display: inline-block;
	height: 400px;
	width: 25%;
	font-size: 1.2em;
	line-height: 1.4em;
	}

	.feature-block h2 {
	display: inline-block;
	text-align: center;
	margin-bottom: 20px;
	}

	#mainc {
	margin-right: 12%;
	margin-left: 12%;
	}

	.feature-block img {
	width: 100%;
	height: 200px;
	}




	</style>
	</head>
	<body>
	<!-- <div id="grid"> -->
	<div class="wrapper">
	<div id="header">
	<div id="logo">
	<a href="#"><span>CourseGraph</span></a>
	</div>
	<ul id="menu" class="nav-pills pull-right">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Graph</a></li>
	<li><a href="#">Connect</a></li>
	</ul>
	</div>
	<div id="intro">
	<div id="introi">
	<div id="introl">
	<h1>All your education <br />in one place.</h1>
	<p class="lead">CourseGraph lets you create a record of every course you've taken, at anywhere from Caltech to Coursera.</p>
	<a href="#" class="btn btn-large btn-primary">Start building your CourseGraph</a>
	</div>
	<div id="introimg"></div>
	</div>
	</div>
	<div id="main">
	<div id="mainl" class="feature-block pull-left">
	<h2>Connect With Learners</h2>
	<img src="http://placehold.it/200x210&text=Screenshot">
	</div>
	<div id="mainc" class="feature-block">
	<h2>Discover New Classes</h2>
	<img src="http://placehold.it/200x210&text=Screenshot">
	</div>
	<div id="mainr" class="feature-block pull-right">
	<h2>Find a Great Job</h2>
	<img src="http://placehold.it/200x210&text=Screenshot">
	</div>
	</div>
	</div>
	<!-- </div> -->
	</body>
	</html>