<div class="wrapper">
  <h1>Ubuntu Login</h1>
  <section>
    <input class="main-form" type="text" name="usrname" placeholder="yolo@life.com"/>
      <input class="main-form" type="password" name="password" placeholder="password"/>
    <button>Sign in</button>
  </section>
  <footer>
    <input class="yolo" name="" value="" type="checkbox"/><h6>Remember me</h6>
  </footer>
</div>

* {
  margin:0;
  padding:0;
  font-family: 'Ubuntu', Arial;
}

body {
  background:url("http://news.softpedia.com/images/extra/LINUX/large/ubuntu1204ltswallpapers-large_000.jpg");
}

.wrapper {
  text-align:center;
  width:500px;
  margin:50px auto;
}

h1 {
  color:#fff;
  text-shadow:1px 1px 0px rgba(0, 0, 0, 0.3);
  margin-bottom:20px;  
}

section {
  background:rgba(0, 0, 0, 0.4);
  margin:0 auto;
  width:300px;
  padding:20px;
  text-align:center;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
   -webkit-box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18);
      -moz-box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18);
          box-shadow:0px 1px 0px rgba(225, 225, 225, 0.18);
}

.main-form {
  display:block;
  width:280px;
  margin-bottom:15px;
  padding:10px;
  outline:none;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  border:none;
  background:rgba(225, 225, 225, 0.1);
  font:0.7em 'Ubuntu';
  color:#fff;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
}

.main-form:focus {
  background:#fff;
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  color:#777;
}

button {
  border:none;
  background: #606c88;
  background: -moz-linear-gradient(top,  #606c88 0%, #3f4c6b 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b));
  background: -webkit-linear-gradient(top,  #606c88 0%,#3f4c6b 100%);
  background: -o-linear-gradient(top,  #606c88 0%,#3f4c6b 100%);
  background: -ms-linear-gradient(top,  #606c88 0%,#3f4c6b 100%);
  background: linear-gradient(to bottom,  #606c88 0%,#3f4c6b 100%);
  padding:17px;
  box-shadow:0px 1px 0px rgba(225, 225, 225,
    0.2), 0px 1px 0px rgba(0, 0, 0, 0.4) inset;
  outline:none;
  width:100%;
  text-transform:uppercase;
  color:white;
  letter-spacing:2px;
  text-shadow:1px 1px 0px rgba(0, 0, 0, 0.6);
  cursor:pointer;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  margin-top:5px;
  font-family:'Ubuntu';
}

button:active {
  box-shadow:inset 0px 2px 1px rgba(0, 0, 0, 0.3);
}

footer {
  padding-top:20px;
  text-align:right;
  width:330px;
  margin:0 auto;
}

.yolo {
    -webkit-appearance: none;
    background:rgba(0, 0, 0, 0.4);
    padding: 9px;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

.yolo:checked {
    background-color: #fff;
    color: #fff;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}

.yolo:checked:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: 0px;
    left: 3px;
    color: #000;
}

h6 {
  display:inline-block;
  position:relative;
  bottom:4px;
  left:6px;
  color:#fff;
  font-weight:300;
  text-shadow:1px 1px 0px rgba(0, 0, 0 ,0.6);
}