tweaks Plan section
This commit is contained in:
parent
37d97623d7
commit
b41ed8c32d
|
@ -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{
|
||||
|
|
|
@ -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 & 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">
|
||||
|
|
Loading…
Reference in New Issue