From e47ec2f581b4aa2f47f3b19ea74756a6272013c8 Mon Sep 17 00:00:00 2001
From: Lisa P <mail@lislis.de>
Date: Mon, 26 Oct 2015 18:13:38 +0100
Subject: [PATCH] add some flexbox action

---
 app/styles/app/layouts/home-pro.sass | 25 +++++++++++++++++++++++++
 app/templates/home-pro.hbs           | 10 +++++-----
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/styles/app/layouts/home-pro.sass b/app/styles/app/layouts/home-pro.sass
index 792906a5..75852450 100644
--- a/app/styles/app/layouts/home-pro.sass
+++ b/app/styles/app/layouts/home-pro.sass
@@ -68,6 +68,22 @@
   text-align: center
 
 
+.section--feature
+  .inner
+    display: flex
+  
+  .section-list,
+  .section-text
+    flex: 1 0 50%
+
+
+.section--hero
+  .inner
+    display: flex
+  
+  .section-image,
+  .section-text
+    flex: 1 0 50%
 
 %list
   list-style: none
@@ -106,6 +122,15 @@
         image: url(../images/line-icons/icon-passed.svg)
 
 
+.list--features
+  @extend %list
+  display: flex
+  justify-content: space-around
+  flex-wrap: wrap
+
+  li
+    flex: 0 0 50%
+
 
 .landing-pro
 
diff --git a/app/templates/home-pro.hbs b/app/templates/home-pro.hbs
index e06d672c..9b3e89dc 100644
--- a/app/templates/home-pro.hbs
+++ b/app/templates/home-pro.hbs
@@ -1,5 +1,5 @@
 <div id="landing" class="landing landing-pro wrapper">
-  <section class="section--grey">
+  <section class="section--hero section--grey">
     <div class="inner">
       <div class="section-text">
         <h1 class="h1">Builds apps <br class="br-small"> with confidence</h1>
@@ -23,10 +23,10 @@
       </ul>
     </div>
   </section>
-  <section class="section--grey">
+  <section class="section--feature section--grey">
     <div class="inner">
-      <div class="section-list">
-        <ul>
+      <div class="section-list section--center">
+        <ul class="list--features">
           <li>
             <span>GH</span>
             <h3 class="h3">Get set up in seconds</h3>
@@ -85,7 +85,7 @@
   <section class="section--grey section--center">
     <div class="inner">
       <h2 class="h2--teal">Interested in running your <br class="br-small"> private projects with Travis CI?</h2>
-      <a href="#">Start your free trial</a>
+      <a href="#" class="hero-button">Start your free trial</a>
     </div>
   </section>
 </div>
\ No newline at end of file