<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="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <div class="border"> <div class="logo"></div> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <input type="checkbox" /> Remember Me <br> <br> <button type="submit" class="btn btn-primary">Submit</button> <br> <br> <a href="#">Forget the password ?</a> </form> </div> </div> </div> </div>

body{ background-image: url(https://cdn.allwallpaper.in/wallpapers/1920x1080/14422/black-white-ocean-1920x1080-wallpaper.jpg); background-size: cover; } .border{ padding:50px; margin-top: 100px; border-radius: 5px; background-color: #ebf1f1; opacity: 0.8; box-shadow: -10px -6px 12px 0px #428bca; transition: all 0.6s ease-in-out; } .border:hover{ box-shadow: 10px 6px 12px 0px #428bca; transition: all 0.6s ease-in-out; } .btn:hover{ background-color:#FFF ; color: #428bca; transition: all 0.6s ease-in-out; } .logo{ background-image: url(http://icons.iconarchive.com/icons/dryicons/simplistica/128/user-icon.png); width: 128px; height: 128px; margin-bottom: 5px; margin: auto; }