Daily UI #001 -Sign Up Hint: Design a sign up page, modal, form, app screen, etc. (It's up to you!) Don't forget to share on Dribbble and/or Twitter when you're done.
A Pen by Ryan Trimble on CodePen.
Daily UI #001 -Sign Up Hint: Design a sign up page, modal, form, app screen, etc. (It's up to you!) Don't forget to share on Dribbble and/or Twitter when you're done.
A Pen by Ryan Trimble on CodePen.
<div> | |
<form action="submit"> | |
<h1>Sign Up</h1> | |
<label for="name">Name</label> | |
<input type="text" autofocus name="name" /> | |
<label for="email">Email</label> | |
<input type="email" name="email" /> | |
<label for="password1">Password</label> | |
<input type="password" name="password1" /> | |
<label for="password2">Confirm Password</label> | |
<input type="password" name="password2" /> | |
<button>Join</button> | |
</form> | |
</div> |
/*colors*/ | |
$background-color:#333; | |
$font-color: #FFF; | |
$focus-accent: lighten(#333, 10%); | |
$button: #27ae60; | |
/*other variables*/ | |
$width: 90%; | |
$desktop-width:$width * (2/3); | |
$font-size: 1.25rem; | |
$h1-size: 3*$font-size; | |
body{ | |
background-color: $background-color; | |
background-image: url(http://www.transparenttextures.com/patterns/argyle.png); | |
font-family: 'Lato', sans-serif; | |
color:$font-color; | |
} | |
div{ | |
width:$width; | |
margin:0 auto; | |
font-size:$font-size; | |
form{ | |
display:flex; | |
flex-direction:column; | |
h1{ | |
font-size:$h1-size; | |
text-align:center; | |
} | |
input, label, button, h1{ | |
margin:10px 0 0 0; | |
} | |
input, button{ | |
outline:none; | |
font-size:$font-size; | |
} | |
input{ | |
border:5px solid #FFF; | |
transition:border .3s; | |
padding:10px; | |
} | |
input:focus{ | |
border: 5px solid $focus-accent; | |
transition:border .3s; | |
} | |
button{ | |
margin-top:30px; | |
padding:15px; | |
color:$font-color; | |
background: $button; | |
border:none; | |
} | |
button:hover{ | |
background:lighten($button, 5%); | |
} | |
button:active{ | |
background:darken($button, 5%); | |
outline:none; | |
} | |
} | |
} | |
@media screen and (min-width:800px){ | |
div{ | |
width:$desktop-width; | |
} | |
} |