demo2/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Container Queries: Once More Unto the Breach - Demos</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" type="text/css" href="../theme.css">
	<link rel="stylesheet" type="text/css" href="styles.css">

	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Source+Code+Pro|Pathway+Gothic+One' rel='stylesheet' type='text/css'>
</head>

<body>
	<header class="demo-lead">
		<h1 class="logo-hed">Whitworth Tools</h1>
	</header>
	<div class="demo">

		<div class="col-b featured">
			<h2 class="page-hed">Featured Item</h2>

			<div class="mod">
				<div class="mod-header">
					<h3 class="heading">Bocoup Mfg. Corp. <strong>Hammer</strong></h3>
					<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
				</div>

				<img src="../img/hammer.jpg" alt="A hammer">

				<div class="mod-desc">
					<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
						mollit anim id est laborum.</p>

					<div class="mod-cost">
						<del class="cost-prev">$12.95</del>
						<p class="cost-curr">$9.95</p>
					</div>

					<div class="mod-buy">
						<p class="buy-remaining">Only 3 left!</p>
						<input type="submit" value="Add to Cart" class="btn btn-buy">
					</div>
				</div>
			</div>

		</div>

		<div class="col-a">

			<h2 class="page-hed">New Items</h2>
			<div class="items three-col">

				<div class="mod">
					<div class="mod-header">
						<h2 class="heading">ALA Toolworks <strong>Wrench Set</strong></h2>
						<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
					</div>
				<img src="../img/wrenches.jpg" alt="A set of Whitworth wrenches">

					<div class="mod-desc">
						<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur.</p>

						<div class="mod-cost">
							<del class="cost-prev">$79.95</del>
							<p class="cost-curr">$64.95</p>
						</div>

						<div class="mod-buy">
							<p class="buy-remaining">Only 3 left!</p>
							<input type="submit" value="Add to Cart" class="btn btn-buy">
						</div>
					</div>
				</div>

				<div class="mod">
					<div class="mod-header">
						<h2 class="heading">Bocoup Mfg. Corp. <strong>Socket Set</strong></h2>
						<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
					</div>
					<img src="../img/sockets.jpg" alt="a set of Whitworth sockets">

					<div class="mod-desc">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
						ut labore et dolore magna aliqua.</p>

						<div class="mod-cost">
							<del class="cost-prev">$55.95</del>
							<p class="cost-curr">$49.95</p>
						</div>

						<div class="mod-buy">
							<p class="buy-remaining">Only 3 left!</p>
							<input type="submit" value="Add to Cart" class="btn btn-buy">
						</div>
					</div>
				</div>

				<div class="mod">
					<div class="mod-header">
						<h2 class="heading">ALA Toolworks <strong>Tap &amp; Die Set</strong></h2>
						<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
					</div>
					<img src="../img/tapanddie.jpg" alt="A Whitworth tap and die set">

					<div class="mod-desc">
						<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>

						<div class="mod-cost">
							<del class="cost-prev">$129.95</del>
							<p class="cost-curr">$110.95</p>
						</div>

						<div class="mod-buy">
							<p class="buy-remaining">Only 3 left!</p>
							<input type="submit" value="Add to Cart" class="btn btn-buy">
						</div>
					</div>
				</div>

			</div>
			<div class="items three-col">

				<div class="mod">
					<div class="mod-header">
						<h2 class="heading">ALA Toolworks <strong>Thread Gauges</strong></h2>
						<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
					</div>
					<img src="../img/threads.jpg" alt="A set of Whitworth thread gauges">

					<div class="mod-desc">
						<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>

						<div class="mod-cost">
							<del class="cost-prev">$10.95</del>
							<p class="cost-curr">$8.95</p>
						</div>

						<div class="mod-buy">
							<p class="buy-remaining">Only 3 left!</p>
							<input type="submit" value="Add to Cart" class="btn btn-buy">
						</div>
					</div>
				</div>

				<div class="mod">
					<div class="mod-header">
						<h2 class="heading">Bocoup Mfg. Corp. <strong>Socket Set</strong></h2>
						<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
					</div>
					<img src="../img/sockets.jpg" alt="a set of Whitworth sockets">

					<div class="mod-desc">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
						ut labore et dolore magna aliqua.</p>

						<div class="mod-cost">
							<del class="cost-prev">$55.95</del>
							<p class="cost-curr">$49.95</p>
						</div>

						<div class="mod-buy">
							<p class="buy-remaining">Only 3 left!</p>
							<input type="submit" value="Add to Cart" class="btn btn-buy">
						</div>
					</div>
				</div>

				<div class="mod">
					<div class="mod-header">
						<h2 class="heading">ALA Toolworks <strong>Wrench Set</strong></h2>
						<p class="meta">Triumph/Norton/<abbr title="Birmingham Small Arms Company">BSA</abbr></p>
					</div>
				<img src="../img/wrenches.jpg" alt="A set of Whitworth wrenches">

					<div class="mod-desc">
						<p>Duis aute irure dolor in reprehenderit in voluptate velit esse
						cillum dolore eu fugiat nulla pariatur.</p>

						<div class="mod-cost">
							<del class="cost-prev">$79.95</del>
							<p class="cost-curr">$64.95</p>
						</div>

						<div class="mod-buy">
							<p class="buy-remaining">Only 3 left!</p>
							<input type="submit" value="Add to Cart" class="btn btn-buy">
						</div>
					</div>
				</div>

			</div>

		</div>


	</div>
</body>
</html>