products.html

<!doctype html>
<html>
<head>
	<title>Widgets-R-Us</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<link rel="shortcut icon" href="img/logo-small.png">
	<meta name="author" content="al37">
</head>
<body>
	<div class="content-box">
		
		<header>

			<div class="banner">
				<img class="logo" src="img/logo.png" alt="company logo">
				<h1 class="corporate-name">Widgets-R-Us</h1>
				<h3 class="motto">Making high-quality widgets since 1991</h3>
			</div>
			
			<nav>
				<ul>
					<li><a href="index.html">Home</a></li>
					<li><a href="products.html">Products</a></li>
					<li><a href="about.html">About</a></li>
				</ul>
			</nav>

		</header>

		<div class="message"><a href="mailto:sales@widgetsrus.com">Send us email</a> or call us to order any of our products.</div>

		<article>
			<div class="product">
				<img class="product-img" src="img/basic-widget.png" alt="image of the basic widget">
				<h4 class="product-name">Basic Widget</h4>
				<p class="product-intro">This is just your basic widget, nothing fancy</p>
				<p class="price">$10 each; $100 box of 20</p>
			</div>

			<div class="product">
				<img class="product-img" src="img/super-widget.png" alt="image of the super widget">
				<h4 class="product-name">Super Widget</h4>
				<p class="product-intro">A high-end widget that is really super</p>
				<p class="price">$20 each; $200 box of 20</p>
			</div>

			<div class="product">
				<img class="product-img" src="img/super-duper-widget.png" alt="image of the super duper widget">
				<h4 class="product-name">Super-Duper Widget</h4>
				<p class="product-intro">Our premium widget, the best of its kind!</p>
				<p class="price">$30 each; $300 box of 20</p>
			</div>

			<br>

		</article>

		<footer>
			<p>We ship for free in the continental United States! Call or <a href="mailto:sales@widgetsrus.com">email us</a> to place an order today.</p>
			<p>&copy; 2013 Widgets-R-Us</p>
		</footer>
		
	</div>

</body>
</html>