Feature/#155111485 - Visitor sees Landing Page (Section F) (#191)

* feature #155111485- Visitor sees landing page(Section F)

*  some changes in app.js

* changes in landingf.js

* fixed error

* remove first 2 lines

* commented out the images

* deleted 2 video images

* put images back with closing tag

* changed the landingf

* some changes again

* changed class names

* changed linkedin class

* styles added to social media

* some changes

* column1 changed

* removed <a> tag

* removed few links

* added links

*  fixed error

* another bug

* changed logo image

*  font-size

* changed some css

* changes in margin and padding

* column width change

* fixing test bugs

* few more bugs fixed

* bug

* decreased spacing between columns

* fixed spacing bet columns

* made changes based on review

Author: goodgoof

client/App.js

@@ -16,6 +16,7 @@ import SignupForm from './components/SignupForm/SignupForm'
 import Version from './components/Version/Version'
 import LandingA from './components/LandingA/LandingA'
 import LandingC from './components/LandingC/LandingC'
+import Footer from './components/LandingF/LandingF'
 
 // set up components for lazy loading
 const ProfileRestrictedLoadable = restricted(Loadable({
@@ -53,6 +54,7 @@ class App extends Component {
           <Route path='/signup' component={SignupForm}/>
           <Route path='/landing-a' component={LandingA} />
           <Route path='/landing-c' component={LandingC} />
+          <Route path='/landing-f' component={Footer} />
           <Route path='/show-applications' component={ApplicationsRestrictedLoadable} />
         </Switch>
       </div>

client/components/LandingF/LandingF.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import styles from './LandingF.scss'
+import logoV from '../../images/logo-home-video-copy.png'
+import c3nonprofit from '../../images/501-c-3-nonprofit.png'
+
+class Footer extends React.Component {
+  render () {
+    return (
+      <div className={styles.container}>
+        <div className={styles.column1}>
+          <img src={logoV} alt="Call to code logo"/>
+          <p><img src={c3nonprofit} className={styles.nonProfit} /></p>
+        </div>
+
+        <div className={styles.column2}>
+          <ul className={styles.list}>
+            <li className={styles.projects}><a href="#" className={styles.link}>Projects</a></li>
+          </ul>
+        </div>
+
+        <div className={styles.column3}>
+          <ul className={styles.list}>
+            <li className={styles.about}><a href="#" className={styles.link}>About</a></li>
+          </ul>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Footer

client/components/LandingF/LandingF.scss

@@ -0,0 +1,54 @@
+@import "../../scss/partials/partials";
+
+$black: #2c2c2c;
+$grey: #9fa3a7;
+$white: #ffffff;
+
+
+.container {
+  background-color: $black;
+  background-size: cover;
+  object-fit: contain;
+  height: 438px;
+  color: $white;
+  display: flex;
+  left: 0;
+  right: 0;
+  position: absolute;
+}
+
+.projects, .about {
+  width: 103px;
+  height: 15px;
+  list-style-type: none;
+  font-size: 15.6px;
+  font-weight: bold;
+  letter-spacing: 3.1px;
+  text-align: left;
+}
+
+.link {
+  color: $white;
+}
+.column1, .column2, .column3, .column4 {
+  margin-top: 103px;
+}
+
+.column1 {
+  margin-left: 95px;
+}
+
+.nonProfit {
+  margin-top: 24px;
+}
+.column2 {
+  margin-left: 137px;
+  padding-left: 0px;
+  text-align: left;
+  width: 131px;
+}
+
+.column3 {
+  margin-left: 75px;
+  width: 131px;
+}