feature-iterate mobile style

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">

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{
 	}
 

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;