website: use new hero

This commit is contained in:
Jack Pearkes 2015-09-19 14:38:18 -07:00
parent 8d6c5a15e3
commit 690de3f361
9 changed files with 74 additions and 20 deletions

BIN
website/source/assets/images/hero-bg.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
website/source/assets/images/hero-bg@2x.png (Stored with Git LFS) Normal file

Binary file not shown.

Binary file not shown.

BIN
website/source/assets/images/hero-lockup.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
website/source/assets/images/hero-lockup@2x.png (Stored with Git LFS) Normal file

Binary file not shown.

View File

@ -4,7 +4,7 @@
.h-btn{
display: inline-block;
background-color: $white;
background-color: transparent;
color: $black;
@include transition(color .3s ease-in-out);
//@include btn-shadow();

View File

@ -4,12 +4,14 @@
#header {
position: relative;
height: 108px;
color: $white;
text-rendering: optimizeLegibility;
margin-bottom: 0;
/* opacity: 0;
@include translate3d(0, -10px, 0); */
transition: all 1s ease;
background-color: $white;
/* &.showit{
opacity: 1;
@ -17,10 +19,10 @@
transition: all 1s ease;
} */
&.navbar-static-top{
height:70px;
z-index: 1000;
}
// &.navbar-static-top{
// height:70px;
// z-index: 1000;
// }
.navbar-header{

View File

@ -3,23 +3,42 @@
// --------------------------------------------------
#hero{
position: relative;
@include translate3d(0, -10px, 0);
text-align: center;
background: image-url('../images/hero-lockup.png') 0 0 no-repeat;
@include img-retina("../images/hero-bg.png", "../images/hero-bg@2x.png", 1278px, 798px);
background-size: cover;
&:before{
content: '';
position: absolute;
top: -20px;
left: 50%;
width: 1000px;
height: 1000px;
margin-left: -500px;
border-radius: 500px;
background-color: $white;
z-index: 1;
}
#hero-graphic{
position: relative;
display: inline-block;
width: 499px;
height: 340px;
margin: 120px auto;
margin: 120px auto 40px;
z-index: 2;
#hero-logotype{
position: absolute;
display: inline-block;
top: 75px;
left: 187px;
left: 50%;
width: 115px;
height: 155px;
margin-left: -60px;
background: image-url('../images/hero-logotype.png') 0 0 no-repeat;
@include img-retina("../images/hero-logotype.png", "../images/hero-logotype@2x.png", 115px, 155px);
}
@ -63,7 +82,26 @@
#hero-text{
position: relative;
text: center;
&:before{
content: '';
position: absolute;
top: -40px;
left: 50%;
width: 800px;
height: 800px;
margin-left: -400px;
border-radius: 4px;
opacity: .78;
background-color: $white;
z-index: 1;
}
#hero-text-content{
position: relative;
z-index: 2;
padding-bottom: 40px;
}
h1{
color: $blue-dark;

View File

@ -15,8 +15,9 @@
<div id="hero-logotype"></div>
</div>
<div id="hero-text">
<h1>Easily deploy applications at any scale</h1>
<h3>Any App. Any OS. Any Cloud.</h3>
<div id="hero-text-content">
<h1>Applications on a global fleet.</h1>
<h3>As simple as a Single Machine.</h3>
<div id="hero-btns">
<a class="h-btn light lrg has-caret intro" href="/intro">Learn More<span class="h-caret"></span></a>
<a class="h-btn green lrg has-caret has-border try" href="">Try Nomad<span class="h-caret"></span></a>
@ -25,6 +26,7 @@
</div>
</div>
</div>
</div>
</div>
<div id="subhero-banner" class="banner gray-banner">