throw in clone/iterate feature. cleanup

website/source/index.html.erb

@@ -35,7 +35,7 @@
 	<div class="container">
 		<div class="row">
 			<div class="col-lg-6 col-md-6">
-				<div class="f-icon">
+				<div class="it-icon f-icon">
 					<div class="t-block"></div>
 					<div class="t-block"></div>
 					<div class="t-block"></div>
@@ -49,6 +49,24 @@
 	</div> <!-- /container -->
 </div> <!-- /feature -->
 
+<div class="feature" id="feature-clone">
+	<div class="container">
+		<div class="row">
+			<div class="col-lg-6 col-md-6">
+				<h3 class="feature-t">Clone comple environments easily</h3>
+			</div>		
+			<div class="col-lg-6 col-md-6">
+				<div class="clone-icon f-icon">
+					<div class="t-block"></div>
+					<div class="t-block"></div>
+					<div class="t-block"></div>
+					<div class="t-block"></div>
+				</div>
+			</div>				
+		</div>
+	</div> <!-- /container -->
+</div> <!-- /feature -->
+
 <div id="demos">
 	<div class="container">
 		<div class="terminals row">

website/source/stylesheets/_home.less

@@ -6,6 +6,9 @@
 }*/
 
 .feature{
+	padding: 240px 0;
+	.anti-alias();
+
 	h2{
 		text-align: right;
 		font-size: 44px;
@@ -35,15 +38,13 @@
 }
 
 #feature-auto{
-	.anti-alias();
 	margin-top: -36px;
-	padding: 200px 0;
+	background: #fff url(../images/white-wireframe.png) center top no-repeat;
-	background: #f8f8f8 url(../images/white-wireframe.png) center top no-repeat;
 	background-size: cover;
-	.skewy-2-neg();
+	.skewY(-2deg);
 
 	>.container{
-		.skewy-2-pos();
+		.skewY(2deg);
 	}
 
 	.terminal-text{
@@ -52,12 +53,32 @@
 		text-align: center;
 		font-size: 35px;
 		font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
-		.opt-text();
 	}
 }
 
 #feature-iterate{
+	margin-top: -80px;
+	padding: 240px 0;
+	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(2deg);
 
+	>.container{
+		.skewY(-2deg);
+	}
+}
+
+#feature-clone{
+	margin-top: -80px;
+	padding: 240px 0;
+	background-color: @purple;
+	.skewY(2deg);
+
+	>.container{
+		.skewY(-2deg);
+	}
 }
 
 

website/source/stylesheets/_utilities.less

@@ -28,24 +28,10 @@
   font-weight: 100;
 }
 
-.opt-text(){
-	text-rendering: optimizeLegibility;
-	-webkit-font-smoothing: antialiased;
-}
-
 .skewY(@skew){
 	-webkit-transform: skewY(@skew);
   -moz-transform: skewY(@skew);
   -ms-transform: skewY(@skew);
   -o-transform: skewY(@skew);
-  transform: skewY(@skew)
+  transform: skewY(@skew);
 }
-
-.skewy-2-neg(){
-  .skewY(-2deg);
-}
-
-.skewy-2-pos(){
-	.skewY(2deg);
-}
-

website/source/stylesheets/main.css

@@ -528,6 +528,11 @@ body.page-sub #header {
 /*body.page-home{
 	background-color: #f8f8f8;
 }*/
+.feature {
+  padding: 240px 0;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
 .feature h2 {
   text-align: right;
   font-size: 44px;
@@ -554,11 +559,8 @@ body.page-sub #header {
   background-repeat: no-repeat;
 }
 #feature-auto {
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
   margin-top: -36px;
-  padding: 200px 0;
+  background: #ffffff url(../images/white-wireframe.png) center top no-repeat;
-  background: #f8f8f8 url(../images/white-wireframe.png) center top no-repeat;
   background-size: cover;
   -webkit-transform: skewY(-2deg);
   -moz-transform: skewY(-2deg);
@@ -579,8 +581,43 @@ body.page-sub #header {
   text-align: center;
   font-size: 35px;
   font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
-  text-rendering: optimizeLegibility;
+}
-  -webkit-font-smoothing: antialiased;
+#feature-iterate {
+  margin-top: -80px;
+  padding: 240px 0;
+  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(2deg);
+  -moz-transform: skewY(2deg);
+  -ms-transform: skewY(2deg);
+  -o-transform: skewY(2deg);
+  transform: skewY(2deg);
+}
+#feature-iterate > .container {
+  -webkit-transform: skewY(-2deg);
+  -moz-transform: skewY(-2deg);
+  -ms-transform: skewY(-2deg);
+  -o-transform: skewY(-2deg);
+  transform: skewY(-2deg);
+}
+#feature-clone {
+  margin-top: -80px;
+  padding: 240px 0;
+  background-color: #822ff7;
+  -webkit-transform: skewY(2deg);
+  -moz-transform: skewY(2deg);
+  -ms-transform: skewY(2deg);
+  -o-transform: skewY(2deg);
+  transform: skewY(2deg);
+}
+#feature-clone > .container {
+  -webkit-transform: skewY(-2deg);
+  -moz-transform: skewY(-2deg);
+  -ms-transform: skewY(-2deg);
+  -o-transform: skewY(-2deg);
+  transform: skewY(-2deg);
 }
 #footer {
   background-color: #d7d4d7;