"Untitled"
Bootstrap 4.1.1 Snippet by divyalahad

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="login-reg-panel">
<div class="login-info-box">
<h2>Have an account?</h2>
<p>Login for best tour package deals </p>
<label id="label-register" for="log-reg-show">Login</label>
<input type="radio" name="active-log-panel" id="log-reg-show" checked="checked">
</div>
<div class="register-info-box">
<h2>Don't have an account?</h2>
<p>Register to avail best tour package deals</p>
<label id="label-login" for="log-login-show">Register</label>
<input type="radio" name="active-log-panel" id="log-login-show">
</div>
<div class="orange-panel">
<div class="login-show">
<h2>LOGIN</h2>
<input type="text" placeholder="Email">
<input type="password" placeholder="Password">
<input type="button" value="Login">
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=300,width=400,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@import url('https://fonts.googleapis.com/css?family=Mukta');
body{
font-family: 'Mukta', sans-serif;
height:100vh;
min-height:550px;
background-image: url(https://c.pxhere.com/photos/eb/e7/houseboat_backwater_water_kerala_india_tourism_travel_canal-1187486.jpg!d);
background-repeat: no-repeat;
background-size:cover;
background-position:center;
position:relative;
overflow-y: hidden;
}
a{
text-decoration:none;
color:#203989;
}
.login-reg-panel{
position: relative;
top: 50%;
transform: translateY(-50%);
text-align:center;
width:70%;
right:0;left:0;
margin:auto;
height:400px;
background-color: rgba(32, 57, 137, 1);
}
.orange-panel{
background-color: rgba(252,102, 0, 1);
height:500px;
position:absolute;
top:-50px;
width:50%;
right:calc(50% - 50px);
transition:.3s ease-in-out;
z-index:0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(document).ready(function(){
$('.login-info-box').fadeOut();
$('.login-show').addClass('show-log-panel');
});
$('.login-reg-panel input[type="radio"]').on('change', function() {
if($('#log-login-show').is(':checked')) {
$('.register-info-box').fadeOut();
$('.login-info-box').fadeIn();
$('.orange-panel').addClass('right-log');
$('.register-show').addClass('show-log-panel');
$('.login-show').removeClass('show-log-panel');
}
else if($('#log-reg-show').is(':checked')) {
$('.register-info-box').fadeIn();
$('.login-info-box').fadeOut();
$('.orange-panel').removeClass('right-log');
$('.login-show').addClass('show-log-panel');
$('.register-show').removeClass('show-log-panel');
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Paper Dashboard

Questions / Comments: