srkdos
2/12/2016 - 7:55 AM

DOLLARS

DOLLARS

DOLLARS

First time using SCSS, and inspired from the anime DURARA website login :)

A Pen by Gabriel on CodePen.

License.

<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;
}