Footer

src/colors.css

@@ -3,4 +3,5 @@
   --black: #0F1721;
   --gray: #757575;
   --blue: #00455D;
+  --white: #FEFEFE;
 }

src/components/footer.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import './intro.css';
+
+export default function Footer() {
+    return(
+  <div className="footer-wrapper">
+    <div className="footer-left-column">
+      <h1>
+        <span className="footer-big">Code For Syracuse</span>
+        </h1>
+        <p className="footer-byline">
+        About
+      </p>
+      <p className="footer-byline">
+        Volunteer
+      </p>
+      <p className= "footer-byline">
+        Civic Data Sources
+      </p>
+    </div>
+
+<div className="footer-right-column">
+<h1>
+        <span className="footer-big">Contact Us</span>
+        </h1>
+        <p className="footer-byline">
+        Email: <a href= "mailto: [email protected]">[email protected]</a> 
+      </p>
+      <p className="footer-byline">
+      Slack: Join the <a href="https://slackacuse.herokuapp.com/">Syracuse.io</a> Slack group
+      </p>
+      <p className= "footer-byline">
+      Twitter: <a href="https://twitter.com/codeforsyracuse">@CodeForSyracuse</a> 
+      </p>
+      <p className= "footer-byline">
+      Meetup: <a href="https://www.meetup.com/Code-for-Syracuse/">Code For Syracuse</a>
+      </p>
+</div>
+</div>
+    )
+}

src/components/intro.css

@@ -140,3 +140,48 @@
   width: 100%;
   border-radius: 4px;
 }
+
+/* ---------------------------------------------------------------------------- */
+/* Footer */
+/* ------------------------------------------------------------------------------ */
+.footer-wrapper {
+  display: flex;
+  padding-top: 2880px;
+  padding-left: 50px;
+  padding-right: 50px;
+
+  margin: 0px auto;
+  background: white;
+}
+
+.footer-left-column {
+  width: 50%;
+  margin-right: 75px;
+}
+
+.footer-right-column {
+  width: 50%;
+  margin-left: 75px;
+}
+
+.footer-big {
+  color: var(--black);
+  font-size: 24px;
+  font-style: normal;
+  font-weight: bold;
+  line-height: 33px;
+}
+
+.footer-byline {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 22px;
+  color: var(--black);
+}
+
+.footer-byline a {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 22px;
+  color: var(--orange);
+}

src/components/layout.js

@@ -11,6 +11,7 @@ import { useStaticQuery, graphql } from "gatsby"
 
 import Header from "./header"
 import "./layout.css"
+import Footer from "./footer"
 
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`

src/pages/index.js

@@ -2,22 +2,19 @@ import React from "react"
 import { Link } from "gatsby"
 
 import Layout from "../components/layout"
-import Image from "../components/image"
+
 import SEO from "../components/seo"
 
-import Intro from '../components/intro';
+import Intro from '../components/intro'
+
+import Footer from '../components/footer';
 
 const IndexPage = () => (
   <div>
     <Intro />
     <Layout>
       <SEO title="Home" />
-      <h1>Hi people</h1>
-      <p>Welcome to your new Gatsby site.</p>
-      <p>Now go build something great.</p>
-      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-        <Image />
-      </div>
+      <Footer />
       <Link to="/page-2/">Go to page 2</Link>
     </Layout>
   </div>