Login/SignUp page using Bootstrap - html

Question

I'm working in designing Login/SignUp page with animation.
Below is the link which I want exactly but I'm not sure which control they have used.
UPDATED SITE:
Like here

Answer 1

I have added simple way so that you can do it easily.
You have to do formatting by your side but I have already covered almost all the possibility.
Just for the modal refer this link. Which helps you in creating your modal dynamically rather then writing conventional code.
var Loginpage = function() {};
Loginpage.showHideContent = function(id) {
if (id == 1) {
$('#signup-div').show();
$('#login-div').hide();
} else if (id == 2) {
$('#signup-div').hide();
$('#login-div').show();
}
}
Loginpage.showLogin = function(id) {
if (id != undefined && id != null) {
Loginpage.showHideContent(id);
}
var shown_div = $('#signup_login_container');
BootstrapDialog.show({
title: '<img src="https://cdn0.iconfinder.com/data/icons/Pinterest/512/Pinterest_Favicon.png" height="20px" />',
message: $('#signup_login_container'),
closeByBackdrop: false,
onshown: function(dialog) {
dialog.setSize(BootstrapDialog.SIZE_SMALL);
},
onhide: function() {
$('#hidden-div').append(shown_div);
}
});
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css" />
<button class="btn btn-danger" onclick="Loginpage.showLogin(1)">Sign Up</button>
<button class="btn btn-default" onclick="Loginpage.showLogin(2)">Log in</button>
<div id="hidden-div" style="display : none">
<div class="container-fluid" id="signup_login_container" style="padding :0px 0px">
<div id="login-div" style="display : none">
<h3 align="center">Log in to see more</h3>
<br>
<button type="button" class="btn btn-default btn-block">Continue With Facebook</button>
<button type="button" class="btn btn-default btn-block">Login With Google</button>
<hr>
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<br>
<br>
<br>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<br>
<br>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-default btn-block">Submit</button>
</div>
</div>
</form>
<br>
<hr>
<br>
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8">
<button type="button" class="btn btn-default btn-block" onclick="Loginpage.showHideContent(1)">Sign up</button>
</div>
<div class="col-sm-2">
</div>
</div>
</div>
<div id="signup-div">
<h3 align="center">Sign Up to see more</h3>
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
</div>
<br>
<br>
<br>
<div class="form-group">
<div class="col-sm-12">
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
</div>
<br>
<br>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-default btn-block">Submit</button>
</div>
</div>
</form>
<br>
<br>
<hr>
<button type="button" class="btn btn-default btn-block">Login With Facebook</button>
<hr>
<div class="row">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<button type="button" class="btn btn-default btn-block" onclick="Loginpage.showHideContent(2)">Log in</button>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>