Simple login form

index.html

<div class="container">
  <div class="login">
  	<h1 class="login-heading">
      <strong>
        Welcome.
      </strong>
      Please login.
    </h1>
    <form method="post">
      <input type="text"
             name="user"
             placeholder="Username"
             required="required"
             class="input-txt"
      />
      <input type="password"
             name="password"
             placeholder="Password"
             required="required"
             class="input-txt"
      />
      <div class="login-footer">
        <a href="#" class="lnk">
          <span class="icon icon--min">
            ಠ╭╮ಠ
          </span> 
          I've forgotten something
        </a>
        <button type="submit"
                class="btn btn--right"
        >
          Sign in
        </button>
      </div>
    </form>
  </div>
</div>

script.js

/*------------------------------------*\
    SIMPLE LOGIN FORM
\*------------------------------------*/

simple-login-form.markdown

Simple login form

A Pen by dznet on CodePen.

License.

style.scss

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Tenor+Sans);

@mixin placeholder($color: $placeholder-text) {
  &:-moz-placeholder {
    color: $color;
  }
  &:-ms-input-placeholder {
    color: $color;
  }
  &::-webkit-input-placeholder {
    color: $color;
  }
}

$blue: #5D92BA;
$heading-font: 'Tenor Sans', sans-serif;


html{
  background-color: $blue;
  font-family: $heading-font
}
.container{
  width: 500px;
  height: 400px;
  margin: 0 auto;
}
.login{
  margin-top: 50px;
  width: 450px;
}
.login-heading{
  font: 1.8em/48px $heading-font;
  color: white;
}

.input-txt{
  width: 100%;
  padding: 20px 10px;
  background: $blue;
  border: none;
  font-size: 1em;
  color: white;
  border-bottom: 1px dotted rgba(250, 250, 250, .4);
  @include box-sizing(border-box);
  @include placeholder(lighten($blue, 10%));
  @include transition(background-color .5s ease-in-out);
    &:focus{
     background-color: darken($blue, 10%);
    }
}
.login-footer{
  margin: 10px 0;
  overlow: hidden;
  float: left;
  width: 100%;
}
.btn{
  padding: 15px 30px;
  border: none;
  background: white;
  color: $blue;
}
.btn--right{
  float: right;
}
.icon{
  display: inline-block;
}
.icon--min{
  font-size: .9em;
}
.lnk{
  font-size: .8em;
  line-height: 3em;
  color: white;
  text-decoration: none;
}