"Login form"
Bootstrap 3.0.0 Snippet by Mughal914

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link rel="stylesheet" href="style.css"> </head> <body > <div class="container " style="margin-top:5%;"> <div class="row "> <div class="col-md-5 col-md-offset-3 shadow " > <form action="" > <div class="form-group row"> <h2 class="text-center" style="color: #18bc9c;">Login Form</h2> <hr> <label for="example-text-input" class="col-md-3 col-form-label">Email</label> <div class="col-md-6 input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input class="form-control" type="text" id="example-text-input" placeholder=" Email"> </div> </div> <div class="form-group row"> <label for="example-text-input" class="col-md-3 col-form-label"> Password </label> <div class="col-md-6 input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i> </span> <input class="form-control" type="password" id="example-text-input" placeholder="password"> </div> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input "> Check me out </label> </div> <input type="submit" value="LogIn" class="btn btn-default pull-right btn-color1"> </form> </div> </div> </div> </body> </html>
.shadow{ -webkit-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); -moz-box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); border-left: 10px solid #18bc9c; border-right: 10px solid #18bc9c; overflow:hidden; } .btn-color1{ background-color:#18bc9c; color:white; } .btn-color1:hover{ background-color:white; color:#18bc9c; border: 1px solid #18bc9c; } .input-group-addon {background:#18bc9c; color: white; }

Related: See More


Questions / Comments: