Login page design new styles

hosting/static/hosting/css/landing-page.css

@@ -82,24 +82,25 @@ h6 {
     text-align: center;
     color: #f8f8f8;
     position: relative;
-    padding-bottom: 25%;
-    padding-top: 10%;
 }
 
 .intro-login {
-    background: url(../img/login-bg.jpg) no-repeat center center;
+    background: url(../img/intro-bg.jpg) no-repeat center center;
     background-size: cover;
     height: 100%;
 }
 
 .intro-signup {
-    background: url(../img/signup-bg.png) no-repeat center center;
+    background: url(../img/intro-bg.jpg) no-repeat center center;
     background-size: cover;
     height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .intro-reset-password {
-    background: url(../img/signup-bg.png) no-repeat center center;
+    background: url(../img/intro-bg.jpg) no-repeat center center;
     background-size: cover;
     height: 100%;
 }
@@ -193,7 +194,108 @@ h6 {
     float: right;
     margin-top: 0;
 }
+/*------Auth section---------*/
+.auth-container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: url(../img/auth-bg.jpg) no-repeat center center;
+    background-size: cover;
+    height: 100vh;
+    position: relative;
+}
+.auth-container .container{
+    z-index: 1000;
+}
+.auth-container .auth-content{
+     width: 80%;
+    margin: 0 auto;
+    max-width: 390px;
+    margin-top: 60px;
 
+}
+.auth-container .auth-title h2{
+    color: #fff;
+    font-family: 'Montserrat-Bold';
+    font-size: 44px;
+    text-align: center;
+    width: 425px;
+    margin: 0 auto;
+    margin-bottom: 30px;
+    position: relative;
+}
+.auth-container .auth-title h2::after{
+    content: "";
+    position: absolute;
+    bottom: -20px;
+    background: #fff;
+    height: 7px;
+    width: 70px;
+    left: 50%;
+    transform: translate(-50%, 0);
+}
+.auth-container::before{
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(75, 75, 101, 0.55);
+    z-index: 1;
+}
+.auth-box{
+    background: #fff;
+    padding: 0;
+    padding-bottom: 30px;
+    box-sizing: border-box;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+    border-radius: 4px;
+    z-index: 10;
+}
+.auth-box .section-heading{
+    text-align: left;
+    margin-bottom: 20px;
+    background-color: rgba(33, 69, 113, 0.82);
+    color: #fff;
+    padding: 10px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    font-size: 17px;
+    border-radius: 3px 3px 0px 0px;
+}
+.auth-box .form{
+    padding: 20px;
+    width: 80%;
+    margin: 0 auto;
+}
+.auth-box .form .red{
+    color: #ea3a3a;
+}
+.auth-box .form .btn{
+    box-shadow: 0 0px 9px rgba(0,0,0,0.19), 0 3px 5px rgba(0,0,0,0.23);
+    letter-spacing: 3px;
+    font-size: 17px;
+    text-transform: uppercase;
+}
+.auth-box .form .form-control{
+    height: 44px;
+    font-size: 16px;
+}
+.auth-box .auth-footer {
+    text-align: center;
+    padding: 10px;
+}
+.auth-box .auth-footer .text{
+    color: #777;
+}
+.auth-box .auth-footer .links a{
+    color: #1e94cc;
+}
+.auth-box .auth-footer .links a:hover{
+    color: #1e94cc;
+}
 @media (max-width: 1199px) {
     ul.banner-social-buttons {
         float: left;
@@ -218,7 +320,17 @@ h6 {
         margin-bottom: 0;
     }
 }
-
+@media (max-width: 540px) {
+    .auth-container .auth-title h2{
+        font-size: 32px;
+        width: 90%;
+        margin-bottom: 50px;
+    }
+    .auth-box .form {
+        padding: 15px;
+        width: 90%;
+    }
+}
 footer {
     padding: 2%;
     background-color: #f8f8f8;
@@ -250,4 +362,5 @@ a.unlink {
 
 a.unlink:hover {
     color: inherit;
-}
+}
+