"SignUp && Login "
Bootstrap 3.3.0 Snippet by TalhaSUST

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 lang="en"> <head> <title>TALHA</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Talha</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form id="signin" class="navbar-form navbar-right" role="form"> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input id="email" type="email" class="form-control" name="email" value="" placeholder="Email Address"> </div> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input id="password" type="password" class="form-control" name="password" value="" placeholder="Password"> </div> <button type="submit" class="btn btn-primary">Login</button> </form> </div> </ul> </div> </div> </nav> <div> <div class="container" > <div class="col-md-6" > <div id="logbox" > <form id="signup" method="post" action="/signup" > <h1>Create an Account</h1> <input name="user[email]" type="email" placeholder="Email address" class="input pass"/> <input name="user[password]" type="password" placeholder="Choose a password" required="required" class="input pass"/> <input name="user[password2]" type="password" placeholder="Confirm password" required="required" class="input pass"/> <input type="submit" value="Sign me up!" class="inputButton"/> </form> </div> </div> <!--col-md-6--> </div> </div> </body> </html>
::selection { background-color: #b5e2e7; } ::-moz-selection { background-color: #8ac7d8; } body { background: #3CC; } .container { display: -webkit-flex; display: flex; height: 100%; } #logbox { padding: 10px; margin: 50px auto; width: 340px; background-color: #fff; -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); } h1 { text-align: center; font-size: 175%; color: #757575; font-weight: 300; } h1, input { font-family: "Open Sans", Helvetica, sans-serif; } .input { width: 75%; height: 50px; display: block; margin: 0 auto 15px; padding: 0 15px; border: none; border-bottom: 2px solid #ebebeb; } .input:focus { outline: none; border-bottom-color: #3CC !important; } .input:hover { border-bottom-color: #dcdcdc; } .input:invalid { box-shadow: none; } .pass:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px white inset; } .inputButton { position: relative; width: 85%; height: 50px; display: block; margin: 30px auto 30px; color: white; background-color: #3CC; border: none; -webkit-box-shadow: 0 5px 0 #2CADAD; -moz-box-shadow: 0 5px 0 #2CADAD; box-shadow: 0 5px 0 #2CADAD; } .inputButton:hover { top: 2px; -webkit-box-shadow: 0 3px 0 #2CADAD; -moz-box-shadow: 0 3px 0 #2CADAD; box-shadow: 0 3px 0 #2CADAD; } .inputButton:active { top: 5px; box-shadow: none; } .inputButton:focus { outline: none; } .navbar-brand{ font-size: xx-large; font-weight: bold; font-family: cursive; }

Related: See More

Material Kit React
Signup form
login-form
Login Form

Questions / Comments:

thank you , how can i change the color of tthe navbar please

meriemmmm () - 7 years ago - Reply 0

click on html but not to open html

Prem miral () - 8 years ago - Reply 0