Skip to content

Instantly share code, notes, and snippets.

@aleub

aleub/login.html

Created July 2, 2012 21:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aleub/3035834 to your computer and use it in GitHub Desktop.
Save aleub/3035834 to your computer and use it in GitHub Desktop.
Download ZIP
minimal html/css login widget (http://jsfiddle.net/52KZW/8/), Design by Chris Wallace (http://365psd.com/day/332/)
Raw
login.html
<!doctype html>
<head>
<title>login</title>
<link rel="stylesheet" href="style.css">
</head>
<div><input id=one type="text" placeholder="username"/></div>
<div id="hr">
<a href='#' id="go">&rsaquo;</a>
</div>
<div><input id=two type="password" placeholder="password" /></div>
Raw
style.css
body {
background-color: #34383d;
padding: 50px;
}
input {
background-color: #1c1e21;
border: none;
height: 40px;
line-height: 20px;
color: #505662;
font-size: 20px;
font-weight: bold;
padding: 4px;
border-radius: 10px;
padding-left: 30px;
outline: 0;
outline: thin dotted 9;
width: 245px;
}
input::-webkit-input-placeholder, input::-moz-placeholder {
color: #6f7787;
}
#one {
border-bottom-left-radius: 0;
}
#two {
border-top-left-radius: 0;
}
#hr {
margin: 0;
padding: 0;
border-left: 30px solid #1c1e21;
height: 2px;
background-color: #34383d;
width: 215px;
}
#go {
display: inline-block;
background-color: #1c1e21;
width: 42px;
height: 42px;
position: relative;
text-align: center;
line-height: 42px;
top: -28px;
left: 220px;
border-radius: 40px;
border: 8px solid #34383d;
color: #505662;
font-size: 20px;
font-weight: 900;
text-decoration: none;
}
​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment