<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by MBM</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/all.css" />
<link rel="stylesheet" href="styles/contact.css" />
<script type="text/javascript" src="javascript/jquery-1.7.1.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Voltaire' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<title>Chocolate Review</title>
<meta name="Description" content="Chocolate Review" />
<meta name="Keywords" content="Chocolate Review" />
</head>
<br style="clear:left;"/>
<div class="container">
<div id="navigation">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">Dairy Milk</a></li>
<li><a href="#">Ferrero Rocher</a></li>
<li><a href="#">Kit Kat</a></li>
<li><a href="#">Mars</a></li>
<li><a href="#">Snickers</a></li>
<li><a href="#">Twix</a></li>
<li><a href="register.php">Register</a></li>
</ul>
</div>
<form action="register.php?CreateRecord=1" method="post" enctype="multipart/form-data" name="form1" id="reviewform">
<fieldset>
<legend><span class="formheading">Registration Form</span></legend>
<div class="form">
<div><p class="formtext">Please enter your forename</p><label for="forename">Forename</label><input id="forename" class="inset" name="forename" type="text" /></div>
<div><p class="formtext">Please enter your surname</p><label for="surname">Surname</label><input id="surname" class="inset" name="surname" type="text" /></div>
<div><p class="formtext">Please enter a username</p><label for="username">Username</label><input id="username" class="inset" name="username" type="text" /></div>
<div><p class="formtext">Please enter a password</p><label for="password">Password</label><input id="password" class="inset" name="password" type="text" /></div>
<div><p class="formtext">Please enter your e-mail address</p><label for="email">email address</label><input id="email" class="inset" name="email" type="text" /></div>
<div class="submit"><input name="Submit" type="Submit" class="submitbtn" value="Submit" /></div>
<div class="submit"><input name="Reset" type="Reset" class="resetbtn" value="Reset"/></div>
</div>
</fieldset>
</form>
<br clear="left" />
<p class="phpmessage"><?php print $message ; ?></p>
</body>
</html>
<!-- partial -->
</body>
</html>
/* Styles the form */
.insetreg {
left:72%;
font-family:'Voltaire', sans-serif;
font-size:22px;
position:relative;
top:4px;
margin-right:10px;
}
.insetcomments {
font-family:'Voltaire', sans-serif;
font-size:22px;
padding:6px 6px 6px 8px;
border:solid 1px #bcbbbb;
margin-bottom:15px;
outline:none;
box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
color:#000000;
background-color:#ffffff;
}
.label {float:left;position:absolute;}
.loginbtn {
left:92%;
font-family:'Voltaire', sans-serif;
font-size:20px;
border-width:1px;
border-color:#333333;
background-color:#6B4226;
color:#ffffff;
padding:4px 10px 4px 10px;
position:absolute;
top:4px;
height:33px;
width:120px;
}
.insetsubject {
font-family:'Voltaire', sans-serif;
font-size:22px;
padding:6px 6px 6px 8px;
border:solid 1px #bcbbbb;
margin-bottom:15px;
outline:none;
box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
color:#000000;
background-color:#ffffff;
width:1000px;
}
legend{
margin-top:40px;
font-family:'Voltaire', sans-serif;
font-size:22px;
padding:10px 139px 10px 0px;
background-color:#336699;
color:#ffffff;
position:absolute;
width:67.1em;
}
label {
display:block;
float:left;
width:120px;
text-align:right;
margin:12px 15px 0px 0px;
font-size:22px;
font-family:'Voltaire', sans-serif;
}
login {
float:left;
font-size:22px;
font-family:'Voltaire', sans-serif;
}
.input {
float:left;
font-family:'Voltaire', sans-serif;
font-size:22px;
padding:6px 6px 6px 8px;
border:solid 1px #bcbbbb;
margin-bottom:15px;
outline:none;
box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
color:#000000;
background-color:#ffffff;
}
.formheading {margin-left:320px;font-size:24px;}
.form {
font-size:30px;
float:left;
border:solid 1px #d2d2d2;
padding:40px 5px 80px 0px;
width:700px;
height:auto;
background-color:#6B4226;
color:#ffffff;
border:0px;
margin-top:90px;
margin-bottom:40px;
}
.form input:focus {
box-shadow:#33FF66 0 0px 8px;
}
.inset {
font-family:'Voltaire', sans-serif;
font-size:22px;
padding:6px 6px 6px 8px;
border:solid 1px #bcbbbb;
margin-bottom:15px;
outline:none;
box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
color:#000000;
background-color:#ffffff;
}
.comment {
font-family:'Voltaire', sans-serif;
font-size:22px;
height:160px;
border:solid 1px #bcbbbb;
outline:none;
box-shadow:inset 0 1px 2px rgba(0,0,0,.2);
color:#000;
background-color:#fff;
margin-bottom:10px;
}
/* Styles the buttons */
.submitbtn {
font-family:'Voltaire', sans-serif;
font-size:22px;
border-width:1px;
border-color:#333333;
background-color:#336699;
color:#ffffff;
padding:2px 10px 2px 10px;
position:absolute;
height:49px;
width:120px;
-moz-border-radius-bottomright:50px;
border-bottom-right-radius:50px;
}
.submitcbtn {
font-family:'Voltaire', sans-serif;
font-size:22px;
border-width:1px;
border-color:#333333;
background-color:#336699;
color:#ffffff;
padding:2px 10px 2px 10px;
position:absolute;
height:49px;
width:120px;
-moz-border-radius-bottomright:50px;
border-bottom-right-radius:50px;
}
.editbtn {
font-family:'Voltaire', sans-serif;
font-size:22px;
border-width:1px;
border-color:#333333;
background-color:#336699;
color:#ffffff;
padding:2px 10px 2px 40px;
position:absolute;
height:45px;
width:100px;
-moz-border-radius-bottomright:50px;
border-bottom-right-radius:50px;
}
.editcbtn {
font-family:'Voltaire', sans-serif;
font-size:22px;
border-width:1px;
border-color:#333333;
background-color:#336699;
color:#ffffff;
padding:2px 10px 2px 10px;
position:absolute;
height:49px;
width:120px;
-moz-border-radius-bottomright:50px;
border-bottom-right-radius:50px;
}
.resetbtn {
font-family:'Voltaire', sans-serif;
font-size:22px;
background-color:#336699;
color:#ffffff;
border-width:1px;
border-color:#333333;
padding:2px 20px 2px 10px;
position:absolute;
height:50px;
width:120px;
-moz-border-radius-bottomright:50px;
border-bottom-right-radius:50px;
}
.resetcbtn {
font-family:'Voltaire', sans-serif;
font-size:22px;
background-color:#336699;
color:#ffffff;
border-width:1px;
border-color:#333333;
padding:2px 20px 2px 10px;
position:absolute;
height:50px;
width:120px;
-moz-border-radius-bottomright:50px;
border-bottom-right-radius:50px;
}
fieldset {
border:0;
padding:0;
}
p.phpmessage {
font-family:'Cantora One';
color:#ffffff;
position:absolute;
}
p.formtext{
font-family:'Voltaire', sans-serif;
font-size:18px;
position:absolute;
margin-top:50px;
margin-left:300px;}
@media only screen and (min-width :1920px) {
/* FOR DESKTOP 1920 x 1080 */
legend{margin-top:100px;margin-left:40px; /* left position of form */}
.form {width:1610px;margin-top:120px;margin-left:40px; /* left position of form */}
.inset {width:600px;margin-bottom:40px;}
.comment {width:1014px;margin-left:300px;margin-top:30px;}
p.formtext{font-size:18px;}
label {
width:200px;
margin:10px 100px 0px 0px;
}
.lcomments {float:left;position:absolute;margin-top:30px;}
.submitbtn {margin-left:640px;margin-top:10px;} /* position of the send button */
.resetbtn {margin-left:800px;margin-top:10px;} /* position of the reset button */
.editbtn {margin-left:440px;margin-top:10px;} /* position of the send button */
.resetcbtn {margin-left:920px;margin-top:10px;} /* position of the reset button */
.editcbtn {margin-left:1060px;margin-top:10px;} /* position of the send button */
.submitcbtn {margin-left:1200px;margin-top:10px;} /* position of the send button */
p.phpmessage {font-size:20px;margin-top:80px;margin-left:1100px;width:500px;top:500px;}
/*container styling*/
div.container {
position:relative;
margin:0 auto 0;
background:#6B4226;
-moz-border-radius:10px;
top:20px;
width:90%;
padding-bottom:40px;
-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
-moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
box-shadow:2px 2px 1.0em hsla(0, 0%, 0%, 1.0);}
* {margin:0; padding:0;}
body {background:#ffffff;font-family:'Voltaire', sans-serif;font-size:20px;}
/*container styling*/
div.container {
position:relative;
margin:0 auto 0;
background:#6B4226;
-moz-border-radius:10px;
top:20px;
width:90%;
padding-bottom:40px;
-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
-moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
box-shadow:2px 2px 1.0em hsla(0, 0%, 0%, 1.0);}
/*Navigation styling */
#navigation {
width:100%;
background-color:#336699;
list-style:none;
padding:0;
float:left;
position:absolute;
margin-top:0px;
text-transform:uppercase;
}
#navigation li {
float:left;
border-right:1px solid #ffffff;
list-style-type:none;
}
#navigation li a {
font-family:'Voltaire', sans-serif;
border-right:1px solid #ffffff;
display:block;
color:#fff;
}
#navigation li a:hover {
background:#6B4226;
height:auto;
}
/*fixed footer styling */
#homefooter{
position:absolute;
width:100%;
text-align:center;
font-size:22px;
background-color:#336699;
color:#ffffff;
border-bottom:2px solid #fff;
border-top:2px solid #fff;
padding-top:20px;
padding-bottom:20px;
font-family:'Voltaire', sans-serif;
}
/*paragraph styling */
.footertext {font-size:24px;font-family:'Voltaire', sans-serif;margin-top:-5px;}
/*image styling */
.cap-bot img { display:block;}
figure img { display:block;}
/*paragrpah styling */
p.special {
font-family:'Voltaire', sans-serif;
font-size:22px;
background:#333333;
color:#ffffff;
width:360px;
padding:40px 30px 20px 80px;
position:aboslute;}
p.special2 {
font-family:'Voltaire', sans-serif;
font-size:22px;
background:#333333;
color:#ffffff;
width:360px;
padding:40px 30px 20px 80px;
position:aboslute;}
p.footer {margin-top:10px;font-family:'Voltaire', sans-serif;}
p.main {margin:30px;font-family:'Voltaire', sans-serif;font-size:22px;}
p.terms {margin-left:140px;padding-bottom:20px;font-family:'Voltaire', sans-serif;}
/*section styling */
/*#container{
width:100%;
font-family:'Voltaire';
font-size:22px;
float:left;
height:auto;
padding-bottom:10px;
background:#4f1b12;
color:#ffffff;
}
@media only screen and (max-width :1920px) {
/* FOR DESKTOP 1920 x 1080 */
/* Link Styling */
a:link {color:#ffffff; text-decoration:none}
a:visited {color:#ffffff; text-decoration:none}
a:hover {color:#ffffff; text-decoration:none}
/*fixed footer styling */
#homefooter{
position:relative;
bottom:-20px;
height:20px;/* Height of the footer */
margin-bottom:-20px;
}
/*fixed footer styling */
#documentfooter{
position:absolute;
bottom:0;
height:60px;/* Height of the footer */
margin-bottom:-60px;
}
/*Navigation styling */
#navigation {margin-left:0px;margin-top:0px;}
#navigation li a {padding:8px 41px;font-size:20px;width:auto;}
p.main {font-size:28px;margin:40px;}
p.terms {font-size:22px;margin-left:140px;}
p.chocolate {float:left;position:absolute;margin:40px 40px 20px 840px;font-size:26px;}