BroCialize Code for Stackoverflow 2.0

<!DOCTYPE html>
<html>
<head>
	<title> BroCialize </title>

<script>

var count= 2;

function validate(){

	document.onload = function() {
    document.getElementById('submit').addEventListener('click', validate);
}

	var username = document.login-form.username.value;
	var password = document.login-form.password.value;
	var valid= false;
	var usernameArray = ["Gdp", "Hekman", "Koning", "ErikHekman", "ThijsWaardenburg", "Ronald", "RonaldVanEssen" ];
	var passwordArray = ["Gdp123", "Hekman123", "Koning123", "ErikHekman123", "ThijsWaardenburg123", "Ronald123", "RonaldVanEssen123"];

	for (var i = 0; i < usernameArray.length; i++)

{

	if ((username == usernameArray[i]) && (password == passwordArray[i]))
	{
		valid = true;
		break;
	}
}

	if (valid)
	{
		alert("Log in was succesfull!")
		window.location = "timeline";
		return false;
	}
	var again = "tries";
	if (count ==1)
	{
		again = "try"
	}
	if (count >= 1)
	{
		alert("Wrong password or username")
		count--;
	}
	else
	{
		alert("Too many attempts");
		document.login-form.username.value = "You are now blocked";
		document.login-form.pass.value = "You are now blocked";
		document.login-form.username.disabled = true;
		document.login-form.password.disabled = true;
		return false;
	}
}


</script>

<style>
html {font-family:Arial, Helvetica, sans-serif; color:#333;}
body { background:#CCC; margin:0; }
#container { width:900px; margin:0 auto; background:#FFF; }
#header { width:100%; height:60px; border-bottom:1px solid #c7c7c7; background:#3f0b04; text-align:center; }
#header h1 {color:#e7c321; }

#logo { float:left; width:40px; height:40px; margin:10px; background:#CCC;}
#navbar { height:36px; clear:both; background-color:#e7c321; }
#navbar ul { margin:0; padding:0; list-style-type:none; }
#navbar ul li { padding:10px; float:left; }
#navbar ul li a { font size:12px; float:left; padding:0 0 0 20px; display:block; }
#banner { background:#3f0b04; heigth:120px; clear:both; padding:20px; text-align:center; color:#FFF; margin:10px 0 2px 0;}
#middle-collum { float:left; width:858px; height:500px; border:1px solid #333; color:#000; background:#bcbab4; padding:20px; text-align:center; }
#login-logo {width:100%; ; height:200px; float:center;}
#login-form {float:center; width:175px; }
#submit {width:170px; float:center;}
#register {width:170px; float:center;}

#footer { padding:20px; clear:both; color:#FFF; background-color:#3f0b04; text-align:center; }
</style>

</head>


<body>

<!-- CONTAINER -->
<div id="container">
	<!-- HEADER -->
	<div id="header">
		<div id="logo"><img src="http://imgur.com/578H3e8.png"></img></div>
		<h1>BroCialize</h1>
		<div id="navbar">
			<ul>
				<li><a href="url"></a></li>
				<li><a href="url"></a></li>
				<li><a href="url"></a></li>
			</ul>
		</div>
	</div>
	<!-- CONTENT AREA -->
	<div id="content-area">
		<div id="banner">This site is Legen...wait for it...Dary</div>
		<div id="middle-collum">
			<div id="login-logo"><img src="http://imgur.com/uelX4ie.png></img></div>
			<div id="login-form">
				<form method="POST" id="login-form">
					<input type="text" name="username" placeholder="username" />
					<br>
					<input type="password" name="password" placeholder="password" />
					<br>
				</form>
				<input type="button" id="submit">Log in</button>
				<br>
				<input type="button" id="register">Register</button>
			</div>

		</div>
	</div>
	<!--FOOTER -->
	<div id="footer">Copyright by BroCialize - 2016</div>
</div> <!-- END CONTAINER -->
</body>
</html>