diff --git a/css/index.css b/css/index.css
index 0c9959c1e5..bab1152e2b 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,3 +1,399 @@
-/* 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 {
+    max-width: 100%;
+    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: block;
+}
 
+body {
+    line-height: 1;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+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 {
+
+    font-family: 'Titillium Web', sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: 'Bangers', cursive;
+    letter-spacing: 1px;
+    margin-bottom: 15px;
+}
+
+/* Your code starts here! */
+body {
+    margin: 0 auto;
+    width: 900px;
+}
+
+a {
+    text-decoration: none;
+    color: lightgrey;
+    font-size: 14px;
+}
+
+nav {
+    width: 100%;
+    padding: 40px 0 50px 0;
+    word-spacing: 50px;
+}
+
+.Navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+}
+
+nav a:first-child {
+    padding-left: 0;
+}
+
+.logo {
+    width: 200px;
+}
+
+header {
+    display: flex;
+    text-align: center;
+
+}
+
+h1 {
+    font-size: 75px;
+    display: flex;
+    margin-top: 60px;
+}
+
+/*.CirclePicture {
+        display: flex;
+    }*/
+.MainElement {
+    width: 420px;
+    display: flex;
+    flex-direction: column;
+}
+
+.CirclePicture {
+    display: flex;
+    width: 420px;
+    vertical-align: top;
+}
+
+.StartButton {
+    display: block;
+    background-color: white;
+    font-size: 18px;
+    padding: 2px 50px;
+    text-decoration: none;
+    border: 1px solid black;
+    margin: 0 auto;
+    margin-left:50px;
+    font-family: 'Titillium Web';
+}
+
+hr {
+    color: black;
+    background-color: black;
+    height: 1px;
+    width: 95%;
+    margin: 60px 0 0 0;
+    border: none;
+}
+
+.FeaturesAbout {
+    display: flex;
+    width: 420px;
+    margin-bottom: 40px;
+    flex-direction: column;
+}
+
+.container1 {
+    display: flex;
+}
+
+.container2 {
+    display: flex;
+}
+
+h2 {
+    font-size: 17px;
+    display: block;
+    margin: 25px 0;
+}
+
+.serprovis {
+    display: flex;
+    flex-direction: column;
+    width: 280px;
+    margin: 5px;
+}
+
+p {
+    line-height: 1.2;
+}
+
+footer {
+    text-align: center;
+    height: 100px;
+    padding: 20px;
+    font-size: 14px;
+}
+
+.hr2 {
+    color: black;
+    background-color: black;
+    height: 1px;
+    width: 95%;
+    margin: 40px 0 0 0;
+    border: none;
+}
+
+address {
+    line-height: 1.2;
+}
+
+/* media  */
+
+/*tablet*/
+@media (max-width:800px) {
+    .CirclePicture {
+        display:none;
+    }
+   
+    nav {
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+    }
+
+    .Navbar {
+        flex-direction: column-reverse;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        margin: 0 auto;
+    }
+   
+
+    header {
+        justify-content: center;
+    }
+
+    button {
+        text-align: center;
+    }
+
+    h1 {
+        text-align: center;
+    }
+
+    .container1 {
+        margin: 0 20px;
+        font-size: 15px;
+    }
+
+    .middle-img {
+        margin: 0 20px;
+        max-width: 100%;
+
+    }
+
+    .container2 {
+
+        margin: 0 20px;
+        font-size: 15px;
+    }
+
+    .ContactUs {
+        margin: 0 20px;
+        font-size: 15px;
+    }
+
+}
+
+/*Phone*/
+@media (max-width: 500px) {
+
+    .logo {
+        width: 150px;
+
+    }
+
+    nav {
+        flex-wrap: wrap;
+        align-items: center;
+        width: 100%;
+    }
+
+    a {
+        width: 100%;
+        text-align: center;
+        /* align-items:center; */
+        border-bottom: solid 1px grey;
+        font-size: 15px;
+        padding: 20px;
+    }
+
+    h1 {
+        font-size: 40px;
+        text-align: center;
+
+    }
+
+    .MainElement {
+        align-items: center;
+    }
+
+    .container1 {
+        flex-direction: column;
+    }
+
+    .container2 {
+        flex-direction: column;
+    }
+
+    .serprovis {
+        width: 100%;
+    }
+
+    .middle-img {
+        width: 400px;
+    }
+
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 476b4b8cb9..aa3204a720 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,11 @@
 <!doctype html>
 
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>Great Idea - Responsive I</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
   <link rel="stylesheet" href="css/index.css">
@@ -11,6 +13,125 @@
 </head>
 
 <body>
-<!-- Use past code you created here for Great Idea Web Page or past solution for Great Idea Web Page HTML here! -->
+
+  <div class="Navbar">
+    <!--navbar links go here-->
+    <nav>
+
+      <a href="services.html">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.">
+    </img>
+
+  </div>
+  <header>
+
+
+    <!--navbar end here-->
+    <div class="MainElement">
+      <!--Container-->
+
+      <h1>Innovation
+        <br>
+        <br>
+        On
+        <br>
+        <br>
+        Demand</h1>
+
+      <button class="StartButton">Get Started</button>
+
+    </div>
+    <div class="CirclePicture">
+      <img src="img/header-img.png" alt="Image of a code snippet.">
+
+    </div>
+
+  </header>
+
+  <hr>
+  <!--<span></span>-->
+  <!--First Row of info starts-->
+  <div class="container1">
+    <section class="FeaturesAbout">
+      <h3> Features</h3>
+      <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>
+    </section>
+
+    <section class="FeaturesAbout">
+      <h3>About</h3>
+      <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>
+
+    </section>
+  </div>
+
+
+  <!--First Row of info ends-->
+
+
+  <!--image of code bar begins-->
+
+  <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">
+  <!---Image of code bar ends-->
+
+  <!--Second Row of info begins-->
+  <div class="container2">
+    <section class="servprovis">
+      <h3>Services</h3>
+
+      <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>
+
+    </section>
+
+
+    <section class="servprovis">
+      <h3>Product</h3>
+      <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>
+    </section>
+
+    <section class="servprovis">
+      <h3>Vision</h3>
+      <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>
+      <!--Second row of info ends-->
+    </section>
+  </div>
+
+
+
+
+
+  <!---contact info starts here-->
+  <hr class="hr2">
+  <section class="ContactUs">
+    <h4>Contact</h4>
+    <address>123 Way 456 Street<br>
+      Somewhere, USA</address><br>
+    <p>1 (888) 888-8888</p>
+    <p>sales@greatidea.io</p>
+  </section>
+
+
+  <footer>
+    Copyright Great Idea! 2018
+
+  </footer>
+
+
+
+
+
 </body>
+
 </html>
\ No newline at end of file