A Pen by Dylan Dsouza.

index.html

<div id="top-container">
  <span id="brand">Brand</span>
</div>
<form id="form-container">
  <span id="mast-head">Sign In</span>
  <input type="text" placeholder="Username">
  <input type="password" placeholder="Password">
  <button>Log In</button>
</form>

Simple-Login.markdown

Simple Login

Just created a simple login form, nothing professional, just started out, so you know what to expect :)

A Pen by Dylan Dsouza on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Poiret+One);
@import url(http://fonts.googleapis.com/css?family=Dosis);
html{
  font-family: 'Poiret One', cursive;
  background-color: #3498db;
}
body{
  margin: 0;
}
#top-container{
  color: #95a5a6;
  height: 480px;
  background: #ffffff;
  text-align: center;
  margin-bottom: -200px;
  box-sizing: border-box;
  padding-top: 80px;
}
#brand{
  font-size: 72pt;
}
#form-container{
  width: 400px;
  margin: 0px auto;
  text-align: center;
  display: block;
  background-color: #3498db;
  box-sizing: border-box;
  padding-top: 50px;
  box-shadow: 0px 0px 10px black;
  overflow: hidden;
}
#mast-head{
  color: #ffffff;
  text-transform: capital;
  font-size: 36px;
  font-family: 'Dosis', sans-serif;
}
input{
  color: #bdc3c7;
  font-size: 18px;
  display: block;
  width: 80%;
  margin: 20px auto;
  text-align: center;
  height: 50px;
  border: none;
  border-bottom: 2px solid #bdc3c7;
}
button{
  color: #ffffff;
  margin-top: 20px;
  font-family: 'Dosis', sans-serif;
  width: 100%;
  font-size: 24px;
  height: 60px;
  border: none;
  border-bottom: 2px solid #1abc9c;
  background-color: #2ecc71;
  text-transform: uppercase;
  -webkit-transition: background-color 1s, border-bottom 1s;
}
button:hover{
  background-color: #e74c3c;
  border-bottom: 2px solid #c0392b;
}