<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Registration Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="form-wrapper">
<header>
<h1>Register</h1>
<a href="#" class="btn in-signon">Sign in with Linkedin</a>
<span>OR</span>
</header>
<form action="#">
<label for="username">Username
<input name="username" id="username" placeholder="Username" type="text" required pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{7,20}$" /></label>
<label for="password">Password
<input name="password" id="password" placeholder="Password" type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" /></label>
<label for="email">E-Mail Address
<input name="email" id="email" placeholder="
[email protected]" type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"/></label>
<input type="submit" value="Register" id="submit" class="btn"/>
<p>Already registered? <a href="#">Login</a></p>
</form>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
html {
font-family: 'Montserrat', sans-serif;
}
html * {
box-sizing: border-box;
}
html *:focus {
outline: none;
}
body {
background: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#f1f1f1));
background: linear-gradient(to bottom right, #fff, #f1f1f1);
}
h1 {
font-size: 2.5em;
font-weight: 500;
color: #fff;
margin-bottom: .35em;
}
p {
font-style: italic;
font-weight: 400;
color: #999;
}
p a {
color: #0262c3;
-webkit-transition: .5s;
transition: .5s;
}
p a:hover, p a :focus {
color: #000;
}
div.form-wrapper {
position: relative;
width: 40em;
padding: 1em;
margin: 5em auto;
border-radius: 1.5em;
display: table;
text-align: center;
box-shadow: 15px 21px 62px -9px #919191;
}
form {
position: relative;
z-index: 2;
padding: 11.5em 1em 2em 1em;
margin: 1em;
border: 1px solid rgba(211, 211, 211, 0.5);
border-radius: 1em;
}
header {
position: absolute;
width: 100%;
height: 11.5em;
padding: 1.25em 2em 1em 2em;
border-radius: 1em 1em 0 0;
top: 0;
left: 0;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1239626/camera-1600x1000.jpg");
background-size: 100%;
background-position: bottom center;
}
header span {
position: absolute;
display: table;
padding: .75em .55em .65em .55em;
color: #fff;
background: #00aeef;
right: 47%;
bottom: -1.25em;
left: 47%;
border-radius: 10em;
}
label {
display: block;
margin: -1.5em auto 0 auto;
position: relative;
width: 60%;
text-indent: -99999px;
}
input {
display: block;
width: 100%;
padding: .5em 1em;
margin: .5em auto;
border: none;
border-radius: 9em;
font-weight: 300;
-webkit-transition: all .50s ease-in-out;
transition: all .50s ease-in-out;
outline: none;
}
input:focus {
box-shadow: 0 0 10px #00aeef;
}
::-webkit-input-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
}
:-ms-input-placeholder {
color: #888;
}
::-ms-input-placeholder {
color: #888;
}
::placeholder {
color: #888;
}
.btn, input.btn {
max-width: 15em;
display: inline-block;
border-radius: 9em;
padding: .5em 1em;
background: #0262c3;
color: #fff;
cursor: pointer;
-webkit-transition: .25s;
transition: .25s;
font-weight: bold;
}
.btn:hover, .btn:focus, input.btn:hover, input.btn:focus {
background: #000;
}
.btn.in-signon {
border: 1px solid #ccc;
background: none;
font-weight: 200;
text-decoration: none;
position: relative;
z-index: 3;
}
.btn.in-signon:hover {
background: #fff;
color: #0262c3;
border: 1px solid #fff;
}
.btn.in-signon:before {
font-family: "FontAwesome";
font-size: 1.2em;
content: "\f0e1";
padding: .5em .5em .5em .25em;
}
input:required:invalid:not(#submit), input:focus:invalid:not(#submit) {
-webkit-transition: .5s;
transition: .5s;
background: #e3e3e3 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAAEwO1XwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRFOYTQoMTo0+T1bKTcAGbMwNjw7/X7////+2vE7wAAAAh0Uk5T/////////wDeg71ZAAAEcElEQVR42lTOwQoAMAgCUA8O//+PV0obdagebCHUdQjP7kxFWdxRI69qsaQhzkOLS1ja/758c8hosjDJNMF0BRDUtSyYjmZgZ4Q4kwXFkSworkLhMKK6FxcHzbEM0KABBh3U4RguZQbSAAHopKIlgEEQZDea///HqytE2+ZboiagxSdQRWyd0yjkcqWethq8BMiU7lRoyH92SJA/5P5CLmzaJ9QnWXstTRVkHRrnxIF5chlUzf0RgJOy3QEQBKEoKR/v/8ZNmyAIrfUzzyq99yD43172CBJfAkd8nmQEX7NG3ntS+de67rsPQvGgjDoiMZ2nsZkoSNZc2sLYeklmc70k9INASfA7GbFwaog5iu381sqaNwA6TOC1WqX4q0qaCZa23cwQPiwwqyiOqdwC0FotWRCCMCyVQu9/Y+fNE+2Pjwu7NhTSJDUw04o7mvwX8KSkhRzSeFoIEJchpf6KwMkj4/uRjdCALJlRJqLIv0aog3sAMNcg0QHaZFaPr9FzhGVRnYtLgMseqg+w20RhTPR8DaEXENp+y3GPb7tNlx9uQdY9BD8mz1ItRfw1hrVkwGyXTR271m0PSfcTxnY5rJF5WRTjokwBLU+Y+BeR3TVxYtUpUSKLpwDUl8kSgzAMQ0W98P9/XGZKaRbHVo7lyjzwyIksR5fX5QNBwvZOyFgbvEBSqSIEK7lsgRyZxiFSNPI1I3Tzgzxzy3s9kh6YlUCO+cWUjWx5VbqTLKn1ezAsfP2L1RXT8iKj/SaaFnptFm2Yq5ysG0mmjF96a0rKOSye6h8ErImfvI3/Bh9YxB+EMuS2MsP2qJQNRL4TmUdsmJX/jMg+gkEx2+8LaOTkk9JzfuFsZTpFOCUlPi6EzEpduqB+gxBRoiwdra/2F5xD7NGK0GD3TTtyS4TB24/MxJs1oYtDthwv/crVTWNYnITylSeb4yj3sEkZdheTOJAIE+DG2FOlhDBcocg8YYTr1lcErX0L0K65JDkMg0C0MQbf/8aZmkolsgUSSMxuWCaLpw9C3ciBM38psSO7foSLRmrT5PTyGQiWZQjhzASlIcrnQrDGIWuEAQcDX78WOKYQOguChhAfwdQN8Bhkhn8anYXCMEEFMztxq0WYepxUssNwk8ZKIdJgGCy0PCE8GkkojJXgOwS7CBuDFoJ5rofisCmwGHwtB1sUGH/ItRFkDBj9z1uM/ir/dWtay+gp2rQcE8233Ipxo3C399xVCl8PaZSc5XhkMgGDdlRRIj8YNavV7QqKU8tMsH9IDoK/3/hv+z/uutOnkSHlVaXLYMGzBug+Q59XCrpNKi9d1L4WVFH6IoLe/KGybn2eMKVAqbh2VS7vOwMqyqu2Y2Dov6XJ9MKLWnEn5766MySk3GWqToT5/DaEP04MJTMHp2MaQLb8yYG8OxnYcHWclme0QOq1ERCxWkhYRmaSdzADcdM4fbkq8KWWjz+wQ7BSHyE5GyZQrrci6fn4eYi0q81MIdrv0hmJaXpiw5eH0C1rAaKwfnoBva3enFBJIhUAAAAASUVORK5CYII=") no-repeat right 0.5em top 0.5em;
background-size: 6%;
box-shadow: none;
}
input:required:valid:not(#submit), input:focus:valid:not(#submit) {
-webkit-transition: .5s;
transition: .5s;
background: #e3e3e3 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAAEwO1XwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABhQTFRFaKHbosXp1+b2AGbM7/X7NIHPwNjw////PVTR9gAAAAh0Uk5T/////////wDeg71ZAAADUElEQVR42nTOSQoAMAwCQEES///jpg1dPFQIYU4KzSRjfdSx0yIPcVE0EWmiKUz6yvr4bmEv0x6mIYDAPHZWZhYMRzOwM+JwJAMzpRx2HBxkhyO5FMQACCCIQ9mRHMUMFWFAE2ZG8RwzFoDqOVQpBnZmHAA1+HFHE+5IIkqGgQG7o4E6EFGH7lVo6KCpBwGAAIKFG4gJFGRE4rKja2JFkUG1hBEhw0xCWKMlflTnMbCzMeOKH2Zc8cOCUwZXUDPiiZ/BK8OCJwxwyLDiCmtIZsKWfllwxRwjrthmQqQQFoxUgEhVbOjZlB0gAHHlkgQwCMJQKCj3v3GdutHyqVk1W+fpiElcnDilJJHHzFv0taO7doiolGoOYfnWhqicqYhOKi36KzV6GrZcfSCEIVVJptMm9JAqNH8jjCPwxIiM8XexhhGPxxpETCd3hAj/p1TXHuQj30d/XR2uqJT4oGDM9dgYxjpBUrd+C8B8GaVACMNQMMG+ev8bK+IK1tRmRBZ/lanFNi+TAFnX0V4ZNXzbPmj3pjJAdPerIkT9jIgRTyTlGVHm5Nnpe99nshcmG649N8rcZCPlsiFlwiWGcn9DfMK1jwLG+5Z3G0ow+QpHVlnCMT6bOIJ7RX3QKjmi77bXjyL6y7nMnOkPRS8qnHNR5HEhjvDo044Y+ggUeD+QArb16y81v62ji3meICPPpSPXLJGexSwWEssIXKs9I0sI5coGzhMq3Gl8lV8VbhGgXTNYYhCEgeiGEPz/P27t2I7aIIhZp4fmLm8I0WwWXdW3X0RqLeWpC3PHAg1IXy/xJWgXRE51RC9NDUge+La7IrwKGSMsdZW7IEmvhaUmRDQg5BASgjh+G5MGRvJ9IdPQMGeaFA2PsodACYEtxFSJFDAZm4ZKYywUsM5jnTFQ6uprWstKjjxgOQ4kDPSNzDJa+BCB8SGA3hB/yA9Cbqguu6O8BIUPKZjo+bLzntnItx4TeyuvO152Q1muMKkJK9X/DEKb71sSCZXxFneFl6uVTGWc/kdyY6IpbnjzSbLo0nUnLYk+cX9mFAKi4+YqYC715vhrZ2O515EYfW0q3geuWTcbQhlyifotnCP7pmlFzWZXgwTJF/2uVfoEa2VjJlJ6n30Aa9qTrxypQnIAAAAASUVORK5CYII=") no-repeat right 0.5em top 0.5em;
background-size: 6%;
}
field_username = document.getElementById('username');
field_username.oninvalid = function(event) {
event.target.setCustomValidity('Username should only contain lowercase letters. e.g. john');
}