Login 1

See the Pen Bootstrap Tumblr Login by Ace Subido (@ace-subido) on CodePen.

<div id="fullBg" />

<div class="container">
  <form class="form-signin">       
      <h1 class="form-signin-heading">Please Login</h1>
      <input type="text" class="form-control" name="username" placeholder="Email Address" required="" autofocus="" />
      <input type="password" class="form-control" name="password" placeholder="Password" required=""/>     
      
      <button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>   
    </form>
  <p class="text-center sign-up"><strong>Sign up</strong> for a new account</p>
</div>

@import "bourbon";

#fullBg {  
    z-index: -1;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    background: url('https://31.media.tumblr.com/3b08b64bfe69d670c91c03a5e2fd42b6/tumblr_mv5lnjrRQ51qfj2dqo1_1280.jpg') no-repeat center center fixed; 
    background-size: cover;
}

.form-signin {
  max-width: 280px;
  margin: 60px auto 10px;

  .form-signin-heading {
    text-align: center;
    font-weight: bold;
    color: #fff;
	  margin-bottom: 20px;
	}

	.checkbox {
	  font-weight: normal;
	}

	.form-control {
	  position: relative;
	  font-size: 16px;
	  height: auto;
	  padding: 10px;
		@include box-sizing(border-box);
	}

	input[type="text"] {
	  margin-bottom: -1px;
     border-top: 1px solid transparent;
     border-right: 1px solid transparent;
     border-left: 1px solid transparent;
     box-shadow: none;
	  border-radius: 3px 3px 0px 0px;	  
        
		&:focus {
      box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);      
		}
	}

	input[type="password"] {
    z-index: 2;
	  margin-bottom: 20px;
    border-top: none;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    border-radius: 0px 0px 3px 3px;	  
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);

		&:focus {
      box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0px 1px 0px 0px rgba(255,255,255,0.5);       
		}
	}

  .btn {
    font-weight: bold;
    border-radius: 3px;
    border: none;
  }
}

p.sign-up {
  color: #fff;
  font-size: 12px;
}