New experimental landing page design

This commit is contained in:
Joseph Schorr 2014-04-13 18:33:32 -04:00
parent 0bd8a1bcbf
commit 50545236e3
10 changed files with 184 additions and 96 deletions

View file

@ -1168,6 +1168,14 @@ i.toggle-icon:hover {
text-decoration: none;
}
.landing-page {
color: #555;
}
.landing-page .wrapper > nav {
display: none;
}
.landing .popover {
font-size: 14px;
}
@ -1176,20 +1184,53 @@ i.toggle-icon:hover {
color: white;
background-color: #1d1d1d;
background-position: left -30px;
background-image: url(../img/containers-back-black.jpg);
background-position: left -300px;
background-image: url(../img/landing-back.jpg);
background-repeat: no-repeat;
margin-top: -20px;
margin-bottom: 0px;
padding-top: 46px;
padding-top: 120px;
min-height: 440px;
}
.landing .messages {
margin-bottom: 40px;
.landing .logo {
position: absolute;
top: 10px;
left: 10px;
}
.landing .product-name {
position: absolute;
top: 22px;
left: 131px;
color: white;
font-size: 40px;
}
.landing .nav {
font-size: 16px;
position: absolute;
right: 20px;
top: 20px;
color: white;
}
.landing .nav a {
font-weight: bold;
color: white;
border-radius: 6px;
}
.landing .nav li a:hover {
background: rgba(255, 255, 255, 0.2);
}
@media (max-height: 768px) {
.landing {
}
}
.landing .messages b {
@ -1200,6 +1241,33 @@ i.toggle-icon:hover {
font-size: 48px;
}
.landing-section {
padding: 20px;
padding-bottom: 40px;
border-top: 1px solid #ddd;
display: block;
}
.landing-section:nth-child(even) {
background: #f7f7f7;
}
.landing-section h2 {
text-align: center;
display: block;
margin-bottom: 50px;
font-weight: 200;
}
.landing-page .tour-overview {
}
.landing-page .tour-overview img {
width: 500px;
padding: 10px;
display: inline-block;
}
.form-signup input {
margin: 12px;
margin-left: 0px;
@ -1259,28 +1327,39 @@ form input.ng-valid.ng-dirty,
color: black;
}
.landing .shoutout i {
.landing-page .shoutout > i {
font-size: 36px;
display: block;
}
.landing .shoutout b {
.landing-page .shoutout > b {
font-size: 22px;
display: block;
line-height: 31px;
}
.landing .shoutout {
.landing-page .shoutout {
font-size: 14px;
text-align: center;
line-height: normal;
}
@media (max-height: 768px) {
.landing {
padding: 20px;
padding-top: 20px;
}
.landing-page .feature-shoutout {
margin-bottom: 20px;
}
.landing-page .feature-shoutout > a {
font-size: 22px;
display: block;
line-height: 31px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.landing-page .feature-shoutout .img-responsive {
border: 2px solid #eee;
padding: 6px;
}
.page-footer {