Implement complete parter section with logos

Author: kylemh

src/scenes/home/landing/partners/partners.css

@@ -1,35 +1,15 @@
-.partnersSection {
-  flex-flow: row wrap;
-  justify-content: space-around;
-}
-
-.partnersLeft, .partnersRight {
-  width:auto;
-  max-width: 50%;
-  min-width:400px;
-}
 .partners {
-  min-width:400px;
-  max-width: 50%;
-  font-size:16px;
-  display:flex;
-  justify-content: center;
+  font-size: 16px;
 }
 
-.partners p {
-  display: block;
-  width:80%;
+.partnerLogos {
+  display: flex;
+  flex-flow: row wrap;
+  width: 80%;
+  justify-content: space-around;
+  padding-top: 15px;
 }
 
-.partnersLogos {
-  min-width:400px;
-  display:flex;
-  justify-content: center;
+.partnerLogos > div {
+  margin: 2.5%;
 }
-
-.apexLogo {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  width: 80%;
-}

src/scenes/home/landing/partners/partners.js

@@ -1,28 +1,57 @@
 import React, { Component } from 'react';
 import Section from 'shared/components/section/section';
-import apexPartnerImage from 'images/partners/apex.jpg';
+import apexLogo from 'images/partnerLogos/apex_systems_logo.jpg';
+import githubLogo from 'images/partnerLogos/github_logo.jpg';
+import dockerLogo from 'images/partnerLogos/docker_logo.jpg';
+import oreillyLogo from 'images/partnerLogos/oreilly_logo.jpg';
+import hackerrankLogo from 'images/partnerLogos/hackerrank_logo.jpg';
 import styles from './partners.css';
 
 
 class Partners extends Component {
   render() {
     return (
-      <Section className={styles.partnersSection} theme="white">
-        <Section title="Partners" className={styles.partnersLeft} theme="white">
-          <div className={styles.partners}>
-            <p>
-              Thanks to our partners, our all-volunteer organization at
-              Operation Code continues to serve the military community.
-              We are deeply grateful to the leadership of these
-              organizations that are supporting our mission.
-            </p>
+      <Section
+        title="Partners"
+        theme="white"
+        margin
+      >
+        <div className={styles.partners}>
+          <p>
+            Thanks to our partners, our all-volunteer organization at
+            Operation Code continues to serve the military community.
+            We are deeply grateful to the leadership of these
+            organizations that are supporting our mission.
+          </p>
+        </div>
+
+        <div className={styles.partnerLogos}>
+          <div>
+            <a href="https://apexsystems.com/">
+              <img src={apexLogo} alt="Apex Systems" width="200" />
+            </a>
+          </div>
+          <div>
+            <a href="https://github.com/">
+              <img src={githubLogo} alt="GitHub" width="200" />
+            </a>
+          </div>
+          <div>
+            <a href="https://docker.com/">
+              <img src={dockerLogo} alt="Docker" width="200" />
+            </a>
+          </div>
+          <div>
+            <a href="https://oreilly.com/">
+              <img src={oreillyLogo} alt="O&apos;Reilly Media" width="200" />
+            </a>
+          </div>
+          <div>
+            <a href="https://hackerrank.com/">
+              <img src={hackerrankLogo} alt="HackerRank" width="200" />
+            </a>
           </div>
-        </Section>
-        <Section className={styles.partnersRight} theme="white">
-          <p><img src={apexPartnerImage} alt="Apex" className={styles.apexLogo} /></p>
-          <p> GitHub </p>
-          <p> Docker </p>
-        </Section>
+        </div>
       </Section>
     );
   }