Testing page

Testing page for fun

HTML

<center>
  <div class="hey">
    <h2><a href="#">Login</a></h2>

    <div id="login">
      <form name="login">Username:
        <input type="text" name="userid" id="user" />
        <br>
        <br>Password:
        <input type="password" name="pswrd" id="pass" />
        <br>
        <br>
        <input type="button" value="Login" id="my_button" />
        <input type="reset" value="Cancel" />
      </form>
    </div>
    <div id="hello">Access Granted :)</div>
    <div id="sorry">Sorry you have entered the wrong username or password</div>

CSS

#hello,
#sorry {
  display: none;
}

body {
  font: 13px/20px "Lobster", "Comic Sans", cursive;
  background-color: #ddd;
}

h2,
p {
  color: #777;
}

a {
  color: #9900ff;
}

a:hover {
  color: #ff0099;
}

h2 {
  font-size: 49px;
  font-weight: bold;
  letter-spacing: -.02em;
  margin-bottom: 26px;
}

h2 a {
  text-decoration: none;
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
}

.byline {
  color: #9799a7;
  margin-bottom: 18px;
}

.intro {
  text-indent: 15px;
}

.intro a {
  font-size: 11px;
  font-weight: bold;
  text-decoration: underline;
  text-transform: uppercase;
}

div.hey {
  background-color: lightgrey;
  width: 280px;
  padding: 15px;
  border: 1px solid black;
  margin: 25px;
}

JavaScript

$(document).ready(function() {
  $("#my_button").click(function() {
    var userid = $("#user").val();
    var pass = $("#pass").val();
    if (userid == 'hey' && pass == 'hi') {
      $("#login").fadeOut('slow', function() {
        $("#hello").fadeIn();
      });
    } else {
      $("#login").fadeOut('slow', function() {
        $("#sorry").fadeIn();
      });
    }
  });
});