cobbweb/index.html

## index.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"></p>
                    <p>Last Name:<input type="text" name="lastname"></p>
                    <p>Email Address:<input type="text" name="email"></p>

                    <p>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>
                    </p>

                    <p>Are you Male<input type="radio" name="sex" value="male"> or Female<input type="radio" name="sex" value="female">?</p>
                    <p>What do you own?
                        <ul class="form-options">
                            <li><label>PC <input type="checkbox" name="device" value="pc"></label></li>
                            <li><label>Xbox 360 <input type="checkbox" name="device" value="xbox360"></label></li>
                            <li><label>PS3 <input type="checkbox" name="device" value="ps3"></label></li>
                            <li><label>Wii <input type="checkbox" name="device" value="wii"></label></li>
                        </ul>
                    </p>

                    <p><input type="submit" value="Submit Your Details"></p>
                </form>
            </div>
        </div>

        <div id="footer">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>

## myForm.js
function validateForm() {
    var firstName = document.forms["myForm"]["firstname"].value,
        lastName  = document.forms["myForm"]["lastname"].value;

    if (!firstName) {
        alert("First name must be filled out");
        return false;
    }

    if (!lastName) {
        alert("Last name must be filled out");
        return false;
    }
}

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

## stylesheet.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;
}

.form-options {
    list-style: none;
}


#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"></p>
	<p>Last Name:<input type="text" name="lastname"></p>
	<p>Email Address:<input type="text" name="email"></p>

	<p>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>
	</p>

	<p>Are you Male<input type="radio" name="sex" value="male"> or Female<input type="radio" name="sex" value="female">?</p>
	<p>What do you own?
	<ul class="form-options">
	<li><label>PC <input type="checkbox" name="device" value="pc"></label></li>
	<li><label>Xbox 360 <input type="checkbox" name="device" value="xbox360"></label></li>
	<li><label>PS3 <input type="checkbox" name="device" value="ps3"></label></li>
	<li><label>Wii <input type="checkbox" name="device" value="wii"></label></li>
	</ul>
	</p>

	<p><input type="submit" value="Submit Your Details"></p>
	</form>
	</div>
	</div>

	<div id="footer">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 firstName = document.forms["myForm"]["firstname"].value,
	lastName = document.forms["myForm"]["lastname"].value;

	if (!firstName) {
	alert("First name must be filled out");
	return false;
	}

	if (!lastName) {
	alert("Last 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;
	}

	.form-options {
	list-style: none;
	}


	#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;
	}