Untitled

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Tech Store</title>
	<link href="https://fonts.googleapis.com/css?family=Barlow&display=swap" rel="stylesheet">


	<link rel="stylesheet" href="styles.css">

</head>
<body>

	<!--
tO do
1/create shop.com
2/add to css styling

	-->
	<header>
		<h1>Tech Store</h1>
			<nav>
				<ul>
					<li><a href="index.html">home</a></li>
					<li><a href="">shop</a></li>
					<li><a href="contact.html">contact us</a></li>
				</ul>
			</nav>
			<input type="search" placeholder="search...">
	</header>

	<aside>
		<h2>Shop By</h2>
			<section>
				<h3>Category</h3>
			<hr>
				<ul>
					<li>All Items</li>
					<li>Cameras</li>
					<li>Laptops</li>
					<li>Phones</li>
					<li>Accessories</li>
					<li>Other</li>
				</ul>
			</section>

		<section>
			<h3>Price <span>($)</span></h3>
		<hr>
			<ul>
				<li>1-9</li>
				<li>10-29</li>
				<li>30-59</li>
				<li>60-99</li>
				<li>100+</li>
			</ul>
		</section>
	</aside>

	<!-- Main seciton to display products-->

	<main>
		<h2>All Items:</h2>
			<div class="product">
				<a href="product-detail.html">
				<img src="images/controller.jpg" alt="game controller picture">
				</a>
				<h4><a href="product-detail.html">Game Cotroller </a>&#127918;</h4>
				<p>$ 79.95</p>
				<p>Awesome game controller<br>for xbox</p>
				<a href="product-detail.html" class="button">More Info</a>
				<a href="" class="button" id="position">Add To Cart</a>
			</div>
			<div class="product">
				<a href="product-detail.html">
				<img src="images/headphones.jpg" alt="white headphones picture">
				</a>
				<h4><a href="product-detail.html">White Headphones</a>
				</h4>
				<p>$ 54.95</p>
				<p>Awesome white<br>headphones!</p>
				<a href="product-detail.html" class="button">More Info</a>
				<a href="" class="button">Add To Cart</a>
			</div>
			<div class="product">
				<a href="product-detail.html">
				<img src="images/camera.jpg" alt="camera photo">
				</a>
				<h4><a href="">Canon Camera</a></h4>
				<p>$ 649.95</p>
				<p>Awesome Camera by<br>Canon</p>
				<a href="product-detail.html" class="button">More Info</a>
				<a href="" class="button">Add To Cart</a>

			</div>
			<div class="product">
				<a href="product-detail.html">
				<img src="images/microphone.jpg" alt="microphone photo">
				</a>
				<h4><a href="">Yeti Microphone</a></h4>
				<p>$ 119.95</p>
				<p>Awesome Blue<br>Yeti Microphone</p>
				<a href="product-detail.html" class="button">More Info</a>
				<a href="" class="button">Add To Cart</a>

			</div>
			<div class="product">
				<a href="product-detail.html">
				<img src="images/cables.jpg" alt="cables picture">
				</a>
				<h4><a href="">Cables</a></h4>
				<p>$ 10.95</p>
				<p>Awesome cables available<br>in different lengths!</p>
				<a href="product-detail.html" class="button">More Info</a>
				<a href="" class="button">Add To Cart</a>

			</div>
			<div class="product">
				<a href="product-detail.html">
				<img src="images/lenses.jpg" alt="lenses picture">
				</a>
				<h4><a href="">camera lenses</a></h4>
				<p>$ 99.95</p>
				<p>Awesome camera<br>lenses!</p>
				<a href="product-detail.html" class="button">More Info</a>
				<a href="" class="button">Add To Cart</a>
			</div>

	</main>

	<footer>
		<nav>
		<ul>
			<li><a href="index.html">home</a></li>
			<li><a href="">shop</a></li>
			<li><a href="contact.html">contact us</a></li>
		</ul>
		</nav>
	</footer>


</body>
</html>