Created
July 5, 2012 12:40
-
-
Save raik/3053469 to your computer and use it in GitHub Desktop.
A web page created at CodePen.io
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Admin Login · CodePen</title> | |
<link rel="stylesheet" href="http://codepen.io/stylesheets/css/normalize.css"> | |
<style> | |
html { height: 100% } | |
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } | |
::selection { background: #fe57a1; color: #fff; text-shadow: none; } | |
body { background-image: radial-gradient( cover, rgba(92,100,111,1) 0%,rgba(31,35,40,1) 100%), url('http://i.minus.com/io97fW9I0NqJq.png') } | |
.login { | |
background: #eceeee; | |
border: 1px solid #42464b; | |
border-radius: 6px; | |
height: 247px; | |
margin: 20px auto 0; | |
width: 298px; | |
} | |
.login h1 { | |
background-image: linear-gradient(top, #f1f3f3, #d4dae0); | |
border-bottom: 1px solid #a6abaf; | |
border-radius: 6px 6px 0 0; | |
box-sizing: border-box; | |
color: #727678; | |
display: block; | |
height: 43px; | |
font: 600 14px/1 'Open Sans', sans-serif; | |
padding-top: 14px; | |
margin: 0; | |
text-align: center; | |
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff; | |
} | |
input[type="password"], input[type="text"] { | |
background: url('http://i.minus.com/ibhqW9Buanohx2.png') center left no-repeat, linear-gradient(top, #d6d7d7, #dee0e0); | |
border: 1px solid #a1a3a3; | |
border-radius: 4px; | |
box-shadow: 0 1px #fff; | |
box-sizing: border-box; | |
color: #696969; | |
height: 39px; | |
margin: 31px 0 0 29px; | |
padding-left: 37px; | |
transition: box-shadow 0.3s; | |
width: 240px; | |
} | |
input[type="password"]:focus, input[type="text"]:focus { | |
box-shadow: 0 0 4px 1px rgba(55, 166, 155, 0.3); | |
outline: 0; | |
} | |
.show-password { | |
display: block; | |
height: 16px; | |
margin: 26px 0 0 28px; | |
width: 87px; | |
} | |
input[type="checkbox"] { | |
cursor: pointer; | |
height: 16px; | |
opacity: 0; | |
position: relative; | |
width: 64px; | |
} | |
input[type="checkbox"]:checked { | |
left: 29px; | |
width: 58px; | |
} | |
.toggle { | |
background: url(http://i.minus.com/ibitS19pe8PVX6.png) no-repeat; | |
display: block; | |
height: 16px; | |
margin-top: -20px; | |
width: 87px; | |
z-index: -1; | |
} | |
input[type="checkbox"]:checked + .toggle { background-position: 0 -16px } | |
.forgot { | |
color: #7f7f7f; | |
display: inline-block; | |
float: right; | |
font: 12px/1 sans-serif; | |
left: -19px; | |
position: relative; | |
text-decoration: none; | |
top: -15px; | |
transition: color .4s; | |
} | |
.forgot:hover { color: #3b3b3b } | |
input[type="submit"] { | |
background-color: #37a69b; | |
background-image: linear-gradient(top,#3db0a6,#319d91); | |
border: 1px solid #256f67; | |
border-radius: 4px; | |
box-shadow: inset 0 1px rgba(255,255,255,0.3); | |
box-sizing: border-box; | |
color: #f8f8f8; | |
font-weight: 700; | |
height: 39px; | |
margin: 12px 0 0 29px; | |
text-shadow: 0 -1px 0 #177c6a; | |
width: 240px; | |
} | |
input[type="submit"]:hover, input[type="submit"]:focus { background-image: linear-gradient(top,#4ec7c0,#31aba3) } | |
input[type="submit"]:active { | |
background-image: linear-gradient(bottom,#3db0a6,#319d91); | |
padding: 0; | |
} | |
.shadow { | |
background: #000; | |
border-radius: 12px 12px 4px 4px; | |
box-shadow: 0 0 20px 10px #000; | |
height: 12px; | |
margin: 30px auto; | |
opacity: 0.2; | |
width: 270px; | |
} | |
</style> | |
<style> | |
#codepen-footer, #codepen-footer * { | |
-webkit-box-sizing: border-box !important; | |
-moz-box-sizing: border-box !important; | |
box-sizing: border-box !important; | |
} | |
#codepen-footer { | |
display: block !important; | |
position: fixed !important; | |
bottom: 0 !important; | |
left: 0 !important; | |
width: 100% !important; | |
padding: 0 10px !important; | |
margin: 0 !important; | |
height: 30px !important; | |
line-height: 30px !important; | |
font-size: 12px !important; | |
color: #eeeeee !important; | |
background-color: #505050 !important; | |
text-align: left !important; | |
background: -webkit-linear-gradient(top, #505050, #383838) !important; | |
background: -moz-linear-gradient(top, #505050, #383838) !important; | |
background: -ms-linear-gradient(top, #505050, #383838) !important; | |
background: -o-linear-gradient(top, #505050, #383838) !important; | |
border-top: 1px solid black !important; | |
border-bottom: 1px solid black !important; | |
border-radius: 0 !important; | |
border-image: none !important; | |
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important; | |
z-index: 300 !important; | |
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important; | |
letter-spacing: 0 !important; | |
word-spacing: 0 !important; | |
} | |
#codepen-footer a { | |
color: #a7a7a7 !important; | |
text-decoration: none !important; | |
} | |
#codepen-footer a:hover { | |
color: white !important; | |
} | |
</style> | |
<script> | |
// Kill alerts, confirmations and prompts | |
window.alert = function(){}; | |
window.confirm = function(){}; | |
window.prompt = function(){}; | |
window.open = function(){}; | |
window.print = function(){}; | |
</script> | |
<script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script> | |
</head> | |
<body> | |
<div class="login"> | |
<h1>User Name</h1> | |
<input type="password" placeholder="password" id="password"> | |
<a href="#" class="forgot">forgot password?</a> | |
<input type="submit" value="Sign In"> | |
</div> | |
<div class="shadow"></div> | |
<script src="http://code.jquery.com/jquery-latest.js"></script> | |
<script src="http://yourjavascript.com/8810122175/showpassword.js"></script> | |
<script> | |
(function() { | |
//add a show password checkbox to the demo-field | |
new ShowPasswordCheckbox(document.getElementById("password")); | |
})(); | |
</script> | |
<div id="codepen-footer"> | |
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a> | |
| |
<a href="/nateify/pen/7/16">Edit this Pen</a> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//add a show password checkbox to the demo-field | |
new ShowPasswordCheckbox(document.getElementById("password")); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="login"> | |
<h1>User Name</h1> | |
<input type="password" placeholder="password" id="password"> | |
<a href="#" class="forgot">forgot password?</a> | |
<input type="submit" value="Sign In"> | |
</div> | |
<div class="shadow"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html { height: 100% } | |
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } | |
::selection { background: #fe57a1; color: #fff; text-shadow: none; } | |
body { background-image: radial-gradient( cover, rgba(92,100,111,1) 0%,rgba(31,35,40,1) 100%), url('http://i.minus.com/io97fW9I0NqJq.png') } | |
.login { | |
background: #eceeee; | |
border: 1px solid #42464b; | |
border-radius: 6px; | |
height: 247px; | |
margin: 20px auto 0; | |
width: 298px; | |
} | |
.login h1 { | |
background-image: linear-gradient(top, #f1f3f3, #d4dae0); | |
border-bottom: 1px solid #a6abaf; | |
border-radius: 6px 6px 0 0; | |
box-sizing: border-box; | |
color: #727678; | |
display: block; | |
height: 43px; | |
font: 600 14px/1 'Open Sans', sans-serif; | |
padding-top: 14px; | |
margin: 0; | |
text-align: center; | |
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff; | |
} | |
input[type="password"], input[type="text"] { | |
background: url('http://i.minus.com/ibhqW9Buanohx2.png') center left no-repeat, linear-gradient(top, #d6d7d7, #dee0e0); | |
border: 1px solid #a1a3a3; | |
border-radius: 4px; | |
box-shadow: 0 1px #fff; | |
box-sizing: border-box; | |
color: #696969; | |
height: 39px; | |
margin: 31px 0 0 29px; | |
padding-left: 37px; | |
transition: box-shadow 0.3s; | |
width: 240px; | |
} | |
input[type="password"]:focus, input[type="text"]:focus { | |
box-shadow: 0 0 4px 1px rgba(55, 166, 155, 0.3); | |
outline: 0; | |
} | |
.show-password { | |
display: block; | |
height: 16px; | |
margin: 26px 0 0 28px; | |
width: 87px; | |
} | |
input[type="checkbox"] { | |
cursor: pointer; | |
height: 16px; | |
opacity: 0; | |
position: relative; | |
width: 64px; | |
} | |
input[type="checkbox"]:checked { | |
left: 29px; | |
width: 58px; | |
} | |
.toggle { | |
background: url(http://i.minus.com/ibitS19pe8PVX6.png) no-repeat; | |
display: block; | |
height: 16px; | |
margin-top: -20px; | |
width: 87px; | |
z-index: -1; | |
} | |
input[type="checkbox"]:checked + .toggle { background-position: 0 -16px } | |
.forgot { | |
color: #7f7f7f; | |
display: inline-block; | |
float: right; | |
font: 12px/1 sans-serif; | |
left: -19px; | |
position: relative; | |
text-decoration: none; | |
top: -15px; | |
transition: color .4s; | |
} | |
.forgot:hover { color: #3b3b3b } | |
input[type="submit"] { | |
background-color: #37a69b; | |
background-image: linear-gradient(top,#3db0a6,#319d91); | |
border: 1px solid #256f67; | |
border-radius: 4px; | |
box-shadow: inset 0 1px rgba(255,255,255,0.3); | |
box-sizing: border-box; | |
color: #f8f8f8; | |
font-weight: 700; | |
height: 39px; | |
margin: 12px 0 0 29px; | |
text-shadow: 0 -1px 0 #177c6a; | |
width: 240px; | |
} | |
input[type="submit"]:hover, input[type="submit"]:focus { background-image: linear-gradient(top,#4ec7c0,#31aba3) } | |
input[type="submit"]:active { | |
background-image: linear-gradient(bottom,#3db0a6,#319d91); | |
padding: 0; | |
} | |
.shadow { | |
background: #000; | |
border-radius: 12px 12px 4px 4px; | |
box-shadow: 0 0 20px 10px #000; | |
height: 12px; | |
margin: 30px auto; | |
opacity: 0.2; | |
width: 270px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment