throw in clone/iterate feature. cleanup

This commit is contained in:
JT 2014-07-22 15:55:33 -07:00
parent 8ddcf38525
commit 769332ab6e
4 changed files with 91 additions and 29 deletions

View File

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

View File

@ -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: #f8f8f8 url(../images/white-wireframe.png) center top no-repeat;
background: #fff 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);
}
}

View File

@ -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);
}

View File

@ -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: #f8f8f8 url(../images/white-wireframe.png) center top no-repeat;
background: #ffffff 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;