From 1e623a371041e9193982686f8b115582749177ef Mon Sep 17 00:00:00 2001
From: Ward Bell <wardbell@hotmail.com>
Date: Sat, 1 Apr 2017 18:44:16 -0700
Subject: [PATCH] feat(aio): add original style for feature page

fixes link to quick start; moves $unit to constants
---
 aio/content/marketing/features.html        |  2 +-
 aio/src/styles/2-modules/_contributor.scss |  1 -
 aio/src/styles/2-modules/_features.scss    | 24 ++++++++++++++++++++++
 aio/src/styles/2-modules/_modules-dir.scss |  1 +
 aio/src/styles/2-modules/_presskit.scss    |  1 -
 aio/src/styles/_constants.scss             |  1 +
 6 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 aio/src/styles/2-modules/_features.scss

diff --git a/aio/content/marketing/features.html b/aio/content/marketing/features.html
index 8923cd43bd..c38935c7a4 100755
--- a/aio/content/marketing/features.html
+++ b/aio/content/marketing/features.html
@@ -58,7 +58,7 @@
       </div>
     </div>
   </div>
-  <div class="cta-bar"><a href="/docs/ts/latest/quickstart.html" md-button="md-button"
+  <div class="cta-bar"><a href="guide/quickstart" md-button="md-button"
                           class="button button-large button-shield mat-raised mat-primary">Get
     Started</a></div>
 </article>
diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/_contributor.scss
index d9dc5159b5..3661c532fe 100644
--- a/aio/src/styles/2-modules/_contributor.scss
+++ b/aio/src/styles/2-modules/_contributor.scss
@@ -1,4 +1,3 @@
-$unit: 8px;
 $metal: #536E7A;
 $snow: #FFFFFF;
 $steel: #253238;
diff --git a/aio/src/styles/2-modules/_features.scss b/aio/src/styles/2-modules/_features.scss
new file mode 100644
index 0000000000..a9b27a2a9f
--- /dev/null
+++ b/aio/src/styles/2-modules/_features.scss
@@ -0,0 +1,24 @@
+.feature-row {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+  }
+
+  h2.text-headline {
+    font-size: 28px;
+    margin-top: 10px;
+    color: #37474F;
+  }
+}
+
+.features-desc {
+  max-width: 920px;
+}
+
+.feature {
+  max-width: 350px;
+  margin-bottom: $unit * 4;
+}
diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss
index 160fc5c679..b19699a98e 100644
--- a/aio/src/styles/2-modules/_modules-dir.scss
+++ b/aio/src/styles/2-modules/_modules-dir.scss
@@ -3,6 +3,7 @@
    ============================== */
 
    @import 'hamburger';
+   @import 'features';
    @import 'code';
    @import 'contributor';
    @import 'alert';
diff --git a/aio/src/styles/2-modules/_presskit.scss b/aio/src/styles/2-modules/_presskit.scss
index 9591295435..5810d50b00 100644
--- a/aio/src/styles/2-modules/_presskit.scss
+++ b/aio/src/styles/2-modules/_presskit.scss
@@ -1,4 +1,3 @@
-$unit: 8px;
 .presskit-container {
   h2 {
     color: #37474F;
diff --git a/aio/src/styles/_constants.scss b/aio/src/styles/_constants.scss
index 54734e9370..430e3af12d 100755
--- a/aio/src/styles/_constants.scss
+++ b/aio/src/styles/_constants.scss
@@ -1,4 +1,5 @@
 $small-breakpoint-width: 840px;
+$unit: 8px;
 
 // TYPOGRAPHY
 $main-font: "Roboto","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;