"Login Page 1.0"
Bootstrap 3.3.0 Snippet by mhafizhrh

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html> <head> <title>Login Page 1.0</title> </head> <body> <center> <h1>Sign In and Sign Up with Modal</h1> <div class="form-group"> <button class="btn btn-info" data-toggle="modal" data-target="#signin">SIGN IN</button> Or <button class="btn btn-primary" data-toggle="modal" data-target="#signup">SIGN UP</button> </div> <div class="modal fade" id="signin" tabindex="-1" role="dialog"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title" style="float: left;">Login to your account</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input type="username" name="username" class="form-control" placeholder="Username" required> </div> </div> <div class="form-group"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input type="password" name="password" class="form-control" placeholder="Password" required> </div> </div> <div class="form-group"> <input type="checkbox" style="float: left;"> Remember Me </div> <div class="form-group"> <button type="submit" class="btn btn-success btn-block">Login</button> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">Login With Facebook</button> </div> <hr> <div class="form-group"> <p>Don't have an account? <a href="#" data-toggle="modal" data-dismiss="modal" data-target="#signup">Sign Up</a></p> </div> </form> </div> <div class="modal-footer"> <p class="pull-right">© Copyright 2017</p> </div> </div> </div> </div> <div class="modal fade" id="signup" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">Register account</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <label style="float: left;">Name :</label> <input type="text" name="name" class="form-control" placeholder="Full Name"> </div> <div class="form-group"> <label style="float: left;">Email :</label> <input type="email" name="email" class="form-control" placeholder="Email Address"> </div> <div class="form-group"> <label style="float: left;">Username :</label> <input type="text" name="name" class="form-control" placeholder="Username"> </div> <div class="form-group"> <label style="float: left;">Password :</label> <input type="password" name="password" class="form-control" placeholder="Password"> </div> <div class="form-group"> <label style="float: left;">Retype Password :</label> <input type="password" name="repassword" class="form-control" placeholder="Retype Password"> </div> <div class="form-group"> <button type="submit" class="btn btn-info btn-block">Register</button> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block">Register With Facebook</button> </div> <hr> <div class="form-group"> <p>Have an account? <a href="#" data-toggle="modal" data-dismiss="modal" data-target="#signin">Sign Up</a></p> </div> </form> </div> <div class="modal-footer"> <p class="pull-right">© Copyright 2017</p> </div> </div> </div> </div> </center> </body> </html>

Related: See More

Vue Material Kit
Elegant Login Page
My Awesome Login Page
Simple & Clean 404 Error Page style

Questions / Comments: