update logo + update registration structure + fix css issues

public/assets/css/template.scss

@@ -59,6 +59,18 @@ h4 {
     font-weight: 600;
     color:#181818;
 }
+
+
+.box-login {
+    padding: 30px 0;
+    min-height: 100vh;
+    background: #f5f5f5;
+    background-size: cover;
+}
+
+.card.card-normal {margin-bottom: 0; border-radius: 10px;}
+.card-normal {background: #fff; box-shadow: 0 0 35px rgba(0, 0, 0, 0.5);}
+
 .wrapper {
 
     .left-sidebar {
@@ -73,8 +85,6 @@ h4 {
         .logo-wrapper {
             padding: 20px 10px;
             background: darken($themecolor, 2%);
-            ;
-
             .logo {
                 width: 140px;
                 padding: 20px;
@@ -286,3 +296,13 @@ main {
         padding: .75rem;
     }
 }
+
+
+// FORM
+.form-group {
+    label {margin-bottom: 4px; color: #3b435b;}
+    .custom-control-label {margin-bottom: 0; cursor: pointer;}
+}
+.form-control {height: 44px;
+    &::placeholder {color: rgba(#3b435b, 0.4);}
+}
\ No newline at end of file

src/main.js

@@ -24,6 +24,7 @@ import 'vuejs-dialog/dist/vuejs-dialog.min.css'
 import '../public/assets/plugins/bootstrap-4.4/scss/bootstrap.scss'
 import '../public/assets/plugins/materialdesignicons/css/materialdesignicons.min.css'
 import 'vue-select/dist/vue-select.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
 import '../public/assets/css/template.scss'
 import VueTimepicker from 'vuejs-timepicker'
 import { getCountries, getStates, getCities } from 'cities-states-countries';

src/views/ApplicantLogin.vue

 <template>
   <div
     class="login-2 gradient3"
-    style="background-image: linear-gradient(150deg, rgba(0, 0, 0, 0.6)15%, rgba(0, 0, 0, 0.6)70%, rgba(0, 0, 0, 0.6)94%), url(assets/images/login-bg.jpg);"
+    style="background-image: url(assets/images/bg.jpg);"
   >
     <div class="container">
       <div class="col-md-12 pad-0">
         <div class="row login-box-2">
-          <div
-            class="col-lg-5 col-md-12 col-sm-12 col-pad-0 bg-img align-self-center none-992"
-          >
-            <a href="#">
+          <div class="col-lg-5 col-md-12 col-sm-12 col-pad-0 bg-img align-self-center none-992">
+            <!-- <a href="#"> -->
               <img
                 src="assets/images/maharashtra-logo.png"
                 class="logo"
-                alt="logo"
+                alt="RGSTC"
               />
-            </a>
+            <!-- </a> -->
             <h3>RGSTC</h3>
           </div>
           <div class="col-lg-7 col-md-12 col-sm-12 col-pad-0 align-self-center">
@@ -27,16 +25,15 @@
                     class="form-group"
                     :class="{ error: errors.has('email_id') }"
                   >
-                    <label>Email Id</label>
+                    <label>Email ID</label>
                     <input
                       type="email"
-                      placeholder="Email"
+                      placeholder="Enter your Email ID"
                       class="form-control"
                       autocomplete
                       name="email_id"
                       v-model="em.email_id"
                     />
-
                     <small
                       class="form-text text-danger"
                       v-if="errors.has(email_id)"
@@ -50,13 +47,12 @@
                     <label>Password</label>
                     <input
                       type="password"
-                      placeholder="password"
+                      placeholder="Enter your Password"
                       class="form-control"
                       autocomplete
                       name="password"
                       v-model="em.password"
                     />
-
                     <small
                       class="form-text text-danger"
                       v-if="errors.has(email_id)"
@@ -75,8 +71,9 @@
                         <label
                           for="customControlInline"
                           class="custom-control-label"
-                          >Remember me</label
                         >
+                          Remember me
+                        </label>
                       </div>
                     </div>
                     <div class="col-12 text-center">
@@ -85,18 +82,21 @@
                         class="btn btn-block btn-primary"
                         @click="abx"
                       >
-                        Submit Email
+                        Login
                       </button>
                     </div>
                   </div>
-                  <div class="form-group m-t-10 mb-0 row">
+                  <!-- <div class="form-group m-t-10 mb-0 row">
                     <div class="col-12 m-t-20">
                       <a href="pages-recoverpw.html" class="text-muted">
                         <i class="mdi mdi-lock" /> Forgot your password?
                       </a>
                     </div>
-                  </div>
+                  </div> -->
                 </form>
+                <p>
+                  <a href="#">Forgot your password?</a>
+                </p>
                 <p>
                   Don't have an account?
                   <router-link to="applicantRegistration">
@@ -154,7 +154,8 @@ export default {
   }
 };
 </script>
-<style lang="scss" scoped>
+
+<style lang="scss">
 #login {
   .login-card {
     box-shadow: 0 0 10px #ccc;
@@ -212,15 +213,12 @@ export default {
   transform: rotate(45deg);
   width: 25px;
 }
+
 .login-2 {
   background: #f5f5f5;
+  background-size: cover;
   min-height: 100vh;
   position: relative;
-
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -244,18 +242,18 @@ export default {
   margin: 0 150px 0 200px;
   max-width: 700px;
   border-radius: 10px;
-  box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 35px rgba(0, 0, 0, 0.5);
   background: #fff;
 }
 
 .login-2 .login-inner-form .details p a {
-  margin-left: 3px;
+  /*margin-left: 3px;*/
   color: #3afe;
 }
 
 .login-2 .login-inner-form .details p {
   margin-bottom: 0;
-  font-size: 14px;
+  font-size: 14px; line-height: 22px;
 }
 
 .login-2 .login-inner-form .details {
@@ -279,6 +277,7 @@ export default {
   margin: 30px 0;
   left: -60px;
   z-index: 999;
+  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.2);
 }
 
 .login-2 .none-2 {
@@ -292,11 +291,11 @@ export default {
 }
 
 .login-2 .login-inner-form h3 {
-  margin: 0 0 25px;
-  font-size: 22px;
+  margin: 0 0 20px;
+  font-size: 24px;
   font-weight: 400;
 
-  color: #352a3a;
+  color: #363b4e;
 }
 
 .login-2 .login-inner-form .form-group {
@@ -321,15 +320,17 @@ export default {
 }
 
 .login-2 .bg-img .logo {
-  width: 100px;
-  margin-bottom: 10px;
+  width: 120px;
+  margin-bottom: 15px;
 }
 
 .login-2 .bg-img h3 {
-  font-size: 28px;
+    margin-bottom: 0;
+  font-size: 28px; line-height: 38px;
   color: #e8e8e8;
   letter-spacing: 1px;
-  font-weight: 500;
+  font-weight: 600;
+
 }
 
 .login-2 .login-inner-form input[type="checkbox"],
@@ -389,13 +390,13 @@ input[type="radio"] {
   border-color: #1b548c;
 }
 
-.login-2 .login-inner-form input[type="checkbox"]:checked + label:before {
+/*.login-2 .login-inner-form input[type="checkbox"]:checked + label:before {
   font-weight: 300;
   color: #f3f3f3;
   line-height: 15px;
   font-size: 14px;
   content: "\2713";
-}
+}*/
 
 .login-2 .login-inner-form input[type="checkbox"],
 input[type="radio"] {

src/views/ApplicantRegistration.vue

 <template>
-  <main>
-    <div class="row">
-      <div class="col-sm-2 col-md-2 col-lg-2" />
-
-      <div class="col-sm-8 col-md-8 col-lg-8">
-        <div class="card">
+  <div
+    class="box-login"
+    style="background-image: url(assets/images/bg.jpg);"
+  >
+    <div class="row no-gutters justify-content-center">
+      <div class="col-10">
+        <div class="card card-normal">
           <div class="card-body">
             <form-wizard
               @on-complete="onComplete"
@@ -1027,15 +1028,12 @@
                   </button>
                 </div>
               </tab-content>
-            </form>
-              </tab-content>
             </form-wizard>
           </div>
         </div>
       </div>
-      <div class="col-sm-2 col-md-2 col-lg-2" />
     </div>
-  </main>
+  </div>
 </template>
 
 <script>
@@ -1252,8 +1250,8 @@ export default {
   }
 }
 </script>
-<style lang="scss">
 
+<style lang="scss">
 .page-wrapper {
   margin: 3.5% auto;
   position: relative;
@@ -1279,5 +1277,4 @@ export default {
      }
    }
 }
-
 </style>