diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000..22af6e3a0f
Binary files /dev/null and b/.DS_Store differ
diff --git a/css/index.css b/css/index.css
index 0c9959c1e5..595eeed369 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,3 +1,450 @@
 /* Use your own code or past solution for Great Idea Web Page CSS here! */
 
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
 
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: inline-block;
+}
+body {
+  line-height: 1;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Set every element's box-sizing to border-box */
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  font-family: "Titillium Web", sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-family: "Bangers", cursive;
+  letter-spacing: 1px;
+  margin-bottom: 15px;
+}
+
+/* Copy and paste your work from yesterday here and start to refactor into flexbox */
+
+.container {
+  width: 880px;
+  margin: 0 auto;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+header nav {
+  display: flex;
+  margin-top: 35px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+header nav a {
+  margin-right: 35px;
+  /* margin-left: 27px; */
+  font-size: 14px;
+  color: gray;
+  text-decoration: none;
+}
+
+.cover {
+  display: flex;
+  justify-content: space-between;
+}
+
+.cover .cover-content {
+  vertical-align: top;
+  font-size: 40px;
+  margin-top: 120px;
+  text-align: center;
+  padding: 0px 50px;
+  margin-bottom: -9px;
+  display: flex;
+  flex-direction: column;
+}
+@media (max-width: 500px) {
+  .cover .cover-content {
+    margin-top: 0;
+  }
+}
+
+.cover img {
+  display: flex;
+  margin-top: 69px;
+}
+
+.title {
+  margin-bottom: 5px;
+}
+
+button {
+  background: white;
+  /* vertical-align: top; */
+  margin-top: 1px;
+  padding: 3px 24px;
+  font-size: 12px;
+  border: 1px solid black;
+  border-radius: 5px;
+  cursor: pointer;
+  background: white;
+}
+.main-content {
+  border-top: 1px solid black;
+  margin-top: 48px;
+  padding-top: 33px;
+  margin-bottom: -50px;
+  display: flex;
+}
+
+.top-content {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.main-content .top-content .text-content {
+  width: 44%;
+  vertical-align: top;
+  margin: 15px 25px;
+}
+
+.middle-img {
+  margin-top: 69px;
+  width: 100%;
+}
+
+.bottom {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.bottom-content .bottom .text-content {
+  display: flex;
+  width: 29%;
+  vertical-align: top;
+  margin: 15px 15px;
+}
+
+.bottom-content {
+  margin-top: 10px;
+  display: flex;
+}
+
+.bottom .text-content {
+  /* display: flex; */
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.contact {
+  margin-top: 0;
+  padding: 39px 10px 0;
+}
+
+.contact h4 {
+  margin-top: 0;
+}
+
+.contact p {
+  margin: 20px 0;
+}
+
+footer {
+  margin: 80px 70px;
+}
+
+.copyright {
+  margin-left: 390px;
+  margin-bottom: 50px;
+}
+
+/* services styles */
+
+.top-header {
+  margin: 40px 0;
+}
+
+.labels {
+  font-size: 25px;
+}
+.squares {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.info-card {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.squares .info-card {
+  border: 2px solid black;
+  background: lightgray;
+  justify-content: space-between;
+  width: 45%;
+  margin: 5px;
+  padding: 15px;
+  margin-top: 30px;
+  margin-bottom: 30px;
+}
+
+.end {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.end .end-content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 45%;
+  margin: 5px;
+  padding: 10px;
+  margin-top: 15px;
+  margin-bottom: 25px;
+}
+
+.end .end-content p {
+  margin-bottom: 20px;
+}
+
+.end .end-content li {
+  margin-bottom: 15px;
+}
+
+@media (max-width: 800px) {
+  .container {
+    width: 100%;
+  }
+  .cover img {
+    display: none;
+  }
+  .cover-content {
+    margin: 0 auto;
+  }
+
+  header {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: center;
+    width: 100%;
+  }
+
+  .top-content {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+
+  .cover .cover-content {
+    margin-top: 0;
+  }
+
+  img .middle-image {
+    width: 100%;
+  }
+
+  .logo {
+    width: 200px;
+  }
+
+  .copyright {
+    margin-left: 292px;
+  }
+}
+
+@media (max-width: 500px) {
+  .container {
+    width: 100%;
+  }
+
+  header nav {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  header nav a {
+    font-size: 20px;
+    border-bottom: 1px solid gray;
+    width: 100%;
+    text-align: center;
+    padding-bottom: 10px;
+    margin-right: 0;
+    padding-top: 10px;
+  }
+
+  .cover {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .top-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .text-content p {
+    width: 210%;
+  }
+
+  .bottom {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bottom-content .bottom .text-content {
+    width: 96%;
+  }
+
+  .contact {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .copyright {
+    margin-left: 175px;
+    margin-bottom: 50px;
+  }
+
+  .logo {
+    margin-top: 20px;
+    margin-bottom: -20px;
+  }
+}
diff --git a/index.html b/index.html
index 476b4b8cb9..9da591728f 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,127 @@
-<!doctype html>
+<!DOCTYPE html>
 
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Great Idea - Responsive I</title>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Great Idea - Responsive I</title>
 
-  <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
-  <link rel="stylesheet" href="css/index.css">
+    <link
+      href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="css/index.css" />
+  </head>
 
-</head>
+  <body>
+    <body>
+      <div class="container">
+        <header>
+          <nav>
+            <a href="#">Services</a>
+            <a href="#">Product</a>
+            <a href="#">Vision</a>
+            <a href="#">Features</a>
+            <a href="#">About</a>
+            <a href="#">Contact</a>
+          </nav>
+          <img
+            class="logo"
+            src="img/logo.png"
+            alt="Great Idea! Company logo."
+          />
+        </header>
 
-<body>
-<!-- Use past code you created here for Great Idea Web Page or past solution for Great Idea Web Page HTML here! -->
-</body>
-</html>
\ No newline at end of file
+        <section class="cover">
+          <div class="cover-content">
+            <h2 class="title">
+              Innovation<br />
+              On<br />
+              Demand
+            </h2>
+            <button>Get Started</button>
+          </div>
+          <img
+            class="circle-img"
+            src="img/header-img.png"
+            alt="Image of a code snippet."
+          />
+        </section>
+
+        <section class="main-content">
+          <div class="top-content">
+            <div class="text-content">
+              <h4>Features</h4>
+              <p>
+                Aliquam elementum magna eros, ac posuere elvit tempus et.
+                Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu
+                ornare nisl. Nullam convallis augue justo, at imperdiet metus
+                scelerisque quis.
+              </p>
+            </div>
+            <div class="text-content">
+              <h4>About</h4>
+              <p>
+                Aliquam elementum magna eros, ac posuere elvit tempus et.
+                Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu
+                ornare nisl. Nullam convallis augue justo, at imperdiet metus
+                scelerisque quis.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <img
+          class="middle-img"
+          src="img/mid-page-accent.jpg"
+          alt="Image of code snippets across the screen"
+        />
+
+        <section class="bottom-content">
+          <div class="bottom">
+            <div class="text-content">
+              <h4>Services</h4>
+              <p class="bottom-service">
+                Aliquam elementum magna eros, ac posuere elvit tempus et.
+                Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu
+                ornare nisl. Nullam convallis augue justo, at imperdiet metus
+                scelerisque quis.
+              </p>
+            </div>
+            <div class="text-content">
+              <h4>Product</h4>
+              <p>
+                Aliquam elementum magna eros, ac posuere elvit tempus et.
+                Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu
+                ornare nisl. Nullam convallis augue justo, at imperdiet metus
+                scelerisque quis.
+              </p>
+            </div>
+            <div class="text-content">
+              <h4>Vision</h4>
+              <p>
+                Aliquam elementum magna eros, ac posuere elvit tempus et.
+                Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu
+                ornare nisl. Nullam convallis augue justo, at imperdiet metus
+                scelerisque quis.
+              </p>
+            </div>
+          </div>
+        </section>
+        <hr />
+
+        <section class="contact">
+          <h4>Contact</h4>
+          <p>
+            123 Way 456 Street<br />
+            Somewhere, USA
+          </p>
+          <p>1 (888) 888-8888</p>
+          <p>sales@greatidea.io</p>
+        </section>
+
+        <h3 class="copyright">&copy; Great Idea! 2018</h3>
+      </div>
+    </body>
+  </body>
+</html>