tweaks Plan section

This commit is contained in:
Jason Costello 2016-10-03 13:06:23 -07:00
parent 37d97623d7
commit b41ed8c32d
2 changed files with 44 additions and 81 deletions

View File

@ -15,7 +15,6 @@
line-height: 42px;
letter-spacing: 2px;
text-transform: uppercase;
color: $black;
@include lato-light();
}
@ -34,7 +33,7 @@
p.lead{
font-size: 24px;
max-width: 30em;
max-width: 28em;
}
.icn{
@ -92,91 +91,24 @@
}
}
#feature-auto{
position: relative;
padding: 200px 0 300px;
margin-top: -36px;
#feature-write{
#feature-auto-bg{
background: #fff image-url("white-wireframe.png") center top no-repeat;
background-size: cover;
@include skewY(-3deg);
z-index: 10;
}
h2{
font-size: 43px
}
p{
text-align: right;
padding-left: 100px;
}
.terminal-text{
background: black;
color: white;
line-height: 88px;
text-align: center;
margin: 81px 20px 0;
font-size: 30px;
font-family: "Courier New", Monaco, Menlo, Consolas, monospace;
}
}
#feature-iterate{
#feature-plan{
position: relative;
margin-top: -80px;
padding: 280px 0 360px;
color: white;
color: $white;
background: $purple;
>.container{
z-index: 21;
}
#feature-iterate-bg{
background: #fff image-url("feature-iterate-bg.png") center top no-repeat;
border-top: 2px solid white;
border-bottom: 2px solid $purple;
background-size: cover;
@include skewY(3deg);
z-index: 20;
}
p{
text-align: left;
padding-left: 120px;
font-weight: 300;
}
.it-icon{
margin-top: 40px;
}
.t-block{
background-color: rgb(255, 255, 255);
width: 80px;
height: 80px;
@include 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;
}
// #feature-iterate-bg{
// background: #fff image-url("feature-iterate-bg.png") center top no-repeat;
// border-top: 2px solid white;
// border-bottom: 2px solid $purple;
// background-size: cover;
// @include skewY(3deg);
// z-index: 20;
// }
}
#feature-clone{

View File

@ -56,6 +56,37 @@
<div class="feature-skew" id="feature-auto-bg"></div>
</div> <!-- /feature -->
<div class="feature" id="feature-plan">
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>One safe workflow across providers</h2>
<p class="lead">Terraform provides an elegant user experience for
operators to safely and predictably make changes to infrastructure.</p>
</div>
<div class="col-sm-4">
<h3>Map resource dependencies</h3>
<p>Understand how a minor change could have potential cascading effects
across an infrastructure before executing that change. Terraform
builds a dependency graph from the configurations, and walks this
graph to generate plans, refresh state, and more.</p>
</div>
<div class="col-sm-4">
<h3>Separation of plan &amp; apply</h3>
<p>Separating plans and applies reduces mistakes and uncertainty at
scale. Plans show operators what would happen, applies execute
changes.</p>
</div>
<div class="col-sm-4">
<h3>One workflow</h3>
<p>Use Terraform to create resources across all major infrastructure
providers (AWS, GCP, Azure, OpenStack, VMware, and more).</p>
</div>
</div>
</div> <!-- /container -->
<div class="feature-skew" id="feature-auto-bg"></div>
</div> <!-- /feature -->
<div class="skew-item" id="demos">