From 78f7fc99b0b2aa5241b5c94e1c35263c798cda39 Mon Sep 17 00:00:00 2001
From: Justine Arreche <justinearreche@gmail.com>
Date: Thu, 2 Apr 2015 18:10:48 +0200
Subject: [PATCH] fixes to the features callouts alignment issue and resposive
 state

---
 app/styles/app/landing.sass | 37 +++++++++++++++--------------
 app/templates/home.hbs      | 46 +++++++++++++------------------------
 2 files changed, 36 insertions(+), 47 deletions(-)

diff --git a/app/styles/app/landing.sass b/app/styles/app/landing.sass
index 41a63711..861c3405 100644
--- a/app/styles/app/landing.sass
+++ b/app/styles/app/landing.sass
@@ -78,9 +78,6 @@
     border: 2px solid #d8dadc
     border-radius: 2px
 
-  .laptop-wrapper-mobile
-    display: none
-
   .hero
     background-color: #faf9f6
     h1
@@ -207,6 +204,8 @@
       font-weight: 300
       color: #413c3c
       text-align: center
+      margin-bottom: 35px
+      padding-top: 40px
 
     p
       font-size: 1.15em
@@ -220,11 +219,28 @@
     .features-callouts
       text-align: center
 
+    #f-co-1, #f-co-2, #f-co-3, #f-co-4
+      background-repeat: no-repeat;
+      background-position: 50% 0
+      height: 32px
+
+    #f-co-1, #f-co-2, #f-co-3, #f-co-4
+      background-image: url('../images/landing-page/features-callouts-1.svg')
+
+    #f-co-2
+      background-image: url('../images/landing-page/features-callouts-2.svg')
+
+    #f-co-3
+      background-image: url('../images/landing-page/features-callouts-3.svg')
+
+    #f-co-4
+      background-image: url('../images/landing-page/features-callouts-4.svg')
+
     .features-checked
       padding-left: 30px
 
     ul
-      list-style-image: url('../images/landing-page/features-check.svg')
+      list-style-image: url('../images/landing-page/features-check.svg') 
       padding-left: 1.5em
 
     li
@@ -280,25 +296,12 @@
       width: 100%
 
   @media (max-width: 886px)
-    .laptop-wrapper-mobile
-      display: block
-      width: 100%
-
-    .hero .laptop-wrapper-mobile #laptop img
-      width: 80%
-      margin-left: 9%
-
-    .laptop-wrapper
-      display: none
-
     #hero-copy
       display: block
       width: 100%
       text-align: center
 
     .hero h1
-      margin-top: 40px
-      text-align: center
       max-width: 100%
 
     .hero p
diff --git a/app/templates/home.hbs b/app/templates/home.hbs
index 7e27146b..95a5b9b6 100644
--- a/app/templates/home.hbs
+++ b/app/templates/home.hbs
@@ -1,12 +1,6 @@
 <div id="landing">
   <div class="row hero z-1">
   	<div class="landing-centered-wrapper">
-			<div class="large-12 columns laptop-wrapper-mobile">
-	    	<div id="laptop">
-		    	<img src="../images/landing-page/laptop.png">
-		    </div>
-		  </div>
-
 			<div class="large-12 columns" id="hero-copy">
 	    	<h1>Test and deploy with confidence</h1>
 	    	<p>Easily sync projects with Github<br class="mobile-break"> and you’ll be testing your in minutes!</p>
@@ -90,30 +84,22 @@
   <div class="row features-list">
   	<div class="landing-centered-wrapper">
     	<div class="large-6 columns features-callouts">
-		    <row>
-		      <div class="medium-6 columns">
-		      	<img src="../images/landing-page/features-callouts-1.svg" class="features-img">
-		        <h3>Get set up in seconds</h3>
-		        <p>Login with GitHub, tell Travis CI to test a project, and then push to GitHub. Could it be any simpler!</p>
-		      </div>
-		      <div class="medium-6 columns">
-		      	<img src="../images/landing-page/features-callouts-2.svg" class="features-img">
-		        <h3>Multi-language support</h3>
-		        <p>Make sure your code runs against all versions of your favorite language without breaking a sweat.</p>
-		      </div>
-	    	</row>
-	    	<row>
-		      <div class="medium-6 columns">
-		      	<img src="../images/landing-page/features-callouts-3.svg" class="features-img">
-		        <h3>Test your pull requests</h3>
-		        <p>Make sure every Pull Request to your project is tested before merging.</p>
-		      </div>
-		      <div class="medium-6 columns">
-		      	<img src="../images/landing-page/features-callouts-4.svg" class="features-img">
-		        <h3>Deploy to s3 and Heroku</h3>
-		        <p>Updating staging or production as soon as your tests pass has never been easier!</p>
-		      </div>
-		    </row>
+	      <div class="medium-6 columns">
+	        <h3 id="f-co-1">Get set up in seconds</h3>
+	        <p>Login with GitHub, tell Travis CI to test a project, and then push to GitHub. Could it be any simpler!</p>
+	      </div>
+	      <div class="medium-6 columns">
+	        <h3 id="f-co-2">Multi-language support</h3>
+	        <p>Make sure your code runs against all versions of your favorite language without breaking a sweat.</p>
+	      </div>
+	      <div class="medium-6 columns">
+	        <h3 id="f-co-3">Test your pull requests</h3>
+	        <p>Make sure every Pull Request to your project is tested before merging.</p>
+	      </div>
+	      <div class="medium-6 columns">
+	        <h3 id="f-co-4">Deploy to s3 and Heroku</h3>
+	        <p>Updating staging or production as soon as your tests pass has never been easier!</p>
+	      </div>
 	    </div>
 	    <div class="large-6 columns features-checked">
 	    	<h2>Features created to<br class="mobile-break"> help your projects and teams</h2>