Add footer

src/components/Footer/Footer.scss

@@ -1,25 +1,72 @@
 @import "../../assets/scss/globals";
 
 .footer {
-  width: 100%;
-  padding: 0.5rem;
-  margin-top: 10rem;
+  display: flex;
+  flex-direction: column;
+
+  &__info {
+    display: flex;
+    flex-direction: row nowrap;
+  }
+
+  & h4 {
+    color: $light-blue;
+    text-transform: uppercase;
+    padding: 1.5rem 0;
+    letter-spacing: 2px;
+  }
+
+  & a {
+    color: $white;
+    text-decoration: underline;
+    padding: 0.4rem 0;
+    font-size: 12px;
+  }
+
+  & p {
+    color: $white;
+    margin: 0;
+    padding: 0.4rem 0;
+    font-size: 12px;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    width: 60%;
+    margin: 0 20rem;
+  }
+
+  &__contacts {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    flex-direction: row nowrap;
+  }
 
   &__content {
-    position: absolute;
-    bottom: 0;
-    padding: 1rem;
-    width: 100%;
-    text-align: center;
+    display: flex;
+    position: relative;
+    flex-flow: column;
+    text-align: left;
+  }
+
+  &__links {
+    display: flex;
+    position: relative;
+    flex-flow: column;
+    text-align: left;
   }
 
   &__copyright {
     display: flex;
     flex-flow: row nowrap;
+    background-color: $black;
     align-items: center;
     text-align: center;
     justify-content: space-evenly;
     font-size: 12px;
-    padding: 0 43rem;
+    padding: 1rem 40rem;
   }
 }

src/components/Footer/Footer.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import FooterMap from "../FooterMap/FooterMap";
 import "./Footer.scss";
 
 export interface FooterProps {}
@@ -8,11 +9,35 @@ class Footer extends React.Component<FooterProps, FooterState> {
   render() {
     return <React.Fragment>
       <div className="footer">
-      </div>
+        <div className="footer__info">
+          <div className="footer__text">
+            <h4>Aalto-yliopiston Sähköinsinöörikilta ry</h4>
+            <div className="footer__contacts">
+              <div className="footer__content">
+                <p>TUAS-Talo</p>
+                <p>Maarintie 8</p>
+                <p>PL 15500, 00076 Aalto</p>
+                <br></br>
+                <br></br>
+                <p>Y-tunnus: 1627010-1</p>
+                <p>sik-hallitus@list.ayy.fi</p>
+                <a href="/yhteystiedot">Yhteystiedot</a>
+              </div>
+              <div className="footer__links">
+                <a href="/jaseneksi">Jäseneksi</a>
+                <a href="/palaute">Palaute</a>
+                <a href="/arkisto">Arkisto</a>
+                <a href="/materiaalipankki">Materiaalipankki</a>
+              </div>
+            </div>
+          </div>
+          <FooterMap />
+        </div>
       <div className="footer__copyright">
-        <a>&copy; Aalto-yliopiston Sähköinsinöörikilta ry</a>
-        <a>webmaster: sik-vtmk@list.ayy.fi</a>
+        <p>&copy; Aalto-yliopiston Sähköinsinöörikilta ry</p>
+        <p>webmaster: sik-vtmk@list.ayy.fi</p>
       </div>
+    </div>
     </React.Fragment>;
   }
 }

src/components/FooterMap/FooterMap.scss

@@ -0,0 +1,5 @@
+@import "../../assets/scss/globals";
+
+.footer-map {
+  display: flex;
+}

src/components/FooterMap/FooterMap.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import "./FooterMap.scss";
+
+const AnyReactComponent = ({ text }) => <div>{text}</div>;
+
+export interface FooterMapProps {}
+
+export interface FooterMapState {}
+
+class FooterMap extends React.Component<FooterMapProps, FooterMapState> {
+  render() {
+    return (
+      <div className="footer-map">
+        <iframe
+          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1983.6122518000927!2d24.81667815176689!3d60.187150048900186!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x468df5eb3cb4ecf1%3A0x3480cbfeedcc07b6!2sMaarintie+8%2C+02150+Espoo!5e0!3m2!1sfi!2sfi!4v1542413548247"
+          width="600"
+          height="350"
+        >
+        </iframe>
+      </div>
+
+    );
+  }
+}
+
+export default FooterMap;

src/components/FooterMap/index.ts

@@ -0,0 +1,2 @@
+import FooterMap from "./FooterMap";
+export default FooterMap;

src/pages/FrontPage/FrontPage.tsx

@@ -92,6 +92,9 @@ class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
         <PageSection backgroundColor={PageSectionColor.DarkBlue}>
           Märkää
         </PageSection>
+        <PageSection backgroundColor={PageSectionColor.White}>
+          Sponssit
+        </PageSection>
       </div>
     );
   }