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

feature-iterate mobile style

This commit is contained in:
JT 2014-07-23 18:58:55 -07:00
parent a8e67fd5a7
commit 37ad19b581
3 changed files with 83 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,15 +35,15 @@
<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-5 col-md-5"> <div class="col-lg-5 col-md-5 col-sm-12">
<div class="it-icon f-icon"> <div class="it-icon f-icon clearfix">
<div class="t-block"></div> <div class="t-block"></div>
<div class="t-block t2"></div> <div class="t-block t2"></div>
<div class="t-block t3"></div> <div class="t-block t3"></div>
<div class="t-block t4"></div> <div class="t-block t4"></div>
</div> </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> <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> <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>
@ -54,11 +54,11 @@
<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-5 col-md-5"> <div class="col-lg-5 col-md-5 col-sm-12">
<h2 class="feature-t">Clone complete environments easily</h2> <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> <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>
<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="clone-icon f-icon">
<div class="c-group clearfix"> <div class="c-group clearfix">
<div class="c-col c1"> <div class="c-col c1">

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

@ -504,6 +504,42 @@
padding: 0 !important; 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{ #demos{
} }

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

@ -1052,6 +1052,48 @@ body.page-home #footer {
text-align: center !important; text-align: center !important;
padding: 0 !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 { .people {
margin-top: 30px; margin-top: 30px;