website: use new hero
This commit is contained in:
parent
8d6c5a15e3
commit
690de3f361
Binary file not shown.
Binary file not shown.
BIN
website/source/assets/images/hero-image@2x.png (Stored with Git LFS)
BIN
website/source/assets/images/hero-image@2x.png (Stored with Git LFS)
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -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();
|
||||
|
|
|
@ -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{
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue