<div id="login">
<h1>Sign Up</h1>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/adriana.jpg" alt>
<label for="name">Name</label><input id="name" type="text" name="name">
<label for="email">Email</label><input id="email" type="email" name="email">
<label for="password">Password</label>
<input id="password" type="password" name="password">
<input type="submit" value="Done">
</div>#login {
font-family: Avenir, sans-serif;
width: 33%;
margin: 0 auto;
background-image: linear-gradient(175deg, transparent 40%, white 40%), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/nahatlatch.jpg);
text-align: center;
background-size: 100%, cover;
background-repeat: no-repeat;
}
#login h1 {
font-weight: 100;
padding-top: 6rem;
}
#login img {
width: 33%;
height: auto;
border-radius: 50%;
border: 5px solid white;
}
#login label {
color: #666;
margin-top: 1rem;
}
#login input, #login label {
display: block;
width: 90%;
padding: .5rem;
margin: 0 auto;
}
#login input {
text-align: center;
border: none;
border-bottom: 1px solid #aaa;
font-size: 1rem;
}
#login input[type="submit"] {
width: 100%;
margin-top: 1rem;
background: hsl(0, 90%, 60%);
color: #fff;
padding: 1rem;
text-transform: uppercase;
}
@media all and (max-width: 500px) {
#login { width: 100%; }
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.