add clone graphic

This commit is contained in:
JT 2014-07-22 19:39:04 -07:00
parent 4660255869
commit 8f1c3518b4
3 changed files with 126 additions and 9 deletions

View File

@ -34,7 +34,7 @@
<div class="feature" id="feature-iterate">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="col-lg-5 col-md-5">
<div class="it-icon f-icon">
<div class="t-block"></div>
<div class="t-block t2"></div>
@ -42,7 +42,7 @@
<div class="t-block t4"></div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="col-lg-7 col-md-7">
<h2 class="feature-t">Iterate on infrastructure safely</h2>
</div>
</div>
@ -52,15 +52,67 @@
<div class="feature" id="feature-clone">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="col-lg-5 col-md-5">
<h2 class="feature-t">Clone complete environments easily</h2>
</div>
<div class="col-lg-6 col-md-6">
<div class="col-md-push-1 col-lg-6 col-md-6">
<div class="clone-icon f-icon">
<div class="t-block"></div>
<div class="t-block t2"></div>
<div class="t-block t3"></div>
<div class="t-block t4"></div>
<div class="c-group clearfix">
<div class="c-col c1">
<div class="c-block"></div>
<div class="c-block"></div>
<div class="c-block"></div>
<div class="c-block"></div>
</div>
<div class="c-col c2">
<div class="c-block"></div>
<div class="c-block"></div>
<div class="c-block"></div>
<div class="c-block"></div>
</div>
<div class="c-col c3">
<div class="c-block"></div>
<div class="c-block"></div>
</div>
</div>
<div class="c-group cg2">
<div class="c-col c1">
<div class="c-block"></div>
<div class="c-block"></div>
<div class="c-block"></div>
<div class="c-block"></div>
</div>
<div class="c-col c2">
<div class="c-block"></div>
<div class="c-block"></div>
<div class="c-block"></div>
<div class="c-block"></div>
</div>
<div class="c-col c3">
<div class="c-block"></div>
<div class="c-block"></div>
</div>
</div>
<div class="c-group cg3 clearfix">
<div class="c-col c1">
<div class="c-block"></div>
<div class="c-block"></div>
<div class="c-block"></div>
<div class="c-block"></div>
</div>
<div class="c-col c2">
<div class="c-block"></div>
<div class="c-block"></div>
<div class="c-block"></div>
<div class="c-block"></div>
</div>
<div class="c-col c3">
<div class="c-block"></div>
<div class="c-block"></div>
</div>
</div>
</div>
</div>
</div>

View File

@ -110,7 +110,41 @@
h2{
color: white;
}
}
.c-group{
display: inline-block;
margin-right: 20px;
&.cg2{
opacity: .8;
}
&.cg3{
opacity: .6;
}
.c-col{
display: inline-block;
float: left;
&.c1{
padding-top: 16px;
}
&.c3{
padding-top: 55px;
}
.c-block{
background-color: white;
width: 30px;
height: 30px;
.skewY(30deg);
margin: 5px 5px 0 0;
}
}
}
}
#footer-wrap{

View File

@ -648,6 +648,37 @@ body.page-sub #header {
#feature-clone h2 {
color: white;
}
#feature-clone .c-group {
display: inline-block;
margin-right: 20px;
}
#feature-clone .c-group.cg2 {
opacity: .8;
}
#feature-clone .c-group.cg3 {
opacity: .6;
}
#feature-clone .c-group .c-col {
display: inline-block;
float: left;
}
#feature-clone .c-group .c-col.c1 {
padding-top: 16px;
}
#feature-clone .c-group .c-col.c3 {
padding-top: 55px;
}
#feature-clone .c-group .c-col .c-block {
background-color: white;
width: 30px;
height: 30px;
-webkit-transform: skewY(30deg);
-moz-transform: skewY(30deg);
-ms-transform: skewY(30deg);
-o-transform: skewY(30deg);
transform: skewY(30deg);
margin: 5px 5px 0 0;
}
#footer-wrap {
background-color: white;
padding: 0 0 50px 0;