<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Registration Form</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class='wrap'>
<h1>
Register
<em>for our community.</em>
</h1>
<form action=''>
<label for=''>Username</label>
<input id='alias' required='required' type='text'>
<label for=''>Email</label>
<input id='email' required='required' type='text'>
<label for=''>Password</label>
<input id='password' required='required' type='password'>
<label for=''>Confirm Password</label>
<input id='confirm_password' required='required' type='password'>
<input type='submit' value='Register'>
<div class='cb'></div>
</form>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
@import url(https://fonts.googleapis.com/css?family=Lato);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
body {
background-image: url(http://www.blirk.net/wallpapers/1920x1080/gradient-wallpaper-3.jpg);
font-family: "Lato", sans-serif;
color: #333;
line-height: 1.4;
font-size: 16px;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrap {
opactiy: 9;
width: 550px;
margin: 0 auto;
margin-top: 100px;
padding: 30px;
background: #EEE;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
}
.cb {
clear: both;
}
h1 {
margin-bottom: 30px;
font-size: 2rem;
text-transform: uppercase;
font-weight: bold;
}
h1 em {
font-size: 0.8rem;
text-transform: none;
font-weight: normal;
}
label {
display: block;
width: 100%;
}
input {
width: 100%;
display: block;
padding: 8px;
margin-bottom: 10px;
font-size: 1.1rem;
outline: none;
border: 1px solid #D3D3D3;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
input:focus {
border-color: #AAA;
-moz-box-shadow: 0px 0px 5px 0px #AAA;
-webkit-box-shadow: 0px 0px 5px 0px #AAA;
box-shadow: 0px 0px 5px 0px #AAA;
}
input.valid {
border-color: #4E59E4;
-moz-box-shadow: 0px 0px 5px 0px #4E59E4;
-webkit-box-shadow: 0px 0px 5px 0px #4E59E4;
box-shadow: 0px 0px 5px 0px #4E59E4;
}
input[type="submit"] {
text-transform: uppercase;
cursor: pointer;
width: auto;
float: right;
background: #4E59E4;
border: 1px solid #1b26b1;
color: #fff;
padding: 10px 20px;
line-height: 1;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
input[type="submit"]:hover {
-moz-box-shadow: 0px 0px 10px 0px #4E59E4;
-webkit-box-shadow: 0px 0px 10px 0px #4E59E4;
box-shadow: 0px 0px 10px 0px #4E59E4;
}
.messages_required {
margin-top: 30px;
}
.msg {
font-size: 0.9rem;
margin-bottom: 10px;
line-height: 1;
color: #AAA;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.msg:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #D3D3D3;
margin-right: 5px;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.msg.valid {
color: #4E59E4;
}
.msg.valid:before {
background: #7a83eb;
}
$ ->
verif_empty = (field) ->
$('#' + field).keyup ->
$mess = $('#' + field + '-field')
if $(@).val() isnt ''
$(@).add($mess).addClass 'valid'
$text = $mess.text().replace("empty", "correct")
else
$(@).add($mess).removeClass 'valid'
$text = $mess.text().replace("correct", "empty")
$mess.text($text)
verif_confirm = (field) ->
$('#f_' + field).keyup ->
$mess = $('#' + field + '-field')
if $(@).val() is $('#password').val()
$(@).add($mess).addClass 'valid'
$text = $mess.text().replace("Passwords don't match", "is correct")
else
$(@).add($mess).removeClass 'valid'
$text = $mess.text().replace("is correct", "Passwords don't match)
$mess.text($text)
verif_empty('first')
verif_empty( 'email')
verif_empty('password')
verif_confirm('confirm')