"Simple and beautiful sign in/sign up modal"
Bootstrap 3.3.0 Snippet by Manish Yadav

<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 ----------> <link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen"> <div class="container"> <div class="jumbotron hidden-xs hidden-sm"> <h1>Your amazing title here</h1> <p>And, of course, your text too.</p> <p><button class="btn btn-lg btn-success" data-toggle="modal" data-target="#modalOnoff"><span class="fa fa-check"></span> Subscribe</button></p> </div> </div> <div class="modal fade bs-example-modal-lg" id="modalOnoff" tabindex="-1" role="dialog" aria-labelledby="lbOnoff"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="lbOnoff">Sign In</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-6"> <p>Please, enter your credentials:</p> <form> <div class="form-group"><label>Email</label><input name="email" type="text" class="form-control" required="true" placeholder="Email" value=""></div> <div class="form-group"><label>Password</label><input name="passwd" type="password" class="form-control" required="true" placeholder="Password"></div> <div class="form-group"><button class="btn btn-md btn-success btn-block" type='submit'>Sign in</button></div> </form> </div> <div class="col-md-6"> <p>Don't have an account yet? Create now!</p> <div class="pull-right"> <span class="fa fa-share-alt fa-5x"></span> </div> <ul> <li>Amazing things</li> <li>Awesome stuff</li> <li>and more!</li> </ul> <hr> <a class="btn btn-lg btn-primary btn-block">Sign up</a> <p class="text-center"><span class="text-muted"><small>we'll never spam you! we promise</small></span></p> </div> </div> </div> </div> </div> </div>
@import url("../libs/bootstrap/css/font-awesome.min.css"); * { border-radius:0 !important; } body { padding:30px; }

Related: See More


Questions / Comments: