<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 ---------->
<script src="http://mymaplist.com/js/vendor/TweenLite.min.js"></script>
<div class="container" style="margin-top:40px">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading">
<strong> Sign in to continue</strong>
</div>
<div class="panel-body">
<form role="form" action="#" method="POST">
<fieldset>
<div class="row">
<div class="center-block">
<img class="profile-img"
src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" alt="">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1 ">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
<input class="form-control" placeholder="Username" name="loginname" type="text" autofocus>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i>
</span>
<input class="form-control" placeholder="Password" name="password" type="password" value="">
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-lg btn-success btn-block" value="Sign in">
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="panel-footer ">
Don't have an account! <a href="#" onClick=""> Sign Up Here </a>
</div>
</div>
</div>
</div>
</div>
body {
background-color: #444;
background: url(http://s15.postimg.org/tgkts200b/flat_550x550_075_f_u1.jpg);
}
.panel {
margin-bottom: 20px;
background-color: rgba(255, 255, 255, 0.75);
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
margin: auto;
}
.panel-heading {
padding: 5px 15px;
}
.panel-footer {
padding: 1px 15px;
color: #A0A0A0;
}
.profile-img {
width: 96px;
height: 96px;
margin: 0 auto 10px;
display: block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
$(document).ready(function() {
$(document).mousemove(function(event) {
TweenLite.to($("body"),
.5, {
css: {
backgroundPosition: "" + parseInt(event.pageX / 8) + "px " + parseInt(event.pageY / '12') + "px, " + parseInt(event.pageX / '15') + "px " + parseInt(event.pageY / '15') + "px, " + parseInt(event.pageX / '30') + "px " + parseInt(event.pageY / '30') + "px",
"background-position": parseInt(event.pageX / 8) + "px " + parseInt(event.pageY / 12) + "px, " + parseInt(event.pageX / 15) + "px " + parseInt(event.pageY / 15) + "px, " + parseInt(event.pageX / 30) + "px " + parseInt(event.pageY / 30) + "px"
}
})
})
})