Chapter_02-Web_Development_101/etch_a_sketch/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<link href="style.css" rel="stylesheet" >
  <meta charset="utf-8" >
	<title>Etch Your Sketch!</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<h1>Etch-a-sketch</h1>
		</div>
		<div id="content">
			<div class="clear-board"><button>Clear Board</button></div>
			<div id="instructions">
				<p><strong>Instructions:</strong> Roll your mouse around the drawing board above. Every time your mouse enters the board it draws a new color!</p>
				<p>Draw over the same square a few times and it gets darker each time.</p>
				<p><strong>Pro tip:</strong> The header color is the next color your drawing will be!</p>
				<p>Hit the "clear board" button to start a fresh board. A window will pop up asking how many pixels wide you want the board to be. You probably don't want to go too far above 100 or it will be slow!</p>
				<p><strong>Have fun!</strong></p>
			</div>
		</div>
		<div id="footer">
			<ul>
				<li>Program built by <a href="http://katemcfaul.com">KateMcFaul.com</li>
			</ul>
		</div>
	</div>

<script src="scripts.js"></script>
</body>
</html>