"Sign in/up Form"
Bootstrap 4.1.1 Snippet by koshikojha

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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<div class="container">
<div class="card-wrap">
<div class="card border-0 shadow card--welcome is-show" id="welcome">
<div class="card-body">
<h2 class="card-title">WELCOME</h2>
<p>Welcome to the login page</p>
<div class="btn-wrap"><a class="btn btn-lg btn-register js-btn" data-target="register">REGISTER</a><a class="btn btn-lg btn-login js-btn" data-target="login">LOGIN</a></div>
</div>
</div>
<div class="card border-0 shadow card--register" id="register">
<div class="card-body">
<h2 class="card-title">Create Account</h2>
<p class="card-text">Enter your personal details<br/>and start journey with us</p>
<p class="badge-wrap"><a class="badge"><i class="fab fa-facebook-f"></i></a><a class="badge"><i class="fab fa-google"></i></a><a class="badge"><i class="fab fa-twitter"></i></a><a class="badge"><i class="fab fa-github"></i></a></p>
<p>or use your email for registration</p>
<form>
<div class="form-group">
<input class="form-control" type="text" placeholder="Name" required="required"/>
</div>
<div class="form-group">
<input class="form-control" type="email" placeholder="Email" required="required"/>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="Password" required="required"/>
</div>
<button class="btn btn-lg">REGISTER</button>
</form>
</div>
<button class="btn btn-back js-btn" data-target="welcome"><i class="fas fa-angle-left"></i></button>
</div>
<div class="card border-0 shadow card--login" id="login">
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
body{
display:flex;
height:100vh;
min-height:35rem;
align-items:center;
justify-content:center;
font-family:'Josefin Sans', sans-serif;
}
.card{
position:absolute;
top:50%;
left:50%;
width:100%;
padding-top:1rem;
padding-bottom:1rem;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
.card-wrap{
position:relative;
margin:0 auto;
}
@media (min-width: 769px){
.card-wrap{
max-width:450px
}
}
.card-body{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
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
const cards = document.querySelectorAll('.card');
/* View Controller
-----------------------------------------*/
const btns = document.querySelectorAll('.js-btn');
btns.forEach((btn) => {
btn.addEventListener('click', on_btn_click, true);
btn.addEventListener('touch', on_btn_click, true);
});
function on_btn_click (e) {
const nextID = e.currentTarget.getAttribute('data-target');
const next = document.getElementById(nextID);
if(!next) return;
bg_change(nextID);
view_change(next);
return false;
}
/* Add class to the body */
function bg_change(next) {
document.body.className = '';
document.body.classList.add('is-'+next);
}
/* Add class to a card */
function view_change(next) {
cards.forEach((card) => { card.classList.remove('is-show'); });
next.classList.add('is-show');
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Get Shit Done Kit
Bootstrap 4.11 sign in form
Sign up form [Validations NOT ACHIEVED]
sign up 2

Questions / Comments: