diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..129e368a1
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 31db35cef..77ea96c7f 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# karma-clone
+node# karma-clone
 
 The aim of this exercise is to create a page that looks just like this one: 
 
diff --git a/css/store.css b/css/store.css
new file mode 100644
index 000000000..ce3b326e3
--- /dev/null
+++ b/css/store.css
@@ -0,0 +1,230 @@
+
+body {
+    font-family: 'Roboto', sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+
+
+
+:root {
+    --grey-dark: #292b2c;
+    --grey-light: #FAFAFA;
+    --orange: #CE5C08;
+    --white: #fff;
+}
+
+/* Navigation Styles*/
+header {
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 100px;
+    display: flex;
+}
+
+.logo-img {
+    max-height: 32px;
+    max-width: 32px;
+    display: block;
+}
+
+ul {
+    list-style: none;
+    display: flex;
+    gap: 10px;
+}
+
+.nav-item {
+    color: #9E9C9C;
+    text-decoration: none;
+    padding: 15px;
+}
+
+ul li a:hover {
+    color: #CE5C08;
+}
+
+.nav-head {
+    color: #39393F;
+    font-weight: 500;
+    text-decoration: none;
+}
+
+/* General Styles */
+.content {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.heading {
+    padding-bottom: 20px;
+    font-size: 3rem;
+    color: var(--orange);
+}
+
+.form {
+    width: 50%;
+    padding: 50px 90px 0 90px;
+    font-size: 1.5rem;
+}
+
+.block {
+    display: flex;
+    flex-direction: row;
+    margin: 40px 0 90px 0;
+    width: 100%;
+}
+
+.block-img {
+    width: 45%;
+}
+
+.name-area {
+    display: flex;
+    flex-direction: row;
+    gap: 25px;
+}
+
+.name-position {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 20px;
+}
+
+.label-style {
+    padding-bottom: 10px;
+}
+
+.address-area {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 20px;
+}
+
+    .address2 {
+        padding: 20px 0 10px 0;
+    }
+
+    .city-area {
+        display: flex;
+        flex-direction: row;
+        gap: 100px;
+    }
+
+    .city-position {
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 30px;
+    }
+
+    .postcode-input {
+        width: 200px;
+    }
+
+    /* Select option Styles */
+
+    .custom-select {
+        width: 360px;
+        height: 35px;
+        font-style: italic;
+        color: rgb(109, 100, 100);
+        appearance: none;
+        background-image: url("");
+        background-repeat: no-repeat;
+        background-position: calc(100% - 3px);
+        background-size: 30px;
+        background-color: white;
+    }
+
+    /* Fieldset and Legend Styles */
+    fieldset {
+        border: 0;
+        padding: 10px 0px 50px 0px;
+    }
+
+    legend {
+        padding-top: 20px;
+    }
+
+    .color-orange {
+        padding-right: 30px;
+        margin-right: 50px;
+    }
+
+    .radio-color {
+        width: 20px;
+        height: 20px;
+    }
+
+    .radio-color:checked {
+        accent-color: var(--orange);
+        border: 1px solid black;
+    }
+
+    /* Checkbox Area Styles */
+    .checkbox-area {
+        display: flex;
+        flex-direction: row;
+    }
+
+    .checkmark-label {
+        font-size: 1.2rem;
+    }
+
+    .custom-checkmark {
+        justify-self: flex-start;
+        align-self: flex-start;
+        margin: 5px;
+    }
+
+    .custom-checkmark:checked {
+        box-sizing: border-box;
+        content: url("../level-2/checkmark.svg");
+        background-repeat: no-repeat;
+        background-color: white;
+        appearance: none;
+        border: 1px solid black;
+        padding: 2px;
+        justify-self: flex-start;
+        align-self: flex-start;
+        margin: 0 10px 0 0;
+    }
+
+    .orange-text {
+        color: var(--orange);
+    }
+
+    /* Button Styles */
+    button {
+        background-color: var(--orange);
+        color: white;
+        width: 250px;
+        height: 50px;
+        font-size: 14px;
+        border-radius: 4px;
+        border: none;
+        margin: 20px 0 20px 0;
+    }
+
+    /* Footer Styles */
+    footer {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 150px;
+        margin-bottom: 50px;
+        border-top: 1px solid #FAF6F6;
+    }
+
+    .footer-imgs {
+        padding: 10px;
+        width: 15px;
+        height: 15px;
+        border: 1px solid #E9ECF3;
+        border-radius: 50px;
+    }
+
+    .footer-p {
+        color: #555151;
+    }
diff --git a/css/style.css b/css/style.css
index 5cb025cef..7fc0ff833 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,19 +1,266 @@
-
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
  /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 
-body {
-    font-family: 'Roboto', sans-serif;
-    -webkit-font-smoothing: antialiased;
-}
+ body {
+     font-family: 'Roboto', sans-serif;
+     -webkit-font-smoothing: antialiased;
+ }
+
+/* Navigation Styles*/ 
+ header {
+     justify-content: space-between;
+     align-items: center;
+     padding: 0 100px;
+     display: flex;
+ }
+
+ .logo-img {
+     max-height: 32px;
+     max-width: 32px;
+     display: block;
+ }
+
+ ul {
+     list-style: none;
+     display: flex;
+     gap: 10px;
+ }
+
+ .nav-item {
+     color: #9E9C9C;
+     text-decoration: none;
+     padding: 15px;
+ }
+
+ ul li a:hover {
+     color: #CE5C08;
+ }
+
+ .nav-head {
+     color: #39393F;
+     font-weight: 500;
+     text-decoration: none;
+ }
+
+ /* Hero Styles*/
+
+ .main-container {
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     color: #FFFFFF;
+     background-image: url("../img/first-background.jpg");
+     background-repeat: no-repeat;
+     background-size: cover;
+     background-position: center;
+     height: 550px;
+ }
+
+ h1 {
+     margin: 0;
+     font-size: 2.6rem;
+     font-weight: 200;
+     padding: 0;
+ }
+
+ .main-container-phrase2 {
+     display: flex;
+     justify-content: space-around;
+     font-size: 1.4rem;
+     padding-bottom: 20px;
+ }
+
+ button {
+     background-color: #CE5C08;
+     color: white;
+     padding: 15px 20px;
+     font-size: .875rem;
+     border-radius: 4px;
+     border: none;
+ }
+
+ /*  General Styles*/
+
+ .secondary-container {
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     height: 350px;
+     color: #39393F;
+ }
+
+ .secondary-container-phrase1 {
+     margin-bottom: 0;
+     font-size: 1.7rem;
+     font-weight: 10;
+ }
+
+ .secondary-imgs-text {
+     display: flex;
+     flex-direction: row;
+ }
+
+ .info1 {
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     flex-direction: column;
+     padding-right: 65px;
+ }
+
+ .info2 {
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     flex-direction: column;
+ }
+
+ .orange-imgs {
+     width: 100px;
+     height: 150px;
+     margin-bottom: 0;
+ }
+
+ .catch-phrases {
+     margin-top: 0;
+     font-size: 1.125rem;
+ }
+
+ hr {
+     color: #D9DBE0;
+ }
+
+ .block2 {
+     display: flex;
+     flex-direction: row;
+     margin: 40px 0 90px 0;
+     width: 100%;
+ }
+
+ .block2-img {
+     width: 45%;
+ }
+
+ .call-to-action {
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     background-color: #FFF5EE;
+     padding: 0 100px;
+     flex: 1;
+     width: 100%;
+ }
+
+ .block2-button {
+     background-color: #CE5C08;
+     color: white;
+     padding: 15px 30px;
+     font-size: .875rem;
+     border-radius: 4px;
+     justify-content: center;
+     text-decoration: none;
+ }
+
+ .button {
+     text-decoration: none;
+     color: white;
+ }
+
+ .block2-text {
+     font-size: 3em;
+     text-align: center;
+     padding: 0;
+     margin: 0 0 20px 0;
+ }
+
+ .block2-span {
+     color: #CE5C08;
+ }
+
+ /* Footer styles */
+
+ footer {
+     display: flex;
+     flex-direction: column;
+     justify-content: center;
+     align-items: center;
+     height: 150px;
+     margin-bottom: 50px;
+     border-top: 1px solid #FAF6F6;
+ }
+
+ .footer-imgs {
+     padding: 10px;
+     width: 15px;
+     height: 15px;
+     border: 1px solid #E9ECF3;
+     ;
+     border-radius: 50px;
+ }
+
+ .footer-p {
+     color: #555151;
+ }
+
+ .menu-img {
+     display: none;
+ }
+
+ @media only screen and (max-width: 576px) {
+
+     header {
+         padding: 0 10px;
+     }
+
+     .nav-bar {
+         visibility: hidden;
+     }
+
+     .menu-img {
+         display: block;
+     }
+
+     .secondary-container {
+         height: 700px;
+     }
+
+     .secondary-imgs-text {
+         flex-direction: column;
+         width: 100%;
+         padding: 0;
+     }
+
+     .info1 {
+         padding-right: 0;
+     }
+
+     .block2 {
+         flex-direction: column;
+         align-items: center;
+         justify-content: center;
+     }
+
+     .block2-img {
+         width: 100%;
+     }
 
-/**
- * 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'
- */
+     .call-to-action {
+         width: auto;
+     }
 
+     .block2-text {
+         padding: 80px 0 20px 0;
+         font-size: 1.8rem;
+     }
 
+     .block2-button {
+         margin-bottom: 80px;
+     }
+ }
\ No newline at end of file
diff --git a/img/karma-logo.svg b/img/karma-logo.svg
index d550e81d8..00bf0dedf 100755
--- a/img/karma-logo.svg
+++ b/img/karma-logo.svg
@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 216">
-	<path fill="#F15B2A"
-		d="M126.1 212.9c4.1 4.1 10.7 4.1 14.8 0 4.1-4.1 4.1-10.7 0-14.8l-28.6-28.6 18.1-18.1c8.4-8.4 13.6-20 13.6-32.9C144 92.8 123.2 72 97.5 72S51 92.8 51 118.5c0 12.8 5.2 24.5 13.6 32.9l18.1 18.1-18.1 18.1c-4.6 4.6-11 7.5-18.1 7.5-14.1 0-25.6-11.5-25.6-25.6v-159C20.9 4.7 16.2 0 10.5 0 4.7 0 0 4.7 0 10.5v159C0 195.2 20.8 216 46.5 216c12.8 0 24.5-5.2 32.9-13.6l18.1-18.1 28.6 28.6zm-46.7-76.3c-4.6-4.6-7.5-11-7.5-18.1 0-14.1 11.5-25.6 25.6-25.6 14.1 0 25.6 11.5 25.6 25.6 0 7.1-2.9 13.5-7.5 18.1l-18.1 18.1-18.1-18.1z" />
-	</svg>
\ No newline at end of file
+http://www.w3.org/2000/svg
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e742ef04..7cbe25e8d 100755
--- a/index.html
+++ b/index.html
@@ -7,13 +7,91 @@
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/style.css">
-    <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
+    <link rel="shortcut icon" type="image/x-icon"  href="~/Documents/GitHub/HTML-CSS-Module-Project/favicon.ico">
 </head>
 <body>
+    <header>
+    
+        <img alt="Karma logo" class="logo-img" src="./favicon.ico">
+        <nav class="nav-bar">
+            <ul class="nav-menu">
+                <li class="nav-head" class="nav-item"><a class="nav-link" href="#">Meet Karma</a></li>
+                <li class="nav-item"><a class="nav-link" href="#">How it Works</a></li>
+                <li class="nav-item"><a class="nav-link" href="#">Store</a></li>
+                <li class="nav-item"><a class="nav-link" href="#">Help</a></li>
+                <li class="nav-item"><a class="nav-link" href="#">Login</a></li>
+            </ul>
+            <div class="hamburger">
+                <span class="bar"></span>
+                <span class="bar"></span>
+                <span class="bar"></span>
+            </div>
+        </nav>
+    </header>
+    <main>
+        <section class="main-container">
+            <h1 class="main-container-phrase1">Introducing Karma</h1>
+            <p class="main-container-phrase2">Bring WiFi with you, everywhere you go.</p>
+            <button>Learn More</button>
+        </section>
+        
+        
+        <section class="secondary-container">
+            <p class="secondary-container-phrase1">Everyone needs a little Karma.</p>
+            <div class="secondary-imgs-text">
+                <div class="info1">
+                    <img class="orange-imgs" src="./img/icon-devices.svg">
+                    <p class="catch-phrases">Internet for all devices</p>
+                </div>
+                <div class="info1">
+                    <img class="orange-imgs" src="./img/icon-coffee.svg">
+                    <p class="catch-phrases">Boost your productivity</p>
+                </div>
+                <div class="info2">
+                    <img class="orange-imgs" src="./img/icon-refill.svg">
+                    <p class="catch-phrases">Pay as You Go</p>
+                </div>
+                <hr>
+            </div>
+        </section>
+        
+        </main>
+        
+        <div class="block2">
+            <img alt="" class="block2-img" src="./level-2/homepage-feature.png" width="599" height="439">
+            <div class="call-to-action">
+                <p class="block2-text"><span class="block2-span">"</span>Wherever I am, I just don't worry about my connection
+                    anymore.<span class="block2-span">"</span></p>
+                <button class="block2-button"><a class="button" href="./store.html">Get Karma Today</a></button>
+            </div>
+        </div>
+        
+        <footer>
+            <p>Join us on</p>
+        
+            <div>
+                <a href="#"><img alt="twitter" class="footer-imgs" src="./img/twitter-icon.svg"></a>
+                <a href="#"><img alt="facebook" class="footer-imgs" src="./img/facebook-icon.svg"></a>
+                <a href="#"><img alt="instagram" class="footer-imgs" src="./img/instagram-icon.svg"></a>
+            </div>
+        
+            <p class="footer-p">&#169Karma Mobility, Inc.</p>
+        </footer>
+        </body>
+        <script>
+            const hamburger = document.querySelector(".hamburger");
+            const navMenu = document.querySelector(".nav-menu");
 
-    <!-- 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 -->
+            hamburger.addEventListener("click", () => {
+                hamburger.classList.toggle("active");
+                navMenu.classList.toggle("active");
+            })
+
+            document.querySelectorAll("nav-item").forEach(n => n.
+                addEventListener("click", () => {
+
+                }))
+        </script>
+        
+        </html>
 
-</body>
-</html>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 000000000..9d7fc2242
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "HTML-CSS-Module-Project",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {}
+}
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..813dd3e14
--- /dev/null
+++ b/store.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Karma</title>
+    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="./css-store/style.css">
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+</head>
+
+<body>
+    <div class="main-container"></div>
+    <header>
+        <img alt="Karma logo" class="logo-img" src="./img/karma-logo.svg">
+        <nav>
+            <ul>
+                <li><a class="nav-head" href="#">Meet Karma</a></li>
+                <li><a class="nav-item" href="#">How it Works</a></li>
+                <li><a class="nav-item" href="#">Store</a></li>
+                <li><a class="nav-item" href="#">Blog</a></li>
+                <li><a class="nav-item" href="#">Help</a></li>
+                <li><a class="nav-item" href="#">Login</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <div class="content">
+
+        <form class="form">
+            <p class="heading">Order your Karma Wifi device today!</p>
+            <div class="name-area">
+                <div class="name-position">
+                    <label class="label-style" for="f-name" id="f-name">First name*</label>
+                    <input type="text" id="f-name" required>
+                </div>
+                <div class="name-position">
+                    <label class="label-style" for="l-name" id="l-name">Last name*</label>
+                    <input type="text" id="l-name" required>
+                </div>
+            </div>
+            <div class="address-area">
+                <label class="label-style" for="adrress" id="address">Address 1*</label>
+                <input type="text" id="address" required>
+                <label class="address2" id="address2" class="label-style" for="adrress2">Address 2</label>
+                <input type="text" id="address2">
+            </div>
+
+            <div class="city-area">
+                <div class="city-position">
+                    <label class="label-style" for="city" id="city">City*</label>
+                    <select type="text" id="city" class="custom-select" required>
+                        <option value="" disabled selected hidden>Select your city...</option>
+                    </select>
+                </div>
+                <div class="city-position">
+                    <label class="label-style" id="postcode" for="postcode" id="city">Postcode*</label>
+                    <input class="postcode-input" type="text" id="postcode" required>
+                </div>
+            </div>
+            <fieldset>
+                <legend>Select a colour</legend>
+                <input name="colour" type="radio" id="color-orange" class="radio-color" required>
+                <label class="color-orange" for="color-orange" id="color-orange">Karma orange</label>
+
+                <input name="colour" type="radio" id="color-grey" class="radio-color" required>
+                <label for="color-grey" id="color-grey">Space Grey</label>
+
+            </fieldset>
+            <div>
+                <div class="checkbox-area">
+                    <input type="checkbox" id="checkmark" class="custom-checkmark">
+                    <label for="checkmark" id="checkmark" class="checkmark-label">By placing your order you agree to
+                        Karma's <a class="orange-text" href="#">Terms and Conditions.</a>*</label>
+                </div>
+                <button>Place my order</button>
+            </div>
+        </form>
+
+        <div class="block">
+          <img class="block-img" src="./level-2/store-image_by-andrew-neel-unsplash.jpg">
+       </div>
+
+
+    </div>
+    <footer>
+        <p>Join us on</p>
+
+        <div>
+            <a href="#"><img alt="twitter" class="footer-imgs" src="./img/twitter-icon.svg"></a>
+            <a href="#"><img alt="facebook" class="footer-imgs" src="./img/facebook-icon.svg"></a>
+            <a href="#"><img alt="instagram" class="footer-imgs" src="./img/instagram-icon.svg"></a>
+        </div>
+
+        <p class="footer-p">&#169Karma Mobility, Inc.</p>
+    </footer>
+
+    </div>
\ No newline at end of file