Finished the footer

frontend/src/app/footer/footer.component.html

@@ -1 +1,44 @@
-<p>footer works!</p>
+<footer>
+  <div class="footer">
+    <div class="footerInner">
+      <div class="footerText">
+        <h2>ABOUT US</h2>
+        <p>​Altitude is a community-centered {{ ALTITUDE_VERSION }} survival server. We're one of those servers you come
+          to call "home". We are your place to get together with friends and play survival, with a few extra features
+          suggested by our community!</p>
+        <div class="followUs" style="height: 35px; display: flex; align-items: flex-end;">
+          <a target="_blank" rel="noopener" href="https://discordapp.com/invite/TGqpzCJ">
+            <img ngSrc="/public/img/logos/discord.png" alt="Discord Button" height="32" width="32">
+          </a>
+          <a target="_blank" rel="noopener" href="https://twitter.com/alttdmc">
+            <img ngSrc="/public/img/logos/twitter.png" alt="Twitter Button" height="32" width="32">
+          </a>
+          <a target="_blank" rel="noopener" href="https://instagram.com/alttdmc">
+            <img ngSrc="/public/img/logos/instagram.png" alt="Instagram Button" height="32" width="32">
+          </a>
+        </div>
+      </div>
+      <div class="footerNav">
+        <h2>COMMUNITY</h2>
+        <ul>
+          <li><a target="_blank" rel="noopener" href="https://discordapp.com/invite/TGqpzCJ">Discord</a></li>
+          <li><a target="_blank" rel="noopener" href="https://alttd.com/blog">Blog</a></li>
+          <li><a target="_blank" rel="noopener" href="https://twitter.com/alttdmc">Twitter</a></li>
+          <li><a target="_blank" rel="noopener" href="https://instagram.com/alttdmc">Instagram</a></li>
+          <li><a target="_blank" rel="noopener" href="https://reddit.com/r/alttd">Reddit</a></li>
+        </ul>
+      </div>
+      <div class="footerNav">
+        <h2>SERVER</h2>
+        <ul>
+          <li><a [routerLink]="['/about']">About Us</a></li>
+          <li><a [routerLink]="['/team']">Staffing Team</a></li>
+          <li><a [routerLink]="['/privacy']">Privacy Policy</a></li>
+          <li><a [routerLink]="['/terms']">Terms of Use</a></li>
+        </ul>
+      </div>
+    </div>
+    <p class="copyright">Copyright © 2015-{{ getCurrentYear() }} Altitude. All rights Reserved. Not affiliated with
+      Mojang AB or Microsoft.</p>
+  </div>
+</footer>

frontend/src/app/footer/footer.component.scss

@@ -0,0 +1,69 @@
+footer {
+  background-color: var(--footer-color);
+  transition: 0.5s ease;
+}
+
+footer h2 {
+  margin-bottom: 10px;
+  font-size: 1.3em;
+  color: var(--white);
+}
+
+footer ul, footer p {
+  list-style: none;
+  font-size: 0.9em;
+  color: rgba(168, 168, 168);
+  font-family: 'opensans', sans-serif;
+}
+
+.footer {
+  padding: 80px 0;
+  width: 80%;
+  max-width: 1020px;
+  margin: 0 auto;
+}
+
+.footerInner {
+  display: flex;
+  justify-content: space-between;
+}
+
+.footerText {
+  flex-basis: 45%;
+  margin-right: 60px;
+}
+
+.followUs {
+  padding-top: 15px;
+}
+
+.followUs img {
+  margin-right: 15px;
+  float: left;
+  filter: grayscale(100%);
+  -webkit-filter: grayscale(100%);
+  transition: all 0.2s;
+  -webkit-transition: all 0.2s;
+}
+
+.followUs img:hover {
+  margin-bottom: 5px;
+  filter: grayscale(0%);
+  -webkit-filter: grayscale(0%);
+  transform: scale(1.1);
+  -webkit-transform: scale(1.1);
+}
+
+.footerNav {
+  flex-grow: 1;
+  border-left: 1px solid rgba(19, 19, 19);
+  padding-left: 10px;
+}
+
+.footerNav li {
+  padding-bottom: 5px;
+}
+
+.copyright {
+  margin-top: 50px;
+}

frontend/src/app/footer/footer.component.ts

@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {ALTITUDE_VERSION} from '../constant';
 
 @Component({
   selector: 'app-footer',
@@ -10,4 +11,6 @@ export class FooterComponent {
   public getCurrentYear() {
     return new Date().getFullYear();
   }
+
+  protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
 }