Enhance the sub content on the home page

Author: lancebecker

css/main.scss

@@ -60,7 +60,6 @@ img {
   min-height: 100vh;
   background: url('/images/jsmn-hero-banner.jpg') center center no-repeat;
   background-size: cover;
-  padding: 20% 0;
   box-sizing: border-box;
 }
 
@@ -75,7 +74,7 @@ img {
 
 .hero-container-content {
   max-width: 1000px;
-  padding: 30px;
+  padding: 50px 0 0;
 }
 
 .sponsered-by-label {
@@ -196,5 +195,83 @@ img {
 }
 
 .secondary-content {
+  position: relative;
   display: flex;
+  margin: 3% auto;
+  border: 5px solid #e5cf5f;
+  padding: 20px;
+  max-width: 1000px;
+}
+
+.secondary-content-header {
+  display: inline-block;
+  position: relative;
+  margin: 0;
+  font-size: 1.8rem;
+  background: #000;
+  color: #fff;
+  padding: 5px 8px;
+}
+
+.tilt-left {
+
+  .secondary-content-header {
+    top: -10px;
+    left: -35px;
+    transform: rotate( -1deg );
+  }
+
+}
+
+.tilt-right {
+
+  .secondary-content-header {
+    top: -10px;
+    right: -35px;
+    transform: rotate( 1deg );
+  }
+}
+
+.secondary-content-blurb {
+  width: 85%;
+  margin-top: 10px;
+  font-size: 1.1rem;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #efefef;
+}
+
+.map-container {
+  width: 500px;
+  height: 350px;
+  background: #eee;
+}
+
+address {
+  margin-top: 15px;
+  font-weight: bold;
+  font-size: 0.9rem;
+  font-family: 'Didot';
+}
+
+.footer {
+  display: flex;
+  width: 100%;
+  min-height: 300px;
+  color: #000;
+  max-width: 1000px;
+  margin: 0 auto;
+  background: #efefef;
+}
+
+.footer-sitemap {
+  display: flex;
+  flex-direction: column;
+
+  a {
+    color: #000;
+    text-decoration: none;
+    font-weight: bold;
+
+  }
+
 }

pages/_template.jsx

@@ -27,7 +27,7 @@ module.exports = React.createClass({
               About
             </Link>
             <Link to={prefixLink('/code-of-conduct/')} >
-              Code of conduct
+              Code of Conduct
             </Link>
             <Link to={prefixLink('/our_sponsors/')} >
               Current Sponsors
@@ -38,9 +38,26 @@ module.exports = React.createClass({
           </Container>
         </Headroom>
 
-        <Container style={{ maxWidth: '100vw' }} >
+        <Container className="content-body" style={{ maxWidth: '100vw' }} >
           {this.props.children}
         </Container>
+
+        <Container style={{ maxWidth: '100vw' }} className="footer">
+          <div className="footer-sitemap">
+            <Link to={prefixLink('/about/')} >
+              About
+            </Link>
+            <Link to={prefixLink('/code-of-conduct/')} >
+              Code of Conduct
+            </Link>
+            <Link to={prefixLink('/our_sponsors/')} >
+              Current Sponsors
+            </Link>
+            <Link className="highlight" to={prefixLink('/speak/')} >
+              Speak
+            </Link>
+          </div>
+        </Container>
       </div>
     )
   },

pages/index.html

@@ -46,29 +46,32 @@
 
 </div>
 
-<div class="secondary-content">
+<div id="#location" class="secondary-content tilt-left">
   <div class="column">
-    <h2>Location</h2>
-    <div>We are graciously hosted at <a target="_blank" href="http://www.olson.com">Olson</a>'s office space in downtown Minneapolis.</div>
+    <h2 class="secondary-content-header">Location</h2>
+    <div class="secondary-content-blurb">We are graciously hosted at <a target="_blank" href="http://www.olson.com">Olson</a>'s office space in downtown Minneapolis. Parking is available in the adjacent lot or additional street parking near the building.</div>
+    <address>
+      Olson<br>
+      420 N 5th St<br>
+      Suite #1000<br>
+      Minneapolis, MN 55401
+    </address>
+
   </div>
   <div class="column">
     <div class="map-container">
-      <!--<iframe-->
-      <!--width="600"-->
-      <!--height="450"-->
-      <!--frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAPxFG1VO32vtbAYZC1xP9FmikFnzCl_aQ &q=420+N+5th+St+Minneapolis,+MN+55401" allowfullscreen>-->
-      <!--</iframe>-->
     </div>
   </div>
 
 </div>
 
-<div class="secondary-content">
+<div class="secondary-content tilt-right">
   <div class="column">
     <img src="images/speak.jpeg" />
   </div>
   <div class="column">
-    <h2>Speaking</h2>
-    <div>Interested in speaking?
+    <h2 class="secondary-content-header">Speaking</h2>
+    <div>Interested in speaking?</div>
   </div>
 </div>
+