Create Fork App section

src/index.html

@@ -13,7 +13,7 @@
 
     <!-- Fonts -->
     <link href='https://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
-    <link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" rel="stylesheet">
 
     <!-- Bootstrap -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
@@ -49,6 +49,19 @@
             </ul>
         </div>
     </nav>
+
+    <header id="hero">
+        <!--<img src="img/hero/img.png">-->
+        <div>
+            <h1>Fork app</h1>
+            <h2>A real gamechanger in the world of web development</h2>
+            <h3>V. 2.8 for Mac and Windows</h3>
+        </div>
+    </header>
+    <section id="download">
+        <a href="#" class="raised-button">Download for free now</a>
+        <p>Unlimited 30-Days trial period</p>
+    </section>
 </div>
 
 <!-- JavaScript -->

src/scss/_download.scss

@@ -0,0 +1,20 @@
+#download {
+  text-align: center;
+
+  a.raised-button {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    font-size: 21px;
+    font-weight: bold;
+    text-transform: capitalize;
+    padding: 15px 60px;
+  }
+
+  p {
+    padding-top: 45px;
+    font-family: Montserrat, sans-serif;
+    font-size: 14px;
+    color: $regular-text;
+    text-transform: capitalize;
+  }
+}

src/scss/_hero.scss

@@ -0,0 +1,32 @@
+#hero {
+  background: url(../img/hero/img.png) no-repeat 50% 40% / contain;
+  height: 900px;
+  padding-top: 110px;
+
+  h1 {
+    font-family: Montserrat, sans-serif;
+    font-size: 82px;
+    font-weight: bold;
+    color: white;
+    text-transform: capitalize;
+    text-align: center;
+  }
+
+  h2 {
+    font-family: Lato, sans-serif;
+    font-size: 30px;
+    color: $primary;
+    text-align: center;
+    margin-bottom: 0;
+  }
+
+  h3 {
+    margin-top: 20px;
+    font-family: Montserrat, sans-serif;
+    font-size: 16px;
+    font-weight: 600;
+    color: $regular-text;
+    text-transform: uppercase;
+    text-align: center;
+  }
+}

src/scss/_variables.scss

@@ -1,2 +1,3 @@
 $primary: #8d81ac;
-$primary-dark: #635c73;
+$primary-dark: #635c73;
+$regular-text: #848e97;

src/scss/style.scss

@@ -1,3 +1,5 @@
 @import "variables";
+@import "buttons";
 @import "navbar";
-@import "buttons";
+@import "hero";
+@import "download";