apply JT's changes to the jumbotron
This commit is contained in:
Jason Costello
parent
f5e5a4c7a9
commit
6c2c713a39
|
|
@ -34,12 +34,13 @@ body.page-home {
|
|||
}
|
||||
|
||||
#primary-cta{
|
||||
padding-bottom: 160px;
|
||||
margin-top: -30px;
|
||||
padding-bottom: 100px;
|
||||
color: $white;
|
||||
background: $black;
|
||||
|
||||
p.lead{
|
||||
margin-bottom: 40px;
|
||||
.terra-btn{
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -55,10 +56,8 @@ body.page-home {
|
|||
}
|
||||
|
||||
p {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: 6%;
|
||||
padding-top: 30px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
#customer-logos-bg{
|
||||
|
|
@ -71,48 +70,45 @@ body.page-home {
|
|||
}
|
||||
|
||||
ul.customer-list{
|
||||
display: inline;
|
||||
width: 100%;
|
||||
text-align: justify;
|
||||
padding-left: 15px;
|
||||
|
||||
li{
|
||||
display: inline-block;
|
||||
width: 80px;
|
||||
width: 16%;
|
||||
height: 80px;
|
||||
margin-right: 6%;
|
||||
text-indent: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#nike {
|
||||
background: transparent image-url("customer-logos/nike.svg") center no-repeat;
|
||||
background-size: 100%;
|
||||
background: transparent image-url("customer-logos/nike.svg") left no-repeat;
|
||||
background-size: 80px;
|
||||
}
|
||||
|
||||
#hbo {
|
||||
background: transparent image-url("customer-logos/hbo.svg") center no-repeat;
|
||||
background-size: 80%;
|
||||
background: transparent image-url("customer-logos/hbo.svg") left no-repeat;
|
||||
background-size: 80px;
|
||||
}
|
||||
|
||||
#target {
|
||||
background: transparent image-url("customer-logos/target.svg") center no-repeat;
|
||||
background-size: 60%;
|
||||
background: transparent image-url("customer-logos/target.svg") left no-repeat;
|
||||
background-size: 50px;
|
||||
}
|
||||
|
||||
#capital-one {
|
||||
background: transparent image-url("customer-logos/capital-one.svg") center no-repeat;
|
||||
background-size: 100%;
|
||||
background: transparent image-url("customer-logos/capital-one.svg") left no-repeat;
|
||||
background-size: 100px;
|
||||
}
|
||||
|
||||
#home-depot {
|
||||
background: transparent image-url("customer-logos/home-depot.svg") center no-repeat;
|
||||
background-size: 70%;
|
||||
background: transparent image-url("customer-logos/home-depot.svg") left no-repeat;
|
||||
background-size: 50px;
|
||||
}
|
||||
|
||||
#hotels-dot-com {
|
||||
background: transparent image-url("customer-logos/hotels-dot-com.svg") center no-repeat;
|
||||
background-size: 100%;
|
||||
background: transparent image-url("customer-logos/hotels-dot-com.svg") left no-repeat;
|
||||
background-size: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -410,7 +406,7 @@ body.page-home {
|
|||
}
|
||||
}
|
||||
|
||||
.cta {
|
||||
&.cta {
|
||||
text-align: center;
|
||||
|
||||
.btn {
|
||||
|
|
|
|||
|
|
@ -121,11 +121,10 @@
|
|||
width:100%;
|
||||
top:540px;
|
||||
color:#fff;
|
||||
text-align:center;
|
||||
visibility:hidden;
|
||||
|
||||
font-family: 'Lato', "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: 300;
|
||||
font-weight: 500;
|
||||
|
||||
-webkit-transform:translate3d(0,0,0);
|
||||
-moz-transform:translate3d(0,0,0);
|
||||
|
|
|
|||
|
|
@ -2,7 +2,13 @@
|
|||
<div id="jumbotron-mask">
|
||||
<div id="jumbotron">
|
||||
<div class="jumbotron-content" id="jumbotron-content">
|
||||
<h2 class="tag-line" id="tag-line" style="visibility: hidden;">Write, plan, and create infrastructure</h2>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h2 class="tag-line" id="tag-line" style="visibility: hidden;">Write, plan, and create infrastructure</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -10,24 +16,29 @@
|
|||
<div class="cta" id="primary-cta">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2">
|
||||
<div class="col-md-8">
|
||||
<p class="lead">Terraform is an open source tool that allows you to codify APIs into
|
||||
declarative configuration files that can be shared amongst team members,
|
||||
treated as code, edited, reviewed, and versioned. Safely and
|
||||
predictably create, change, and improve production infrastructure.</p>
|
||||
<p>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<p class="center vert-container">
|
||||
<a class="terra-btn" href="/intro/index.html">Get Started</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /. row -->
|
||||
</div><!-- / .container -->
|
||||
</div><!-- / .#primary-cta -->
|
||||
|
||||
<div class="skew-item" id="customer-logos">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<p>Trusted in production by:</p>
|
||||
</div>
|
||||
<div class="">
|
||||
<ul class="customer-list">
|
||||
<li id="nike">Nike</li>
|
||||
<li id="hbo">HBO</li>
|
||||
|
|
|
|||
Loading…
Reference in New Issue