diff --git a/css/style.css b/css/style.css
index 5cb025cef..cc9e5e773 100755
--- a/css/style.css
+++ b/css/style.css
@@ -4,8 +4,12 @@
 body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow-x: hidden;
 }
-
 /**
  * Add your custom styles below
  * 
@@ -16,4 +20,213 @@ body {
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
+/****General styles****/
+*, ::before, ::after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+ul{
+    list-style: none;
+}
+a{
+    text-decoration: none;
+}
+
+/*************************************header styles *********************************************/
+
+header{
+    display: grid;
+    grid-template-areas:
+    'lgo lgo alist alist';
+    width: 100%;
+    height: 40px;
+    color: #060505;
+    margin: 0 auto 20px auto;
+}
+header .logo{
+     grid-area: lgo;  
+     
+}
+header .list{
+    grid-area: alist;
+   
+}
+
+header .logo {
+    display: flex;
+    justify-content: flex-start;
+    padding-left: 5rem;
+    align-items: center;
+}
+
+header .logo img{
+    max-width: 25px;
+    object-fit: cover;
+    line-height: 40px;
+}
+
+header .list{
+    padding: 1px;
+}
+.list ul {
+    display: flex;
+    justify-content: center;
+    line-height: 40px;
+  
+}
+.list ul li{
+    margin: 10px;
+}
+
+.list ul li:nth-child(2){
+    color: rgba(170, 170, 170,.9);
+}
+
+.list ul li a{
+    text-align: center;
+    text-transform: capitalize;
+    padding: .5rem;
+    color: rgba(170, 170, 170,.6);
+}
+.list ul li a:hover{
+    color: #ee0707;
+}
+
+/************************************main styles*****************************************/
+main{
+   width: 100vw;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+
+main .karma {
+    position: relative;
+    width: 100vw;
+}
+
+main .karma img{
+    width: 100%;
+    object-fit: cover;
+}
+main .details {
+    position: absolute;
+    top: 50%;
+    left: 52%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    letter-spacing: 1.5px;
+    color: aliceblue;
+    transform: translate(-50%, -50%);
+
+}
+
+.details h1{
+    font-weight: 100;
+    font-size: 2.5rem;
+    text-transform: capitalize;
+}
+
+.details p{
+    font-weight: 100;
+    font-size: 1.3rem;
+    margin-bottom: 2rem;
+}
+
+.details button{
+    color: #fdf8f8;
+    text-align: center;
+    padding: 10px 20px;
+    outline: none;
+    text-transform: capitalize;
+    border: 1px solid coral;
+    background: coral;
+    border-radius: 3px;
+}
+
+/*********************************section styles********************************/
+
+section{
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 1rem;
+    justify-content: center;
+}
+
+section .karma1 {
+    flex: 1;
+    padding: 10px;
+    width: 100vw;
+}
+
+.karma1 h1 {
+    text-align: center;
+    letter-spacing: 2.3px;
+    font-size: 2.5rem;
+    font-weight: 90;
+    color: #2e2c2c;
+}
+
+.karma-img{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    padding: 1rem;
+}
+
+.karma-img div{
+    width: 14rem;
+}
+
+.karma-img p{
+    margin: 10px;
+    font-size: 1.2rem;
+    font-weight: 400;
+}
+
+/****************************************footer styles****************************************/
+
+footer {
+    width: 100vw;
+    height: 350px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 1rem;
+    padding: 2rem 1rem;
+    border-top: 1px solid rgba(195, 194, 194,.5);
+}
+footer h4 {
+    font-weight: 200;
+    margin: 1rem;
+}
+
+footer .links {
+    margin: 1rem;
+    width: 15%;
+    padding: 5px;
+    text-align: center;
+}
+.links a {
+    width: 10%;
+    padding: .555rem;
+}
+.links a img {
+    width: 25px;
+    height: 25px;
+    padding: 2px;
+    border-radius: 50%;
+    border: 1px solid rgba(196, 196, 196, .4);
+    display: inline-block;
+}
 
+footer h5{
+    color: #c6c6c6;
+    font-weight: 300;
+    letter-spacing: 1.5px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
old mode 100755
new mode 100644
index 3e742ef04..f0b305dcc
--- a/index.html
+++ b/index.html
@@ -14,6 +14,64 @@
     <!-- 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------------------------------>
+    <header>
+        <div class="logo">
+            <img src="img/karma-logo.svg" id="left-logo" alt="logo photo">
+        </div>
+        <div class="list">
+            <ul>
+                <li>Meet Karma</li>
+                <li>How it works</li>
+                <li><a href="#">store</a></li>
+                <li><a href="#">blog</a></li>
+                <li><a href="#">help</a></li>
+                <li><a href="#">login</a></li>
+            </ul>
+        </div>
+    </header>
+<!-----------------------------------main area------------------------------>
+    <main>
+        <div class="karma">
+            <img src="img/first-background.jpg" alt="background photo">
+            <div class="details">
+                <h1>introducing karma</h1>
+                <p>Bring WIFI with you, everywhere you go.</p>
+                <button>learn more</button>
+            </div>
+        </div>
+    </main>
+<!------------------------------------section-------------------------------->
+ 
+<section>
+    <article class="karma1">
+        <h1>Everyone needs a little Karma.</h1>
+        <div class="karma-img">
+            <div>
+                <img src="img/icon-devices.svg" alt=" device photo">
+                <p>Internet for all devices</p>
+            </div>
+            <div>
+                <img src="img/icon-coffee.svg" alt="coffee photo">
+                <p>Boost your productivity</p>
+            </div>
+            <div>
+                <img src="img/icon-refill.svg" alt="refill photo">
+                <p>Pay as You Go</p>
+            </div>
+        </div>
 
+    </article>
+</section>
+<!----------------------------------------footer------------------------------------------>
+<footer>
+    <h4>Join us on</h4>
+    <div class="links">
+        <a href="#"><img src="img/twitter-icon.svg" alt="twitter photo"></a>
+        <a href="#"><img src="img/facebook-icon.svg" alt="facebook photo"></a>
+        <a href="#"><img src="img/instagram-icon.svg" alt="instagram photo"></a>
+    </div>
+    <h5>&copy; karma mobility.inc</h5>
+</footer>
 </body>
 </html>