xxxxxxxxxx
1
<!-- ######################################################################################################################### -->
2
<!-- CONTENT LOGIN BLOCK -->
3
<!-- ######################################################################################################################### -->
4
<div class="zabackgroundDeco" id="zabackgroundDeco"></div>
5
<div style="min-height: 20vh"></div>
6
<div class="container my-5 py-5 z-depth-1 login_form">
7
<div class="catextnet_logo"><img src="/img/v2/CatExt.net_White.png" width="125"></div>
8
<!-- Rotating card -->
9
<div class="card-wrapper">
10
<div id="card-1" class="card card-rotating text-center z-depth-0">
11
<!-- Front Side -->
12
<div class="face front">
13
<!-- Content -->
14
<div class="card-body">
15
<!--Section: Content-->
16
<section class="px-md-5 mx-md-5 text-center text-lg-left dark-grey-text">
17
<!--Grid row-->
18
<div class="row d-flex justify-content-center">
19
<!--Grid column-->
20
<div class="col-md-9">
21
<!-- Default form login -->
22
<form name="sign_in" id="sign_in" data-rest='auth' class="needs-validation text-center" novalidate action="#!">
23
<p class="h4 mb-4 text-white">Sign in</p>
24
<!-- Email -->
25
<div class='form-row' id='email-row'>
26
<input type="email" id="email" class="form-control " placeholder="E-mail" required>
27
<div class="invalid-feedback">Please provide a email</div>
28
<div class='pb-2'> </div>
29
</div>
30
<!-- Password -->
31
<div class='form-row' id='password-row'>
32
<input type="password" id="password" class="form-control" placeholder="Password" required>
33
<div class="invalid-feedback">Please provide a password</div>
34
<div class='pb-2'> </div>
35
</div>
36
<div class='form-row'>
37
<div class="d-flex justify-content-around">
38
<div>
39
<!-- Remember me -->
40
<div class="custom-control custom-checkbox">
41
<input type="checkbox" class="form-check-input" id="defaultLoginFormRemember" formnovalidate>
42
<label class="form-check-label grey-text no_need_validation" for="defaultLoginFormRemember">Remember me</label>
43
</div>
44
</div>
45
<div>
46
<!-- Forgot password -->
47
<a href="###" class="rotate-btn text-white-50 ml-5" data-card="card-1">Forgot password?</a>
48
</div>
49
</div>
50
</div>
51
52
<!-- Sign in button -->
53
<button class="btn btn-info btn-block my-4" id="btn_signin" type="submit" disabled>Sign in</button>
54
<!-- Register -->
55
<p class="text-white-50">Not a member?
56
<a href="#collapseSignUp" data-toggle="collapse" href="#collapseSignUp" class="collapsed" aria-expanded="false" aria-controls="collapseSignUp">Register</a>
57
</p>
58
<!-- Default form login -->
59
</form>
60
<!--Grid column-->
61
</div>
62
<!--Grid row-->
63
</div>
64
</section>
65
<!--Section: Content-->
66
</div>
67
</div>
68
<!-- Front Side -->
69
<!-- Back Side -->
70
<div class="face back">
71
<div class="card-body">
72
<!-- Content -->
73
<!--Section: Content-->
74
<section class="px-md-5 mx-md-5 text-center text-lg-left dark-grey-text">
75
<!--Grid row-->
76
<div class="row d-flex justify-content-center">
77
<!--Grid column-->
78
<div class="col-md-9">
79
<!-- Default form login -->
80
<form name="resetpwd" id="resetpwd" class="text-center" action="#!">
81
<p class="h4 mb-4 text-white-50">Forgot your password</p>
82
<!-- Email -->
83
<div class="md-form">
84
<label for="resetEmail">To recover your password, provide your email</label>
85
<input type="email" id="resetEmail" class="form-control mb-4" placeholder="E-mail">
86
<!-- button -->
87
<button class="btn btn-info btn-block" type="submit">Recover</button>
88
</div>
89
<div class="d-flex left">
90
<div>
91
<a href="###" class="rotate-btn" data-card="card-1"><i class="fas fa-undo-alt text-white-50"></i> Back</a>
92
</div>
93
</div>
94
</form>
95
<!-- Default form login -->
96
</div>
97
<!--Grid column-->
98
</div>
99
<!--Grid row-->
100
</section>
101
<!--Section: Content-->
102
</div>
103
</div>
104
<!-- Back Side -->
105
</div>
106
</div>
107
<!-- Rotating card -->
108
<div class="collapse-content">
109
<div class="collapse" id="collapseSignUp">
110
<!--Section: Content-->
111
<section class="px-md-5 mx-md-5 text-center text-lg-left dark-grey-text">
112
<!--Grid row-->
113
<div class="row d-flex justify-content-center">
114
<!--Grid column-->
115
<div class="col-md-9">
116
<!-- Default form register -->
117
<form class="text-center" action="#!">
118
<p class="h4 mb-4 mt-4 text-white">Sign up</p>
119
<div class="form-row mb-4">
120
<div class="col">
121
<!-- First name -->
122
<input type="text" id="defaultRegisterFormFirstName" class="form-control" placeholder="First name">
123
</div>
124
<div class="col">
125
<!-- Last name -->
126
<input type="text" id="defaultRegisterFormLastName" class="form-control" placeholder="Last name">
127
</div>
128
</div>
129
<!-- E-mail -->
130
<input type="email" id="defaultRegisterFormEmail" class="form-control mb-4" placeholder="E-mail">
131
<!-- Password -->
132
<input type="password" id="defaultRegisterFormPassword" class="form-control" placeholder="Password"
133
aria-describedby="defaultRegisterFormPasswordHelpBlock">
134
<small id="defaultRegisterFormPasswordHelpBlock" class="form-text text-muted mb-4">
135
At least 8 characters and 1 digit
136
</small>
137
<!-- Phone number -->
138
<input type="number" id="defaultRegisterPhonePassword" class="form-control" placeholder="Phone number"
139
aria-describedby="defaultRegisterFormPhoneHelpBlock">
140
<small id="defaultRegisterFormPhoneHelpBlock" class="form-text text-muted mb-4">
141
Optional - for two step authentication
142
</small>
143
<!-- Sign up button -->
144
<button class="btn btn-info my-4 btn-block" type="submit">Sign up</button>
145
<!-- Terms of service -->
146
<p>By clicking
147
<em>Sign up</em> you agree to our
148
<a href="" target="_blank">terms of service</a>
149
</form>
150
<!-- Default form register -->
151
</div>
152
<!--Grid column-->
153
</div>
154
<!--Grid row-->
155
</section>
156
<!--Section: Content-->
157
</div>
158
</div>
159
</div>
xxxxxxxxxx
1
header {
2
position: fixed;
3
top: 0;
4
left: 0;
5
#background: #760606;
6
background: #ffffff;
7
width: 100%;
8
z-index: 5;
9
}
10
.dashIco{
11
padding-left: 15px;
12
padding-top: 2px;
13
}
14
body{
15
}
16
17
/* this Base adjust
18
##################################################@
19
*/
20
header .container-fluid{
21
padding: 0;
22
}
23
input{
24
font-family: Roboto, sans-serif;
25
font-size: 14px !important;
26
}
27
.secondary-color{
28
background-color: #760606 !important;
29
}
30
.zabackgroundDeco{
31
height: 100vh;
32
width: 100%;
33
background: url("../img/v2/default_background.png");
34
background-size: initial; /* <------ contain cover*/
35
background-position:center,bottom;
36
background-repeat: repeat;
37
position: absolute;
38
bottom: 0px;
39
z-index: 0;
40
opacity: 0.36;
41
}
42
/* webkit extra margin fix*/
43
@media screen and (-webkit-min-device-pixel-ratio:0) {
44
button {margin: 0px}
45
}
46
47
/* this for USER INFOS
48
##################################################@
49
*/
50
.user_box .user_info{
51
text-align: center;
52
}
53
.user_box .user_info p{
54
text-align: center;
55
margin-bottom: 5px;
56
}
57
.user_box .card-body{
58
padding: 5px;
59
}
60
/* user box */
61
.user_box {float:right;background:#fff;border:1px solid #dcdcdc;line-height:1.2;font-size:11px;min-width: 250px}
62
.user_box .user_avatar {float:left;padding:6px 0 4px 6px}
63
.user_box .user_info {padding:4px 0 4px 10px;float:left}
64
.user_box .user_info p {font-size:11px}
65
.user_box a {font-size:10px}
66
.user_box a.sep {border-right:1px solid #e8e8e8;margin-right:3px;padding-right:6px}
67
.user_box .user_sep {border-left:1px dashed #dcdcdc;margin-left:14px}
68
69
html, body {}
70
*, *::after, *::before {
71
box-sizing: border-box;
72
}
73
html{
74
height: 100vh;font-family:'Kabel', sans-serif;
75
}
76
body {
77
height: 100%;
78
width: 100%;
79
-webkit-font-smoothing: antialiased;
80
-moz-osx-font-smoothing: grayscale;
81
font:100 13px/1.4 "Kabel", sans-serif;
82
color:#222;
83
}
84
.login_form {
85
max-width: 720px !important;
86
min-height: 480px;
87
z-index: 10;
88
position: relative;
89
background: linear-gradient(45deg, #071421, #0e2337, #133250, #1E4C79, #20578d);
90
background-size: 250% 250%;
91
}
92
.pinaas{
93
height: 100vh;
94
}
95
96
@-webkit-keyframes gradient {
97
0%{background-position:0% 50%}
98
50%{background-position:100% 50%}
99
100%{background-position:0% 50%}
100
}
101
@-moz-keyframes gradient {
102
0%{background-position:0% 50%}
103
50%{background-position:100% 50%}
104
100%{background-position:0% 50%}
105
}
106
@keyframes gradient {
107
0%{background-position:0% 50%}
108
50%{background-position:100% 50%}
109
100%{background-position:0% 50%}
110
}
111
.catextnet_logo{
112
position: absolute;
113
top:25px;
114
left: 25px;
115
}
116
@media (max-width: 767px){
117
.catextnet_logo{
118
top:-105px;
119
left: calc(50% - 62px);
120
}
121
}
122
.login_form .face, .login_form .card{
123
background: transparent !important;
124
border: none;
125
}
126
1
1
Console errors: 0