jadine hanging

<html>
<head><title>Orion</title></head>
<center>

<style>

p20 {font-size: 20px;
	font-family: Roboto;
	font-weight: 100;
	letter-spacing: 0.5px;

}

p21 {font-size: 90px;
	font-family: Roboto;
	font-weight: 100;
	letter-spacing: 0.5px;

}

p22 {font-size: 40px;
	font-family: Roboto;
	font-weight: 100;
	letter-spacing: 0.5px;

}

body {
    background-image: url("login background 2.png");
	background-size: 350px 450px;
	background-position: 615px 115px;
	background-repeat: no-repeat;

}
</style>
<script language = "javascript">
function checkAnswer(){
      var name = document.getElementById('name').value;
 	 var pass = document.getElementById('pass').value;

      if (name == "joe" && pass =="cat")
          location = 'http://google.ca';
      else
          location = 'http://yahoo.ca'; // 'wrong.html';
      return false;
  }

</script>
<body>
<p21>Orion</p21>
<br>
<br>
<br>
<img src="user icon blue.png" width="150" height="150">
<br>
<br>
<p22>Login</p22>
<br>
<br>
<table>
<form onSubmit="return checkAnswer();">

<td><p20>Username:</p20></td>
<td colspan="2"><input id="name" type="text" maxlength="55" class="box" autofocus />
 </td>
</tr>
<td><p20>Password:</p20></td>
<td colspan="2"><input id="pass" type="password" maxlength="55" class="box" autofocus /></td>
</tr>
</table>
<br>
<img src="login button.png" onmouseover = "this.src='login button hover 2.png'" onmouseout="this.src='login button.png'" height = "40" width="150" onclick="checkAnswer()"/>


  <!--<input type="submit" class="submit" value="SUBMIT" />-->


<!-- <form onSubmit="return checkAnswer();">
  <input id="answer" type="text" maxlength="55" class="box" autofocus />
  <input type="submit" class="submit" value="SUBMIT" />
  </form> -->

</body>
</html>

Also for the background, for some reason it displaces on different monitors so just adjust in the CSS code. And just something that you can also add here is the code


<html>
<head><title>Orion</title></head>
<center>

<style>

p20 {font-size: 20px;
	font-family: Roboto;
	font-weight: 100;
	letter-spacing: 0.5px;

}

p21 {font-size: 90px;
	font-family: Roboto;
	font-weight: 100;
	letter-spacing: 0.5px;
	color: white;

}

p22 {font-size: 40px;
	font-family: Roboto;
	font-weight: 100;
	letter-spacing: 0.5px;

}

p23 {font-size: 30px;
	font-family: Roboto;
	font-weight: 100;
	letter-spacing: 0.5px;

}
</style>
<body background="material login backround.png">
<p21>Orion</p21>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="computer class workshop image button version for class.html"><img src="orion button.png" onmouseover = "this.src='orion button hover.png'" onmouseout="this.src='orion button.png'" height = "70" width="250"/></a>