445 who we are

client/src/components/Application.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import NavBar from '../components/Navigation/Navbar';
+import Footer from '../components/Footer/Footer';
 
 const Application = ({
   auth,
@@ -22,6 +23,7 @@ const Application = ({
       {...props}
     />
     {props.children}
+    <Footer />
   </div>
 );
 

client/src/components/HeroCTA.js

@@ -6,7 +6,7 @@ const HeroCTA = () => (
     <div className="hero-wrapper">
       <div className="hero-page-header">
         <div className="opacity-div">
-          <h1>NEED RECYCLING IN YOUR APARTMENT OR CONDO?</h1>
+          <h1>this is RECYCLING IN YOUR APARTMENT OR CONDO?</h1>
           <div className="font-italic">Recruit, Request, Recycle</div>
         </div>
       </div>

client/src/components/Informational/Collaboration.js

@@ -1,34 +1,42 @@
 import React from 'react';
 import { Grid, Row, Col, PageHeader } from 'react-bootstrap';
+import SubmitButton from '../ChooseCampaign/SubmitButton';
 
 const Collaboration = () => (
   <Grid fluid>
     <Row>
-      <Col xs={12} md={10} mdOffset={1}>
-        <PageHeader className="info-page-header-overrides">Who Are We</PageHeader>
+      <Col xs={12}>
+        <PageHeader className="info-page-header-overrides text-center">Who We Are </PageHeader>
+      </Col>
+    </Row>
+    <Row>
+      <Col>
         <p className="info-text">
           <a
             className="info-link"
             target="_blank"
             rel="noopener noreferrer"
             href="https://www.codefordenver.org/"
-          >
-            Code For Denver
-          </a>{' '}
-          is volunteer-driven, community outreach that improves people’s lives through technology.
-        </p>
-        <p className="info-text">
-          <a
-            className="info-link"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://www.ecocycle.org"
-          >
-            Eco-Cycle
-          </a>{' '}
-          is a Zero Waste non-profit based in Boulder Colorado. They started working in Denver in
-          2016 as a commitment at the Denver Sustainable Summit to increase Denver’s diversion rate
-          to 34%.
+          />{' '}
+          <div id="f1">
+            <p className="info-page-header-overrides">
+              Eco-Cycle <br />
+              is a Zero Waste non-profit based in Boulder Colorado. They started working in Denver
+              in 2016 as a commitment at the Denver Sustainable Summit <br /> to increase Denver’s
+              diversion rate to 34%.
+              <SubmitButton buttonText={'Eco-Cycle'} />
+            </p>
+          </div>
+          <div id="f2" />
+          <div id="f3">
+            <p className="info-page-header-overrides">
+              Code For Denver <br />
+              is volunteer-driven, community outreach that improves people’s lives through
+              technology.
+              <SubmitButton className="submit-button" buttonText={'Code For Denver'} />
+            </p>
+          </div>
+          <p />
         </p>
       </Col>
     </Row>

client/src/stylesheets/components/_Footer.scss

@@ -22,3 +22,4 @@
     text-decoration: none;
   }
 }
+

client/src/stylesheets/components/_HeroCTA.scss

@@ -105,4 +105,8 @@
       font-size: 22px;
     }
   }
+}
+.who-we-are-footer {
+  background-color: red;
+
 }

client/src/stylesheets/components/_info.scss

@@ -7,20 +7,41 @@
     padding-bottom: 1em;
   }
 }
-
+#f1{
+  flex: 1;
+  text-align: center;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 450px;
+  padding: 20px;
+}
+#f3{
+  flex: 1;
+  text-align: center;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 438px;
+  padding: 20px;
+}
+.submit-button {
+width: 15%;
+height: 100px;
+display: block;
+margin-left: auto;
+margin-right: auto;
+}
 .info-link {
   text-decoration: none;
   color: $maingreen;
 }
-
 .info-link:hover {
   color: $hovergreen;
 }
-
 .info-page-header-overrides {
   border-bottom: none;
 }
-
 .info-list {
   padding-left: 25px;
   padding-right: 25px;
@@ -30,11 +51,62 @@
     padding-bottom: 7px;
   }
 }
-
 .info-numeric-list {
   list-style-type: decimal;
 }
-
 .info-alpha-list {
   list-style-type: lower-alpha;
 }
+#center-line {
+  background-color: black;
+  border-color: black;
+  content:"";
+  margin: 10px auto;
+  width: 60%;
+  height: 100px;
+  border: 1px solid #333;
+  position:relative;
+  text-align:center
+}
+.flexable {
+  display: flex;
+  background-color: red;
+}
+@media only screen and (min-width: 768px) {
+  .info-text {
+    display: flex;
+    height: 600px;
+  }
+  #f1{
+    flex: 1;
+    text-align: right;
+    margin-right: 1%;
+  }
+  #f2{
+    border-left: 1px solid white;
+    height: 500px;
+    position: absolute;
+    left: 50%;
+    margin-left : 1%;
+    top: 25%;
+  }
+  #f3{
+    flex: 1;
+    text-align: left;
+    margin-left: 1%;
+  }
+  #f1 .join-campaign-button.btn.btn-remove-default.btn-block {
+      width: 150px;
+      display: inline;
+      margin-top: 50px;
+   }
+   #f3 .join-campaign-button.btn.btn-remove-default.btn-block {
+    width: 150px;
+    display: inline;
+    margin-top: 98px;
+   }
+   .join-campaign-button.btn.btn-remove-default.btn-block {
+      width: 250px;
+   }
+
+}