ResiLien
/
terraform
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
website/source/index.html.erb
View File

@ -34,7 +34,7 @@
<div class="feature" id="feature-iterate"> <div class="feature" id="feature-iterate">
<div class="container"> <div class="container">
<div class="row"> <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="it-icon f-icon">
<div class="t-block"></div> <div class="t-block"></div>
<div class="t-block t2"></div> <div class="t-block t2"></div>
@ -42,7 +42,7 @@
<div class="t-block t4"></div> <div class="t-block t4"></div>
</div> </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> <h2 class="feature-t">Iterate on infrastructure safely</h2>
</div> </div>
</div> </div>
@ -52,15 +52,67 @@
<div class="feature" id="feature-clone"> <div class="feature" id="feature-clone">
<div class="container"> <div class="container">
<div class="row"> <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> <h2 class="feature-t">Clone complete environments easily</h2>
</div> </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="clone-icon f-icon">
<div class="t-block"></div> <div class="c-group clearfix">
<div class="t-block t2"></div> <div class="c-col c1">
<div class="t-block t3"></div> <div class="c-block"></div>
<div class="t-block t4"></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> </div>
</div> </div>

34
website/source/stylesheets/_home.less
View File

@ -111,6 +111,40 @@
h2{ h2{
color: white; 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{ #footer-wrap{

31
website/source/stylesheets/main.css
View File

@ -648,6 +648,37 @@ body.page-sub #header {
#feature-clone h2 { #feature-clone h2 {
color: white; 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 { #footer-wrap {
background-color: white; background-color: white;
padding: 0 0 50px 0; padding: 0 0 50px 0;