diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..b2580b0d9
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+.history
+.DS_Store
+.vscode
\ No newline at end of file
diff --git a/css/normalize.css b/css/normalize.css
index 957605911..c7fe88c83 100755
--- a/css/normalize.css
+++ b/css/normalize.css
@@ -142,7 +142,7 @@ dfn {
  */
 
 h1 {
-    font-size: 2em;
+    font-size: 4em;
     margin: 0.67em 0;
 }
 
@@ -340,7 +340,6 @@ input {
  * 2. Remove excess padding in IE 8/9/10.
  */
 
-input[type="checkbox"],
 input[type="radio"] {
     box-sizing: border-box; /* 1 */
     padding: 0; /* 2 */
diff --git a/css/store.css b/css/store.css
new file mode 100644
index 000000000..ad5ab6e58
--- /dev/null
+++ b/css/store.css
@@ -0,0 +1,141 @@
+section {
+    height: 1030px;
+    text-align: left;
+}
+
+fieldset {
+    border: none;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    row-gap: 4rem;
+    width: 75%;
+    text-align: left;
+}
+@media (max-width: 900px) {
+   form {
+    width: 90%;
+   } 
+    
+}
+form label, legend {
+    margin-bottom: 0.7rem;
+}
+
+form div:nth-child(5) {
+    text-align: center;
+}
+fieldset:nth-child(1) input, select {
+    height: 2rem;
+}
+
+fieldset:nth-child(1) label {
+    font-weight: bold;
+}
+
+fieldset:nth-child(1) {
+    display: flex;
+    flex-direction: column;
+    row-gap: 2rem;
+}
+
+fieldset:nth-child(3) {
+    display: flex;
+}
+
+fieldset:nth-child(3) label {
+    padding-left: 0.5rem;
+}
+.checkbox {
+    padding: 3px;
+    height: 25px;
+    max-width: 25px;
+    width: 100%;
+    appearance: none;
+    border: 1px solid #34495E;
+    border-radius: 4px;
+    transition-duration: 0.5s;
+    cursor: pointer;
+}
+
+.checkbox:checked {
+    content: url(/level-2/checkmark.svg);
+}
+
+.section__left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.section__left legend {
+    text-align: end;
+    font-weight: bold;
+}
+
+.section__wrapper {
+    display: grid;
+    grid-template-columns: 50% 50%;
+    height: 100%;
+}
+
+.section__wrapper img {
+    max-height: 1050px;
+}
+
+.section__wrapper h2 {
+    color: #f4861f;
+    font-size: 2rem;
+    width: 70%;
+}
+
+.name__wrapper {
+    display: grid;
+    grid-template-columns: 47% 48%;
+    column-gap: 5%;
+}
+
+.address__wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+.postcode {
+    display: grid;
+    grid-template-columns: 50% 30%;
+    column-gap: 20%;
+}
+
+.radio__wrapper {
+    display: flex;
+    column-gap: 2rem;
+}
+
+.radio__wrapper input {
+    accent-color: #E0633A;
+}
+
+.section__right {
+    background: url(/level-2/store-image_by-andrew-neel-unsplash.jpg) no-repeat;
+    background-size: cover;
+}
+
+@media (max-width: 768px) {
+    section {
+        height: 1850px;
+    }
+    .section__wrapper {
+        grid-template-columns: none;
+        grid-template-rows: 50% 50%;
+    }
+
+    form {
+        row-gap: 3rem;
+    }
+
+    form div:last-child {
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 5cb025cef..ddec17115 100755
--- a/css/style.css
+++ b/css/style.css
@@ -4,16 +4,334 @@
 body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
+    margin: 0 auto;
+    height: 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'
- */
+header {
+    height: 79px;
+}
+
+.header__container {
+    display: flex;
+    justify-content: space-around;
+    height: 100%;
+}
+
+.header__container img {
+    width: 35px;
+}
+
+.navbar {
+    display: flex;
+    column-gap: 3rem;
+    align-items: center;
+}
+
+/* Hamburger */
+menu {
+    text-align: center;
+    display: none;
+}
+
+.hamburger1 {
+    height: 40px;
+    display: grid;
+    grid-template-rows: repeat(3, 1fr);
+    justify-items: center;
+}
+  
+.hamburger1 div {
+    background-color: rgb(61, 61, 61);
+    position: relative;
+    width: 40px;
+    height: 5px;
+    margin-top: 7px;
+    transition: all 0.2s ease-in-out;
+}
+  
+#toggle1 {
+    display: none;
+}
+  
+#toggle1:checked + .hamburger1 .top {
+    transform: rotate(-45deg);
+    margin-top: 22.5px;
+}
+  
+#toggle1:checked + .hamburger1 .meat {
+    transform: rotate(45deg);
+    margin-top: -5px;
+}
+  
+#toggle1:checked + .hamburger1 .bottom {
+    transform: scale(0);
+}
+  
+#toggle1:checked ~ .navbar--mobile {
+    height: 300px;
+}
+  
+.navbar--mobile {
+    background-color: #fff;
+    display: grid;
+    position: relative;
+    grid-template-rows: repeat(5, 0.5fr);
+    grid-row-gap: 1rem;
+    height: 0px;
+    overflow: hidden;
+    transition: all 0.3s ease;
+    border-radius: 4px;
+}
+
+.navbar--mobile a:first-child {
+    margin-top: 1rem;
+}
+
+.navbar--mobile a:last-child {
+    margin-bottom: 1rem;
+}
+
+a {
+    text-decoration: none;
+    color: black;
+}
+
+a:nth-child(1) {
+    font-weight: bold;
+}
+
+a:hover {
+    cursor: pointer;
+    color: coral;
+}
+
+.main {
+    background-image: url("/img/first-background.jpg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 750px;
+}
+
+.main__container {
+    text-align: center;
+    color: white;
+}
+
+h1 {
+    font-weight: 100;
+}
+
+.main__container h2 {
+    font-size: 2em; 
+    font-weight: 100;
+}
+
+.main__container button, .content__text button, form button {
+    border: none;
+    display: inline-block;
+    padding: 15px 35px;
+    background-color: #f4861f;
+    color: #fff;
+    text-align: center;
+    cursor: pointer;
+    margin-top: 2rem;
+    border-radius: 5px;
+    font-size: 20px;
+}
+
+button:hover {
+    opacity: 0.5;
+}
+
+section {
+    height: 565px;
+    text-align: center;
+}
+
+.section__container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    row-gap: 2rem;
+}
 
