diff --git a/css/normalize.css b/css/normalize.css
index 957605911..22f7044ef 100755
--- a/css/normalize.css
+++ b/css/normalize.css
@@ -266,6 +266,7 @@ textarea {
     color: inherit; /* 1 */
     font: inherit; /* 2 */
     margin: 0; /* 3 */
+    margin-top: 20px;
 }
 
 /**
diff --git a/css/style.css b/css/style.css
index 5cb025cef..ef791dd1f 100755
--- a/css/style.css
+++ b/css/style.css
@@ -16,4 +16,136 @@ body {
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
+ /* Header */
+.container{
+    width: 100%;
+    margin: auto;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-around;
+    padding: 20px;
+}
+
+.header_logo{
+    height: 35px;
+    width: 35px;
+    /* margin-left: 10%; */
+    
+}  
+
+header{
+    background-color: white;
+    color: rgb(53, 51, 51);
+    padding-top: 10px;
+    min-height: 70px; 
+    cursor: pointer;
+}
+
+ul{
+    margin: 0;
+    padding: 0;
+}
+
+header li{
+    display: inline;
+    padding: 0 20px 0 20px;  
+}
+
+li:first-child {
+    font-weight: bold;
+}
+
+li:hover {
+    color : orange;
+}
+
+/* Panel styles */
+.panel-container {
+    /* background-image: url('../img/first-background.jpg') ; */
+    background: url('../img/first-background.jpg') no-repeat  center/cover ;
+    width: 100%;
+    height: 550px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    
+}
+
+.panel-container p, h1, button {
+    color: white;    
+}
+
+.panel-container h1, p {
+    font-weight: 300;
+    margin: 15px;
+}
+
+.panel-container button {
+    background-color: orangered;
+    border-radius: 2px;
+    font-weight: 100;
+    font-size: x-small;
+    width: 80px;
+    height: 30px;
+    border-style: none;
+    /* padding-top: 10px; */
+}
+
+
+/* Newsletter */
+.newsletter-container-head {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.newsletter-container-head h1 {
+    color: rgb(48, 47, 47);
+    font-weight: 300;    
+}
+
+#newsletter-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    margin: 20px;
+} 
+
+#newsletter-container img {
+    width: 45%;
+    margin-bottom: 15px;
+    align-content: space-around;
+}
+
+hr {
+    width: 80%;
+}
+
+/* Footer */
+
+footer {
+    text-align: center;
+}
+
+footer img {
+    width: 25px;
+}
+
+.footer_icon {
+    display: inline-block;
+    margin: 15px;
+    border: 2px solid rgb(175, 168, 168);
+    border-radius: 50%;    
+    padding: 13px;    
+}
+
+footer p {
+    font-weight: 400;
+}
+.footer_copyright {
+    font-weight: 400;
+    color: grey;
+}
 
diff --git a/index.html b/index.html
index 3e742ef04..fd1eedf27 100755
--- a/index.html
+++ b/index.html
@@ -14,6 +14,62 @@
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
     <!-- All the images you need are in the 'img' folder -->
+    <header>
+        <div class="container">
+            <img class="header_logo" src="./img/karma-logo.svg" />
+            <nav>
+                <ul>
+                    <li>Meet Karma</li>
+                    <li>How it Works</li>
+                    <li>Store</li>
+                    <li>Blog</li>
+                    <li>Help</li>
+                    <li>Login</li>
+                </ul>
+            </nav>
+        </div>
+    </header>
 
+    <main>
+        <section class= "container">            
+            <div class="panel-container">
+                <h1>Introducing Karma </h1>
+                <p>Bring WiFi with you, everywhere you go.</p>
+                <button>Learn More</button>
+            </div>
+        </section>
+        <section class="newsletter-container-head">            
+            <h1>Everyone needs a little Karma.</h1>         
+            <div id="newsletter-container">
+                <div >
+                    <img src="./img/icon-devices.svg" alt="Device Icon" />
+                    <p>Internet for all devices</p>
+                </div>
+                <div >
+                    <img src="./img/icon-coffee.svg" alt="Coffee Icon" />
+                    <p>Boost your productivity</p>
+                </div>
+                <div>
+                    <img src="./img/icon-refill.svg" alt="Refill Icon" />
+                    <p>Pay as you Go</p>
+                </div>
+            </div>
+        </section>
+        <hr/>
+    </main>
+
+    <footer>
+        <p>Join us on</p>
+        <div class="footer_icon">
+            <img src="./img/twitter-icon.svg" alt="Twitter Icon" />
+        </div>
+        <div class="footer_icon">
+            <img src="./img/facebook-icon.svg" alt="Facebook Icon" /> 
+        </div>
+        <div class="footer_icon">
+            <img src="./img/instagram-icon.svg" alt="Instagram Icon" /> 
+        </div>
+        <p class="footer_copyright">© Karma Mobility, Inc.
+    </footer>
 </body>
 </html>