Merge branch 'master' into dh-general-info

frontend/src/App/App.js

@@ -2,12 +2,17 @@ import React from 'react';
 import './App.scss';
 import Header from '../Header/Header.js';
 import GeneralInfo from '../GeneralInfo/GeneralInfo.js'; 
+import Main from '../Main/Main.js';
+import Footer from '../Footer/Footer.js';
+
 
 const App = () => {
   return (
     <main className="app-wrapper">
       <Header />
       <GeneralInfo />
+      <Main />
+      <Footer />
     </main>
   )
 };

frontend/src/App/App.scss

@@ -1,6 +1,10 @@
 .App {
   text-align: center;
 }
+.app-wrapper {
+  display: flex;
+  flex-direction: column;
+}
 
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
@@ -19,6 +23,17 @@
   color: white;
 }
 
+.App-footer {
+  background-color: #282c34;
+  min-height: 170vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
 .App-link {
   color: #61dafb;
 }

frontend/src/Email/Email.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Email.scss'; 
+
+const Email = () => {
+  return (
+    <div className="email">
+
+    </div>
+  )
+};
+
+export default Email;

frontend/src/Email/Email.scss

@@ -0,0 +1,9 @@
+@import '../index.scss'; 
+
+.email {
+  background-color: $off-white; 
+  display: flex; 
+  justify-content: space-between; 
+  height: 300px;
+}
+

frontend/src/Footer/Footer.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import './Footer.scss'; 
+
+const Footer = () => {
+  return (
+    <footer>
+      <div className="footer-location">
+        <h3>Exit Plan</h3>
+        <hr></hr>
+        <br />
+        <p>123 W 12th Street,</p>
+        <p>Denver, CO 12345</p>
+      </div>
+      <div className="footer-links">
+        <h3>Useful Links</h3>
+        <hr></hr>
+        <a>Customer Support</a>
+        <br/>
+        <a>Emergency Resources</a>
+        <br/>
+        <a>Directory</a>
+      </div>
+    </footer>
+  )
+};
+
+export default Footer;

frontend/src/Footer/Footer.scss

@@ -0,0 +1,33 @@
+@import '../index.scss'; 
+
+footer {
+  background-color: $dark-blue; 
+  height: 100px; 
+  display: flex; 
+  flex-direction: row;
+  justify-content: space-between; 
+  color: $off-white;
+  align-items: center;
+  font-family: Helvetica, sans-serif; 
+}
+
+.footer-location {
+  width: 125px;
+  margin-left: 20px;
+}
+
+.footer-links {
+  width: 125px;
+  text-align: right;
+  margin-right: 20px;
+}
+
+h3 {
+  font-size: 18px;
+  font-style: italic;
+}
+
+p, a {
+  font-size: 12px;
+}
+

frontend/src/Hero/Hero.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Hero.scss'; 
+
+const Hero = () => {
+  return (
+    <div className="hero">
+      <img className="hero-logo" src="./assets/Exit_Plan_Hero.png" alt="exit plan hero"/>
+    </div>
+  )
+};
+
+export default Hero;

frontend/src/Hero/Hero.scss

@@ -0,0 +1,16 @@
+@import '../index.scss'; 
+
+.hero {
+  background-color: $off-white; 
+  display: flex; 
+  justify-content: space-between; 
+  height: 400px;
+}
+
+.hero-logo {
+  width: 100%; 
+  margin-top: 3%; 
+  padding-left: 10%;
+  padding-right: 10%;
+  margin-bottom: 3%;
+}

frontend/src/Intro/Intro.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './Intro.scss'; 
+
+const Intro = () => {
+  return (
+    <div className="intro">
+      <div className="intro-text">
+        some text
+      </div>
+      <div className="intro-video">
+        some more text
+      </div>
+    </div>
+  )
+};
+
+export default Intro;

frontend/src/Intro/Intro.scss

@@ -0,0 +1,20 @@
+@import '../index.scss'; 
+
+.intro {
+  background-color: $off-white; 
+  display: flex; 
+  justify-content: space-between; 
+  height: 300px;
+  flex-direction: row;
+  font-family: Helvetica, sans-serif; 
+}
+
+.intro-text {
+  width: 50%;
+  background: green;
+}
+
+.intro-video {
+  width: 50%;
+  background: purple;
+}

frontend/src/Link/Link.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Link.scss'; 
+
+const Link = () => {
+  return (
+    <div className="link">
+
+    </div>
+  )
+};
+
+export default Link;

frontend/src/Link/Link.scss

@@ -0,0 +1,8 @@
+@import '../index.scss'; 
+
+.link {
+  background-color: $light-blue; 
+  display: flex; 
+  justify-content: space-between; 
+  height: 300px;
+}

frontend/src/Main/Main.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import './Main.scss'; 
+import Hero from '../Hero/Hero.js';
+import Intro from '../Intro/Intro.js';
+import Link from '../Link/Link.js';
+import Email from '../Email/Email.js';
+
+
+const Main = () => {
+  return (
+    <main>
+      <Hero />
+      <Intro />
+      <Link />
+      <Email />
+    </main>
+  )
+};
+
+export default Main;

frontend/src/Main/Main.scss

@@ -0,0 +1,9 @@
+@import '../index.scss'; 
+
+main {
+  background-color: $off-white; 
+  height: 900px; 
+  display: flex; 
+  flex: 1;
+  justify-content: space-between; 
+}