From 37ad19b5814c8b66c9687f22e376066e1f53b88a Mon Sep 17 00:00:00 2001
From: JT <jt@ofitsownkind.com>
Date: Wed, 23 Jul 2014 18:58:55 -0700
Subject: [PATCH] feature-iterate mobile style

---
 website/source/index.html.erb         | 10 +++----
 website/source/stylesheets/_home.less | 36 +++++++++++++++++++++++
 website/source/stylesheets/main.css   | 42 +++++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 5 deletions(-)

diff --git a/website/source/index.html.erb b/website/source/index.html.erb
index 48ecb24a8..a93b977f6 100644
--- a/website/source/index.html.erb
+++ b/website/source/index.html.erb
@@ -35,15 +35,15 @@
 <div class="feature" id="feature-iterate">
 	<div class="container">
 		<div class="row">
-			<div class="col-lg-5 col-md-5">
-				<div class="it-icon f-icon">
+			<div class="col-lg-5 col-md-5 col-sm-12">
+				<div class="it-icon f-icon clearfix">
 					<div class="t-block"></div>
 					<div class="t-block t2"></div>
 					<div class="t-block t3"></div>
 					<div class="t-block t4"></div>
 				</div>
 			</div>
-			<div class="col-lg-7 col-md-7">
+			<div class="col-lg-7 col-md-7 col-sm-12">
 				<h2 class="feature-t">Iterate on infrastructure safely</h2>
 				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum nibh vitae quam dapibus, nec sodales dolor sodales. Class aptent taciti sociosqu ad litora.</p>
 			</div>			
@@ -54,11 +54,11 @@
 <div class="feature" id="feature-clone">
 	<div class="container">
 		<div class="row">
-			<div class="col-lg-5 col-md-5">
+			<div class="col-lg-5 col-md-5 col-sm-12">
 				<h2 class="feature-t">Clone complete environments easily</h2>
 				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vestibulum nibh vitae quam dapibus, nec sodales dolor sodales. Class aptent taciti sociosqu ad litora.</p>
 			</div>		
-			<div class="col-md-push-1 col-lg-6 col-md-6">
+			<div class="col-md-push-1 col-lg-6 col-md-6 col-sm-12">
 				<div class="clone-icon f-icon">
 					<div class="c-group clearfix">
 						<div class="c-col c1">
diff --git a/website/source/stylesheets/_home.less b/website/source/stylesheets/_home.less
index 09044c587..8c6aeedd0 100755
--- a/website/source/stylesheets/_home.less
+++ b/website/source/stylesheets/_home.less
@@ -504,6 +504,42 @@
 			padding: 0 !important;
 		}
 	}
+
+	#feature-iterate{
+		margin-top: -80px;
+		padding: 280px 0 360px;
+		color: white;
+		background: #fff url(../images/feature-iterate-bg.png) center top no-repeat;
+		border-top: 2px solid white;
+		border-bottom: 2px solid @purple;
+		background-size: cover;
+		.skewY(3deg);
+
+		>.container{
+			.skewY(-3deg);
+		}
+
+		p{
+			text-align: right;
+			padding-left: 120px;
+			font-weight: 100;
+		}
+
+		.it-icon{
+			margin-left: 45px;
+			margin-bottom: 40px;
+		}
+
+		.t-block{
+			background-color: rgb(255, 255, 255);
+			width: 40px;
+			height: 40px;
+			.skewY(26deg);
+			float: left;
+			margin-right: 15px;
+		}
+	}
+
 	#demos{
 	}
 
diff --git a/website/source/stylesheets/main.css b/website/source/stylesheets/main.css
index 00511cfbc..3f10fba3a 100644
--- a/website/source/stylesheets/main.css
+++ b/website/source/stylesheets/main.css
@@ -1052,6 +1052,48 @@ body.page-home #footer {
     text-align: center !important;
     padding: 0 !important;
   }
+  #feature-iterate {
+    margin-top: -80px;
+    padding: 280px 0 360px;
+    color: white;
+    background: #ffffff url(../images/feature-iterate-bg.png) center top no-repeat;
+    border-top: 2px solid white;
+    border-bottom: 2px solid #822ff7;
+    background-size: cover;
+    -webkit-transform: skewY(3deg);
+    -moz-transform: skewY(3deg);
+    -ms-transform: skewY(3deg);
+    -o-transform: skewY(3deg);
+    transform: skewY(3deg);
+  }
+  #feature-iterate > .container {
+    -webkit-transform: skewY(-3deg);
+    -moz-transform: skewY(-3deg);
+    -ms-transform: skewY(-3deg);
+    -o-transform: skewY(-3deg);
+    transform: skewY(-3deg);
+  }
+  #feature-iterate p {
+    text-align: right;
+    padding-left: 120px;
+    font-weight: 100;
+  }
+  #feature-iterate .it-icon {
+    margin-left: 45px;
+    margin-bottom: 40px;
+  }
+  #feature-iterate .t-block {
+    background-color: #ffffff;
+    width: 40px;
+    height: 40px;
+    -webkit-transform: skewY(26deg);
+    -moz-transform: skewY(26deg);
+    -ms-transform: skewY(26deg);
+    -o-transform: skewY(26deg);
+    transform: skewY(26deg);
+    float: left;
+    margin-right: 15px;
+  }
 }
 .people {
   margin-top: 30px;