<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Registration Form</title>
<link href='//fonts.googleapis.com/css?family=Open+Sans:300,400', rel='stylesheet', type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<body>
<div class="container">
<div id="logbox">
<form id="signup" method="post" action="/signup">
<h1>Create an account</h1>
<input class="input pass" name="user[name]" type="text" placeholder="What's your username?" pattern="^[\w]{3,16}$" autofocus="autofocus" required="required"/>
<input class="input pass" name="user[password]" type="password" placeholder="Choose a password" required="required"/>
<input class="input pass" name="user[password2]" type="password" placeholder="Confirm password" required="required"/>
<input class="input pass" name="user[email]" type="email" placeholder="Email address (optional)"/>
<input class="inputButton" type="submit" value="Sign me up!"/>
</form>
</div>
</div>
</body>
<!-- partial -->
</body>
</html>
::selection {
background-color: #b5e2e7;
}
::-moz-selection {
background-color: #8ac7d8;
}
body {
background: #58c791;
}
.container {
display: -webkit-flex;
display: flex;
height: 100%;
}
#logbox {
margin: 50px auto;
width: 340px;
background-color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
h1 {
text-align: center;
font-size: 175%;
color: #757575;
font-weight: 300;
}
h1, input {
font-family: "Open Sans", Helvetica, sans-serif;
}
.input {
width: 75%;
height: 50px;
display: block;
margin: 0 auto 15px;
padding: 0 15px;
border: none;
border-bottom: 2px solid #ebebeb;
}
.input:focus {
outline: none;
border-bottom-color: #58c791 !important;
}
.input:hover {
border-bottom-color: #dcdcdc;
}
.input:invalid {
box-shadow: none;
}
.pass:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset;
}
.inputButton {
position: relative;
width: 85%;
height: 50px;
display: block;
margin: 30px auto 30px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
color: white;
background-color: #58c791;
border: none;
-webkit-box-shadow: 0 5px 0 #3aad73;
-moz-box-shadow: 0 5px 0 #3aad73;
box-shadow: 0 5px 0 #3aad73;
}
.inputButton:hover {
top: 2px;
-webkit-box-shadow: 0 3px 0 #3aad73;
-moz-box-shadow: 0 3px 0 #3aad73;
box-shadow: 0 3px 0 #3aad73;
}
.inputButton:active {
top: 5px;
box-shadow: none;
}
.inputButton:focus {
outline: none;
}