<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <a data-toggle="modal" href="#loginModal">Log In</a> <!-- Modal --> <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="modalLabel">Add your favorite properties to share...</h4> </div> <!-- Modal Body --> <div class="modal-body" style="text-align:center;"> <div class="row-fluid"> <div class="mod_login"> <h3 class="mod_authTitle">Login or <a data-dismiss="modal" data-toggle="modal" href="#signUpModal">Sign up</a></h3> <div class="row mod_socialButtons"> <button type="button" class="btn btn-lg mod_btn-facebook"> <i class="fa fa-facebook visible-xs"></i> <span class="hidden-xs">Facebook</span> </button> <button type="button" class="btn btn-lg mod_btn-twitter"> <i class="fa fa-twitter visible-xs"></i> <span class="hidden-xs">Twitter</span> </button> <button type="button" class="btn btn-lg mod_btn-google"> <i class="fa fa-google-plus visible-xs"></i> <span class="hidden-xs">Google+</span> </button> </div> <div class="row mod_loginOr"> <div class="col-xs-12 col-sm-8 col-sm-offset-2"> <hr class="mod_hrOr"> <span class="mod_spanOr">or</span> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2"> <form class="mod_loginForm" action="" autocomplete="off" method="POST"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span> <input type="text" class="form-control" name="username" placeholder="email address"> </div> <span class="help-block"></span> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-lock"></i></span> <input type="password" class="form-control" name="password" placeholder="Password"> </div> <span class="help-block">Password error</span> <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button> </form> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-4 col-sm-offset-2"> <label class="checkbox"> <input type="checkbox" value="remember-me">Remember Me </label> </div> <div class="col-xs-12 col-sm-4"> <p class="mod_forgotPwd"> <a href="#">Forgot password?</a> </p> </div> </div> </div> </div> </div> <!-- Modal Footer --> <div class="modal-footer"> <p>By signing up, I agree to the <a href="">Privacy Policy</a> and <a href="">Conditions of Use</a></p> </div> </div> </div> </div> <!-- Sign Up Modal --> <div class="modal fade" id="signUpModal" tabindex="1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="modalLabel">Sign up in seconds... Start your favorites list.</h4> </div> <!-- Modal Body --> <div class="modal-body" style="text-align:center;"> <div class="row-fluid"> <div class="mod_login"> <h3 class="mod_authTitle">Sign up quickly</h3> <div class="row mod_socialButtons col-sm-8 col-sm-offset-2"> <button type="button" class="btn btn-lg btn-block mod_btn-facebook"> <i class="fa fa-facebook visible-xs"></i> <span class="hidden-xs">Sign up with Facebook</span> </button> <button type="button" class="btn btn-lg btn-block mod_btn-twitter"> <i class="fa fa-twitter visible-xs"></i> <span class="hidden-xs">Sign up with Twitter</span> </button> <button type="button" class="btn btn-lg btn-block mod_btn-google"> <i class="fa fa-google-plus visible-xs"></i> <span class="hidden-xs">Sign up with Google+</span> </button> </div> <div class="row"> <div class="mod_loginOr col-xs-12 col-sm-8 col-sm-offset-2"> <hr class="mod_hrOr"> <span class="mod_spanOr">or</span> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2"> <form class="mod_loginForm" action="" autocomplete="off" method="POST"> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span> <input type="text" class="form-control" name="username" placeholder="email address"> </div> <span class="help-block"></span> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-lock"></i></span> <input type="password" class="form-control" name="password" placeholder="Password"> </div> <span class="help-block">Password error</span> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button> </form> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2"> <hr class="mod_hr"> <h4 class="mod_label">Already have an account? <a data-dismiss="modal" data-toggle="modal" href="#loginModal">Log in</a>.</h4> </div> </div> </div> </div> </div> <!-- Modal Footer --> <div class="modal-footer"> <p>By signing up, I agree to the <a href="">Privacy Policy</a> and <a href="">Conditions of Use</a></p> </div> </div> </div> </div>

.mod_login { text-align:center; } .mod_login .mod_authTitle { color: #999999; text-align: center; line-height: 150%; } .mod_login .mod_label { color: #999999; } .mod_login .mod_socialButtons { color: white; opacity:0.9; min-width: 115px; } .mod_login .mod_socialButtons:hover { color: white; opacity:1; } .mod_login .mod_socialButtons .mod_btn-facebook {background: #3b5998;} .mod_login .mod_socialButtons .mod_btn-twitter {background: #00aced;} .mod_login .mod_socialButtons .mod_btn-google {background: #c32f10;} .mod_login .mod_loginOr { font-size: 1.5em; color: #aaa; text-align:center; margin-top: 1em; margin-bottom: 1em; padding-top: 0.5em; padding-bottom: 0.5em; } .mod_login .mod_loginOr .mod_hrOr { background-color: #cdcdcd; height: 1px; margin-top: 0px !important; margin-bottom: 0px !important; } .mod_login .mod_loginOr .mod_spanOr { display: block; position: absolute; left: 50%; top: -0.6em; margin-left: -1.5em; background-color: white; width: 3em; text-align: center; } .mod_login .mod_loginForm .input-group.i { width: 2em; } .mod_login .mod_loginForm .help-block { color: red; } .modal-footer { text-align:center; } @media (min-width: 768px) { .mod_login .mod_forgotPwd { text-align: right; margin-top:10px; } }