Quiz section

src/Quiz/Quiz.css

@@ -0,0 +1,84 @@
+.Quiz {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+}
+
+.Title {
+  z-index: 100;
+}
+
+.quiz-splash {
+  position: absolute;
+  z-index: 0;
+  margin-left: 9rem;
+  padding-bottom: 7rem;
+}
+
+.quiz-logo {
+  z-index: 50;
+}
+
+.content {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.quiz-info-section {
+  z-index: 100;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.quiz-info {
+  color: #c3c8e5;
+  font-size: 1.5rem;
+  letter-spacing: 1px;
+  line-height: 2.25rem;
+  max-width: 60%;
+  text-align: right;
+}
+
+.quiz-btn {
+  margin-top: 2rem;
+}
+
+@media(max-width:990px) {
+  .content {
+    flex-direction: column;
+  }
+  .quiz-info-section {
+    margin: 2rem 0;
+  }
+  .quiz-splash {
+    margin-left: 0;
+  }
+  .quiz-logo {
+    width: 100%;
+  }
+  .logo {
+    flex-direction: column;
+  }
+  .Title {
+    text-align: center;
+  }
+  .quiz-info {
+    text-align: center;
+  }
+}
+
+@media(max-width:660px) {
+  .quiz-splash {
+    width: 100%;
+  }
+}

src/Quiz/Quiz.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { TitleAccent, Title, Button } from '../_components';
+import './Quiz.css';
+
+const Quiz = () => (
+  <section id="Quiz" className="Quiz">
+    <Title className="Title">
+          Proove your
+      <TitleAccent color="hero"> React</TitleAccent>
+      <span> skills</span>
+    </Title>
+    <div className="container content">
+      <div className="logo">
+        <img src="./quiz-illustration.png" className="quiz-logo" alt="" />
+        <img src="./quiz-splash.png" className="quiz-splash" alt="" />
+      </div>
+      <div className="quiz-info-section">
+        <p className="quiz-info">
+          We will choose top 10% performers who will win a React Champion button badge.
+          Please make sure to provide your email address so we can contact you.
+        </p>
+        <Button
+          link
+          size="default"
+          className="quiz-btn"
+          href="$"
+        >
+          Go to the Quiz
+        </Button>
+      </div>
+    </div>
+  </section>
+);
+
+export default Quiz;