diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 46c150e15..73dc55e67 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -16,21 +16,22 @@ Please complete the details below this message
 
 # Your Details
 
-- Your Name:
-- Your City:
-- Your Slack Name:
+- Your Name: Krishan kumar
+- Your City: West Midlands
+- Your Slack Name: Krishan kumar
 
 # Homework Details
 
-- Module:
-- Week:
+- Module:Html/Css challenge
+- Week:2
 
 # Notes
 
 - What did you find easy?
-
+styling css 
 - What did you find hard?
-
+  really enjoying working on this project..but found hard to do debugging.
 - What do you still not understand?
-
+still unsure with using flexbox.
 - Any other notes?
+No Notes
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 5cb025cef..a80a9516f 100755
--- a/css/style.css
+++ b/css/style.css
@@ -6,14 +6,219 @@ body {
     -webkit-font-smoothing: antialiased;
 }
 
+.contents {
+    padding: 0 0.938rem;
+    margin: 0 auto;
+    min-width: 37.5rem;
+}
+:focus {
+    outline: none;
+}
+ul{list-style:none;padding:0;}
+/**
+ * Navigation Section
+ */
+.main_nav {
+    background-color: #fff;
+    position: fixed;
+    width: 100%;
+    border-bottom: 1px solid #DDD;
+    z-index: 9999;
+}
+.main_nav > .contents {
+    height: 4.375rem;
+}
+.main_nav .logo {
+    height: 4.375rem;
+}
+.main_nav .main_links {
+    float: right;
+    color: #838994;
+    font-size: 1.04rem;
+    margin-top: 1.7rem;
+}
+.main_nav .main_links li {
+    display: inline-block;
+    margin-left: 1.563rem;
+}
+.main_nav .main_links li.active {
+    color: #4c5058;
+    font-weight: 500;
+}
+.main_nav .main_links li:hover {
+    cursor: pointer;
+    color: #333333;
+}
+
+/**
+ * Introduction Section
+ */
+.intro {
+    background: url('../img/first-background.jpg') no-repeat center bottom;
+    background-size: cover;
+    height: 45.938rem;
+    overflow: auto;
+}
+.intro h1,
+.intro h3 {
+    color: white;
+    text-align: center;
+    font-weight: 300;
+}
+.intro h1 {
+    margin-top: 17.5rem;
+    font-size: 3.125rem;
+}
+.intro h3 {
+    margin-top: 1.25rem;
+    font-size: 1.563rem;
+}
+/**
+ * The buttons
+ */
+.intro .buttons {
+    color: white;
+    text-align: center;
+    margin-top: 1.563rem;
+}
+.intro .half {
+    width: 49%;
+    padding: 0 0.938rem;
+    display: inline-block;
+    vertical-align: bottom;
+    font-size: 1.125rem;
+    line-height: 1.2;
+}
+
 /**
- * Add your custom styles below
- * 
- * Remember: 
- * - Be organised, use comments and separate your styles into meaningful chunks
- *    for example: General styles, Navigation styles, Hero styles, Footer etc.
- * 
- * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
+ * The Three Case Images
  */
