diff --git a/app.css b/app.css
new file mode 100644
index 0000000..d9eeacb
--- /dev/null
+++ b/app.css
@@ -0,0 +1,258 @@
+*{
+	padding:0;
+	margin:0;
+}
+
+.border{
+	border-bottom:solid 4px yellow;
+}
+/* header {
+	display: flex;
+} */
+
+.new {
+	display:flex;
+	background-color: black;
+	/* padding-bottom: 25px; */
+	/* height: 70px; */
+	/* flex-wrap:row; */
+	align-items:center;
+	font-family: 'Merriweather', serif;
+	padding-top: 20px;
+	padding-bottom: 40px;
+	padding-left: 40px;
+}
+
+.new ul li{
+	display:inline-block;
+	/* padding-left: 80px; */
+	align-content: left;
+	margin-left: 80px;
+}
+
+/* #nav yellowletters{
+	text-decoration: none;
+} */
+
+.greybox{
+	display:flex;
+	background-color:#ccc;
+	/* height: 70px; */
+	justify-content: center;
+	color:black;
+	padding-bottom: 1px;
+	padding-top: 20px;
+	font-family: 'Merriweather', serif;
+}
+
+#yellowletters {
+	color:yellow;
+	font-weight: bold;
+	font-size: 30px;
+	text-decoration: none;
+}
+
+
+.whiteletters{
+	color:white;
+	font-weight: bold;
+	font-size:20px;
+	font-family: 'Oswald', sans-serif;
+	text-decoration: none;
+}
+
+a{
+	color:white;
+	text-decoration: none;}
+
+s{
+	color:rgb(80, 75, 75)}
+
+body{
+	font-family: 'Source Sans Pro', sans-serif;
+	font-size: 20px;
+}
+
+
+
+.underline{
+	color: black;
+	text-decoration: none;
+	border-bottom: 3px solid yellow;
+	justify-content: space-around;
+}
+
+/* <img src ="images/coworking.jpg"/> */
+
+
+.picture-perfect {
+	/* background-image: url(images/coworking.jpg);
+	background-repeat:  no-repeat;
+	height: 500px;
+	background-size: 100%;
+	overflow: hidden;
+	padding: 2% 3%;
+	box-shadow: inset 0 0 5px rgba(0,0,0,.75); */
+	
+	/* flex-wrap: wrap; */
+	background-image: url(images/coworking.jpg);
+	background-repeat: no-repeat;
+	/* position:absolute; */
+    background-position: center 0px;
+    background-size: cover;
+	height: 800px;
+    position: relative;
+	background-origin: padding-box;
+	box-shadow: inset 0 0 5px rgba(0,0,0,.75);
+	
+
+}
+
+.boxme{
+		background: rgba(255,255,255,.8);
+		width: 35%;
+		font-size:20px;
+		margin:  100px;
+		padding: 4%;
+		float: right;
+		box-shadow: 0 0 5px rgba(0,0,0,.75);
+}
+#button {
+	/* display:flex;
+    background-color:yellow; 
+	color: black;
+	padding: 15px 32px;
+	position: relative;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+	font-size: 16px;
+	font-family: 'Oswald', sans-serif; */
+
+
+letter-spacing: 1px;
+font-weight: bold;
+background-color:yellow; 
+color: black;
+display: block;
+text-align: center;
+padding: 12px;
+margin-top: 15px;
+box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
+border-radius: 5px;
+font-size:18px;
+}
+
+#button b{
+	color: black;
+}
+
+
+
+/* .row {
+	
+	margin: 90px;
+	margin-left: 10px;
+	padding-left:80px, 90px;
+	flex-flow:row;	
+	line-height: 20px;
+	font-size: 20px;
+} */
+.row{
+	display: flex;
+	flex-wrap: wrap;
+	/* padding-left: 90px; */
+	margin: 0 auto;
+	line-height: 20px;
+	font-size: 16px;
+	margin-left:20px;
+}
+
+
+ /* .col4 {
+    width: calc(8.333%*4);
+	min-height: 100px;
+	margin-left: 14px;
+	padding-left: 12px;
+	box-shadow: inset -1px 0 0 rgba(0,0,0,.15);
+	justify-content: space-evenly;
+  } */
+
+  .col4 {
+  width: calc(8.3333% *4 - 30px - 20px - 1px - 90px - 40px);
+  min-height: 100px;
+  margin-left: 20px;
+  margin-top: 30px; 
+  padding-left: 20px;
+  padding-right: 90px; 
+  /* padding-right:90px; */
+  border-right: 1px solid gray;
+ 
+}
+
+.row h2 {
+	font-size:16.5px;
+}
+ 
+  .col5 {
+
+  width: calc(8.3333% *4  - 1px - 90px - 40px);
+  min-height: 100px;
+  /* margin-left: 50px; */
+  margin-top: 40px; 
+  /* padding-left: 20px; */
+  padding-right: 90px; 
+  /* padding-right:90px; */
+  margin-left: 20px;
+	
+  }
+
+
+
+h2{
+	margin-bottom:15px;
+
+}
+.button{
+background-color:#ccc; 
+color: black;
+padding: 10px;
+margin-top: 15px;
+text-align: center;
+text-decoration: none;
+display: inline-block;
+font-size: 16px;
+font-family: 'Oswald', sans-serif; 
+border-radius: 10px;
+
+/* font-family: 'Oswald', sans-serif;
+letter-spacing: 1px;
+background:#cccc;
+color: black;
+display: block;
+text-align: center;
+padding: 12px;
+margin-top: 15px;
+box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
+border-radius: 10px;
+font-size: 14px; */
+}
+
+.button b {
+	color: black;
+}
+
+
+.border nav a:hover {
+	color: yellow;
+}
+footer {
+		display:flex;
+		background-color: black;
+		color:white;	
+		font-size: 20px;
+		padding:10px;
+		margin-top:25px;
+	}
+		
+		
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..cff6e82
--- /dev/null
+++ b/index.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Oswald:700|Merriweather:700,700italic' rel='stylesheet'type='text/css'>
+	<link rel="stylesheet" href="app.css">
+	<title>Startup Matchmaker</title>
+</head>
+
+
+<body>
+<div class="border">
+	<header>
+		<nav class="new">
+			<ul>
+			<a id="yellowletters" href="#" target="_blank" >Startup Matchmaker</a> 
+		<li><a class="whiteletters" href="#" target="_blank" >DEVELOPERS</a></li>            
+	    <li> <a class="whiteletters" href="#" target="_blank" >DESIGNERS</a></li>
+       <li> <a href="#" target="_blank" >How it works</a></li>
+       <li><a href="#" target="_blank" >Our Team</a> </li>
+       <li><a href="#" target="_blank" >Blog</a> </li>
+			</ul>
+		</nav>
+	</header>
+</div>
+
+<div class="greybox">
+	<h2>Because two brains <s>taste</s> <span class="underline">are</span> better than one.</h2>
+</div>
+
+
+	<div class=wrapper>
+	<section class="picture-perfect" >
+			<div class="boxme">	
+					<h2>Meet your Match!</h2>
+						Have a great idea for a product, but need help making it a reality? We're here to help. Startup matchmaker is the best place for designers and developers to find eachother.
+						<div id="button" ><a href="#" target="_blank" ><b>CREATE A PROFILE</b></a></div>
+				</div>
+	</section>
+</div>
+
+
+<div class="row">
+	<div class="col4">
+		<h2>Create a Profile</h2>
+		Are you a Designer? Developer? Put yourself out there so that others can find you!
+		<br>
+		<div class="button" ><a href="#" target="_blank" ><b>SIGN UP NOW</b></a></div>
+		
+	</div>
+
+
+		<div class="col4">
+		   <h2>Find a Developer</h2>
+		Looking for a fantastic developer to work with on the next big thing? Look no further.
+		<br>
+		<div class="button" ><a href="#" target="_blank" ><b>START YOUR SEARCH</b></a></div>
+	</div>
+
+	
+		<div class="col5">
+		   <h2>Find a Designer</h2>
+		Need someone who can make a product intuitive and appealing? Get ready.
+		<br>
+		<div class="button" ><a href="#" target="_blank" ><b>START YOUR SEARCH</b></a></div>
+	</div>
+
+</div>
+</body>
+
+<footer>
+		<div>
+			© 2013 Startup Matchmaker. Made in NY.
+		</div>
+	</footer>
+</html>
\ No newline at end of file
diff --git a/styles/app.css b/styles/app.css
new file mode 100644
index 0000000..b882d3a
--- /dev/null
+++ b/styles/app.css
@@ -0,0 +1,257 @@
+*{
+	padding:0;
+	margin:0;
+}
+
+.border{
+	border-bottom:solid 4px yellow;
+}
+/* header {
+	display: flex;
+} */
+
+.new {
+	display:flex;
+	background-color: black;
+	/* padding-bottom: 25px; */
+	/* height: 70px; */
+	/* flex-wrap:row; */
+	align-items:center;
+	font-family: 'Merriweather', serif;
+	padding-top: 20px;
+	padding-bottom: 40px;
+	padding-left: 40px;
+}
+
+.new ul li{
+	display:inline-block;
+	/* padding-left: 80px; */
+	align-content: left;
+	margin-left: 80px;
+}
+
+/* #nav yellowletters{
+	text-decoration: none;
+} */
+
+.greybox{
+	display:flex;
+	background-color:#ccc;
+	/* height: 70px; */
+	justify-content: center;
+	color:black;
+	padding-bottom: 1px;
+	padding-top: 20px;
+	font-family: 'Merriweather', serif;
+}
+
+#yellowletters {
+	color:yellow;
+	font-weight: bold;
+	font-size: 30px;
+	text-decoration: none;
+}
+
+
+.whiteletters{
+	color:white;
+	font-weight: bold;
+	font-size:20px;
+	font-family: 'Oswald', sans-serif;
+	text-decoration: none;
+}
+
+a{
+	color:white;
+	text-decoration: none;}
+
+s{
+	color:rgb(80, 75, 75)}
+
+body{
+	font-family: 'Source Sans Pro', sans-serif;
+	font-size: 20px;
+}
+
+
+
+.underline{
+	color: black;
+	text-decoration: none;
+	border-bottom: 3px solid yellow;
+	justify-content: space-around;
+}
+
+/* <img src ="images/coworking.jpg"/> */
+
+
+.picture-perfect {
+	/* background-image: url(images/coworking.jpg);
+	background-repeat:  no-repeat;
+	height: 500px;
+	background-size: 100%;
+	overflow: hidden;
+	padding: 2% 3%;
+	box-shadow: inset 0 0 5px rgba(0,0,0,.75); */
+	
+	/* flex-wrap: wrap; */
+	background-image: url(images/coworking.jpg);
+	background-repeat: no-repeat;
+	/* position:absolute; */
+    background-position: center 0px;
+    background-size: cover;
+	height: 800px;
+    position: relative;
+	background-origin: padding-box;
+	box-shadow: inset 0 0 5px rgba(0,0,0,.75);
+	
+
+}
+
+.boxme{
+		background: rgba(255,255,255,.8);
+		width: 35%;
+		font-size:20px;
+		margin:  100px;
+		padding: 4%;
+		float: right;
+		box-shadow: 0 0 5px rgba(0,0,0,.75);
+}
+#button {
+	/* display:flex;
+    background-color:yellow; 
+	color: black;
+	padding: 15px 32px;
+	position: relative;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+	font-size: 16px;
+	font-family: 'Oswald', sans-serif; */
+
+
+letter-spacing: 1px;
+font-weight: bold;
+background-color:yellow; 
+color: black;
+display: block;
+text-align: center;
+padding: 12px;
+margin-top: 15px;
+box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
+border-radius: 5px;
+font-size:18px;
+}
+
+#button b{
+	color: black;
+}
+
+
+
+/* .row {
+	
+	margin: 90px;
+	margin-left: 10px;
+	padding-left:80px, 90px;
+	flex-flow:row;	
+	line-height: 20px;
+	font-size: 20px;
+} */
+.row{
+	display: flex;
+	flex-wrap: wrap;
+	/* padding-left: 90px; */
+	margin: 0 auto;
+	line-height: 20px;
+	font-size: 16px;
+	margin-left:20px;
+}
+
+
+ /* .col4 {
+    width: calc(8.333%*4);
+	min-height: 100px;
+	margin-left: 14px;
+	padding-left: 12px;
+	box-shadow: inset -1px 0 0 rgba(0,0,0,.15);
+	justify-content: space-evenly;
+  } */
+
+  .col4 {
+  width: calc(8.3333% *4 - 30px - 20px - 1px - 90px - 40px);
+  min-height: 100px;
+  margin-left: 20px;
+  margin-top: 30px; 
+  padding-left: 20px;
+  padding-right: 90px; 
+  /* padding-right:90px; */
+  border-right: 1px solid gray;
+ 
+}
+
+.row h2 {
+	font-size:16.5px;
+}
+ 
+  .col5 {
+
+  width: calc(8.3333% *4  - 1px - 90px - 40px);
+  min-height: 100px;
+  /* margin-left: 50px; */
+  margin-top: 40px; 
+  /* padding-left: 20px; */
+  padding-right: 90px; 
+  /* padding-right:90px; */
+  margin-left: 20px;
+	
+  }
+
+
+
+h2{
+	margin-bottom:15px;
+
+}
+.button{
+background-color:#ccc; 
+color: black;
+padding: 10px;
+margin-top: 15px;
+text-align: center;
+text-decoration: none;
+display: inline-block;
+font-size: 16px;
+font-family: 'Oswald', sans-serif; 
+border-radius: 10px;
+
+/* font-family: 'Oswald', sans-serif;
+letter-spacing: 1px;
+background:#cccc;
+color: black;
+display: block;
+text-align: center;
+padding: 12px;
+margin-top: 15px;
+box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
+border-radius: 10px;
+font-size: 14px; */
+}
+
+.button b {
+	color: black;
+}
+
+
+.border nav a:hover {
+	color: yellow;
+}
+footer {
+		display:flex;
+		background-color: black;
+		color:white;	
+		font-size: 20px;
+		padding:10px;
+		margin-top:25px;
+	}
+		
\ No newline at end of file