+.section__container h2 {
+    font-size: 3rem;
+    font-weight: 100;
+}
+
+.container__icon {
+    display: flex;
+    justify-content: center;
+    column-gap: 3rem;
+}
+
+.section__container img {
+    width: 140px;
+}
+.container__icon div {
+    width: 300px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 2rem;
+}
+
+.container__icon p {
+    font-size: 29px;
+    height: 25px;
+    margin: 0;
+}
+
+.content__container {
+    display: grid;
+    grid-template-columns: 40% 60%;
+}
+
+.content__text {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(249, 229, 232);
+}
+
+.content__text a {
+    color: #fff;
+}
+
+.content__text h2 {
+    font-size: 2rem;
+    font-style: italic;
+}
+.content__container img {
+    height: 100%;
+}
+
+.content__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 50%;
+    text-align: center;
+}
+
+.content__wrapper span {
+    color: #f4861f;
+}
+
+.footer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 3rem;
+    height: 150px;
+    border-top: #b2b2b2 solid 1px;
+    row-gap: 1rem;
+}
+
+.footer img {
+    width: 25px;
+}
+
+.footer a {
+    width: 40px;
+    display: flex;
+    height: 40px;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    border: 1px solid #b2b2b2;
+}
+.footer div {
+    display: flex;
+    width: 150px;
+    justify-content: space-between;
+}
+
+
+
+@media (max-width: 768px) {
+    .header__container {
+        justify-content: space-between;
+        padding-left: 6%;
+        padding-right: 6%;
+    }
+
+    .navbar {
+        display: none;
+    }
+
+    menu {
+        display: grid;
+    }
+
+    .main__container h1 {
+        font-size: 3rem;
+    }
+
+    .main__container h2 {
+        font-size: 1.5rem;
+    }
+    
+    .main__container button {
+        font-size: 15px;
+    }
+
+    section {
+        height: 950px;
+    }
+
+    .section__container {
+        justify-content: unset;
+    }
+
+    .section__container h2 {
+        font-size: 2rem;
+    }
+
+    .container__icon {
+        justify-content: unset;
+        flex-direction: column;
+        align-items: center;
+        row-gap: 4rem;
+    }
+
+    .content__container {
+        grid-template-rows: 50% 50%;
+        grid-template-columns: none;
+    }
+
+    .content__img img {
+        max-width: 768px;
+        width: 100%;
+    }
+
+    .content__wrapper h2 {
+        font-size: 1.6rem;
+    }
+
+    .content__text button {
+        font-size: 15px;
+        margin-bottom: 1rem;
+        padding: 15px 25px;
+        margin-top: 1.5rem;
+    }
+}
+@media (max-width: 390px) {
+    .content__text button {
+        font-size: 12px;
+        padding: 15px 15px;
+        margin-top: unset;
+    }
 
+    .content__wrapper h2 {
+        font-size: 1.2rem;
+    }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e742ef04..b4b7a776e 100755
--- a/index.html
+++ b/index.html
@@ -4,16 +4,96 @@
     <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="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,100;1,300&display=swap" rel="stylesheet">
     <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">
 </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 -->
-
+    <header>
+        <div class="header__container">
+            <img src="/img/karma-logo.svg" alt="karma-logo">
+            <div class="navbar">
+                <a href="/index.html">Meet Karma</a>
+                <a href="#">How it Works</a>
+                <a href="/store.html">Store</a>
+                <a href="#">Blog</a>
+                <a href="#">Help</a>
+                <a href="#">Login</a>
+            </div>
+            <menu>
+                <nav id="navbar" class="navigation" role="navigation">
+                  <input id="toggle1" type="checkbox" />
+                  <label class="hamburger1" for="toggle1">
+                    <div class="top"></div>
+                    <div class="meat"></div>
+                    <div class="bottom"></div>
+                  </label>
+                  <nav class="navbar--mobile">
+                    <a href="/index.html">Meet Karma</a>
+                    <a href="#">How it Works</a>
+                    <a href="/store.html">Store</a>
+                    <a href="#">Blog</a>
+                    <a href="#">Help</a>
+                    <a href="#">Login</a>
+                  </nav>
+              </nav>
+            </menu>
+        </div>
+    </header>
+    <main>
+        <div class="main">
+            <div class="main__container">
+                <h1>Introducing Karma</h1>
+                <h2>Bring WiFi with you, everywhere you go.</h2>
+                <button>Learn more</button>
+            </div>
+        </div>
+    </main>
+    <section>
+        <div class="section__container">
+            <h2>Everyone needs a little Karma</h2>
+            <div class="container__icon">
+                <div>
+                    <img src="/img/icon-devices.svg" alt="Devices">
+                    <p>Internet for all devices</p>
+                </div>
+                <div>
+                    <img src="/img/icon-coffee.svg" alt="Coffee">
+                    <p>Boost your productivity</p>
+                </div>
+                <div>
+                    <img src="/img/icon-refill.svg" alt="Refill">
+                    <p>Pay as You Go</p>
+                </div>
+            </div>
+        </div>        
+    </section>
+    <content>
+        <div class="content__container" >
+            <div class="content__img">
+                <img src="/level-2/homepage-feature.png" alt="">
+            </div>
+            <div class="content__text">
+                <div class="content__wrapper">
+                    <h2><span>"</span>Wherever I am, I just don't worry about my connection anymore!<span>"</span></h2>
+                    <a href="/store.html"><button>Get Karma today</button></a>
+                </div>
+            </div>
+        </div>
+    </content>
+    <footer>
+        <div class="footer" id="contact">
+            <p>Join us on</p>
+            <div>
+                <a href="#"><img src="/img/twitter-icon.svg" alt=""></a>
+                <a href="#"><img src="/img/facebook-icon.svg" alt=""></a>
+                <a href="#"><img src="/img/instagram-icon.svg" alt=""></a>
+            </div>
+          <span>© Karma Mobility, Inc.</span>
+        </div>
+    </footer>
 </body>
 </html>
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..c06a33eb3
--- /dev/null
+++ b/store.html
@@ -0,0 +1,118 @@
+<!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 rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;1,100;1,300&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/store.css">
+    <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
+</head>
+<body>
+    <header>
+        <div class="header__container">
+            <img src="/img/karma-logo.svg" alt="karma-logo">
+            <div class="navbar">
+                <a href="/index.html">Meet Karma</a>
+                <a href="#">How it Works</a>
+                <a href="/store.html">Store</a>
+                <a href="#">Blog</a>
+                <a href="#">Help</a>
+                <a href="#">Login</a>
+            </div>
+            <menu>
+                <nav id="navbar" class="navigation" role="navigation">
+                  <input id="toggle1" type="checkbox" />
+                  <label class="hamburger1" for="toggle1">
+                    <div class="top"></div>
+                    <div class="meat"></div>
+                    <div class="bottom"></div>
+                  </label>
+                  <nav class="navbar--mobile">
+                    <a href="/index.html">Meet Karma</a>
+                    <a href="#">How it Works</a>
+                    <a href="/store.html">Store</a>
+                    <a href="#">Blog</a>
+                    <a href="#">Help</a>
+                    <a href="#">Login</a>
+                  </nav>
+              </nav>
+            </menu>
+        </div>
+    </header>
+    <section>
+        <div class="section__wrapper">
+            <div class="section__left">
+                <h2>Order your Karma WiFi device today</h2>
+                <form action="#">
+                    <fieldset>
+                        <div class="name__wrapper">
+                            <label for="firstName">First Name *</label>
+                            <label for="lasttName">Last Name *</label>
+                            <input type="text" name="" id="firstName" required>
+                            <input type="text" name="" id="lasttName" required>
+                        </div>
+                        <div class="address__wrapper">
+                            <label for="address">Address *</label>
+                            <input type="text" id="address" required>
+                        </div>
+                        <div class="address__wrapper">
+                            <label for="address2">Address 2 *</label>
+                            <input type="text" id="address2">
+                        </div>
+                        <div class="postcode">
+                            <label for="city">City *</label>
+                            <label for="postcode">Postcode *</label>
+                            <select name="city" id="city" required>
+                                <option value>Select your city...</option>
+                                <option value="london">London</option>
+                                <option value="edinburgh">Edinburgh</option>
+                                <option value="moscow">Moscow</option>
+                                <option value="madrid">Madrid</option>
+                                <option value="helsinki">Helsinki</option>
+                            </select>
+                            <input type="text" id="postcode" required>
+                        </div>
+                    </fieldset>
+                    <fieldset>
+                        <legend>Select a color</legend>
+                        <div class="radio__wrapper">
+                            <div>
+                                <input name="color" type="radio" id="orange" required>
+                                <label for="orange">Karma Orange</label>
+                            </div>
+                            <div>
+                                <input name="color" type="radio" id="grey">
+                                <label for="grey">Space grey</label>
+                            </div>
+                        </div>
+                    </fieldset>
+                    <fieldset>
+                        <input class="checkbox" type="checkbox" required name="" id="terms">
+                        <label for="terms">By placing your order you agree to Karma's <a href="#">Terms and Conditions</a>. *</label>
+                    </fieldset>
+                    <div>
+                        <button type="submit">Place my Order</button>
+                    </div>
+                </form>
+            </div>
+            <div class="section__right"></div>
+        </div>
+    </section>
+    <footer>
+        <div class="footer" id="contact">
+            <p>Join us on</p>
+            <div>
+                <a href="#"><img src="/img/twitter-icon.svg" alt=""></a>
+                <a href="#"><img src="/img/facebook-icon.svg" alt=""></a>
+                <a href="#"><img src="/img/instagram-icon.svg" alt=""></a>
+            </div>
+          <span>© Karma Mobility, Inc.</span>
+        </div>
+      </footer>
+</body>
+</html>
\ No newline at end of file