<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css);
body {
background-color: #ACAFB8;
color: #fff;
font-family: arial, helvetica, sans-serif;
line-height: 1.4;
font-size: 0.6em;
}
*, *:before, *:after {
box-sizing: border-box;
}
.login-form-container {
position: fixed;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 270px;
border-radius: 3px;
background-color: #272E38;
overflow: hidden;
}
.denied & {
animation: shake 0.35s normal forwards ease-in-out;
}
fieldset {
border: none;
}
header {
background-color: #202731;
color: #C5C6C8;
display: block;
padding: 1.5em;
text-align: center;
}
.input-wrapper {
position: relative;
display: block;
margin: 2em auto;
border-bottom: 1px solid #FC7148;
border-radius: 3px;
width: 170px;
padding-left: 20px;
}
.input-wrapper input {
width: 100%;
line-height: 2;
background-color: transparent;
border: none;
padding: .6em .5em;
outline: 0;
}
.input-wrapper input::-webkit-input-placeholder,
.input-wrapper input::-moz-placeholder,
.input-wrapper input:-ms-input-placeholder {
color: #9EA2AB;
}
.input-wrapper:before {
font-family: FontAwesome;
position: absolute;
display: inline-block;
top: 9px;
left: 8px;
font-size: 10px;
color: #FC7148;
}
.input-wrapper:nth-child(1):before {
content: "\f007";
}
.input-wrapper:nth-child(2):before {
content: "\f023";
}
button {
outline: 0;
font-size: 8px;
letter-spacing: 0.1em;
background-color: #FC7148;
color: #fff;
border: none;
border-radius: 3px;
width: 200px;
padding: 1.2em 0;
margin: 4em auto;
display: block;
border-top: 2px solid transparent;
border-bottom: 2px solid transparent;
}
button:hover {
border-bottom-color: darken(#FC7148, 25%);
}
@keyframes shake {
0% { margin-left: 0 }
12% { margin-left: 0 }
25% { margin-left: -10px }
50% { margin-left: 10px }
75% { margin-left: -10px }
87% { margin-left: 0 }
100% { margin-left: 0 }
}
</style>
</head>
<body>
<div id="login" class="login-form-container">
<header>LOGIN</header>
<fieldset>
<div class="input-wrapper">
<input type="text" placeholder="your@email.com" />
</div>
<div class="input-wrapper">
<input type="password" placeholder="password" />
</div>
<button id="continue" type="button">CONTINUE</button>
</fieldset>
</div>
<script>
var vContinue = document.getElementById("continue"),
vLogin = document.getElementById("login");
vContinue.addEventListener("click", function() {
document.body.className += ' denied';
}, false);
var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
for (var p = 0; p < pfx.length; p++) {
if (!pfx[p]) type = type.toLowerCase();
element.addEventListener(pfx[p]+type, callback, false);
}
}
PrefixedEvent(vLogin, "AnimationEnd", function () {
document.body.className = '';
});
</script>
</body>
</html>