"Create login & registration form using HTML CSS & JavaScript"
Bootstrap 4.1.1 Snippet by bipon68

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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 ---------->
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="user name"/>
<input type="text" placeholder="password"/>
<input type="text" placeholder="email id"/>
<button>Create</button>
<p class="message">Already Registered? <a href="#">Login</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="user name"/>
<input type="password" placeholder="password"/>
<button>Login</button>
<p class="message">Not a Registered? <a href="#">Register</a></p>
</form>
</div>
</div>
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{
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6), url(https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/reference_guide/cats_and_excessive_meowing_ref_guide/1800x1200_cats_and_excessive_meowing_ref_guide.jpg));
height: 100vh;
background-size: cover;
background-position: center;
}
.login-page{
width: 360px;
padding: 10% 0 0;
margin: auto;
}
.form{
position: relative;
z-index: 1;
background: rgba(7, 40, 195, 0.8);
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
}
.form input{
outline: 1;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.form button{
text-transform: uppercase;
outline: 0;
background: #4caf50;
width: 100%;
border: 0;
padding: 15px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
$('.message a').click(function(){
$('form').animate({height: "toggle", opacity: "toggle"}, "slow")
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: