footer done

Natours/starter/sass/abstracts/_variables.scss

@@ -14,6 +14,7 @@ $color-grey-light-2: #eee;
 
 $color-gray-dark: #777;
 $color-gray-dark-2: #999;
+$color-gray-dark-3: #333;
 
 $color-white: #fff;
 $color-black: #000;

Natours/starter/sass/layout/_footer.scss

@@ -0,0 +1,60 @@
+.footer {
+  background-color: $color-gray-dark-3;
+  padding: 10rem 0;
+  font-size: 1.4rem;
+  color: $color-grey-light-1;
+
+  &__logo-box {
+    text-align: center;
+    margin-bottom: 8rem;
+  }
+
+  &__logo {
+    width: 15rem;
+    height: auto;
+  }
+
+  &__navigation {
+    border-top: 1px solid $color-gray-dark;
+    padding-top: 2rem;
+    display: inline-block;
+  }
+
+  &__list {
+    list-style: none;
+  }
+
+  &__item {
+    display: inline-block;
+    &:not(:last-child) {
+      margin-right: 1.5rem;
+    }
+  }
+
+  &__link {
+    &:link,
+    &:visited {
+      color: $color-grey-light-1;
+      background-color: $color-gray-dark-3;
+      text-decoration: none;
+      text-transform: uppercase;
+      display: inline-block;
+      transition: all 0.2s;
+    }
+
+    &:hover,
+    &:active {
+      color: $color-primary;
+      box-shadow: 0 1rem 2rem rgba($color-black, 0.4);
+      transform: rotate(5deg) scale(1.3);
+    }
+  }
+
+  &__copyright {
+    border-top: 1px solid $color-gray-dark;
+    padding-top: 2rem;
+    display: inline-block;
+    width: 80%;
+    float: right;
+  }
+}

Natours/starter/sass/main.scss

@@ -17,5 +17,6 @@
 
 @import "layout/header";
 @import "layout/grid";
+@import "layout/footer";
 
 @import "pages/home";