diff --git a/css/style.css b/css/style.css
index 5cb025cef..1f0d7cec3 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,19 +1,403 @@
-
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+/* 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;
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  min-height: 100vh;
+  /* display: flex;
+  flex-direction: column; */
 }
 
 /**
  * Add your custom styles below
  * 
  * Remember: 
- * - Be organised, use comments and separate your styles into meaningful chunks
+ * - Be organized, 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'
  */
 
+/* .container {
+    display: grid;
+    gap: 5px;
+    grid-template-columns: repeat(12, 1fr);
+    grid-template-rows: 50px 300px 50px;
+} */
+
+:root {
+  --karmaorange: rgb(211, 102, 0);
+  --buttonorange: #e0633a;
+  --buttonwhite: #fdf5f2;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  font-weight: lighter;
+  text-wrap: nowrap;
+}
+
+header {
+  display: flex;
+  background-color: #f9f9f9;
+}
+
+hr {
+  width: 70%;
+  margin-top: 0px;
+}
+
+footer {
+  margin-top: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.karma-logo {
+  margin-left: 100px;
+  margin-right: auto;
+  min-width: 30px;
+  width: 30px;
+  padding-left: 70px;
+  margin-top: 10px;
+}
+
+.navigation__list {
+  display: flex;
+  list-style: none;
+  margin-right: 150px;
+  margin-left: auto;
+  text-wrap: nowrap;
+}
+
+.navigation__item {
+  padding: 0.5rem 1rem;
+}
+
+.navigation__item a:hover {
+  color: var(--karmaorange);
+}
+
+.navigation__link {
+  color: gray;
+  font-weight: lighter;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+
+.hero {
+  background-image: url(../img/first-background.jpg);
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 700px;
+  color: ghostwhite;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.hero-heading {
+  font-size: 45px;
+  margin-bottom: -5px;
+}
+
+.learn {
+  background-color: var(--buttonorange);
+  padding: 10px 20px;
+  border-radius: 5px;
+  border-color: var(--buttonorange);
+  color: var(--buttonwhite);
+}
+
+.article-karma-icons {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+}
+
+.article-head {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.article {
+  display: flex;
+  flex-direction: column;
+  padding: 70px;
+  width: 120px;
+  justify-content: center;
+  align-items: center;
+}
+
+.store {
+  width: 90%;
+  margin: 2rem;
+  margin-bottom: 5rem;
+  background-color: #fcefeb;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.store-text {
+  font-style: italic;
+  font-weight: 350;
+  font-size: 2rem;
+  text-wrap: wrap;
+  text-align: center;
+}
+
+.apos {
+  color: rgb(255, 123, 0);
+}
+
+.store-tb {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 5em;
+}
+
+.social-icons {
+  display: flex;
+}
+
+.social {
+  display: flex;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  padding: 5px;
+  margin: 5px;
+  border: 1px solid rgba(219, 219, 219, 0.726);
+  border-radius: 50%;
+}
+
+h5 {
+  color: darkgrey;
+  font-size: x-small;
+}
+
+.order-text {
+  font-weight: bolder;
+  color: var(--karmaorange);
+  margin: 0.5rem;
+  padding-bottom: 1rem;
+  padding-right: 5rem;
+}
+
+.order-text h1 {
+  font-size: 3.5rem;
+  text-align: start;
+  text-wrap: wrap;
+}
+
+.store-page {
+  display: flex;
+  align-items: center;
+  margin: 0px 20px;
+  padding: 0px 5px 0px 5px;
+}
+
+form {
+  margin: 0px 100px;
+}
+
+input,
+select {
+  font-family: inherit;
+  padding: 0.5rem;
+  margin: 0.5rem;
+  border-radius: 5px;
+  background-color: #ffff;
+}
+
+.store-img img {
+  width: 53em;
+  padding-left: 50px;
+}
+.text-input,
+input[type="text"] {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  justify-content: center;
+  margin: 1rem 0;
+}
+
+input[type="text"] {
+  padding: 1rem;
+}
+
+label {
+  font-size: 1.5rem;
+}
+
+select {
+  padding: 1rem;
+}
+
+.address {
+  display: flex;
+  flex-direction: column;
+  width: 36rem;
+}
+
+[type="radio"] {
+  opacity: 0;
+}
+
+[type="radio"] + label{
+  position: relative;
+  padding-left: 40px;
+  cursor: pointer;
+  display: inline-block;
+  color: black;
+  line-height: 35px;
+}
+
+[type="radio"] + label::before{
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 25px;
+  height: 25px;
+  border-radius: 100%;
+  border: 2px solid gainsboro;
+  background: #fff;
+}
+
+[type="radio"]:checked + label::before{
+  content: "";
+  background-color: #fff;
+  width: calc(100%-10px);
+  height: calc(100%-10px);
+}
+
+[type="radio"]:checked + label::after{
+  content: "";
+  position: absolute;
+  left: 4.5px;
+  top: 4.5px;
+  width: 20px;
+  height: 20px;
+  border-radius: 100%;
+  background: var(--karmaorange);
+}
+
+.radio-buttons {
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: center;
+  margin: 0 2rem 3rem;
+}
+
+.name {
+  display: flex;
+  column-gap: 2rem;
+  clear: both;
+}
+
+.name input[type="text"] {
+  width: 14.5rem;
+}
+
+.city-postcode {
+  display: flex;
+}
+
+#city {
+  width: 20rem;
+  padding: 1rem;
+  border-width: 0.15rem;
+  margin-right: 1.5rem;
+  margin-left: -0.5rem;
+}
+
+.colour-selection {
+  display: flex;
+}
+
+.colour-selection p {
+  font-size: 1.5rem;
+}
+
+.colours {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+[type="checkbox"]{
+  opacity: 0;
+}
+
+[type="checkbox"] + label {
+  position: relative;
+  padding-left: 30px;
+  cursor: pointer;
+  display: inline-block;
+  color: #666;
+  line-height: 25px;
+}
+
+[type="checkbox"]+label::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 16px;
+  width: 18px;
+  height: 18px;
+  outline: 2px solid #aaa;
+  border-radius: 2px;
+  background: #fff;
+}
+
+[type="checkbox"]:checked + label::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 16px;
+  width: 18px;
+  height: 18px;
+  outline: 2px solid gray;
+  border-radius: 2px;
+  background: #fff;
+}
+
+[type="checkbox"]:checked+label::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 16px;
+  width: 18px;
+  height: 18px;
+  background-image: url(../level-2/checkmark.svg);
+  background-size: contain;
+  border-radius: 2px;
+}
+
+.tnc-text {
+  font-size: 14px;
+}
+
+.tnc {
+  text-decoration: underline;
+  color: var(--karmaorange);
+}
 
+.order-btn {
+  padding-top: 40px;
+  padding-left: 30px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3e742ef04..e1d8230f9 100755
--- a/index.html
+++ b/index.html
@@ -1,19 +1,112 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <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/style.css">
-    <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
-</head>
-<body>
+    <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" />
+  </head>
 
-    <!-- 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 -->
+  <!-- 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 -->
+  <body class="container">
+    <header class="header">
+      <section class="karma-logo">
+        <a href="index.html"><img src="img/karma-logo.svg" alt="Karma logo" /></a>
+      </section>
+      <nav class="nav-list">
+        <ul class="navigation__list">
+          <li class="navigation__item">
+            <a class="navigation__link" href="index.html">Meet Karma</a>
+          </li>
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">How it Works</a>
+          </li>
+          <li class="navigation__item">
+            <a class="navigation__link" href="store.html">Store</a>
+          </li>
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">Blog</a>
+          </li>
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">Help</a>
+          </li>
+          <li class="navigation__item">
+            <a class="navigation__link" href="#">Login</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+    <main class="main">
+      <article class="hero">
+        <h1 class="hero-heading">Introducing Karma</h1>
+        <h2>Bring WiFi with you, everywhere you go</h2>
+        <button class="learn">Learn More</button>
+      </article>
+      <article>
+        <h1 class="article-head">Everyone needs a little Karma</h1>
+        <article class="article-karma-icons">
+          <article class="article" id="article1">
+            <img
+              src="img/icon-devices.svg"
+              alt="Multiple devices with screens"
+            />
+            <h3>Internet for all devices</h3>
+          </article>
+          <article class="article" id="article2">
+            <img src="img/icon-coffee.svg" alt="A cup of coffee" />
+            <h3>Boost your productivity</h3>
+          </article>
+          <article class="article" id="article3">
+            <img src="img/icon-refill.svg" alt="A refill icon" />
+            <h3>Pay as You Go</h3>
+          </article>
+        </article>
+      </article>
+      <section class="store">
+        <img
+          class="store-section-img"
+          src="level-2/homepage-feature.png"
+          alt="image of a happy person"
+        />
+        <section class="store-tb">
+          <h2 class="store-text">
+            <span class="apos">"</span>Wherever I am, I just don't worry about
+            my connection anymore!<span class="apos">"</span>
+          </h2>
+          <a href="store.html"
+            ><button class="learn" href>Get Karma today</button></a
+          >
+        </section>
+      </section>
+    </main>
+    <hr />
+    <footer class="footer">
+      <h4>Join us on</h4>
+      <section class="social-icons">
+        <a class="social"
+          ><img src="img/twitter-icon.svg" alt="Twitter icon"
+        /></a>
+        <a class="social"
+          ><img src="img/facebook-icon.svg" alt="Facebook icon"
+        /></a>
+        <a class="social"
+          ><img src="img/instagram-icon.svg" alt="Instagram icon"
+        /></a>
+      </section>
 
-</body>
+      <h5>©Karma Mobility, Inc.</h5>
+    </footer>
+  </body>
 </html>
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..71edcd0bf
--- /dev/null
+++ b/store.html
@@ -0,0 +1,131 @@
+<!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" type="text/css" href="./css/normalize.css" />
+  <link rel="stylesheet" type="text/css" href="./css/style.css" />
+  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
+</head>
+
+<body>
+  <header class="header">
+    <section class="karma-logo">
+      <a href="index.html"><img src="img/karma-logo.svg" alt="Karma logo" /></a>
+    </section>
+    <nav class="nav-list">
+      <ul class="navigation__list">
+        <li class="navigation__item">
+          <a class="navigation__link" href="index.html">Meet Karma</a>
+        </li>
+        <li class="navigation__item">
+          <a class="navigation__link" href="#">How it Works</a>
+        </li>
+        <li class="navigation__item">
+          <a class="navigation__link" href="store.html">Store</a>
+        </li>
+        <li class="navigation__item">
+          <a class="navigation__link" href="#">Blog</a>
+        </li>
+        <li class="navigation__item">
+          <a class="navigation__link" href="#">Help</a>
+        </li>
+        <li class="navigation__item">
+          <a class="navigation__link" href="#">Login</a>
+        </li>
+      </ul>
+    </nav>
+  </header>
+  <main class="store-page">
+    <form class="info-form" action="signups.html" method="post">
+      <div class="order-text">
+        <h1>Order your Karma wifi device today!</h1>
+      </div>
+      <div class="name">
+        <div class="text-input">
+          <label for="firstname">First name *</label>
+          <input type="text" name="First name" id="firstname" required />
+        </div>
+        <div class="text-input">
+          <label for="lastname">Last name *</label>
+          <input type="text" name="Last name" id="lastname" required />
+        </div>
+      </div>
+      <div class="address">
+        <label for="address1">Address *</label>
+        <input type="text" name="Address Line 1" id="address1" required />
+      </div>
+      <div class="address">
+        <label for="address2">Address 2 *</label>
+        <input type="text" name="Address Line 2" id="address2" />
+      </div>
+      <div class="city-postcode">
+        <div class="text-input">
+          <label for="city">City *</label>
+          <select name="city" id="city">
+            <option placeholder="" disabled selected>
+              Select your city...
+            </option>
+            <option value="london">London</option>
+            <option value="manchester">Manchester</option>
+            <option value="glasgow">Glasgow</option>
+            <option value="oxford">Oxford</option>
+          </select>
+        </div>
+        <div class="text-input">
+          <label>Postcode *</label>
+          <input type="text" required />
+        </div>
+      </div>
+      <div class="colour-selection">
+        <p>Select a colour</p>
+      </div>
+      <div class="colours">
+        <div class="radio-buttons">
+          <p>
+            <input type="radio" name="colour" id="karmaorange" value="Karma Orange" checked="checked" />
+            <label for="karmaorange">Karma Orange</label>
+          </p>
+        </div>
+        <div class="radio-buttons">
+          <p>
+            <input type="radio" name="colour" id="spacegrey""
+                value=" Space Grey" />
+            <label for="spacegrey">Space Grey</label>
+          </p>
+        </div>
+      </div>
+      </div>
+      <div>
+        <input type="checkbox" name="terms" id="terms" required />
+        <label for="terms">
+          <p class="tnc-text">By placing your order you agree to Karma's
+            <a class="tnc">Terms & Conditions</a> .*
+          </p>
+        </label>
+        <div class="order-btn">
+          <button class="learn" type="submit">Place my order now</button>
+        </div>
+      </div>
+    </form>
+    <div class="store-img">
+      <img src="level-2/store-image_by-andrew-neel-unsplash.jpg" alt="image of
+        a lady sitting on a stool working" </div>
+  </main>
+  <hr />
+  <footer class="footer">
+    <h4>Join us on</h4>
+    <section class="social-icons">
+      <a class="social"><img src="img/twitter-icon.svg" alt="Twitter icon" /></a>
+      <a class="social"><img src="img/facebook-icon.svg" alt="Facebook icon" /></a>
+      <a class="social"><img src="img/instagram-icon.svg" alt="Instagram icon" /></a>
+    </section>
+
+    <h5>©Karma Mobility, Inc.</h5>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file