<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
	<link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <div class="dropdown">
          <img src="http://s3.amazonaws.com/codecademy-content/projects/2/milford-school/menu.svg" width="30px">
          <ul class="dropdown-menu">
            <li><a href="#">Admissions</a></li>
            <li><a href="#">Academics</a></li>
            <li><a href="#">Research</a></li>
            <li><a href="#">Campus Life</a></li>
            <li><a href="#">Administration</a></li>
          </ul>
        </div>
        <h1>Milford School</h1>
        
      </div>
    </div>

    <div class="main">
      <div class="container">
        <form role="form">
          <div class="form-group">
            <p class="email-error"></p>
            <input type="email" class="form-control" id="email" placeholder="Email">
          </div>
          <div class="form-group">
            <p class="password-error"></p>
            <input type="password" class="form-control" id="password" placeholder="Password">
          </div>
          <button type="submit" class="btn btn-default">Sign in</button>
        </form>      
      </div>
    </div>
    <script src="http://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src='script.js'></script>
  </body>
</html>
html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: url(http://s3.amazonaws.com/codecademy-content/projects/2/milford-school/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
}

.header {
  background-color: rgba(0,0,0,0.8);
  padding: 10px 0;
}

.header h1 {
  color: #fff;
  display: inline-block;
  font-size: 20px;
  margin: 0 0 0 5px
}

.dropdown {
  position: relative;
  display: inline;
  cursor: pointer;
}

.dropdown-menu {
  border-radius:0px; 
  box-shadow:none; 
  border:none;
  min-width: 200px;
  top: 32px;
  background-color: rgba(0,0,0,0.8);
}

.dropdown-menu li a {
  color: #fff;
  font-size: 16px;
  padding: 5px 15px;
}

.main .container {
  position: relative;
  top: 200px;
  width: 400px;
}

.form-control,
.btn-default {
  background-color: rgba(255,255,255,0.8);
  border-radius: 0;
}

.form-control {
  font-size: 18px;
}

.email-error,
.password-error {
  color: #dd4b39;
  font-size: 16px;
  font-weight: 600;
  text-shadow: rgba(0, 0, 0, 0.7) 1px 1px 2px;
  background-color: rgba(0,0,0,0.8);
  margin: 0;
  line-height: 10px;
  padding: 10px;
} 
$(document).ready(function(){

    $('.dropdown img').click(function(){
        $('.dropdown-menu').toggle();
    });
    
    $('form').submit(function(){
        
        var email = $('#email').val();
        var password = $('#password').val();
        
        if (email.length === 0){
            $('.email-error').text('Please enter your email');
        }
        
        if (password.length === 0){
            $('.password-error').text('Please enter a password');
        }
        
        return false;
    });
    
});

Browse more Codebits