fix: Relocate developer champion badge on landing page (#390)

newrelic · Jul 1, 2020 · f7f68c3 · f7f68c3
1 parent aad58bf
commit f7f68c3
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 27 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -179,33 +179,37 @@ const IndexPage = ({ data, pageContext }) => {
           built by the New Relic community.
         </p>
 
-        <section className={cx(styles.section, styles.stripedSection)}>
-          <h1>
-            <img
-              className={styles.img}
-              src={devChampionBadge}
-              alt="developer champion badge"
-              width="5%"
-            />{' '}
-            New Relic developer champions
-          </h1>
-
-          <p>
-            New Relic Champions are solving big problems using New Relic as
-            their linchpin and are recognized as experts and leaders in the New
-            Relic technical community.
-          </p>
-          <Button
-            as={ExternalLink}
-            variant={Button.VARIANT.PRIMARY}
-            href="https://forms.gle/Zkdub5e1x4MNqSKW9"
-          >
-            Nominate a Developer Champion
-            <FeatherIcon
-              className={styles.externalLinkIcon}
-              name="external-link"
-            />
-          </Button>
+        <section
+          className={cx(
+            styles.section,
+            styles.stripedSection,
+            styles.developerChampions
+          )}
+        >
+          <div>
+            <h1>New Relic developer champions</h1>
+            <p>
+              New Relic Champions are solving big problems using New Relic as
+              their linchpin and are recognized as experts and leaders in the
+              New Relic technical community.
+            </p>
+            <Button
+              as={ExternalLink}
+              variant={Button.VARIANT.PRIMARY}
+              href="https://forms.gle/Zkdub5e1x4MNqSKW9"
+            >
+              Nominate a Developer Champion
+              <FeatherIcon
+                className={styles.externalLinkIcon}
+                name="external-link"
+              />
+            </Button>
+          </div>
+          <img
+            className={styles.img}
+            src={devChampionBadge}
+            alt="developer champion badge"
+          />
         </section>
       </Layout>
     </PageContext.Provider>

diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
@@ -106,3 +106,11 @@
     border-color: inherit;
   }
 }
+
+.developerChampions {
+  display: flex;
+
+  img {
+    height: 9rem;
+  }
+}