added header and header styles

src/components/app.js

@@ -4,7 +4,14 @@ export default class App extends Component {
   render() {
     return (
       <div>
-        <h1>Bottega Mad Libs</h1>
+        <div className="backgroundSkew">
+          <div className="madlib-heading">
+            <h1>Bottega Mad Libs</h1>  
+            <div className="madlib-subheading">
+              Fill out the fields below and click the generate button<br/>to see the Mad Lib story.
+            </div>
+          </div>
+        </div>
       </div>
     );
   }

src/style/main.scss

@@ -0,0 +1,34 @@
+$bottegaGreen:#00CB79;
+$clearBlue: #45B0E5;
+$mainGray: #CFCFCF;
+$darkGray: #444444;
+$font-primary: 'Montserrat', sans-serif;
+
+.backgroundSkew {
+    width: 100vw;
+    height: 700px;
+    background-color: $darkGray;
+    transform: skewY(-10deg);
+    margin-top: -17rem;
+    padding-top: 17rem;
+    border-bottom: 1rem solid $bottegaGreen;
+}
+
+.backgroundSkew > * {
+    transform: skewY(10deg);
+}
+
+.madlib-heading {
+    text-align: center;
+    margin: 20px;
+    padding-top: 46px;
+    color: white;
+    font-weight: 700;
+    font-family: $font-primary;
+}
+
+.madlib-subheading {
+    margin-bottom: 46px;
+    color: rgba(255,255,255,0.75);
+    font-size: 15px;
+}