diff --git a/app/login.html b/app/login.html
new file mode 100644
index 0000000..b965d71
--- /dev/null
+++ b/app/login.html
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+
+
fwos
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/app/scripts/views/home.js b/app/scripts/views/home.js
index 0caa6d2..309f41a 100644
--- a/app/scripts/views/home.js
+++ b/app/scripts/views/home.js
@@ -29,7 +29,7 @@ define(['backbone'], function(Backbone) {
if (keycode == 8 && $(e.currentTarget).val().length < 1){
$(e.currentTarget).prev('input').focus();
}
-
+ //if full and valid
}
});
diff --git a/app/styles/login.scss b/app/styles/login.scss
new file mode 100644
index 0000000..0264dcf
--- /dev/null
+++ b/app/styles/login.scss
@@ -0,0 +1,72 @@
+.login {
+
+ section.login-container{
+ padding:23% 0;
+ width:320px;
+ margin:0 auto;
+ text-align:center;
+
+ h1 {
+ font-size:20px;
+ }
+ }
+
+ [class*='btn-signin']{
+ display:block;
+ @include border-radius(3px);
+ border:1px solid rgba($black,.2);
+ width:230px;
+ color:$white;
+ background:#ccc;
+ overflow:hidden;
+ margin:10px auto;
+ @include box-shadow(-2px -2px 7px rgba($black,.1) inset);
+
+ .icon {
+ float:left;
+ width:35px;
+ height:35px;
+ border-right:1px solid rgba($white,.2);
+ background-repeat:no-repeat;
+ background-position:50% 50%;
+ }
+ .text {
+ float:left;
+ border-left:1px solid rgba($black, .1);
+ padding:10px 15px;
+ font-size:12px;
+ width:163px;
+ }
+
+ &:hover{
+ .icon,.text{
+ background-color:rgba($white,.2);
+ }
+ }
+
+ &.btn-signin-facebook{
+ background:#3b5998;
+
+ .icon{
+ background-image:url(../images/facebook-24.png);
+ }
+ }
+
+ &.btn-signin-twitter{
+ background:#00acee;
+
+ .icon{
+ background-image:url(../images/twitter-24.png);
+ }
+ }
+ }
+
+ footer{
+ position:fixed;
+ bottom:0;
+ width:94%;
+ padding:20px 3%;
+ }
+
+}
+
diff --git a/app/styles/main.scss b/app/styles/main.scss
index fc236e3..d082847 100644
--- a/app/styles/main.scss
+++ b/app/styles/main.scss
@@ -2,24 +2,27 @@ $icon-font-path: "/bower_components/sass-bootstrap/fonts/";
@import url(http://fonts.googleapis.com/css?family=Montserrat);
-@import 'compass';
-@import 'responsive';
-@import 'mixins/triangle';
-
-
$black: rgba(20,20,20,1);
$halfBlack: rgba($black,.5);
$white: white;
$halfWhite: rgba($white,.5);
$almostWhite: rgba($black,.04);
+@import 'compass';
+@import 'responsive';
+@import 'mixins/triangle';
+@import 'login';
+
+
+
+
$green: green;
$red: red;
.shirtBlock {
background: $black;
color: $white;
- border:1px solid $white;
+ border:5px solid $white;
text-align: right;
}
@@ -53,16 +56,48 @@ a{
}
button {
+ display:inline-block;
background:$green;
border:none;
padding:10px;
color:$white;
+ @include border-radius(3px);
&.neg {
background:$red;
}
}
+.btn-sign-in{
+ @extend button;
+ float:right;
+ margin:10px 20px 0 0;
+
+ i {
+ display:inline-block;
+ width:16px;
+ height:16px;
+ background-repeat:no-repeat;
+ margin-left:3px;
+
+ &.icon-tw-white{
+ background-image:url(../images/twitter-16.png);
+ background-position:0px 2px;
+ }
+
+ &.icon-fb-white{
+ background-image:url(../images/facebook-16.png);
+ background-position:0px 1px;
+ }
+ }
+}
+
+.container {
+ max-width:1200px;
+ margin-left:330px;
+ padding:0 10px;
+}
+
header{
padding:0 10px;
h1{
@@ -75,7 +110,6 @@ header{
section{
padding:0 10px;
- margin-left:330px;
h2{
background:$halfWhite;
@@ -190,12 +224,17 @@ footer {
}
@media screen and (max-width: 720px) {
- section {
+ .btn-sign-in{
+ margin-right:15px;
+ }
+ .container {
margin-left:0;
+ padding:0;
}
.creator,.shirt-form {
display:none;
}
+
}
@media all and (min-width: 960px) {