Card Generator Starting Point

card-generator-template.html

<div id='wrapper'>

	<!-- HEADING -->
	<h1>Card Generator</h1>
	
	<!-- CARD SETTINGS ON THE LEFT -->
	<div id='left-side'>
		<h2>Pick a color</h2>
		
		<h2>Pick a texture</h2>
		
		<h2>Pick a message</h2>
		
		<h2>Enter your recipient</h2>
		
		<h2>Add some graphics</h2>
	</div>
	
	<!-- CARD SETTINGS ON THE RIGHT -->
	<div id='right-side'>
		<div id='card'>
        	<div id='canvas'></div>
        </div>
	</div>
	
	<!-- FOOTER -->
	<div id='footer'></div>
	
	
</div>

scripts.js

$(document).ready(function() { // start doc ready; do not delete this!
		
					
}); // end doc ready; do not delete this!

styles.css

* {
	font-family:verdana;
}

#wrapper {
	width:960px;
	margin:0px auto;
}

h1 {	
	text-align:center;
	font-size:30px;
	margin-top:25px;
	margin-bottom:25px;
}

h2 {
	font-family:Verdana;
	font-size:15px;
	margin-top:30px;
	margin-bottom:5px;
	border-bottom:1px dotted #ccc;
}

#left-side {
	width:425px;
	margin-right:50px;
	float:left;
}

#right-side {
	width:400px;
	float:left;
}

#card {
	background-image:url('images/card-background.jpg');
	background-repeat:no-repeat;
	height:513px;
	width:369px;
	margin:0px auto;
}

#canvas {
	width:338px;
	height:469px;
	position:relative;
	top:33px;
	left:16px;
	overflow:hidden;
}

.footer {
	clear:both;
}