diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..4c7ff40f6
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}
diff --git a/css/normalize.css b/css/normalize.css
index 957605911..8ab006dac 100755
--- a/css/normalize.css
+++ b/css/normalize.css
@@ -1,4 +1,3 @@
-
 /**
  *  ---------------------------------------
  *  DO NOT EDIT THIS FILE. 
@@ -6,7 +5,6 @@
  *  ---------------------------------------
  */
 
-
 /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
 
 /**
@@ -15,18 +13,26 @@
  *    user zoom.
  */
 
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
 html {
-    font-family: sans-serif; /* 1 */
-    -ms-text-size-adjust: 100%; /* 2 */
-    -webkit-text-size-adjust: 100%; /* 2 */
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
 }
 
 /**
- * Remove default margin.
+ * Remove default margin and padding, and change box-sizing to border-box.
  */
 
-body {
-    margin: 0;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 /* HTML5 display definitions
@@ -52,7 +58,7 @@ menu,
 nav,
 section,
 summary {
-    display: block;
+  display: block;
 }
 
 /**
@@ -64,8 +70,8 @@ audio,
 canvas,
 progress,
 video {
-    display: inline-block; /* 1 */
-    vertical-align: baseline; /* 2 */
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
 }
 
 /**
@@ -74,8 +80,8 @@ video {
  */
 
 audio:not([controls]) {
-    display: none;
-    height: 0;
+  display: none;
+  height: 0;
 }
 
 /**
@@ -85,7 +91,7 @@ audio:not([controls]) {
 
 [hidden],
 template {
-    display: none;
+  display: none;
 }
 
 /* Links
@@ -96,7 +102,7 @@ template {
  */
 
 a {
-    background-color: transparent;
+  background-color: transparent;
 }
 
 /**
@@ -105,7 +111,7 @@ a {
 
 a:active,
 a:hover {
-    outline: 0;
+  outline: 0;
 }
 
 /* Text-level semantics
@@ -116,7 +122,7 @@ a:hover {
  */
 
 abbr[title] {
-    border-bottom: 1px dotted;
+  border-bottom: 1px dotted;
 }
 
 /**
@@ -125,7 +131,7 @@ abbr[title] {
 
 b,
 strong {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 /**
@@ -133,7 +139,7 @@ strong {
  */
 
 dfn {
-    font-style: italic;
+  font-style: italic;
 }
 
 /**
@@ -142,8 +148,7 @@ dfn {
  */
 
 h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
