<!doctype html>
<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <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">
        <img src="http://s3.amazonaws.com/codecademy-content/projects/2/pocketbook/logo.svg" width="50">
      </div>
    </div>

    <div class="main">
      <div class="container">
        <div class="row">
          <div class="col-md-7">
            <h1>Join Pocketbook</h1>
            
            <form role="form">
              <div class="form-group">
                <label for="first">First name</label>
                <p class="first-name-error"></p>
                <input id="first-name" type="text" class="form-control">
              </div>
              <div class="form-group">
                <label for="last">Last name</label>
                <p class="last-name-error"></p>
                <input id="last-name" type="text" class="form-control">
              </div>
              <div class="form-group">
                <label for="email">Email</label>
                <p class="email-error"></p>
                <input id="email" type="email" class="form-control">
              </div>
              <div class="form-group">
                <label for="password" class="password-label">Password</label> 
                <p class="password-error"></p>
                <input id="password" type="password" class="form-control">
              </div>
              <button type="submit" class="btn">Create account</button>
            </form>
            
          </div>
        </div>
      </div>
    </div>


    <div class="footer">
      <div class="container">
        <ul>
          <li>Contact</li>
          <li>Help Center</li>
          <li>About</li>
        </ul>
      </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;
  font-family: 'Montserrat', sans-serif;
}

body {
  background-image:url(http://s3.amazonaws.com/codecademy-content/projects/2/pocketbook/bg.jpg);
  background-size:cover;  
  background-repeat:no-repeat;
  background-color: #140e07; 
  color:#fff;
}

.container {
  width: 940px;
}


/* Header */
.header {
  text-align: center;
  margin-bottom: 50px;
}

.header .container {
  padding: 30px 0;
  border-bottom: 1px solid #e5e5e5;
}

/* Main */
.main {
  margin: 80px 0;

}

.main h1 {
  font-size: 30px;
  margin: 0 0 20px 0;
}

/* Form */
form input.form-control { 
  border:0px;
  border-radius:0px; 
}

.main .btn { 
  margin-top:30px; 
  color:#fff;
  background:rgba(0,240,190,0.25);
  border:0px;
  border-radius:0px; 
}

.first-name-error,
.last-name-error,
.email-error,
.password-error {
  color: #dd4b39;
  font-weight: 600;
}

/* Footer */
.footer .container {
  padding: 20px 0;
  border-top: 1px solid #e5e5e5;
}

.footer ul {
  list-style: none;
  padding: 0;
}

.footer li {
  display: inline;
  margin-right: 20px;
}
var main = function() {
  $('form').submit(function() {
    var firstName = $('#first-name').val();
    var lastName = $('#last-name').val();
    var email = $('#email').val();
    var password = $('#password').val();
    
    if(firstName === "") {
      $(".first-name-error").text("Please enter your first name.");
    }
    if (lastName === "") {
        $('.last-name-error').text("Please enter your last name.");
    }
    
    if (email === "") {
        $('.email-error').text("Please enter your email.");
    }
    
    else if (email === "sampjon@gmail.com") {
        $('.email-error').text("This email is already taken. Please use another one.");
    }
    
    if (password === "") {
        $('.password-error').text("Please enter your password.");
    }
    
    else if (password.length <= 8) {
         $('.password-error').text("Short passwords are easy to guess. Try one with at least 8 characters.")
    }

    return false;
  });
}

$(document).ready(main);

Browse more Codebits