DOLLARS
<div class="wrapper">
<div class="dollars_outer">
<div class="dollars_inner">
<div class="dollars_core">
<h1>DOLLARS</h1>
<form id="password" action="#" method="#">
<input type="password" name="pw" id="textfield" maxlength="7" placeholder="baccon" ><input type="image" src="http://dollars-bbs.org/images/enter_button.png" onmouseover="this.src='http://dollars-bbs.org/images/enter_button_hover.png'"onmouseout="this.src='http://dollars-bbs.org/images/enter_button.png'" alt="Enter">
</form>
</div>
</div>
</div>
</div>
//made by gabriel ;) inspired by the anime DURARA
@import "compass/css3";
//color variables
$white:#FFF;
$black:#000;
@font-face {
font-family: "nationfd"; src:url('http://static.tumblr.com/q6qqnsd/Taqlzudjh/nationfd.ttf');}
//mixins
@mixin dollars-font {
font-family:'nationfd';
text-align:center;
font-size:3.5em;
font-weight:normal;
display:block;
}
@mixin border-radius($radius){
-webkit-border-raidus:$radius;
-moz-border-raidus:$radius;
border-radius:$radius;
}
@mixin border($border-box-sizing){
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
*,{
&:before,&:after{
@include border(border-box);
}
}
body {
@include border(border-box);
background:$black;
color:$white;
@include dollars-font;
}
.wrapper {
position:relative;
padding-bottom:100%;
@include border-radius(50%);
background:$black;
border:3px solid $white;
}
.dollars_outer {
position:absolute;
width:86%;
height:86%;
border:15px solid $white;
@include border-radius(50%);
top:5%;
left:5%;
}
.dollars_core {
display:tabble-cell;
vertical-align:middle;
text-align:center;
}
h1 {
@include dollars-font;
position:relative;
margin-top:30%;
}
#password {
text-align:center;
margin-left:auto !important;
margin-right:auto !important;
background-repeat:no-repeat;
background-position:center center;
background-image:url('http://dollars-bbs.org/images/textfield.png');
width:400px;
height:200px;
}
#textfield {
width:160px;
border:0;
margin-top:90px;
margin-left:105px;
}