+  font-size: 2em;
 }
 
 /**
@@ -151,8 +156,8 @@ h1 {
  */
 
 mark {
-    background: #ff0;
-    color: #000;
+  background: #ff0;
+  color: #000;
 }
 
 /**
@@ -160,7 +165,7 @@ mark {
  */
 
 small {
-    font-size: 80%;
+  font-size: 80%;
 }
 
 /**
@@ -169,18 +174,18 @@ small {
 
 sub,
 sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
 }
 
 sup {
-    top: -0.5em;
+  top: -0.5em;
 }
 
 sub {
-    bottom: -0.25em;
+  bottom: -0.25em;
 }
 
 /* Embedded content
@@ -191,7 +196,7 @@ sub {
  */
 
 img {
-    border: 0;
+  border: 0;
 }
 
 /**
@@ -199,7 +204,7 @@ img {
  */
 
 svg:not(:root) {
-    overflow: hidden;
+  overflow: hidden;
 }
 
 /* Grouping content
@@ -210,7 +215,7 @@ svg:not(:root) {
  */
 
 figure {
-    margin: 1em 40px;
+  margin: 1em 40px;
 }
 
 /**
@@ -218,9 +223,9 @@ figure {
  */
 
 hr {
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-    height: 0;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
 }
 
 /**
@@ -228,7 +233,7 @@ hr {
  */
 
 pre {
-    overflow: auto;
+  overflow: auto;
 }
 
 /**
@@ -239,8 +244,8 @@ code,
 kbd,
 pre,
 samp {
-    font-family: monospace, monospace;
-    font-size: 1em;
+  font-family: monospace, monospace;
+  font-size: 1em;
 }
 
 /* Forms
@@ -263,9 +268,9 @@ input,
 optgroup,
 select,
 textarea {
-    color: inherit; /* 1 */
-    font: inherit; /* 2 */
-    margin: 0; /* 3 */
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
 }
 
 /**
@@ -273,7 +278,7 @@ textarea {
  */
 
 button {
-    overflow: visible;
+  overflow: visible;
 }
 
 /**
@@ -285,7 +290,7 @@ button {
 
 button,
 select {
-    text-transform: none;
+  text-transform: none;
 }
 
 /**
@@ -300,8 +305,8 @@ button,
 html input[type="button"], /* 1 */
 input[type="reset"],
 input[type="submit"] {
-    -webkit-appearance: button; /* 2 */
-    cursor: pointer; /* 3 */
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
 }
 
 /**
@@ -310,7 +315,7 @@ input[type="submit"] {
 
 button[disabled],
 html input[disabled] {
-    cursor: default;
+  cursor: default;
 }
 
 /**
@@ -319,8 +324,8 @@ html input[disabled] {
 
 button::-moz-focus-inner,
 input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
+  border: 0;
+  padding: 0;
 }
 
 /**
@@ -329,7 +334,7 @@ input::-moz-focus-inner {
  */
 
 input {
-    line-height: normal;
+  line-height: normal;
 }
 
 /**
@@ -342,8 +347,8 @@ input {
 
 input[type="checkbox"],
 input[type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
 }
 
 /**
@@ -354,7 +359,7 @@ input[type="radio"] {
 
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
-    height: auto;
+  height: auto;
 }
 
 /**
@@ -364,10 +369,10 @@ input[type="number"]::-webkit-outer-spin-button {
  */
 
 input[type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box; /* 2 */
-    box-sizing: content-box;
+  -webkit-appearance: textfield; /* 1 */
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box; /* 2 */
+  box-sizing: content-box;
 }
 
 /**
@@ -378,7 +383,7 @@ input[type="search"] {
 
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 /**
@@ -386,9 +391,9 @@ input[type="search"]::-webkit-search-decoration {
  */
 
 fieldset {
-    border: 1px solid #c0c0c0;
-    margin: 0 2px;
-    padding: 0.35em 0.625em 0.75em;
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
 }
 
 /**
@@ -397,8 +402,8 @@ fieldset {
  */
 
 legend {
-    border: 0; /* 1 */
-    padding: 0; /* 2 */
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
 }
 
 /**
@@ -406,7 +411,7 @@ legend {
  */
 
 textarea {
-    overflow: auto;
+  overflow: auto;
 }
 
 /**
@@ -415,7 +420,7 @@ textarea {
  */
 
 optgroup {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 /* Tables
@@ -426,11 +431,11 @@ optgroup {
  */
 
 table {
-    border-collapse: collapse;
-    border-spacing: 0;
+  border-collapse: collapse;
+  border-spacing: 0;
 }
 
 td,
 th {
-    padding: 0;
-}
\ No newline at end of file
+  padding: 0;
+}
diff --git a/css/store.css b/css/store.css
new file mode 100644
index 000000000..3f1e3ee45
--- /dev/null
+++ b/css/store.css
@@ -0,0 +1,169 @@
+input[type="checkbox"],
+input[type="radio"] {
+  appearance: none;
+  background-color: #ffffff00;
+  margin: 0;
+  border: 0;
+}
+
+/* form */
+
+#form-container {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+}
+
+#form-container img {
+  max-width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: 65% 60%;
+}
+
+form {
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  padding: 6rem 6rem;
+  width: 100%;
+}
+
+/* form elements */
+
+form h2 {
+  color: var(--color-brand);
+  font-weight: 500;
+  margin-bottom: 4rem;
+  line-height: cal(var(--fs-h2) + 0.5rem);
+}
+
+#terms-link {
+  color: var(--color-brand);
+  text-decoration: underline;
+}
+
+#terms-link:hover,
+#terms-link:focus {
+  color: var(--color-brand);
+  text-decoration: underline;
+
+  font-weight: 500;
+}
+
+.form__item-container {
+  display: grid;
+  width: 100%;
+}
+
+label,
+.label {
+  font-size: var(--fs-navbar);
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+/* form elements layout */
+
+.form__row {
+  display: flex;
+  gap: 2rem;
+}
+
+input,
+select {
+  background: var(--color-light);
+  border-radius: 6px;
+  border: 2px solid var(--color-mid);
+  color: var(--color-dark);
+
+  padding: 1rem 1.5rem;
+  margin-bottom: 1rem;
+
+  width: 100%;
+}
+
+select {
+  background: url(../img/caret-down-solid.svg) no-repeat right 1.5rem center /
+    15px;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+select:invalid {
+  font-style: italic;
+}
+
+#form__city-container {
+  flex: 1.5;
+}
+
+#form__postcode-container {
+  flex: 1;
+}
+
+#form__colour-container {
+  margin: 2rem 0 4rem;
+}
+
+#form__colour-options {
+  display: flex;
+  justify-content: flex-start;
+  gap: 4rem;
+}
+
+input[type="radio"] ~ label {
+  color: var(--color-dark);
+  font-weight: 400;
+  cursor: pointer;
+}
+
+input[type="radio"] {
+  font: inherit;
+  color: var(--color-dark);
+  width: 1.175rem;
+  height: 1.175rem;
+  outline: 0.15em solid var(--color-dark);
+  border: 0.15em solid var(--color-light);
+  border-radius: 50%;
+
+  transform: translateY(0.175rem);
+
+  margin-right: 0.5rem;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+
+input[type="radio"]:checked {
+  background-color: var(--color-brand);
+  transition: all 0.2s ease-in-out;
+}
+
+input[type="checkbox"] {
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0.15em solid var(--color-dark);
+  border-radius: 5px;
+
+  cursor: pointer;
+}
+
+input[type="checkbox"]:checked {
+  background: url(../img/checkmark.svg) center center / 1rem no-repeat;
+}
+
+input[type="checkbox"] ~ label {
+  cursor: pointer;
+}
+
+#terms-container {
+  grid-template-columns: 1.5rem 1fr;
+  gap: 0.5rem;
+}
+
+button {
+  border: none;
+  width: 50%;
+}
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index 5cb025cef..fa7f7692e 100755
--- a/css/style.css
+++ b/css/style.css
@@ -1,19 +1,352 @@
+/* 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;
+}
+
+/* Variables */
+:root {
+  --color-brand: #e0633a;
+  --color-brand-dark: #e04815;
+  --color-light: #ffffff;
+  --color-darker: #151515;
+  --color-dark: #3c3c3c;
+  --color-mid: #8d8d8d;
+  --color-cr: #dbdbdb;
+
+  --fs-h1: 4rem;
+  --fs-hero-description: 2.5rem;
+  --fs-h2: 3.5rem;
+  --fs-h3: 1.25rem;
+  --fs-navbar: 1.25rem;
+  --fs-p: 2rem;
+  --fs-obs: 1rem;
+
+  --gap-vertical: 3rem;
+
+  --ideal-page-width: 1600px;
+  --ideal-viewport-width: 1980px;
+  --vw-dif: calc(100vw - var(--ideal-viewport-width));
+  --page-width-proportion: calc(10 / 9);
+  --page-width-add: calc(var(--vw-dif) / var(--page-width-proportion));
+  --page-width: calc(var(--ideal-page-width) + var(--page-width-add));
+}
 
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+/* General */
+
+html {
+  background-color: var(--color-darker);
+  color: var(--color-darker);
+}
 
 body {
-    font-family: 'Roboto', sans-serif;
-    -webkit-font-smoothing: antialiased;
+  background-color: var(--color-light);
+  width: var(--page-width);
+  max-width: 100vw;
+  margin: 0 auto;
+}
+
+h1,
+h2,
+h3 {
+  font-weight: lighter;
+}
+
+h1 {
+  font-size: var(--fs-h1);
+  line-height: calc(var(--fs-h1) * 1.5);
+}
+
+h2 {
+  font-size: var(--fs-h2);
+  line-height: calc(var(--fs-h2) * 1.5);
+}
+
+h3 {
+  font-size: var(--fs-h3);
+  line-height: calc(var(--fs-h3) * 1.5);
+  font-weight: normal;
+}
+
+p {
+  font-size: var(--fs-p);
+  line-height: calc(var(--fs-p) * 1.5);
+}
+
+a {
+  color: var(--color-mid);
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+a:hover,
+a:focus {
+  color: var(--color-brand);
+  transition: all 0.2s;
+}
+
+.button {
+  margin-top: var(--gap-vertical);
+  padding: 1.25rem 2.75rem;
+  border-radius: 0.25rem;
+
+  background-color: var(--color-brand);
+  color: var(--color-light);
+  font-size: var(--fs-navbar);
+
+  transition: all 0.2s;
+}
+
+.button:hover {
+  background-color: var(--color-brand-dark);
+  color: var(--color-light);
+  transform: scale(1.05);
+  transition: all 0.2s;
+}
+
+/* Header */
+
+header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 8%;
+}
+
+header nav {
+  width: 50%;
+  min-width: 500px;
+  font-size: var(--fs-navbar);
+}
+
+header img {
+  height: 3rem;
+}
+
+#navbar__items {
+  display: flex;
+  justify-content: space-between;
+
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  color: var(--color-mid);
+}
+
+.navbar__item:first-child a:not(:hover):not(:focus) {
+  color: var(--color-dark);
+}
+
+.navbar__item:first-child a {
+  font-weight: bold;
+}
+
+/* Hero */
+
+#hero {
+  background: url("../img/first-background.jpg") no-repeat top center / cover;
+  /* background-size: cover; */
+  height: 96vh;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+
+  color: var(--color-light);
+
+  text-align: center;
+}
+
+#hero p {
+  font-size: var(--fs-hero-description);
+  line-height: var(--fs-hero-description);
+}
+
+/* Benefits */
+
+#benefits {
+  padding: 10rem 10% 8rem;
+  text-align: center;
+  width: 100%;
+}
+
+#benefits h2 {
+  margin-bottom: var(--gap-vertical);
+}
+
+#benefits-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  max-width: 100vw;
+}
+
+.benefit {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 280px;
 }
 
-/**
- * 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'
- */
+.benefit img {
+  height: 200px;
+}
 
+#to-store {
+  display: flex;
+  max-width: 100vw;
+  margin-bottom: 6rem;
+}
 
+#to-store img {
+  width: 40%;
+  min-width: unset;
+}
+
+#to-store article {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  background-color: #fcefeb;
+  width: 60%;
+  padding: 0 12%;
+}
+
+@media screen and (max-width: 1400px) {
+  #to-store {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #to-store article,
+  #to-store img {
+    width: 80%;
+  }
+
+  #to-store article {
+    padding: 2rem 1rem;
+  }
+
+  :root {
+    --page-width: 99%
+  }
+}
+
+#to-store p {
+  font-style: italic;
+  font-size: var(--fs-hero-description);
+
+  text-align: center;
+}
+
+#to-store span {
+  font-size: var(--fs-h2);
+  color: var(--color-brand);
+}
+
+/* Footer */
+
+footer {
+  text-align: center;
+  display: grid;
+  justify-items: center;
+}
+
+footer h3 {
+  width: 85%;
+  border-top: solid var(--color-cr) 2px;
+  padding-top: 2rem;
+}
+
+#social-media-list {
+  display: flex;
+  width: 250px;
+  justify-content: space-evenly;
+
+  margin: calc(var(--gap-vertical) / 2) 0;
+}
+
+.social-media-link {
+  --size-media: 3rem;
+  height: var(--size-media);
+  width: var(--size-media);
+  border: solid var(--color-cr) 2px;
+  border-radius: 50%;
+}
+
+.social-media-link img {
+  height: 50%;
+  margin: 25%;
+}
+
+.social-media-link:hover,
+.social-media-link:focus {
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
+  transform: scale(1);
+  animation: pulse 2s infinite;
+}
+
+#copyright {
+  font-size: var(--fs-obs);
+  margin-bottom: calc(var(--gap-vertical) * 1.5);
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+  }
+
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+  }
+
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
+  }
+}
+
+@media screen and (max-width: 650px) {
+  :root {
+    --fs-h1: 3.375rem;
+    --fs-hero-description: 2rem;
+    --fs-h2: 2.75rem;
+    --fs-h3: 1.5rem;
+    --fs-navbar: 1.25rem;
+    --fs-p: 2.5rem;
+    --fs-obs: 1rem;
+
+    --gap-vertical: 1.5rem;
+  }
+
+  nav {
+    display: none;
+  }
+
+  #benefits-list {
+    gap: var(--gap-vertical);
+    max-width: 95vw;
+  }
+
+  .benefit img {
+    height: 130px;
+  }
+}
+
+/* navbar selected link highlight */
+
+#navbar__item-selected {
+  color: var(--color-brand);
+}
diff --git a/img/caret-down-solid.svg b/img/caret-down-solid.svg
new file mode 100644
index 000000000..0f71a76fa
--- /dev/null
+++ b/img/caret-down-solid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>
\ No newline at end of file
diff --git a/level-2/checkmark.svg b/img/checkmark.svg
similarity index 100%
rename from level-2/checkmark.svg
rename to img/checkmark.svg
diff --git a/level-2/homepage-feature.png b/img/homepage-feature.png
similarity index 100%
rename from level-2/homepage-feature.png
rename to img/homepage-feature.png
diff --git a/level-2/store-image_by-andrew-neel-unsplash.jpg b/img/store-image_by-andrew-neel-unsplash.jpg
similarity index 100%
rename from level-2/store-image_by-andrew-neel-unsplash.jpg
rename to img/store-image_by-andrew-neel-unsplash.jpg
diff --git a/index.html b/index.html
index 3e742ef04..c87bfaef7 100755
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -7,13 +8,51 @@
     <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="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 -->
 
+<body>
+    <header>
+        <a href=""><img src="img/karma-logo.svg" alt="Karma Logo"></a>
+        <nav>
+            <ul id="navbar__items">
+                <li class="navbar__item"><a href="#" id="navbar__item-selected" class="navbar__item-link">Meet Karma</a></li>
+                <li class="navbar__item"><a href="#" class="navbar__item-link">How it Works</a></li>
+                <li class="navbar__item"><a href="./store.html" class="navbar__item-link">Store</a></li>
+                <li class="navbar__item"><a href="#" class="navbar__item-link">Blog</a></li>
+                <li class="navbar__item"><a href="#" class="navbar__item-link">Help</a></li>
+                <li class="navbar__item"><a href="#" class="navbar__item-link">Login</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <section id="hero">
+            <h1>Introducing Karma</h1>
+            <p>Bring WiFi with you, everywhere you go.</p>
+            <a href="#" class="button">Learn More</a>
+        </section>
+        <section id="benefits">
+            <h2>Everyone needs a little Karma.</h2>
+            <section id="benefits-list">
+                <article class="benefit"><img src="img/icon-devices.svg" alt="Illustration of devices"><p>Internet for all devices</p></article>
+                <article class="benefit"><img src="img/icon-coffee.svg" alt="Illustration of a coffee"><p>Boost your productivity</p></article>
+                <article class="benefit"><img src="img/icon-refill.svg" alt="Illustration of an iPod"><p>Pay as You Go</p></article>
+            </section>
+        </section>
+        <section id="to-store">
+            <img src="img/homepage-feature.png" alt="">
+            <article><p><span>"</span>Wherever I am, I just don't worry about my connection anymore!<span>"</span></p><a href="./store.html" class="button">Get Karma today</a></article>
+        </section>
+    </main>
+    <footer>
+        <h3>Join us on</h3>
+        <section id="social-media-list">
+            <a href="https://twitter.com/yourKarma" target="_blank" class="social-media-link" aria-label="twitter"><img src="img/twitter-icon.svg" alt="twitter logo"></a>
+            <a href="https://www.facebook.com/newkarmawifi/" target="_blank" class="social-media-link" aria-label="facebook"><img src="img/facebook-icon.svg" alt="facebook logo"></a>
+            <a href="https://www.instagram.com/karmawifi/" class="social-media-link" target="_blank" aria-label="instagram"><img src="img/instagram-icon.svg" alt="instagram logo"></a>
+        </section>
+        <p id="copyright">&copy; Karma Mobility Inc</p>
+    </footer>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/store.html b/store.html
new file mode 100644
index 000000000..ca1095402
--- /dev/null
+++ b/store.html
@@ -0,0 +1,105 @@
+<!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/style.css">
+  <link rel="stylesheet" href="css/store.css">
+
+  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
+</head>
+
+<body>
+  <header>
+    <a href=""><img src="img/karma-logo.svg" alt="Karma Logo"></a>
+    <nav>
+      <ul id="navbar__items">
+        <li class="navbar__item"><a href="./index.html" class="navbar__item-link">Meet Karma</a></li>
+        <li class="navbar__item"><a href="#" class="navbar__item-link">How it Works</a></li>
+        <li class="navbar__item"><a href="#" id="navbar__item-selected" class="navbar__item-link">Store</a></li>
+        <li class="navbar__item"><a href="#" class="navbar__item-link">Blog</a></li>
+        <li class="navbar__item"><a href="#" class="navbar__item-link">Help</a></li>
+        <li class="navbar__item"><a href="#" class="navbar__item-link">Login</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main>
+    <section id="form-container">
+      <form action="">
+        <h2>Order your Karma wifi device today!</h2>
+        <div class="form__row">
+          <div class="form__item-container">
+            <label for="first-name">First name *</label>
+            <input type="text" name="first-name" id="first-name" required>
+          </div>
+          <div class="form__item-container">
+            <label for="last-name">Last name *</label>
+            <input type="text" name="last-name" id="last-name" required>
+          </div>
+        </div>
+        <div class="form__item-container">
+          <label for="address1">Address *</label>
+          <input type="text" name="address1" id="address1" required>
+        </div>
+        <div class="form__item-container">
+          <label for="address2">Address 2</label>
+          <input type="text" name="address2" id="address2">
+        </div>
+        <div id="form__address-container" class="form__row">
+          <div id="form__city-container" class="form__item-container">
+            <label for="city">City *</label>
+            <select name="city" id="city" required>
+              <option value="" disabled selected>Select your city...</option>
+              <option value="liverpool">Liverpool</option>
+              <option value="london">London</option>
+              <option value="manchester">Manchester</option>
+              <option value="salford">Salford</option>
+            </select>
+          </div>
+          <div id="form__postcode-container" class="form__item-container">
+            <label for="postcode">Postcode *</label>
+            <input type="text" name="postcode" id="postcode" required>
+          </div>
+        </div>
+        <div id="form__colour-container" class="form__item-container">
+          <p class="label">Select a colour</p>
+          <div id="form__colour-options">
+            <div>
+              <input type="radio" name="colour" id="orange" value="orange">
+              <label for="orange">Karma Orange</label>
+            </div>
+            <div>
+              <input type="radio" name="colour" id="grey" value="grey">
+              <label for="grey">Space Grey</label>
+            </div>
+          </div>
+        </div>
+        <div id="terms-container" class="form__item-container">
+          <input type="checkbox" name="terms" id="terms" required>
+          <label for="terms">By placing your order you agree to Karma's <a id="terms-link" href="#">Terms and Conditions</a>. *</label>
+        </div>
+        <button class="button" type="submit">Place my order</button>
+
+      </form>
+      <img src="img/store-image_by-andrew-neel-unsplash.jpg" alt="">
+    </section>
+  </main>
+  <footer>
+    <h3>Join us on</h3>
+    <section id="social-media-list">
+      <a href="https://twitter.com/yourKarma" target="_blank" class="social-media-link" aria-label="twitter"><img
+          src="img/twitter-icon.svg" alt="twitter logo"></a>
+      <a href="https://www.facebook.com/newkarmawifi/" target="_blank" class="social-media-link"
+        aria-label="facebook"><img src="img/facebook-icon.svg" alt="facebook logo"></a>
+      <a href="https://www.instagram.com/karmawifi/" class="social-media-link" target="_blank"
+        aria-label="instagram"><img src="img/instagram-icon.svg" alt="instagram logo"></a>
+    </section>
+    <p id="copyright">&copy; Karma Mobility Inc</p>
+  </footer>
+</body>
+
+</html>
\ No newline at end of file