diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..e69de29b
diff --git a/css/main.css b/css/main.css
index e69de29b..568ce0d8 100644
--- a/css/main.css
+++ b/css/main.css
@@ -0,0 +1,64 @@
+body{
+	background-color: black;
+}
+
+.container .main {
+  background-color: white;
+  margin-top: 110px;
+  padding-left: 100px;
+  min-width: 1200px;
+  height: 500px;
+  position: relative;
+  z-index: 1;
+}
+.p-one p{
+	float: center;
+	min-width: 1200px;
+	padding-left: 620px;
+	
+}
+.ryu {
+    width: 659px;
+    height: 494px;
+    float: left;
+}
+
+.ryu-ready, .ryu-still, .ryu-throwing, .ryu-cool {
+  width: 659px;
+  height: 494px;
+}
+
+.ryu-ready, .ryu-throwing, .ryu-cool {
+  display: none;
+} 
+
+.ryu-ready {
+  background-image: url('../images/ryu-ready-position.gif');
+}
+
+.ryu-still {
+  background-image: url('../images/ryu-standing-still.png');
+}
+
+.ryu-throwing {
+  background-image: url('../images/ryu-throwing-hadouken.png');
+}
+
+.ryu-cool {
+	background-image: url('../images/ryu-cool.gif');
+}
+
+.hadouken {
+  background-image: url('../images/hadouken.gif');
+  width: 156px; 
+  height: 90px;
+  display: none;
+  position: absolute;
+  z-index: 10;
+  top: 160px;
+  left:600px;
+  float: left;
+}
+ .hadouken, .ryu-ready, .ryu-still, .ryu-throwing, .ryu-cool {
+  background-repeat: no-repeat;
+}
\ No newline at end of file
diff --git a/css/main2.css b/css/main2.css
new file mode 100644
index 00000000..32641b57
--- /dev/null
+++ b/css/main2.css
@@ -0,0 +1,71 @@
+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 {
+   float: left;
+   width: 659px;
+   height: 494px;
+}
+
+.ryu-ready, .ryu-still, .ryu-throwing, .ryu-cool {
+   width: 659px;
+   height: 494px;
+}
+
+.ryu-ready, .ryu-throwing, .ryu-cool {
+   display: none;
+}
+   
+.ryu-ready {
+   background-image: url("../images/ryu-ready-position.gif");
+}
+
+.ryu-still {
+   background-image: url("../images/ryu-standing-still.png");
+}
+
+.ryu-throwing {
+   background-image: url("../images/ryu-throwing-hadouken.png");
+}
+
+.ryu-cool {
+   background-image: url("../images/ryu-cool.gif");
+}
+
+.hadouken, .ryu-ready, .ryu-still, .ryu-throwing, .ryu-cool {
+   background-repeat: no-repeat;
+}
+
+.hadouken {
+   background-image: url(../images/hadouken.gif);
+   width: 156px;
+   height: 90px;
+   display: none;
+   position: absolute;
+   top: 160px;
+   left: 550px;
+   z-index: 10;
+}
+
+.instructions {
+   position: absolute;
+   font-style: italic;
+   font-size: 2em;
+   height: 10em;
+   width: 15em;
+   top: 2em;
+   left: 22em;
+   
+   
+}
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
index e69de29b..7664da84 100644
--- a/js/app.js
+++ b/js/app.js
@@ -0,0 +1,48 @@
+$(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').finish().show().animate(
+  		{'left': '1020px'}, 500,
+  		function(){
+  			$(this).hide();
+  			$(this).css('left','600px');
+  		
+  		});
+
+  	})
+  	// show hadouken and animate it to the right of the screen
+  .mouseup(function() {
+    $('ryu-throwing').hide();
+    $('.ryu-ready').show();
+    // ryu goes back to his ready position
+});
+ $(document).keydown(function(e){
+	if (e.keyCode == 88){
+	$('.ryu-ready').hide();
+	$('.ryu-throwing').hide();
+	$('.ryu-cool').show();
+	}
+ }).keyup(function(e){
+if (e.keyCode == 88){
+	$('.ryu-cool').hide();
+	$('.ryu-ready').show();
+	}
+})
+
+  });
+
+ function playHadouken (){
+  	$('#hadouken-sound')[0].volume = 0.5;
+  	$('#hadouken-sound')[0].load();
+    $('#hadouken-sound')[0].play();
+}
diff --git a/js/app2.js b/js/app2.js
new file mode 100644
index 00000000..b6c3c43b
--- /dev/null
+++ b/js/app2.js
@@ -0,0 +1,55 @@
+$(document).ready(function() {
+   $('.ryu').mouseenter(function() {
+       hideRyu();
+       $('.ryu-ready').show();
+   })
+   .mouseleave(function() {
+       hideRyu();
+       $('.ryu-still').show();
+   })
+   .mousedown(function() {
+       playHadouken();
+       hideRyu();
+       $('.ryu-throwing').show();
+       $('.hadouken').finish().show()
+           .animate(
+           {'left': '1020px'},
+           500,
+           function() {
+               $(this).hide();
+               $(this).css('left', '520px');
+           }
+       );
+   })
+   .mouseup(function() {
+       hideRyu();
+       $('.ryu-ready').show();
+   });
+});  
+
+$(document).keydown(function(keyPress) { 
+if (keyPress.keyCode === 88) {
+   hideRyu();
+   $('.ryu-cool').show();
+   $('.main').addClass("ryu-pose");
+   console.log("key pressed")
+   } 
+});
+$(document).keyup(function() { 
+   hideRyu();
+   $(".ryu-ready").show(); 
+   $(".main").removeClass('ryu-pose');
+   console.log('key up')
+});
+
+function playHadouken() {
+   $('#hadouken-sound')[0].volume = 0.5;
+   $('#hadouken-sound')[0].load();
+   $('#hadouken-sound')[0].play();
+}
+function hideRyu() {
+   $('.ryu-ready').hide();
+   $('.ryu-throwing').hide();
+   $('.ryu-still').hide();
+   $('.ryu-cool').hide();
+}
\ No newline at end of file
diff --git a/main.html b/main.html
index c7f8ef61..f2d6dfdb 100644
--- a/main.html
+++ b/main.html
@@ -7,8 +7,28 @@
 	<link rel="stylesheet" href="css/main.css">
 </head>
 <body>
