Register

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Savana</title>
        <link rel="stylesheet" type="text/css" media="screen" href="css/registercss.css">

	</head>
	<body>
	<aside>
		        <h1>Register</h1>
		        <form action="file:///C:/xampp/htdocs/DWAD/login.html" method="POST">
			         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					 <label> Username:
	                        <input type="text" name="userid" size="30" style="height: 50px">
                     </label>
	                 <br>
	                 <br>
					 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	                 <label>Password:
	                        <input type="password" name="password" size="30" style="height: 50px" >
                     </label>
	                 <br>
	                 <br>
			         <label> Confirm Password:
					        <input type="password" name="password" size="30" style="height: 50px" >
			         </label>
					 <br>
					 <br>
					 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					 <label> Name:
					        <input type="text" name="number" size="30" style="height: 50px" >
					 </label>
					 <br>
					 <br>
					 <label> &nbsp;&nbsp;&nbsp;&nbsp;Contact Number:
					        <input type="text" name="number" size="30" style="height: 50px" >
					 </label>
					 <br>
					 <br>
					 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					 <label> Email Address:
					         <input type="email" placeholder="example@hotmail.com" size="30" style="height: 50px">
					 </label>
					 <br>
					 <br>
					 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					 <label>Role:
					        <select name="role" id="role" >
							       <option value="customer">Customer</option>
								   <option value="administrator">Administrator</option>
								   <option value="Staff">Staff</option>
							</select>
					 </label>
					 <br>
					 <br>
					 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					 <label>Gender:<label>
					         <input type="radio" name="male" id="male" value="male">
							 <label>Male</label>
					         <input type="radio" name="female" id="female" value="female">
							 <label>Female</label>
					<br>
					<br>


					 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					 <input type="checkbox" name="terms" id="terms" >
			         <label for="terms">By using our services, you are agreeing to the <a href="@">Terms and Conditions</a>.
					 <br>

					 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					 Please read them carefully and contact us if you have any queries.
					 </label>
					 <br>
			         <br>
		             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					 <button onclick="register()">Register</button>
					 <script>
					    function register(){
							  alert("You have successfully registered! Please verify your account using your email!");

}
			         </script>
	            </form>
				<br>
				<br>
		             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					 Or Login with

			         <a class ="logo1" href="https://www.twitter.com">
                     <img src="data:image/png;base64,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"
                     alt=Twitter height="40" width="40">
                     </a> |

			         <a class ="logo2" href="https://www.facebook.com">
			         <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAMAAAC8EZcfAAAAclBMVEU7WZj///83VpYvUZSUocFYb6Tg5e5VbqXb4OxUa6E/XJoZQYrt8PWzv9fX3eo9XJnFzuD5+vxsga/09vpNaKFFYZ2fqshcc6crTZLn6/JQaqJ4irSottAgRo6Ek7qLmbwTPonDy91keaq9xtyvvNWWp8e3wgJEAAACd0lEQVR4nO3ZW5eaMBSGYU0EUYEBUY6e0Jn//xcLtl2dFkLD2gk7F997zcWzAkR2XK0QQgghhBBCCCHN9qNxq/4kD13X3x1+di2l4IZ1CSn2u9vl9Wrb5F37ehd95pvmuTsz64So71FSpevR0iy8XDlvdCmbNlbgfhUd+IDi0STZpI4XKJ/J/3ScQHHOKw0fG1Cu2ulnjxkoz7EWjwsoC1/TxwMUJ9314wEKqe9jAZZf+j4OoGz03l8u4JwHkAUoN3MWcHmgqLV3GB7grDeEBaj1C8wHlMU83+LA8uI2UNTz7nC6NFA+s1mbTLeCj2WB92lfGvpB/L0gX3ZoEu0UL/vq58yPby09u0/+zPmNeI/q+7+AywrFxIdqfCwF+2GHOCpf4rSWzLg+2YQq4OXKjeuTN9WgHpxcOCea2GVeTvg6oPIOu/AE9h+rCl92dxxYHR25xSqgX7gO9ADUCkBqAFIDkBqA1ACkBuCsxLBSCdyNXN1nE7gddspVwGM9cvl261n8P/uU+MEg1VicjlzbFzf21nCnHIFnFFocBYwAY4vjshFgsnIeaC8zQIv7jBFgZHEnNAFMNxYPHAwA0+zoNnAdbh0HBmfHX5LW5teCCWBk81DOBPBSOg1M17nNk3UTK3hzewXXa5u7jAlgZnMBTQCrh+PA4OA4MLb695gBYOQ6cGP1Jaljf5gK3Y2dw4srmx9bXV7h/VutHtwH13pe8WHVN+/ow5MLn3uM59bh0UgAUgOQGoDUAKQGIDUAqQFIDUBqAFIDkBqA1ACkBiA1AKkBSA1AagBSA5AagNQApAYgNQCpAUgNQGoAUgOQGoDUAKQGIDWTwB8ueDa+Jh4jDAAAAABJRU5ErkJggg=="
			         alt=Facebook height="40" width="40">
			         </a>


		</aside>
	</body>
<html>


-----------------
input{
	font-size:1.1em;
}
label{
	font-size:1.1em;
}
h1{
	color:blue;
	font-size:2.3em;
	margin-left:145px;
}

button{
	height:55px ; width:230px;
	font-size:1.7em;

}
aside{
	margin-left:100px;
	margin-top:50px;
}