<!DOCTYPE HTML>

<html id="bgimage-buy">
	<head>
	<meta charset="utf-8">
	<title> Slightly Used Diffraculators </title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/style.css" />
	<link href='https://fonts.googleapis.com/css?family=PT+Sans:700%7cCabin:400,700' rel='stylesheet' type='text/css'> 
	<link href="images/favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
	<header class="bggreenbox pulsing">
		<nav>
			<ul>
				<li><a href="index.html">&#x1f3e0; Home</a></li>
				<li><a href="buy.html">&#x1F4B8; Buy</a></li>
				<li><a href="contact.html">&#x2709; Contact</a></li>
			</ul>
		</nav>
		<h1 class="yellowtext">
			Slightly Used Defraculator's&reg;
		</h1>
	</header>
	<div id="index-first-wrapper">
		<div class="index-first-leftfloat">
			<img src="images/3dprinter.png" alt="3D Printer">
		</div>
		<div class="index-first-rightfloat bgredbox bgroundbox">
			<section>
				<h2 class="whitetext">Order Now!</h2>
				<br>
				<p class="whitetext">Be the first in your neighborhood to own a one of a kind genuine totally not once covered in blood
				alien gadget!. If you buy now, we'll even throw in a cheap 3d printed case! Don't even think about.. don't even worry about
				it. Just click on that button and order now.
				</p>
			</section>
		</div>
		<div style="clear:both; margin:3em 0em;"></div>
		<div class="index-first-leftfloat">
			<img src="images/android.png" alt="Blue Android">
		</div>
		<div class="index-first-rightfloat bggreenbox bgroundbox">
			<section>
				<h2 class="whitetext">Defraculator's&reg; Order Form</h2>
			</section>
			<br>
				<form method="post" action="http://webdevbasics.net/scripts/demo.php">
            		<fieldset id="buy-form" class="whitetext">
							<label for="buy-form-firstname">Name</label>
							<input id="buy-form-firstname" name="First Name" type="text" tabindex="1" required><br>
					
							<label for="buy-form-lastname">Last Name</label>
							<input id="buy-form-lastname" name="Last Name" type="text" tabindex="2" required><br>
					
							<label for="buy-form-country">Country</label>
							<select id="buy-form-country" name="Country" tabindex="3" disabled>
								<option value="Canada">Canada</option>
							</select> <br>
			
							<label for="buy-form-province">Province</label>
							<select id="buy-form-province" name="Province" size="1" tabindex="4" required>
								<option value="" label="Choose"></option>
								<option value="AB">Alberta</option>
								<option value="BC">British Columbia</option>
								<option value="MB">Manitoba</option>
								<option value="NB">New Brunswick</option>
								<option value="NL">Newfoundland and Labrador</option>
								<option value="NS">Nova Scotia</option>
								<option value="ON">Ontario</option>
								<option value="PE">Prince Edward Island</option>
								<option value="QC">Quebec</option>
								<option value="SK">Saskatchewan</option>
								<option value="NT">Northwest Territories</option>
								<option value="NU">Nunavut</option>
								<option value="YT">Yukon</option>
							</select>	<br>						
			
						
				
							<label for="buy-form-city">City</label>
							<input id="buy-form-city" name="City" type="text" tabindex="5" required>
					
						
				
							<label for="buy-form-address">Address</label>
							<input id="buy-form-address" name="Address" type="text" tabindex="6" required>
			
						
			
							<label for="buy-form-postalcode">Postal Code</label>
							<input id="buy-form-postalcode" name="Postal Code" type="text" tabindex="7" required>
			
						
					
							<label for="buy-form-email">E-Mail</label>
							<input id="buy-form-email" name="Email" type="email" tabindex="8" required>
				
						
					
						<label for="buy-form-quantity">Quantity</label>
						<select id="buy-form-quantity" name="Quantity" size="1" tabindex="9" required>
							<option value="" label="None"></option>
							<option value="1">1</option>
							<option value="2">2</option>
							<option value="3">3</option>
							<option value="4">4</option>
							<option value="5">5</option>
							<option value="6">6</option>
							<option value="7">7</option>
							<option value="8">8</option>
							<option value="9">9</option>
							<option value="10">10</option>
						</select><br>	
				
						
			
							<input type="radio" name="creditcard" value="universecard" >Universe Card

							<input type="radio" name="creditcard" value="discover" >Discover?
					
							<input type="radio" name="creditcard" value="universecard">Mars Mastercard<br>
				
						
						<input type="submit" value="Purchase" id="buy-form-orderbutton">
		
					</fieldset>
				</form>

			


		</div>
	</div>
<div class="breakspace"></div>
	<div id="commentcontainer" class="bgbluebox bgroundbox">
			<h3>
				Leave a comment!
			</h3>
			<div class="comments-name">
				Poster: Rick Sanchez
			</div>
			
			<div class="comments-body">
				
				<img src="images/rick.png" alt="Rick Sanchez Avatar">
				<p>
					Wubalubbadubdub! Checkout this awesome website selling defraculators, am I right?  I mean there are pictures, border radius boxes, and a great product that could completely be a real thing. This has over 700 lines of CSS. I mean the CSS alone is longer than most wedding vows. Never mind that difficult colour scheme. You could only make a colour scheme like that work with illustrations. Two dimensions is definitely the best amount of dimensions. Nobody likes a Z-index, unless you count the built in browser rules for the background, and I think we all know that doesn't count.
				</p>
				
			</div>
		
			<div class="comments-nested">
				<div class="comments-name">
					Poster: Morty Smith
				</div>
				
				<div class="comments-body">
					
						<img src="images/morty.png" alt="Morty Smith Avatar">
					<p>
						Rick! You can't just break the fourth wall! I mean this is a serious thing. You know.. Maybe this guys future is hanging in the balance, we don't know. Academia is a serious thing and you're up here just mocking away like it's funny. I mean obviously he had trouble. Look at some of those repeating attributes. I mean those should be in classes or something. What is this thing for? Is it a weapon? You shouldn't talk about weapons in school these days.
					</p>
					
				</div>
			</div>
				<div id="index-comment-form">
			    	<form method="post" action="http://webdevbasics.net/scripts/demo.php">
	            		<fieldset>
							<div id="comment-float-left">
								<label for="index-form-name">Name</label>
								<input id="index-form-name" name="Name" type="text" tabindex="1" required><br>
		    					
								<label for="index-form-email">E-Mail</label>
								<input id="index-form-email" name="Email" type="email" tabindex="2" required><br>
							</div>
							<div id="comment-float-right">
								<label for="index-form-commentbox">Comment</label><br>
								<textarea id="index-form-commentbox" name="Comment" tabindex="3" rows="4" cols="30" required></textarea><br>
								<input type="submit" value="Post" id="index-form-orderbutton">
							</div>
						</fieldset>
					</form>
				
				</div>
		
		</div>
	<footer class="bgbluebox whitetext"> 
		<a href="resources/resources.txt">resources.txt</a>
	</footer>
</body>

</html>