+.cases {
+    background-color: #fff;
+    overflow: hidden;
+    padding-bottom: 5rem;
+}
+.cases .contents {
+    margin-top: 7.875rem;
+    padding: none;
+    color: #1d1e21;
+    text-align: center;
+}
+.cases h2 {
+    font-size: 2.75rem;
+    margin: 1.625rem 0 3.125rem;
+    font-weight: 300;
+}
+.cases .devices > li {
+    width: 33.3333333%;
+    float:left;
+}
+.cases .devices h3 {
+    font-weight: 400;
+    font-size: 1.563rem;
+    margin: 2.5rem 0px 1.875rem;
+}
+.cases .devices p {
+    font-weight: 300;
+    font-size: 1.313rem;
+}
+
+/**
+ * Footer
+ */
+.social_links {
+    background-color: #fff;
+    overflow: auto;
+    padding-bottom: 9.375rem;
+    text-align: center;
+    padding-bottom:0;
+}
+.social_links hr {
+    border: 0;
+    border-top: 1px solid #eaebec;
+    margin: 1.313rem 0;
+}
+.social_links .icons > li {
+    border-radius: 1.25rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: inline-block;
+    margin: 1.25rem 5px;
+    border: 1px solid #eaebec;
+    padding: 0.625rem 0;
+    text-align: center;
+    box-sizing:border-box;
+}
+.social_links .icons > li:hover {
+    cursor: pointer;
+}
+.social_links .twitter {
+    color: #55acee;
+}
+.social_links .facebook {
+    color: #4c66a4;
+}
+.social_links .instagram {
+    color: #3f729b;
+}
+.social_links .copy {
+    font-size: 0.9rem;
+    font-weight: 300;
+    color: #838994;
+}
+
+/**
+ * Responsive Design
+ */
+@media (min-width: 48rem) {
+    .content {
+        width: 46rem;
+    }
+}
+@media (min-width: 62rem) {
+    .content {
+        width: 60rem;
+    }
+}
+@media (min-width: 75rem) {
+    .content {
+        width: 60%;
+    }
+}
+
+/* Chrome, Safari, Opera */ 
+@-webkit-keyframes bounce {
+    0%, 100% {margin-top: 0px;}
+    50% {margin-top: 2rem;}
+}
+/* Standard syntax */ 
+@keyframes bounce {
+    0%, 100% {margin-top: 0px;}
+    50% {margin-top: 2rem;}
+}
+
+
+/**
+ * button
+ */
+button {
+    width: 9.688rem;
+    background-color: #f15a29;
+    border-color: #f15a29;
+    text-shadow: none;
+    border-style: none;
+    border-radius: 4px;
+    padding: 1rem 1.5rem;
+    color: white;
+    font-size: 1.125rem;
+}
+button:hover {
+    background-color: #d9400e;
+    border-color: #cf3d0e;
+    cursor: pointer;
+}
 
+ .social-icons{
+      width:25px;
 
+ }
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e742ef04..2021821d2 100755
--- a/index.html
+++ b/index.html
@@ -11,9 +11,86 @@
 </head>
 <body>
 
-    <!-- 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 -->
+
+    <nav class="main_nav">
+        <div class="contents">
+            <ul class="main_links">
+                <li class="active">Meet Karma</li>
+                <li>How it Works</li>
+                <li>Store</li>
+                <li>Blog</li>
+                <li>Help</li>
+                <li>Login</li>
+            </ul>
+            <img class="logo"  src="img/karma-logo.svg" alt="Logo Image" width="26"/>
+        </div>
+    </nav>
+
+    <!--intro-->
+
+    <section class="intro">
+        <div class="contents">
+            <h1>Introducing Karma</h1>
+            <h3>Bring WiFi with you, everywhere you go.</h3>
+            <div class="buttons">
+                <button class="bigbutton">Learn More</button>
+            </div>
+        </div>
+    </section>
+ 
+
+    <section class="cases">
+        <div class="contents">
+            <h2>Everyone needs a little Karma.</h2>
+            <ul class="devices">
+                <li>
+                    <img width="127" height="127" src="img/icon-devices.svg" alt="Internet for all devices image">
+                    <div class="caption">
+                        <h3>Internet for all devices</h3>
+                    </div>
+                </li>
+                <li>
+                    <img width="127" height="127" src="img/icon-coffee.svg" alt="Boost your productivity image">
+                    <div class="caption">
+                        <h3>Boost your productivity</h3>
+                    </div>
+                </li>
+                <li>
+                    <img width="127" height="127" src="img/icon-refill.svg" alt="Pay as You Go image">
+                    <div class="caption">
+                        <h3>Pay as You Go</h3>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </section>
+
+    <!-- footer-->
+
+    <footer class="social_links">
+        <div class="contents">
+
+            <hr>
+            <h5>Join us on</h5>
+            <div class="icons">
+                <img class="social-icons" src= "img/twitter-icon.svg">
+                <img class="social-icons" src="img/facebook-icon.svg">
+                <img class="social-icons" src="img/instagram-icon.svg">
+            </div>
+                
+            
+            <span class="copy">
+                &copy; Karma Mobility, Inc.
+            </span>
+        </div>
+    </footer>
 
 </body>
 </html>
+
+
+
+
+
+
+