/css

## css
@charset "utf-8";
/* CSS Document */

html, body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
}

h1 {
	text-decoration:underline;
}

h2 {
	font-size:9px;
}

p {
	font-size:18px;
}

.sitewrap {
	width:800px;
	height:auto;
	margin:0px auto;
}

#header {
	background:url(banner2.png);
	height:200px;
	width:auto;
}

#blurb {
	margin:10px 0px;
	width:auto;
	height:75px;
	background:url(navigation.png);
}

#contentwrap {
	margin:0px;
	width:auto;
	height:380px;
	background-image:url(background.png);
}

#sidebar {
	margin:5px;
	width:225px;
	height:370px;
	float:left;
}

#content {
	margin:5px;
	width:540px;
	height:370px;
	float:left;
}

#footer {
	margin:10px 0px;
	width:auto;
	height:40px;
	text-align:center;
}

#background {
	background:url(background6.png);
}

ul {
    list-style-type:none;
    margin:0px;
}

a:link,a:visited {
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
	background-color:#0099FF;
    text-align:center;
	margin:12px 0px;
    padding:12px;
    text-decoration:none;
    text-transform:uppercase;
}

a:hover,a:active {
	background-color:#00CCFF;
}

## html
<!DOCTYPE HTML>
<html>
<head>
 <!-- Head is the container for all of the head elements -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>QUT Video Gaming Society</title>
     <!-- The title is what is shown in the window of the browser or in the tab of the browser -->
     <meta name="description" content="Come join us play Video Games at QUT" />
      <!-- This is the meta tag for the description of the website which will be given to search engines -->
     <link rel="stylesheet" type="text/css" href="stylesheet.css" />
     <!-- This is what links the webpage to the cascading style sheet file -->
</head>
<body id="background">
    <div class="sitewrap">
        <div id="header"></div>
        <div id="blurb"></div>
        <div id="contentwrap">
               <div id="sidebar">
                  <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="/events.html">Events</a></li>
                    <li><a href="/about.html">About</a></li>
                    <li><a href="signup.html">Sign-Up</a></li>
                </ul>
                  <img src="Valve.jpg" width="210" >
              </div>
             <div id="content">
            <h1>Come Join Us!</h1>
            <form name="myForm" method="post" id="myForm">
                <p>First Name:<input type="text" name="firstname"><br/>
                Last Name:<input type="text" name="lastname"><br/>
                Email Address:<input type="text" name="email"><br/>
                How old are you?:<select name="age">
                    <option value="16-20">16-20</option>
                    <option value="20-30">20-30</option>
                    <option value="30-40">30-40</option>
                    <option value="40-50">40-50</option>
                    <option value="50-60">50-60</option>
                    <option value="60+">60+</option>
                    </select><br/>
                Are you Male<input type="radio" name="sex" value="male"> or Female<input type="radio" name="sex" value="female">?<br/><br/>
                What do you own? PC:<input type="checkbox" name="device" value="pc"> Xbox 360:<input type="checkbox" name="device" value="xbox360"> PS3:<input type="checkbox" name="device" value="ps3"> Wii:<input type="checkbox" name="device" value="wii"><br/><br/>
                <input type="submit" value="Submit Your Details">
                </p>
            </div>
        </div>
        <div id="footer"><h2>Designed by Jackson Kidd &copy;</div>
    </div>

     <script type="text/javscript" src="myForm.js"></script>
     <!-- This script was moved to the bottom to load all the HTML before the JavaScript is loaded-->
</body>
</html>

## js
function validateForm()
{
var x=document.forms["myForm"]["firstname"].value;
if (x==null||x=="")
	{
	alert("First name must be filled out");
	return false;
	}
}

var myForm = document.getElementById("myForm");
myForm.addEventListener("submit", validateForm);
	@charset "utf-8";
	/* CSS Document */

	html, body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	}

	h1 {
	text-decoration:underline;
	}

	h2 {
	font-size:9px;
	}

	p {
	font-size:18px;
	}

	.sitewrap {
	width:800px;
	height:auto;
	margin:0px auto;
	}

	#header {
	background:url(banner2.png);
	height:200px;
	width:auto;
	}

	#blurb {
	margin:10px 0px;
	width:auto;
	height:75px;
	background:url(navigation.png);
	}

	#contentwrap {
	margin:0px;
	width:auto;
	height:380px;
	background-image:url(background.png);
	}

	#sidebar {
	margin:5px;
	width:225px;
	height:370px;
	float:left;
	}

	#content {
	margin:5px;
	width:540px;
	height:370px;
	float:left;
	}

	#footer {
	margin:10px 0px;
	width:auto;
	height:40px;
	text-align:center;
	}

	#background {
	background:url(background6.png);
	}

	ul {
	list-style-type:none;
	margin:0px;
	}

	a:link,a:visited {
	display:block;
	width:120px;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#0099FF;
	text-align:center;
	margin:12px 0px;
	padding:12px;
	text-decoration:none;
	text-transform:uppercase;
	}

	a:hover,a:active {
	background-color:#00CCFF;
	}
	<!DOCTYPE HTML>
	<html>
	<head>
	<!-- Head is the container for all of the head elements -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>QUT Video Gaming Society</title>
	<!-- The title is what is shown in the window of the browser or in the tab of the browser -->
	<meta name="description" content="Come join us play Video Games at QUT" />
	<!-- This is the meta tag for the description of the website which will be given to search engines -->
	<link rel="stylesheet" type="text/css" href="stylesheet.css" />
	<!-- This is what links the webpage to the cascading style sheet file -->
	</head>
	<body id="background">
	<div class="sitewrap">
	<div id="header"></div>
	<div id="blurb"></div>
	<div id="contentwrap">
	<div id="sidebar">
	<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="/events.html">Events</a></li>
	<li><a href="/about.html">About</a></li>
	<li><a href="signup.html">Sign-Up</a></li>
	</ul>
	<img src="Valve.jpg" width="210" >
	</div>
	<div id="content">
	<h1>Come Join Us!</h1>
	<form name="myForm" method="post" id="myForm">
	<p>First Name:<input type="text" name="firstname"><br/>
	Last Name:<input type="text" name="lastname"><br/>
	Email Address:<input type="text" name="email"><br/>
	How old are you?:<select name="age">
	<option value="16-20">16-20</option>
	<option value="20-30">20-30</option>
	<option value="30-40">30-40</option>
	<option value="40-50">40-50</option>
	<option value="50-60">50-60</option>
	<option value="60+">60+</option>
	</select><br/>
	Are you Male<input type="radio" name="sex" value="male"> or Female<input type="radio" name="sex" value="female">?<br/><br/>
	What do you own? PC:<input type="checkbox" name="device" value="pc"> Xbox 360:<input type="checkbox" name="device" value="xbox360"> PS3:<input type="checkbox" name="device" value="ps3"> Wii:<input type="checkbox" name="device" value="wii"><br/><br/>
	<input type="submit" value="Submit Your Details">
	</p>
	</div>
	</div>
	<div id="footer"><h2>Designed by Jackson Kidd ©</div>
	</div>

	<script type="text/javscript" src="myForm.js"></script>
	<!-- This script was moved to the bottom to load all the HTML before the JavaScript is loaded-->
	</body>
	</html>
	function validateForm()
	{
	var x=document.forms["myForm"]["firstname"].value;
	if (x==null\|\|x=="")
	{
	alert("First name must be filled out");
	return false;
	}
	}

	var myForm = document.getElementById("myForm");
	myForm.addEventListener("submit", validateForm);