add iterate graphic

website/source/index.html.erb

@@ -37,9 +37,9 @@
 			<div class="col-lg-6 col-md-6">
 				<div class="it-icon f-icon">
 					<div class="t-block"></div>
-					<div class="t-block"></div>
+					<div class="t-block t2"></div>
-					<div class="t-block"></div>
+					<div class="t-block t3"></div>
-					<div class="t-block"></div>
+					<div class="t-block t4"></div>
 				</div>
 			</div>
 			<div class="col-lg-6 col-md-6">
@@ -58,9 +58,9 @@
 			<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 t2"></div>
-					<div class="t-block"></div>
+					<div class="t-block t3"></div>
-					<div class="t-block"></div>
+					<div class="t-block t4"></div>
 				</div>
 			</div>				
 		</div>

website/source/stylesheets/_home.less

@@ -71,6 +71,27 @@
 		.skewY(-2deg);
 	}
 
+	.t-block{
+		background-color: rgb(255, 255, 255);
+		width: 80px;
+		height: 80px;
+		.skewY(26deg);
+		float: left;
+		margin-right: 25px;
+
+		&.t2{
+			background-color: rgba(255, 255, 255, .8);
+		}
+
+		&.t3{
+			background-color: rgba(255, 255, 255, .6);
+		}
+
+		&.t4{
+			background-color: rgba(255, 255, 255, .4);	
+		}		
+	}
+
 	h2{
 		color: white;
 	}	

website/source/stylesheets/main.css

@@ -603,6 +603,27 @@ body.page-sub #header {
   -o-transform: skewY(-2deg);
   transform: skewY(-2deg);
 }
+#feature-iterate .t-block {
+  background-color: #ffffff;
+  width: 80px;
+  height: 80px;
+  -webkit-transform: skewY(26deg);
+  -moz-transform: skewY(26deg);
+  -ms-transform: skewY(26deg);
+  -o-transform: skewY(26deg);
+  transform: skewY(26deg);
+  float: left;
+  margin-right: 25px;
+}
+#feature-iterate .t-block.t2 {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+#feature-iterate .t-block.t3 {
+  background-color: rgba(255, 255, 255, 0.6);
+}
+#feature-iterate .t-block.t4 {
+  background-color: rgba(255, 255, 255, 0.4);
+}
 #feature-iterate h2 {
   color: white;
 }