feature cards

This commit is contained in:
Jason Costello 2016-10-03 12:20:26 -07:00
parent 654686496c
commit b992e8e3e3
3 changed files with 55 additions and 119 deletions

View File

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

View File

@ -10,18 +10,22 @@
@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;
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;
}
}

View File

@ -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 &mdash;
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 class="col-md-4 col-sm-12">
<div class="feature-card">
<h3>Write</h3>
<p>Infrastructure as code</p>
</div>
</div>
</div> <!-- /container -->
<div class="feature-skew" id="feature-auto-bg"></div>
</div> <!-- /feature -->
<div class="col-md-4 col-sm-12">
<div class="feature-card">
<h3>Plan</h3>
<p>Workflows, not technologies</p>
</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>
</div>
<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>
</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>
</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>
</div>
</div>
</div> <!-- /container -->
<div class="feature-skew" id="feature-clone-bg"></div>
</div> <!-- /feature -->
<div class="skew-item" id="demos">
<div class="container">