diff --git a/css/main.css b/css/main.css
index e69de29b..e110845b 100644
--- a/css/main.css
+++ b/css/main.css
@@ -0,0 +1,66 @@
+body {
+	background-color: black;
+
+}
+
+.main {
+	background-color: white;
+	margin-top: 110px;
+	padding-left: 100px;
+	min-width: 1200px;
+	height: 500px;
+	position: relative;
+	z-index: 1;
+}
+
+.ryu {
+	width: 659px;
+	height: 494px;
+}
+
+.ryu-still, .ryu-ready, .ryu-throwing .ryu-cool {
+	width: 659px;
+	height: 494px;
+}
+
+.ryu-ready, .ryu-throwing, .ryu-cool {
+	display: none;
+}
+/*.ryu-thowing {
+	display: block;
+}*/
+
+.ryu-still {
+	background-image: url('../images/ryu-standing-still.png');
+
+}
+
+.ryu-ready {
+	background-image: url('../images/ryu-ready-position.gif');
+	
+}
+
+/*.ryu-throwing {
+	background-image: url('../images/ryu-throwing-hadouken.png');
+	
+}*/
+/*.ryu-cool {
+	background-image: url('../images/ryu-cool.gif');
+}*/
+
+.hadouken, .ryu-still, .ryu-ready, .ryu-throwing, .ryu-cool {
+	display: block;
+	background-repeat: no-repeat;
+}
+
+.hadouken {
+	background-image: url('../images/hadouken.gif');
+	width: 156px;
+	height: 90px;
+	display: none;
+	float: left;
+	position: absolute;
+	top: 167px;
+	left: 520px;
+	z-index: 10;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index c7f8ef61..b306e266 100644
--- a/index.html
+++ b/index.html
@@ -2,13 +2,25 @@
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
-	<title>Streetfighter</title>
-	<link rel="stylesheet" href="css/normalize.css">
+	<title></title>
+	<link rel="stylesheet" href="css/reset.css">
 	<link rel="stylesheet" href="css/main.css">
+	<script src="http://code.jquery.com/jquery.min.js"></script>
+	<script src="js/app.js"></script>
 </head>
 <body>
+	<div class="main">
+			<div class="ryu">
+				<div class="ryu-still"></div>
+				<div class="ryu-ready"></div>
+				<img class="ryu-throwing" src="images/ryu-throwing-hadouken.png">
+				<img class="ryu-cool" src="images/ryu-cool.gif">	
+			</div>
+			<div class="hadouken"></div>
+	</div>
+	<audio id="hadouken-sound" src="sound/hadouken.mp3">
+		
+				
 	
-	<script src="http://code.jquery.com/jquery.min.js"></script>
-	<script src="js/app.js"></script>
 </body>
 </html>
diff --git a/js/app.js b/js/app.js
index e69de29b..5836eb5b 100644
--- a/js/app.js
+++ b/js/app.js
@@ -0,0 +1,55 @@
+$(document).ready(function(){
+    $('.ryu').mouseenter(function(){
+        $('.ryu-still').hide();
+        $('.ryu-ready').show();
+    })
+    .mouseleave(function() {
+        $('.ryu-still').show();
+        $('.ryu-ready').hide();
+    })
+    .mousedown(function() {
+  		playHadouken();
+  		$('.ryu-ready').hide();
+  		$('.ryu-throwing').show();
+  		$('.hadouken').show()
+  		.animate(
+    	{'left': '1020px'}, 500,
+    function() {
+      	$('.hadouken').hide();
+      	$('.hadouken').css('left', '520px');
+    }); 
+
+	})
+    .mouseup(function(){
+        $('.ryu-throwing').hide();
+        $('.ryu-ready').show();
+    });
+ 	
+
+});
+
+function playHadouken() {
+    $('#hadouken-sound')[0].volume = 0.5;
+    $('#hadouken-sound')[0].load();
+    $('#hadouken-sound')[0].play();
+}
+//press "x" key to go into cool stance
+$(document).keydown(function ( event ) {
+      if (event.which == 88) {
+            $('.ryu-cool').show();
+            $('.ryu-ready').hide();
+            $('.ryu-still').hide();
+        }
+    })
+//press any key to have ryu at the ready
+$(document).keyup(function (event) {
+	if (event.which != 88) {
+		$('.ryu-ready').show();
+	}
+})
+
+
+
+
+
+
