Skip to content
GitLab
Commit 7d27a665 authored by Prashant Savekar's avatar Prashant Savekar
Browse files

application login page design changes

parent 5e93321a
Branches
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 297 additions and 50 deletions
public/assets/images/login-bg.jpg 0 → 100644
+ 0
− 0
View file @ 7d27a665
public/assets/images/login-bg.jpg

269 KiB

src/views/ApplicantLogin.vue
+ 297
− 50
View file @ 7d27a665
<template>
<div class="page-wrapper">
<div class="card sign-up">
<div class="card-body">
<div class="text-center">
<img src="assets/images/maharashtra-logo.png" alt="logo" class="logo1" />
<h1 class="logo-text">RGSTC</h1>
</div>
<div class="p-3">
<form action="index.html" class="form-horizontal">
<div class="form-group" :class="{error: errors.has('email_id')}">
<label>Email Id</label>
<input
type="email"
placeholder="Email"
class="form-control"
autocomplete
name="email_id"
v-model="em.email_id"
/>
<small
class="form-text text-danger"
v-if="errors.has(email_id)"
>{{ $t(errors.first('email_id')) }}</small>
</div>
<div class="form-group" :class="{error: errors.has('email_id')}">
<label>Password</label>
<input
type="password"
placeholder="password"
class="form-control"
autocomplete
name="password"
v-model="em.password"
/>
<small
class="form-text text-danger"
v-if="errors.has(email_id)"
>{{ $t(errors.first('email_id')) }}</small>
</div>
<div class="form-group row m-t-20">
<div
class="login-2"
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);"
>
<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="#">
<img src="assets/images/maharashtra-logo.png" class="logo" alt="logo" />
</a>
<h3>RGSTC</h3>
</div>
<div class="col-lg-7 col-md-12 col-sm-12 col-pad-0 align-self-center">
<div class="login-inner-form">
<div class="details">
<h3>Sign into your account</h3>
<form>
<div class="form-group" :class="{error: errors.has('email_id')}">
<label>Email Id</label>
<input
type="email"
placeholder="Email"
class="form-control"
autocomplete
name="email_id"
v-model="em.email_id"
/>
<small
class="form-text text-danger"
v-if="errors.has(email_id)"
>{{ $t(errors.first('email_id')) }}</small>
</div>
<div class="form-group" :class="{error: errors.has('email_id')}">
<label>Password</label>
<input
type="password"
placeholder="password"
class="form-control"
autocomplete
name="password"
v-model="em.password"
/>
<small
class="form-text text-danger"
v-if="errors.has(email_id)"
>{{ $t(errors.first('email_id')) }}</small>
</div>
<div class="form-group row m-t-20">
<div class="col-12 mb-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" id="customControlInline" class="custom-control-input" />
......@@ -58,7 +68,14 @@
</a>
</div>
</div>
</form>
</form>
<p>
Don't have an account?
<router-link to="dashboard">Register here</router-link>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -146,7 +163,7 @@ export default {
}
.invalid {
background: rgba(0, 0, 0, 0)
background: rgba(41, 35, 35, 0)
url("https://s19.postimg.org/olmaj1p8z/invalid.png") no-repeat scroll 2px
6px;
color: red;
......@@ -165,13 +182,243 @@ export default {
transform: rotate(45deg);
width: 25px;
}
.page-wrapper {
margin: 5.5% auto;
max-width: 460px;
.login-2 {
background: #f5f5f5;
min-height: 100vh;
position: relative;
.logo-text{
font-weight: 700;
color:#0284fe;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
padding: 30px 0;
}
.login-2 a > h4 {
font-size: 24px;
color: #fff;
}
.login-2 .login-inner-form {
color: #717171;
padding: 20px 0;
}
.login-2 .col-pad-0 {
padding: 0;
}
.login-box-2 {
margin: 0 150px 0 200px;
max-width: 700px;
border-radius: 10px;
box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);
background: #fff;
}
.login-2 .login-inner-form .details p a {
margin-left: 3px;
color: #3afe;
}
.login-2 .login-inner-form .details p {
margin-bottom: 0;
font-size: 14px;
}
.login-2 .login-inner-form .details {
padding: 30px 60px 30px 0;
}
.login-2 .bg-img {
background-size: cover;
width: 100%;
bottom: 0;
text-align: center;
border-radius: 10px;
padding: 50px 30px;
background: #0284fe;
// background-image: linear-gradient(
// -225deg,
// #01c0c8 0%,
// #6b8dd6 48%,
// #8e37d7 100%
// );
margin: 30px 0;
left: -60px;
z-index: 999;
}
.login-2 .none-2 {
display: none;
}
.login-2 .btn-outline:hover {
background: #fff;
text-decoration: none;
color: #1b548c;
}
.login-2 .login-inner-form h3 {
margin: 0 0 25px;
font-size: 22px;
font-weight: 400;
color: #352a3a;
}
.login-2 .login-inner-form .form-group {
margin-bottom: 20px;
}
.login-2 .login-inner-form .btn-md {
cursor: pointer;
padding: 10px 50px 8px 50px;
letter-spacing: 1px;
font-size: 15px;
font-weight: 400;
height: 45px;
border-radius: 3px;
text-transform: uppercase;
}
.login-2 .bg-img .social-list li {
display: inline-block;
font-size: 16px;
}
.login-2 .bg-img .logo {
width: 100px;
margin-bottom: 10px;
}
.login-2 .bg-img h3 {
font-size: 28px;
color: #e8e8e8;
letter-spacing: 1px;
font-weight: 500;
}
.login-2 .login-inner-form input[type="checkbox"],
input[type="radio"] {
margin-right: 3px;
}
.login-2 .login-inner-form .terms {
margin-left: 3px;
}
.login-2 .login-inner-form .checkbox {
margin-bottom: 20px;
font-size: 14px;
}
.login-2 .login-inner-form .form-check {
float: left;
margin-bottom: 0;
padding-left: 2px;
}
.login-2 .login-inner-form .form-check a {
color: #717171;
float: right;
}
.login-2 .login-inner-form .form-check-input {
position: absolute;
margin-left: 0;
}
.login-2 .login-inner-form .form-check label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
margin-left: -25px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
}
.login-2 .login-inner-form .form-check-label {
padding-left: 25px;
margin-bottom: 0;
font-size: 14px;
}
.login-2
.login-inner-form
.checkbox-theme
input[type="checkbox"]:checked
+ label::before {
background-color: #1db2cb;
border-color: #1b548c;
}
.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"] {
margin-top: 4px;
}
.login-2 .login-inner-form .checkbox a {
font-size: 14px;
color: #3afe;
float: right;
}
.btn-gradient {
background-image: linear-gradient(
-225deg,
#01c0c8 0%,
#6b8dd6 48%,
#8e37d7 100%
);
color: #fff;
}
/** MEDIA **/
@media (max-width: 1200px) {
.login-box-2 {
margin: 0 70px 0 120px;
}
}
@media (max-width: 992px) {
.none-992 {
display: none;
}
.login-box-2 {
margin: 0 auto;
max-width: 400px;
}
.login-2 .login-inner-form .details {
padding: 30px;
}
.login-2 .pad-0 {
padding: 0;
}
}
.toast-header {
padding: 0.25rem 0.75rem;
}
</style>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment