"Pixel - Modal Login Form With Navbar"
Bootstrap 3.3.0 Snippet by andrewbsc

<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 ----------> <div class="blue-bg-nav"> <div class="container"> <div class="row"> <div class="col-md-12"> <header class="header-tp"> <nav class="navbar navbar-default navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <form class="form-inline"> <a href="#" class="btn-blu mrgn-top" data-toggle="modal" data-target="#at-helping">Help</a> <ul class="nav navbar-nav navbar-right bdr"> <li><a href="#" data-toggle="modal" data-target="#at-login">Sign in</a></li> <li ><a href="#" data-toggle="modal" data-target="#at-signup">Sign Up</a></li> </ul> </form> </div><!--/.nav-collapse --> </div> </nav> </header> <section class="at-login-form"> <!-- MODAL LOGIN --> <div class="modal fade" id="at-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" 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> </div> <div class="modal-body"> <button class="btn-fb"> <i class="fa fa-fw fa-facebook pull-left" aria-hidden="true"></i> Login with Facebook </button> <br> <button class="btn-gp"> <i class="fa fa-fw fa-google-plus pull-left" aria-hidden="true"></i> Login with Google </button> <br> <div class="signup-or-separator"> <span class="h6 signup-or-separator--text">or</span> <hr> </div> <form> <div class="form-group"> <input type="email" class="form-control-form " id="exampleInputEmaillog" placeholder="Email"> </div> <div class="form-group"> <input type="password" class="form-control-form " id="exampleInputPasswordpas" placeholder="Password"> </div> <div class="row"> <div class="col-md-6"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> <div class="col-md-4 col-md-offset-2"> <p class="frgt-pswd" data-toggle="modal" data-dismiss="modal" data-target="#at-reset-pswd"> Forgot Password ?</p> </div> </div> <button type="submit" class="btn-lgin">Login</button> </form> </div> <div class="modal-footer"> <div class="row"> <div class="col-md-6"> <p class="ta-l">Don't have an account ? </p> </div> <div class="col-md-4 col-md-offset-2"> <button class="btn-gst" data-toggle="modal" data-dismiss="modal" data-target="#at-signup" >Sign Up </button> </div> </div> </div> </div> </div> </div> <!-- MODAL LOGIN ENDS --> <!-- MODAL SIGNUP --> <div class="modal fade" id="at-signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" 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> </div> <div class="modal-body"> <button class="btn-fb"> <i class="fa fa-fw fa-facebook pull-left" aria-hidden="true"></i> Signup with Facebook </button> <br> <button class="btn-gp"> <i class="fa fa-fw fa-google-plus pull-left" aria-hidden="true"></i> Signup with Google </button> <br> <div class="signup-or-separator"> <span class="h6 signup-or-separator--text">or</span> <hr> </div> <button type="submit" class="btn-lgin" data-toggle="modal" data-dismiss="modal" data-target="#at-signup-filling">Signup with Email</button> <hr> <p>By signing up, I agree to Airbnb’s , Payments <a href="#">Terms of Service</a>, <a href="#">Privacy Policy</a>, <a href="#">Guest Refund Policy</a>, and <a href="#">Host Guarantee Terms</a>. </p> </div> <div class="modal-footer"> <div class="row"> <div class="col-md-6"> <p class="ta-l">Already a Member? </p> </div> <div class="col-md-4 col-md-offset-2"> <button class="btn-gst" data-toggle="modal" data-dismiss="modal" data-target="#at-login">Login</button> </div> </div> </div> </div> </div> </div> <!-- MODAL SIGNUP FORM FILLING --> <div class="modal fade" id="at-signup-filling" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" 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> </div> <div class="modal-body"> <p>Sign up with <a href="#">Facebook</a> or <a href="#">Google</a></p> <div class="signup-or-separator"> <span class="h6 signup-or-separator--text">or</span> <hr> </div> <form> <div class="form-group"> <input type="text" class="form-control-form " id="exampleInputEmaillog" placeholder="Full Name"> </div> <div class="form-group"> <input type="email" class="form-control-form " id="exampleInputEmaillog" placeholder="Email"> </div> <div class="form-group"> <input type="password" class="form-control-form " id="exampleInputPasswordpas" placeholder="Password"> </div> <div class="row"> <div class="col-md-12"> <div class="checkbox"> <label> <input type="checkbox"> I’d like to receive coupons and inspiration </label> </div> <p>By signing up, I agree to Airbnb’s , Payments <a href="#">Terms of Service</a>, <a href="#">Privacy Policy</a>, <a href="#">Guest Refund Policy</a>, and <a href="#">Host Guarantee Terms</a>. </p> </div> </div> <button type="submit" class="btn-lgin">Signup</button> </form> </div> <div class="modal-footer"> <div class="row"> <div class="col-md-6"> <p class="ta-l">Already a Member? </p> </div> <div class="col-md-4 col-md-offset-2"> <button class="btn-gst" data-toggle="modal" data-dismiss="modal" data-target="#at-login">Login</button> </div> </div> </div> </div> </div> </div> <!-- MODAL SIGNUP FORM FILLING --> <!-- MODAL FORGOT PASSWORD --> <div class="modal fade" id="at-reset-pswd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" 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> </div> <div class="modal-body"> <form> <p> Enter the email address associated with your account, and we’ll email you a link to reset your password. </p> <div class="form-group"> <input type="email" class="form-control-form " id="exampleInputEmaillog" placeholder="Email"> </div> </form> </div> <div class="modal-footer"> </div> </div> </div> </div> <!-- MODAL HELP --> <div class="modal fade" id="at-helping" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" 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> </div> <div class="modal-body"> <form> <div class="form-group"> <input type="text" class="form-control-form " id="exampleInputEmaillog" placeholder="Enter Your Searches "> </div> </form> </div> <div class="modal-footer"> <div class="row"> <button class="btn-gst" data-toggle="modal" data-dismiss="modal" >Send areset Link</button> </div> </div> </div> </div> </div> </div> </section> </div> </div> </div> </div
.header-tp .navbar { position: relative; min-height: 50px; margin-bottom: 0px; border: 1px solid transparent; } .header-tp .navbar-default { background-color: #1DB9EC; border-color:transparent!important; } .header-tp .bdr li:nth-child(odd) { border-left: 1px solid rgba(255, 255, 255, 0.44); } .header-tp .bdr li:nth-child(even) { border-right: 1px solid rgba(255, 255, 255, 0.44); border-left: 1px solid rgba(255, 255, 255, 0.44); } .header-tp .bdr li { padding:10px 0px; } .header-tp .bdr li a { color:#fff!important; } .header-tp .pddr { padding-top:5px; } .header-tp .navbar-right { float: right !important; margin-right: 30px; } .header-tp .nav > li { position: relative; display: inline-block; } .btn-blu { display: inline-block; padding: 10px 35px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 0px; background-color: #0D4459; border-color: #0D4459; color: #fff; } .mrgn-top { margin-top:15px; margin-right:15px; } .header-tp { margin: 10px 0px; } /*######################## LOGIN/SIGNUP PAGE START ##################################*/ .at-login-form .btn-fb { display: inline-block; padding: 18px 20px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 0px; background-color: #4568B2; width: 100%; margin-top: 10px; color:#fff; } .at-login-form .btn-gp { display: inline-block; padding: 18px 20px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid #eee; border-radius: 0px; background-color: #FFFFFF; width: 100%; margin-top: 10px; color:#000; } .at-login-form .btn-lgin { display: inline-block; padding: 18px 20px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid #eee; border-radius: 0px; background-color: #1DB9EC; width: 100%; margin-top: 10px; color:#fff; } .at-login-form .signup-or-separator { background: none; height: 34px; position: relative; text-align: center; } .at-login-form .signup-or-separator--text { background-color: #fff; display: inline-block; padding: 8px; } .at-login-form .h6 { font-size: 14px; font-weight: bold; color: #757575; line-height: 1.1; text-rendering: optimizelegibility; } .at-login-form .signup-or-separator hr { margin: -25px auto 10px; width: 100%; } .at-login-form .form-control-form { display: block; width: 100%; height: 54px; padding: 15px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 0px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 1px rgba(0,0,0,.075); -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; margin-top: 3px; } .at-login-form .frgt-pswd { margin: 5px 0 10px; color: red; } .at-login-form .btn-gst { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid #000; border-radius: 0px; background-color: transparent; } .at-login-form .ta-l { text-align:left; margin-top: 5px; } .at-login-form .modal-dialog { width: 500px; margin: 30px auto; } .at-login-form .modal-content { padding: 0px 10px; } .at-login-form .modal-header { padding: 10px 10px; border-bottom: 0px solid #e5e5e5; } .blue-bg-nav { background-color:#1DB9EC; /*######################## LOGIN/SIGNUP PAGE END ##################################*/

Related: See More


Questions / Comments: