Skip to content

Instantly share code, notes, and snippets.

@rileytg

rileytg/index.html

Created July 4, 2012 01:05
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 rileytg/3044473 to your computer and use it in GitHub Desktop.
Save rileytg/3044473 to your computer and use it in GitHub Desktop.
Download ZIP
A web page created at CodePen.io
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple login/subsribe form &middot; CodePen</title>
<link rel="stylesheet" href="http://codepen.io/stylesheets/css/reset.css">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Icons */
@font-face {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
src: url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.eot") format("embedded-opentype"), url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.woff") format("woff"), url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.ttf") format("truetype"), url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"), url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.svg#FontAwesomeRegular") format("svg");
}
.icon-user:before {
content: "\f007";
}
.icon-lock:before {
content: "\f023";
}
[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
.icon-large {
position: absolute;
top: 11px;
left: 10px;
color: white;
}
.icon-large:before {
vertical-align: top;
font-size: 1.3333333333333333em;
}
.icon-lock {
left: 12px;
}
body {
background: url("http://wildwebwatch.com/css/../img/background_body.jpg") repeat scroll 0 0 transparent;
}
form {
width: 250px;
margin: 30px auto;
padding: 15px;
border-radius: 0.3em;
border: 1px solid rgba(0, 0, 0, 0.6);
background: #222;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 1px 3px 2px rgba(0, 0, 0, 0.3), inset 0 -100px 50px rgba(255, 255, 255, 0.1);
position: relative;
}
form:after {
content: "";
display: block;
position: absolute;
left: 50%;
width: 15px;
height: 15px;
margin-left: -8px;
background: inherit;
top: -8px;
transform: rotate(45deg);
border-top: 1px solid rgba(0, 0, 0, 0.6);
border-left: 1px solid rgba(0, 0, 0, 0.6);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
}
#input_wrapper {
border: 1px solid rgba(0, 0, 0, 0.6);
border-radius: 0.3em;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -50px 30px rgba(255, 255, 255, 0.1), inset 0 5px 5px rgba(0, 0, 0, 0.3);
}
p {
position: relative;
}
label {
color: transparent;
font-size: 1px;
position: absolute;
visibility: hidden;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 10px 10px 10px 35px;
border: 0 none;
background: rgba(0, 0, 0, 0.5);
color: white;
}
input[type=text]:hover,
input[type=password]:hover {
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
}
#login {
border-bottom: 1px solid black;
border-radius: 0.3em 0.3em 0 0;
}
#pass {
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0 0 0.3em 0.3em;
}
input[type=submit] {
display: block;
position: relative;
width: 100%;
padding: 8px;
margin-top: 8px;
text-decoration: none;
text-align: center;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.8);
border-radius: 0.2em;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 20px 20px rgba(255, 255, 255, 0.2), 0 2px 1px rgba(0, 0, 0, 0.2), 0 0 2px 8px rgba(50, 50, 50, 0.1);
transition: all 0.3s ease-out;
font-family: Helvetica, sans-serif;
font-size: 1em;
line-height: 1em;
font-weight: bold;
color: rgba(255, 255, 255, 0.8);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.2);
-webkit-font-smoothing: subpixel-antialiased;
}
input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -20px 20px rgba(200, 200, 200, 0.1), 0 2px 1px rgba(0, 0, 0, 0.2), 0 0 2px 8px rgba(100, 100, 100, 0.1);
}
#log-in {
background: #1e83e5;
}
#subscribe {
background: #5f9a2e;
}
</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>
<form>
<div id="input_wrapper">
<p>
<label for="login">Login</label>
<i class="icon icon-user icon-large"></i>
<input type="text" name="login" id="login" placeholder="Login">
</p>
<p>
<label for="pass">Password</label>
<i class="icon icon-lock icon-large"></i>
<input type="password" name="pass" id="pass" placeholder="Password">
</p>
</div>
<p>
<input type="submit" id="log-in" name="log-in" value="Log in">
<input type="submit" id="subscribe" name="subscribe" value="Subscribe">
</p>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://codepen.io/javascripts/libs/modernizr.js"></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>
&nbsp;
<a href="/HugoGiraudel/pen/23/1">Edit this Pen</a>
</div>
</body>
</html>
Raw
markup.html
<form>
<div id="input_wrapper">
<p>
<label for="login">Login</label>
<i class="icon icon-user icon-large"></i>
<input type="text" name="login" id="login" placeholder="Login">
</p>
<p>
<label for="pass">Password</label>
<i class="icon icon-lock icon-large"></i>
<input type="password" name="pass" id="pass" placeholder="Password">
</p>
</div>
<p>
<input type="submit" id="log-in" name="log-in" value="Log in">
<input type="submit" id="subscribe" name="subscribe" value="Subscribe">
</p>
</form>
Raw
style.scss
@import "compass";
* {
box-sizing:border-box;
padding:0;
margin:0;
}
/* Icons */
@font-face {
font-family: "FontAwesome";
font-style: normal;
font-weight: normal;
src: url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.eot") format("embedded-opentype"), url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.woff") format("woff"), url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.ttf") format("truetype"), url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.svgz#FontAwesomeRegular") format("svg"), url("http://wildwebwatch.com/fonts/fontAwesome/fontawesome-webfont.svg#FontAwesomeRegular") format("svg");
}
.icon-user:before { content: "\f007"; }
.icon-lock:before { content: "\f023"; }
[class^="icon-"], [class*=" icon-"] {
display: inline;
width: auto;
height: auto;
line-height: inherit;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
&:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
}
}
.icon-large {
position:absolute;
top:11px;
left:10px;
color:white;
&:before {
vertical-align: top;
font-size: 1.3333333333333333em;
}
}
.icon-lock { left:12px; }
body {
background: url("http://wildwebwatch.com/css/../img/background_body.jpg") repeat scroll 0 0 transparent;
}
form {
width:250px;
margin:30px auto;
padding:15px;
border-radius:0.3em;
border:1px solid rgba(0,0,0,0.6);
background:#222;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
1px 3px 2px rgba(0,0,0,0.3),
inset 0 -100px 50px rgba(255,255,255,0.1);
position:relative;
&:after {
content:"";
display:block;
position:absolute;
left:50%;
width:15px;
height:15px;
margin-left:-8px;
background:inherit;
top:-8px;
transform:rotate(45deg);
border-top:1px solid rgba(0,0,0,0.6);
border-left:1px solid rgba(0,0,0,0.6);
box-shadow:inset 1px 1px 0 rgba(255,255,255,0.2);
}
}
#input_wrapper {
border:1px solid rgba(0,0,0,0.6);
border-radius:0.3em;
box-shadow:0 1px 0 rgba(255,255,255,0.2),
inset 0 -50px 30px rgba(255,255,255,0.1),
inset 0 5px 5px rgba(0,0,0,0.3);
}
p {
position:relative;
}
label {
color: transparent;
font-size: 1px;
position: absolute;
visibility: hidden;
}
input[type=text],
input[type=password]{
width:100%;
padding:10px 10px 10px 35px;
border:0 none;
background:rgba(0,0,0,0.5);
color:white;
&:hover {
box-shadow:inset 0 0 10px rgba(255,255,255,0.1);
}
}
#login {
border-bottom:1px solid black;
border-radius:0.3em 0.3em 0 0;
}
#pass {
border-top:1px solid rgba(255,255,255,0.1);
border-radius:0 0 0.3em 0.3em;
}
input[type=submit]{
display:block;
position:relative;
width:100%;
padding:8px;
margin-top:8px;
text-decoration:none;
text-align:center;
cursor:pointer;
border:1px solid rgba(0,0,0,0.8);
border-radius:0.2em;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 20px 20px rgba(255,255,255,0.2),
0 2px 1px rgba(0,0,0,0.2),
0 0 2px 8px rgba(50,50,50,0.1);
transition:all 0.3s ease-out;
font-family:Helvetica, sans-serif;
font-size:1em;
line-height:1em;
font-weight:bold;
color:rgba(255,255,255,0.8);
text-shadow:0 -1px 0 rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.2);
-webkit-font-smoothing: subpixel-antialiased;
&:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
inset 0 -20px 20px rgba(200,200,200,0.1),
0 2px 1px rgba(0,0,0,0.2),
0 0 2px 8px rgba(100,100,100,0.1);
}
}
#log-in { background:#1e83e5; }
#subscribe { background:#5f9a2e; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment