"Login with Image"
Bootstrap 3.3.0 Snippet by lafina

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> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui"> <!--Fonts --> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800' rel='stylesheet' type='text/css'> </head> <body> <div class="container register" > <div class="row"> <div class="col-md-6"> <img class="img-responsive register-image" src="http://www.freeupwork.com/images/womanpointing-cropped.png"> </div> <div class="col-md-6 "> <form class="form-index"> <div class="form-group row"> <div class="col-sm-8"> <label for="name">Name</label> <input type="text" class="form-control" id="inputEmail3"> </div> </div> <div class="form-group row"> <div class="col-sm-8"> <label for="name">Email</label> <input type="email" class="form-control" id="inputEmail3"> </div> </div> <div class="form-group row"> <div class="col-sm-8"> <label for="name">Phone</label> <input type="text" class="form-control" id="inputEmail3"> </div> </div> <div class="form-group row"> <div class="col-sm-8"> <label for="name">City</label> <input type="text" class="form-control" id="inputEmail3"> </div> </div> <div class="courses-1"> <a href="#" class="btn btn-info btn-effect register-style">Register now</a> </div> </form> </div> </div> </div> </body> </html>
.courses{ text-align: center; } .courses-1{ margin-top:25px; text-align: left; } .courses-style{ font-size: 20px; font-family: 'Open Sans'; font-weight: 800; line-height: 1.5em; } .register-style{ font-size: 20px; font-family: 'Open Sans'; font-weight: 800; line-height: 1.5em; } p.text{ text-align: justify; } .register{ background: radial-gradient(ellipse at center, #fff 0%, #d6d6d6 100%); width: 100%; height:auto; } img.register-image { float: right; border-bottom: 2px solid #fff } .form-index{ height:auto; margin:0 auto; padding-top: 40px; padding-bottom:10px; } .form-index, label{ font-size: 14px; color: #000; font-weight: 800; } .form-group{ margin-bottom: 10px; } .form-index .form-control { border: 3px solid #0074BC; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px ; }

Related: See More

Paper Kit 2
Image Crop jQuery
login-form
Login Form

Questions / Comments: