styled log in form

cms/static/sass/_base.scss

@@ -64,7 +64,9 @@ footer {
     height: 100px;
 }
 
-input[type="text"] {
+input[type="text"],
+input[type="email"],
+input[type="password"] {
     padding: 6px 8px 8px;
     box-sizing: border-box;
     border: 1px solid #b0b6c2;

cms/static/sass/_login.scss

+.log-in-box {
+	width: 500px;
+	margin: 200px auto;
+	border-radius: 3px;
+
+	header {
+		height: 36px;
+		border-radius: 3px 3px 0 0;
+		border: 1px solid #2c2e33;
+		background: -webkit-linear-gradient(top, #686b76, #54565e);
+		color: #fff;
+		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, .25) inset;
+
+		h1 {
+			margin: 5px 0;
+			font-size: 15px;
+			font-weight: 300;
+			text-align: center;
+		}
+	}
+
+	.log-in-form {
+		padding: 40px;
+		border: 1px solid $darkGrey;
+		border-top-width: 0;
+		border-radius: 0 0 3px 3px;
+		background: #fff;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+	}
+
+	label {
+		display: block;
+		font-size: 13px;
+		font-weight: 700;
+	}
+
+	.email-field,
+	.password-field {
+		width: 100%;
+		font-size: 20px;
+		font-weight: 300;
+	}
+
+	.row {
+		margin-bottom: 24px;
+	}
+
+	.form-actions {
+		margin-bottom: 0;
+	}
+
+	.log-in-button {
+		@include blue-button;
+		margin-right: 10px;
+		padding: 8px 20px 10px;
+	}
+
+	.forgot-button {
+		font-size: 13px;
+	}
+
+	.log-in-extra {
+		margin-top: 10px;
+		text-align: right;
+		font-size: 13px;
+		border-top: 1px solid $lightGrey;
+	}
+}
\ No newline at end of file

cms/static/sass/_variables.scss

@@ -14,4 +14,7 @@ $pink: rgb(182,37,104);
 $error-red: rgb(253, 87, 87);
 
 $blue: #5597dd;
+$lightGrey: #edf1f5;
+$mediumGrey: #ced2db;
 $darkGrey: #8891a1;
+$paleYellow: #fffcf1;
\ No newline at end of file

cms/static/sass/base-style.scss

@@ -16,6 +16,7 @@
 @import "graphics";
 @import "modal";
 @import "alerts";
+@import "login";
 
 @import 'content-types';
 

cms/templates/login.html

@@ -4,39 +4,28 @@
 
 <%block name="content">
 
-<section class="main-container">
-
-  <section class="main-content">
+  <article class="log-in-box">
     <header>
-      <h3>Log in</h3>
-      <hr>
+      <h1>Log in to edX</h1>
     </header>
-
-    <form id="login_form" action="login_post" method="post">
-      <label>E-mail</label>
-      <input name="email" type="email" placeholder="E-mail">
-      <label>Password</label>
-      <input name="password" type="password" placeholder="Password">
-      <label class="remember-me">
-        <input name="remember" type="checkbox">
-        Remember me
-      </label>
-      <div class="submit">
-        <input name="submit" type="submit" value="Submit">
+    <form class="log-in-form" id="login_form" action="login_post" method="post">
+      <div class="row">
+        <label>Email:</label>
+        <input name="email" type="email" class="email-field">
       </div>
+      <div class="row">
+        <label>Password:</label>
+        <input name="password" type="password" class="password-field">
+      </div>
+      <div class="row form-actions">
+        <input name="submit" type="submit" value="Log In" class="log-in-button">
+        <a href="#" class="forgot-button">Forgot password?</a>
+      </div>      
     </form>
-
-    <section class="login-extra">
-      <p>
-        <span>Not enrolled? <a href="${reverse('signup')}">Sign up.</a></span>
-        <a href="#" class="pwd-reset">Forgot password?</a>
-      </p>
-    </section>
-
-
-  </section>
-
-</section>
+    <div class="log-in-extra">
+      <p>Not enrolled? <a href="${reverse('signup')}">Sign up.</a></p>
+    </div>
+  </article>
 
 <script type="text/javascript">
 (function() {