feature cards
This commit is contained in:
parent
654686496c
commit
b992e8e3e3
|
@ -10,7 +10,6 @@
|
|||
body {
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
color: $black;
|
||||
background-color: $black;
|
||||
font-size: 15px;
|
||||
font-family: $font-family-lato;
|
||||
font-weight: 500;
|
||||
|
|
|
@ -10,19 +10,23 @@
|
|||
@include lato-light();
|
||||
|
||||
h2{
|
||||
text-align: right;
|
||||
font-size: 44px;
|
||||
line-height: 44px;
|
||||
margin-bottom: 40px;
|
||||
font-size: 42px;
|
||||
line-height: 42px;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
color: $purple;
|
||||
color: $black;
|
||||
@include lato-light();
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 16px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.5em;
|
||||
line-height: 1.5em;
|
||||
font-family: $font-family-lato;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
@ -55,6 +59,28 @@
|
|||
}
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
height: 230px;
|
||||
border: 2px solid #E6E7E8;
|
||||
padding:20px;
|
||||
font-size: 18px;
|
||||
|
||||
h3 {
|
||||
margin:0;
|
||||
padding: 0;
|
||||
color: $purple;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
#feature-auto{
|
||||
position: relative;
|
||||
padding: 200px 0 300px;
|
||||
|
@ -107,7 +133,7 @@
|
|||
}
|
||||
|
||||
p{
|
||||
text-align: right;
|
||||
text-align: left;
|
||||
padding-left: 120px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
@ -745,5 +771,3 @@
|
|||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -2,128 +2,41 @@
|
|||
<div id="jumbotron-mask">
|
||||
<div id="jumbotron">
|
||||
<div class="jumbotron-content" id="jumbotron-content">
|
||||
<h2 class="tag-line" id="tag-line" style="visibility: hidden;">Build, Combine, and Launch Infrastructure</h2>
|
||||
<h2 class="tag-line" id="tag-line" style="visibility: hidden;">Write, plan, and create infrastructure</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feature skew-item" id="feature-auto">
|
||||
<div class="feature" id="feature-overview">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-7 col-md-7 col-sm-12">
|
||||
<h2 class="feature-t">Infrastructure as code</h2>
|
||||
<p>Terraform provides a common configuration to launch infrastructure —
|
||||
from physical and virtual servers to email and DNS providers. Once launched,
|
||||
Terraform safely and efficiently changes infrastructure as the configuration
|
||||
is evolved.</p>
|
||||
<p>Simple file based configuration gives you a single view
|
||||
of your entire infrastructure.</p>
|
||||
<div class="col-sm-12">
|
||||
<h2>Features</h2>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-12">
|
||||
<h3 class="terminal-text">$ terraform apply</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /container -->
|
||||
<div class="feature-skew" id="feature-auto-bg"></div>
|
||||
</div> <!-- /feature -->
|
||||
|
||||
<div class="feature skew-item" id="feature-iterate">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-5 col-sm-12">
|
||||
<div class="it-icon f-icon clearfix">
|
||||
<div class="t-block"></div>
|
||||
<div class="t-block t2"></div>
|
||||
<div class="t-block t3"></div>
|
||||
<div class="t-block t4"></div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<div class="feature-card">
|
||||
<h3>Write</h3>
|
||||
<p>Infrastructure as code</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-7 col-md-7 col-sm-12">
|
||||
<h2 class="feature-t">Combine Multiple Providers</h2>
|
||||
<p>Terraform allows you to effortlessly combine high-level system
|
||||
providers with your own or with each other. Launch a server from
|
||||
one cloud provider, add a DNS entry with its IP with a different
|
||||
provider. Built-in dependency resolution means
|
||||
things happen in the right order.</p>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<div class="feature-card">
|
||||
<h3>Plan</h3>
|
||||
<p>Workflows, not technologies</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /container -->
|
||||
<div class="feature-skew" id="feature-iterate-bg"></div>
|
||||
</div> <!-- /feature -->
|
||||
|
||||
<div class="feature skew-item" id="feature-clone">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-5 col-md-5 col-sm-12">
|
||||
<h2 class="feature-t">Evolve your Infrastructure</h2>
|
||||
<p>Your configuration and state can be stored in version control, shared
|
||||
and distributed among your team. Updates, scaling and modifications
|
||||
will be planned first, so you can iterate with confidence.</p>
|
||||
</div>
|
||||
<div class="col-md-push-1 col-lg-6 col-md-6 col-sm-12">
|
||||
<div class="clone-icon f-icon">
|
||||
<div class="c-group 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 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 class="col-md-4 col-sm-12">
|
||||
<div class="feature-card">
|
||||
<h3>Create</h3>
|
||||
<p>Cloneable infrastructure</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- /container -->
|
||||
<div class="feature-skew" id="feature-clone-bg"></div>
|
||||
</div> <!-- /feature -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="skew-item" id="demos">
|
||||
<div class="container">
|
||||
|
|
Loading…
Reference in New Issue