finished building footer section

src/App.scss

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

src/commons/footer-section/footer.jsx

@@ -1,5 +1,56 @@
+import logoLarge from "../images/logo-green-2x.png";
+
 function Footer() {
-  return <section className="section-footer"></section>;
+  return (
+    <footer className="footer">
+      <div className="footer__logo-box">
+        <img src={logoLarge} alt="Large logo" className="footer__logo" />
+      </div>
+      <div className="row">
+        <div className="col-1-of-2">
+          <div className="footer__navigation">
+            <ul className="footer__list">
+              <li className="footer__item">
+                <a href="#" className="footer__link">
+                  Company
+                </a>
+              </li>
+              <li className="footer__item">
+                <a href="#" className="footer__link">
+                  Contact us
+                </a>
+              </li>
+              <li className="footer__item">
+                <a href="#" className="footer__link">
+                  Careers
+                </a>
+              </li>
+              <li className="footer__item">
+                <a href="#" className="footer__link">
+                  Privacy Policy
+                </a>
+              </li>
+              <li className="footer__item">
+                <a href="#" className="footer__link">
+                  Terms
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className="col-1-of-2">
+          <p className="footer__copyright">
+            Design by Jonas Schmedtmann. Coded by{" "}
+            <a href="#" className="footer__link">
+              Yusuf İpek
+            </a>
+            . You are allowed to use this webpage for personal and commercial
+            use.
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
 }
 
 export default Footer;

src/sass/abstracts/_variables.scss

@@ -14,12 +14,14 @@ $color-grey-light-2: #eee;
 
 $color-grey-dark: #777;
 $color-grey-dark-2: #999;
+$color-grey-dark-3: #333;
 
 $color-white: #fff;
 $color-black: #000;
 
 // FONT CONTROL
 $default-font-size: 1.6rem;
+$normal-font-size: 1.4rem;
 
 // GRID background
 $grid-width: 114rem;
@@ -30,6 +32,7 @@ $gutter-horizontal: 6rem;
 
 $shadow-default: 0 1.5rem 4rem rgba($color-black, 0.15);
 $shadow-light: 0.5rem 1rem 2rem rgba($color-black, 0.2);
+$shadow-link: 0 1rem 2rem rgba($color-black, 0.4);
 
 $border-radius-small: 0.2rem;
 $border-radius-default: 0.3rem;

src/sass/layout/_footer.scss

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