<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">
<!-- This file has been downloaded from http://bootsnipp.com/. Enjoy! -->
<!--author:Aniuska Maita Aparicio-->
<title>Formulario--bootsnipp</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- Google fonts -->
<link href='https://fonts.googleapis.com/css?family=Lobster|Abel' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-md-3">
<!--head form-->
<section>
<h1>Login</h1>
</section>
<!--end head form-->
<!--body form-->
<section class="col-md-12">
<form class="form-horizontal">
<div class="form-group barra">
<label for="inputEmail3" class="col-sm-4 control-label">Email</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group barra">
<label for="inputPassword3" class="col-sm-4 control-label">Password</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group barra">
<div class="col-md-12">
<button type="submit" class="btn center-block">Sign in</button>
</div>
</div>
</form>
</section>
<!--end body form-->
<!--foot form-->
<section></section>
<!--end foot form-->
</div>
</body>
</html>
/**Contenedor**/
.container{
background: url('http://i1280.photobucket.com/albums/a487/Ani_Mai/15_zps9qpuzjxq.png');
background-repeat:no-repeat;
background-size:cover;
margin: 15px 15px 15px 15px;
}
/**Head form**/
h1{
text-align: center;
background: #fff;
padding: 15px 0 15px 0;
font-family: 'Lobster', cursive;
color: #000;
letter-spacing: 2px;
text-shadow: 2px 2px #eee;
}
/**body form**/
.barra{
background: #fff;
padding: 15px 0 15px 0;
font-family: 'Questrial', sans-serif;
}
.form-control :focus{
border-color: #66afe9;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.btn {
color: #FFFFFF;
background-color: #9C27B0;
border-color: rgba(0,0,0,.075);
background-image: none !import;
}