login and register form more design

src/Jotunheimr/UserBundle/Resources/public/css/layout.css

@@ -1,12 +1,15 @@
 main {
-    background: #34495e;
     position: fixed;
     width: 100%;
     height: 100%;
 }
 
+main > div {
+    background: rgba(52, 73, 94, 0.9);
+}
+
 main .form {
-    border-top: 2px solid #3498db;
+    /*border-top: 2px solid #3498db;*/
 }
 
 main .checkbox {
@@ -14,7 +17,7 @@ main .checkbox {
 }
 
 .facebook {
-    border-top: 2px solid #3498db;
+    border-bottom: 1px solid #3498db;
     padding: 40px;
     margin: 20px;
 }
@@ -112,12 +115,15 @@ main .checkbox {
 }
 
 .input__field--kozakura {
+    background: transparent;
+    width: 100%;
+    font-size: 1.55em;
+    color: #2F3238;
+    border-bottom: 1px solid #3498db;
     padding: 0.25em 0.5em;
     margin-top: 1.25em;
-    width: 100%;
-    background: transparent;
-    color: #2F3238;
-    font-size: 1.55em;
+    margin-bottom: 0.5em;
+
     opacity: 0;
 }
 

src/Jotunheimr/UserBundle/Resources/public/css/login.css

@@ -1,3 +1,9 @@
+main {
+    background: url("/bundles/jotunheimruser/images/landscape-2.jpeg");
+    background-size: cover;
+    background-position: center center;
+}
+
 main .login {
     position: fixed;
     display: flex;
@@ -8,11 +14,21 @@ main .login {
     flex-direction: column;
 }
 
+main .login .login-container {
+    background: #FFFFFF;
+    display: table;
+    padding: 1em;
+
+    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+}
+
 main .login h1 {
     display: block;
     font: normal 40px 'Gloria Hallelujah', cursive;
     text-align: center;
-    color: #FFFFFF;
+    color: #3498db;
+    margin-top: 0;
 }
 
 main .login .form .input {
@@ -20,12 +36,16 @@ main .login .form .input {
     margin: 0 auto;
 }
 
+main .login .form .checkbox {
+    color: #3498db;
+}
+
 main .login .form .submit {
-    background: #3498db;
+    background: none;
     display: block;
     font: bold 22px 'Gloria Hallelujah', cursive;
     color: #FFFFFF;
-    border: 0;
+    border: 2px solid #3498db;
     padding: 10px 20px;
     margin: 20px auto 0 auto;
 
@@ -34,8 +54,7 @@ main .login .form .submit {
 }
 
 main .login .form .submit:hover {
-    background: #FFFFFF;
-    color: #3498db;
+    background: #3498db;
 
     -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
     transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);

src/Jotunheimr/UserBundle/Resources/public/css/register.css

@@ -1,3 +1,9 @@
+main {
+    background: url("/bundles/jotunheimruser/images/landscape-3.jpeg");
+    background-size: cover;
+    background-position: center center;
+}
+
 main .register {
     position: fixed;
     display: flex;
@@ -21,11 +27,11 @@ main .register .form .input {
 }
 
 main .register .form .submit {
-    background: #3498db;
+    background: none;
     display: block;
     font: bold 22px 'Gloria Hallelujah', cursive;
     color: #FFFFFF;
-    border: 0;
+    border: 2px solid #3498db;
     padding: 10px 20px;
     margin: 20px auto 0 auto;
 
@@ -34,8 +40,7 @@ main .register .form .submit {
 }
 
 main .register .form .submit:hover {
-    background: #FFFFFF;
-    color: #3498db;
+    background: #3498db;
 
     -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
     transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);