<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 formulario">
<div class="card card-container">
<div class="headerInformacao">
<img class="imgPerfil" src="//lh4.googleusercontent.com/-fd2HgyJH_is/AAAAAAAAAAI/AAAAAAAAAAA/jYtI9MrvLcE/photo.jpg?sz=120">
</div>
<form role="form" class="formLogin" method="post" action="">
<div class="form-group">
<input type="email" class="form-control" name="email" placeholder="Email"required="required">
</div>
<div class="form-group">
<input type="text" class="form-control" name="senha" placeholder="Senha"required="required">
</div>
<div class="form-actions">
<button type="submit" onclick="" name="btnSubmit"class="btn btn-primary enviarDados">Login</button>
</div>
</form>
</div>
</div>
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
html, body {
height: 100%;
}
.formulario {
height: 100%;
background-color: white;
border: 1px solidrgba(0, 0, 0, 0.3);
}
.card-container.card {
width: 600px;
height: 400px;
top: 50%;
position: absolute;
left: 50%;
margin-left: -300px;
margin-top: -200px;
}
.card {
background-color: #F7F7F7;
padding: 20px 25px 30px;
margin: 0 auto 25px;
margin-top: 50px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.headerInformacao{
height: 120px;
}
.imgPerfil{
position: absolute;
width:100px;
height:100px;
position:absolute;
left:50%;
margin-left:-50px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
}
.formLogin {
margin-top: 50px;
height:100%;
}
.form-group {
margin-bottom: 35px;
}
.form-control {
boder: none;
border-radius: 0;
height: 40px;
}
/* Botão Calcular */
.enviarDados {
background: #3498db;
width: 300px;
height: 50px;
border: 2px solid white;
border-radius: 0;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: 500;
}
.enviarDados:hover, .enviarDados:focus, .enviarDados:active {
color: white;
border:2px solid white;
}
.enviarDados:hover:before, .enviarDados:focus:before, .enviarDados:active:before
{
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.form-actions {
text-align: center;
}