+	<div class="container">
+		<div class="main">
+		<div class= "p-one">
+		<p>Press and hold 'X' to make Ryu strike a pose.
+		</p>
+	</div>
+		
+			<div class="ryu">
+				<div class="ryu-still"></div>
+  				<div class="ryu-ready"></div>
+  				<div class="ryu-throwing"></div>
+				<div class="ryu-cool"></div>
+				</div>
+					 <div class="hadouken"></div>
+			</div>
+			</div>
+		
+	  
+		
+	<audio id="hadouken-sound" src="sound/hadouken.mp3">
 	
-	<script src="http://code.jquery.com/jquery.min.js"></script>
+	<script src="https://code.jquery.com/jquery.min.js"></script>
 	<script src="js/app.js"></script>
 </body>
 </html>
diff --git a/main2.css b/main2.css
new file mode 100644
index 00000000..32641b57
--- /dev/null
+++ b/main2.css
@@ -0,0 +1,71 @@
+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 {
+   float: left;
+   width: 659px;
+   height: 494px;
+}
+
+.ryu-ready, .ryu-still, .ryu-throwing, .ryu-cool {
+   width: 659px;
+   height: 494px;
+}
+
+.ryu-ready, .ryu-throwing, .ryu-cool {
+   display: none;
+}
+   
+.ryu-ready {
+   background-image: url("../images/ryu-ready-position.gif");
+}
+
+.ryu-still {
+   background-image: url("../images/ryu-standing-still.png");
+}
+
+.ryu-throwing {
+   background-image: url("../images/ryu-throwing-hadouken.png");
+}
+
+.ryu-cool {
+   background-image: url("../images/ryu-cool.gif");
+}
+
+.hadouken, .ryu-ready, .ryu-still, .ryu-throwing, .ryu-cool {
+   background-repeat: no-repeat;
+}
+
+.hadouken {
+   background-image: url(../images/hadouken.gif);
+   width: 156px;
+   height: 90px;
+   display: none;
+   position: absolute;
+   top: 160px;
+   left: 550px;
+   z-index: 10;
+}
+
+.instructions {
+   position: absolute;
+   font-style: italic;
+   font-size: 2em;
+   height: 10em;
+   width: 15em;
+   top: 2em;
+   left: 22em;
+   
+   
+}
\ No newline at end of file
diff --git a/main2.html b/main2.html
new file mode 100644
index 00000000..a4d16a5e
--- /dev/null
+++ b/main2.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <title>Streetfighter</title>
+   <link rel="stylesheet" href="css/normalize.css">
+   <link rel="stylesheet" href="css/main2.css">
+   <script src="http://code.jquery.com/jquery.min.js"></script>
+   <script src="js/app2.js"></script>
+</head>
+<body>
+   <div class="main">
+       <audio id="hadouken-sound" src="sound/hadouken.mp3"></audio>
+       <div class="ryu">
+           <div class="ryu-still"></div>
+           <div class="ryu-ready"></div>
+           <div class="ryu-throwing"></div>
+           <div class="ryu-cool"></div>
+       </div>
+       <div class="instructions">
+           <p>Click on Ryu to throw a hadouken.</p>
+           <p>Press and hold X to make Ryu strike a pose!</p>
+       </div>
+       <div class="hadouken"></div>
+   </div>
+</body>
+</html>
\ No newline at end of file