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