diff --git a/css/main.css b/css/main.css
index e69de29b..4b36ffaf 100644
--- a/css/main.css
+++ b/css/main.css
@@ -0,0 +1,90 @@
+body {
+
+	background-color: #000;
+}
+
+.main {
+
+	background-color: white;
+  	margin-top: 110px;
+  	padding-left: 100px;
+  	min-width: 1200px;
+  	height: 500px;
+  	position: relative;
+  	z-index: 1;
+}
+
+.ryu,
+.hadouken {
+
+	float: left;
+}
+
+.ryu {
+
+	width: 659px;
+	height: 494px;
+}
+
+.ryu-still,
+.ryu-ready,
+.ryu-throwing,
+.ryu-cool	{
+
+	width: 659px;
+	height: 494px;
+	display: block;
+}
+
+.ryu-ready,
+.ryu-throwing,
+.ryu-cool {
+
+	display: none;
+}
+
+.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	{
+
+	background-repeat: no-repeat;
+}
+
+.hadouken {
+
+	background-image: url('../images/hadouken.gif');
+	width: 156px;
+	height: 90px;
+	display: none;
+	float: left;
+	position: absolute;
+	z-index: 10;
+	top:174px;
+	left:520px;
+}
+
+.instructions {
+
+	text-align: center;
+	padding-top: 100px;
+	padding-left: 20px;
+	padding-right: 20px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index c7f8ef61..2f461340 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,34 @@
 <!doctype html>
 <html lang="en">
+
 <head>
 	<meta charset="UTF-8">
-	<title>Streetfighter</title>
+	<meta name="description" content="The Street Fighter Game made with jQuery to animate the charachter Ryuman with hadouken and sounds">
+
+	<title>Street Fighter</title>
+	
 	<link rel="stylesheet" href="css/normalize.css">
 	<link rel="stylesheet" href="css/main.css">
+
 </head>
+
 <body>
-	
+	<div class="main">
+		<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 class="instructions">
+			<h1>Click on Ryu to make him throw Hadouken</h1>
+			<h1>Press 'X' key to make him stand in cool pose</h1>
+		</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..3601d39a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -0,0 +1,53 @@
+$(document).ready(function(){
+
+	//globalizing the key
+	var key = '0';
+	$('.ryu').mouseenter(function(){
+		$('.ryu-still').hide();
+		$('.ryu-ready').show();
+	})
+	.mouseleave(function(){
+		$('.ryu-ready').hide();
+		$('.ryu-still').show();
+	})
+	.mousedown(function(){
+		playHadouken();
+		$('.ryu-ready').hide();
+		$('.ryu-throwing').show();
+		$('.hadouken').finish().show().animate(
+			{'left': '1020px'},
+			500,
+			function(){
+				$('.hadouken').hide();
+				$('.hadouken').css('left','520px');
+			}
+		);
+	})
+	.mouseup(function(){
+		$('.ryu-throwing').hide();
+		$('.ryu-ready').show();
+	})
+	$(document).keydown( function(event){
+		key = (event.keyCode ? event.keyCode : event.which);
+		if (key == '88')
+		{
+			$('.ryu-still').hide();
+			$('.ryu-ready').hide();
+			$('.ryu-throwing').hide();
+			$('.ryu-cool').show();
+		}
+	})
+	.keyup(function(){
+		if (key == '88') 
+		{
+			$('.ryu-cool').hide();
+			$('.ryu-still').show();
+		}
+	});
+});
+
+function playHadouken () {
+	$('#hadouken-sound')[0].volume = 0.5;
+	$('#hadouken-sound')[0].load();
+	$('#hadouken-sound')[0].play();
+}
\ No newline at end of file
