update landing page
This commit is contained in:
Daniel Grippi
parent
ec6fd4f9e9
commit
b8f7d025d5
9 changed files with 73 additions and 197 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 77 KiB |
BIN
app/assets/images/landing/github.png
Normal file
BIN
app/assets/images/landing/github.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
BIN
app/assets/images/landing/lock.png
Normal file
BIN
app/assets/images/landing/lock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
app/assets/images/landing/title.png
Normal file
BIN
app/assets/images/landing/title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
app/assets/images/landing/world.png
Normal file
BIN
app/assets/images/landing/world.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
|
|
@ -1,33 +1,3 @@
|
|||
/* animations */
|
||||
@-webkit-keyframes fly-in {
|
||||
0% { @include opacity(0); margin-top : -600px; }
|
||||
100% { @include opacity(1); margin-top : 0; }
|
||||
}
|
||||
@-moz-keyframes fly-in {
|
||||
0% { @include opacity(0); margin-top : -600px; }
|
||||
100% { @include opacity(1); margin-top : 0; }
|
||||
}
|
||||
@-ms-keyframes fly-in {
|
||||
0% { @include opacity(0); margin-top : -600px; }
|
||||
100% { @include opacity(1); margin-top : 0; }
|
||||
}
|
||||
|
||||
@-webkit-keyframes fly-out {
|
||||
0% { @include opacity(1); margin-top : 0; }
|
||||
50% { @include opacity(0); }
|
||||
100% { @include opacity(0); margin-top : 500px; }
|
||||
}
|
||||
@-moz-keyframes fly-out {
|
||||
0% { @include opacity(1); margin-top : 0; }
|
||||
50% { @include opacity(0); }
|
||||
100% { @include opacity(0); margin-top : 500px; }
|
||||
}
|
||||
@-ms-keyframes fly-out {
|
||||
0% { @include opacity(1); margin-top : 0; }
|
||||
50% { @include opacity(0); }
|
||||
100% { @include opacity(0); margin-top : 500px; }
|
||||
}
|
||||
|
||||
/* le declarations */
|
||||
#landing {
|
||||
overflow : hidden;
|
||||
|
|
@ -37,186 +7,34 @@
|
|||
top : 0;
|
||||
left : 0;
|
||||
|
||||
color : #fff;
|
||||
|
||||
background : {
|
||||
color : #2b2b2b;
|
||||
image : image_url('landing/background.jpg');
|
||||
size : cover;
|
||||
position : center;
|
||||
}
|
||||
|
||||
#banner {
|
||||
@include box-shadow(0, 2px, 40px, rgba(0,0,0,0.8));
|
||||
|
||||
position : relative;
|
||||
z-index : 8;
|
||||
|
||||
text-align : center;
|
||||
font-family : Roboto-Light;
|
||||
padding : 50px 0;
|
||||
margin-bottom : 30px;
|
||||
background-color : rgba(0,0,0,0.6);
|
||||
|
||||
h1, h3 { font-weight : 200; }
|
||||
|
||||
h1 {
|
||||
font-size : 80px;
|
||||
line-height : 80px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size : 24px;
|
||||
line-height : 24px;
|
||||
color : rgb(42,156,235);
|
||||
}
|
||||
|
||||
#controls,
|
||||
.fb-like {
|
||||
z-index : 10;
|
||||
position : absolute;
|
||||
top : 10px;
|
||||
}
|
||||
|
||||
.fb-like {
|
||||
left : 40px;
|
||||
}
|
||||
|
||||
#controls {
|
||||
right : 10px;
|
||||
|
||||
a:hover {
|
||||
text-decoration : none;
|
||||
}
|
||||
|
||||
.label {
|
||||
@include transition(background-color);
|
||||
padding : 5px 4px;
|
||||
padding-bottom : 4px;
|
||||
margin-left : 8px;
|
||||
}
|
||||
|
||||
|
||||
.twitter-bird,
|
||||
.github-octocat {
|
||||
height : 20px;
|
||||
width : 20px;
|
||||
margin-top : -5px;
|
||||
margin-right : -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#screens {
|
||||
/* hardware acceleration */
|
||||
-webkit-transform : translateZ(0);
|
||||
|
||||
text-align : center;
|
||||
|
||||
#s_container {
|
||||
display : inline-block;
|
||||
position : relative;
|
||||
height : 417px;
|
||||
width : 516px;
|
||||
|
||||
img {
|
||||
position : absolute;
|
||||
z-index : 1;
|
||||
left : 0;
|
||||
top : 0;
|
||||
|
||||
height : 417px;
|
||||
width : 516px;
|
||||
|
||||
&:nth-child(1) {
|
||||
-webkit-animation : fly-in 1.2s;
|
||||
-moz-animation : fly-in 1.2s;
|
||||
-ms-animation : fly-in 1.2s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
-webkit-animation : fly-in 1s;
|
||||
-moz-animation : fly-in 1s;
|
||||
-ms-animation : fly-in 1s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
-webkit-animation : fly-in 0.8s;
|
||||
-moz-animation : fly-in 0.8s;
|
||||
-ms-animation : fly-in 0.8s;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
-webkit-animation : fly-in 0.6s;
|
||||
-moz-animation : fly-in 0.6s;
|
||||
-ms-animation : fly-in 0.6s;
|
||||
}
|
||||
}
|
||||
|
||||
&.outtatime {
|
||||
img {
|
||||
&:nth-child(1) {
|
||||
-webkit-animation : fly-out 1.2s;
|
||||
-moz-animation : fly-out 1.2s;
|
||||
-ms-animation : fly-out 0.6s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
-webkit-animation : fly-out 1s;
|
||||
-moz-animation : fly-out 1s;
|
||||
-ms-animation : fly-out 1s;
|
||||
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
-webkit-animation : fly-out 0.8s;
|
||||
-moz-animation : fly-out 0.8s;
|
||||
-ms-animation : fly-out 0.8s;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
-webkit-animation : fly-out 0.6s;
|
||||
-moz-animation : fly-out 0.6s;
|
||||
-ms-animation : fly-out 0.6s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
color : #fff;
|
||||
}
|
||||
|
||||
#sign_up {
|
||||
text-align:center;
|
||||
position : relative;
|
||||
z-index : 20;
|
||||
|
||||
padding-top : 100px;
|
||||
color : rgb(255, 77, 54);
|
||||
|
||||
h4 {
|
||||
font-size : 20px;
|
||||
line-height : 24px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family : Roboto-Bold;
|
||||
font-size : 40px;
|
||||
line-height : 40px;
|
||||
}
|
||||
border-bottom: 1px solid #ccc;
|
||||
padding-bottom:50px;
|
||||
|
||||
form {
|
||||
label.control-label { width : 50px !important; }
|
||||
.controls { margin-left : 70px; }
|
||||
label.control-label { width : 80px !important; text-align:right; }
|
||||
.controls { margin-left : 100px; }
|
||||
|
||||
input[type='submit'] {
|
||||
@include transition(background);
|
||||
@include box-shadow(0,0,0,0);
|
||||
|
||||
background : rgb(255, 77, 54);
|
||||
font-size:1.2em;
|
||||
background : #99CC00;
|
||||
color : #fff;
|
||||
text-shadow : none;
|
||||
border : 1px solid #000;
|
||||
text-shadow : 0 -1px 0 #669900;
|
||||
border : 1px solid #999;
|
||||
|
||||
&:hover {
|
||||
background : desaturate(rgb(255, 77, 54), 15%);
|
||||
background : desaturate(#99CC00, 15%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
|
@ -240,4 +58,56 @@
|
|||
color : #333;
|
||||
text-align : center;
|
||||
}
|
||||
}
|
||||
|
||||
#landing_banner {
|
||||
.container {
|
||||
position:relative;
|
||||
}
|
||||
|
||||
text-align:center;
|
||||
padding:50px;
|
||||
margin-bottom:50px;
|
||||
color:#ccc;
|
||||
background:#222;
|
||||
|
||||
h2 {
|
||||
font-weight:100;
|
||||
}
|
||||
|
||||
.landing-logo {
|
||||
margin-bottom:15px;
|
||||
height:60px;
|
||||
}
|
||||
|
||||
.landing-banner-right {
|
||||
position:absolute;
|
||||
right:0;
|
||||
|
||||
a {
|
||||
color:#ccc;
|
||||
font-size:1.2em;
|
||||
font-weight:100;
|
||||
padding:5px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-button {
|
||||
@include border-radius(3px);
|
||||
border:1px solid #666;
|
||||
background:#111;
|
||||
|
||||
&:hover {
|
||||
background:#222;
|
||||
border:1px solid #999;
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#steps {
|
||||
text-align: center;
|
||||
p {
|
||||
color:#666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,6 @@ class HomeController < ApplicationController
|
|||
render :show, :layout => 'post'
|
||||
end
|
||||
else
|
||||
@landing_page = true
|
||||
render :show, :layout => 'post'
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,12 +1,19 @@
|
|||
|
||||
<head>
|
||||
<style type="text/css">
|
||||
|
||||
body {
|
||||
margin-top: 50px;
|
||||
background-color: white;
|
||||
background-image : none;
|
||||
}
|
||||
|
||||
#header {
|
||||
-webkit-box-shadow:none;
|
||||
-moz-box-shadow:none;
|
||||
box-shadow:none;
|
||||
border:none;
|
||||
background:none;
|
||||
}
|
||||
|
||||
#steps {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue