Add mobile-first footer

gulpfile.babel.js

@@ -131,6 +131,7 @@ gulp.task('hbs', () => {
           './node_modules/handlebars-layouts'
         ]
       })
+      .data('./src/hbs/data.json')
       .partials('./src/hbs/layouts/*.hbs')
       .partials('./src/hbs/partials/**/*.hbs')
     )

src/hbs/data.json

@@ -0,0 +1,38 @@
+{
+  "footer": {
+    "links": [
+      {
+        "url": "",
+        "title": "Truebit"
+      },
+      {
+        "url": "",
+        "title": "Medium"
+      },
+      {
+        "url": "",
+        "title": "Telegram"
+      },
+      {
+        "url": "",
+        "title": "Newsletter"
+      },
+      {
+        "url": "",
+        "title": "Project Proposal"
+      },
+      {
+        "url": "",
+        "title": "Floor Plans"
+      },
+      {
+        "url": "",
+        "title": "Collaborator Guidelines"
+      },
+      {
+        "url": "",
+        "title": "FAQ"
+      }
+    ]
+  }
+}

src/hbs/partials/footer.hbs

@@ -1,3 +1,13 @@
-<footer>
+<footer class="footer">
-  This is footer
+  <ul class="footer__list">
+    {{#each data.footer.links as |link|}}
+      <li class="footer__list-item">
+        <a class="footer__link" href="{{ link.url }}">{{ link.title }}</a>
+      </li>
+    {{/each}}
+  </ul>
+  <div class="footer__attribution">
+    <span>Designed by:</span>
+    <strong>EMPIRE</strong>
+  </div>
 </footer>

src/styles/components/_footer.scss

@@ -0,0 +1,52 @@
+.footer {
+  padding: 10px;
+  font-family: 'Work Sans';
+  font-size: 12px;
+  color: $color-gray;
+  text-transform: uppercase;
+
+  &__list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__link {
+    display: block;
+    padding: 10px;
+    font-weight: 700;
+    color: inherit;
+    text-decoration: none;
+  }
+
+  &__attribution {
+    margin-top: 10px;
+    padding: 10px;
+    text-align: center;
+  }
+}
+
+@media #{$screen-sm} {
+  .footer {
+    padding: 15px 35px;
+  }
+}
+
+@media #{$screen-lg} {
+  .footer {
+    display: flex;
+    justify-content: space-between;
+
+    &__list-item + &__list-item {
+      margin-left: 20px;
+    }
+
+    &__attribution {
+      margin: 0;
+    }
+  }
+}

src/styles/main.scss

@@ -19,3 +19,4 @@
 @import './components/project';
 @import './components/structure';
 @import './components/team';
+@import './components/footer';