Simple Login Form Animated

<!DOCTYPE html>
<head>
  <title>Simple Login Form Animated</title>
  <link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,100,400italic,700italic,700">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
</head>
<style>
body {
  background: #44c4e7 url("https://photos-6.dropbox.com/t/2/AAC_bdqR8LMkjEe-HPIf4K1DhtseMLRHPklBSzJSuzglvA/12/5714737/jpeg/1024x768/3/1418346000/0/2/bkg-blur.jpg/CLHm3AIgASgBKAI/b7RrveA2022yJyfO9RyRvv7LjJQESukGHssHUxVThzw") no-repeat center center fixed;
  background-size: cover;
  font-family: "Roboto";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body::before {
  z-index: -1;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  background: #44c4e7;
  /* IE Fallback */
  background: rgba(68, 196, 231, 0.8);
  width: 100%;
  height: 100%;
}
.form {
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  width: 285px;
  margin: -140px 0 0 -182px;
  padding: 40px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.form h2 {
  margin: 0 0 20px;
  line-height: 1;
  color: #44c4e7;
  font-size: 18px;
  font-weight: 400;
}
.form input {
  outline: none;
  display: block;
  width: 100%;
  margin: 0 0 20px;
  line-height: 1;
  color: #ccc;
  padding: 10px 15px;
  border: 1px solid #ccc;
  font-family: "Roboto";
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: 0.2s linear;
}
.form input:focus {
  color: #333;
  border: 1px solid #44c4e7;
}
.form button {
  cursor: pointer;
  background: #44c4e7;
  width: 100%;
  padding: 10px;
  border: 0;
  color: #fff;
  font-family: "Roboto";
  font-size: 14px;
  font-weight: 400;
}
.form button:hover {
  background: #369cb8;
}
.error,
.valid {
  display: none;
}
</style>
<script>
$(document).ready(function() {
  $('#submit').click(function() {
    event.preventDefault(); // prevent PageReLoad
    var ValidEmail = $('#username').val() === 'aviel900'; // User validate
    var ValidPassword = $('#password').val() === 'TopSecret'; // Password validate

    if(ValidEmail === true && ValidPassword === true) { // if ValidEmail & ValidPassword
      $('.valid').css('display', 'block');
      window.location = "https://www.youtube.com/channel/UCpVjIRV2uKlmveF6BGZ-txA"; // go to my YouTube Channel
    }
    else {
      $('.error').css('display', 'block'); // show error msg
    }
  });
});
</script>
<body>
  <section class="form animated flipInX">
    <h2>Login To Your Account</h2>
    <p class="valid">Valid. Please wait a moment.</p>
    <p class="error">Error. Please enter correct User name &amp; password</p>
    <form class="loginbox" autocomplete="off">
      <input placeholder="Username" type="text" id="username"></input>
      <input placeholder="Password" type="password" id="password" ></input>
      <button id="submit">Login</button>
    </form>
  </section>
</body>