diff --git a/iconomation.css b/iconomation.css
new file mode 100644
index 0000000..13726d6
--- /dev/null
+++ b/iconomation.css
@@ -0,0 +1,26 @@
+body {
+background-image: url("paper.jpg");
+}
+box {
+    position: relative;}
+#green {
+    background: #d6ef39;
+    height: 165px;
+    width: 165px;
+    margin: 10px;
+    position: relative;
+}
+#blue {
+    background: #00a5c6;
+    height: 165px;
+    width: 165px;
+    margin: 10px;
+    position: relative;
+}
+#red {
+    background: #ce007b;
+    height: 165px;
+    width: 165px;
+    margin: 10px;
+    position: relative;
+}
\ No newline at end of file
diff --git a/iconomation.js b/iconomation.js
new file mode 100644
index 0000000..81643b4
--- /dev/null
+++ b/iconomation.js
@@ -0,0 +1,63 @@
+$(document).ready(function() {
+    $(".button").click(function() {
+        $("#green").animate({
+            height: "300px"
+        });
+        $("#blue").animate({
+            height: "400px"
+        });
+        $("#red").animate({
+            height: "500px"
+        });
+    });
+        $(".button2").click(function() {
+        $(".box").animate({
+            height: '50px',
+            width: '300px'
+        });
+    });
+
+    $(".button3").click(function() {
+        $("#green").animate({
+            width: "500px"
+        });
+        $("#blue").animate({
+            width: "600px"
+        });
+        $("#red").animate({
+            width: "700px"
+        });
+    });
+    $(".button4").click(function() {
+        $(".box").animate({
+            height: '300px',
+            width: '50px'
+        });
+    });
+    $(".button6").click(function() {
+        $('.box').removeAttr('style'); 
+    }); 
+        $(".button5").click(function() {
+            $(".box").css({ opacity: 0.8 });
+            var h = $(window).height();
+            var w = $(window).width();
+            $('.box').each(function() {
+                var originalOffset = $(this).position(),
+                    $this = $(this),
+                    tLeft = w - Math.floor(Math.random() * 900),
+                    tTop = h - Math.floor(Math.random() * 900);
+
+                $(this).animate({
+                    "left": tLeft,
+                    "top": tTop
+                }, 3000, function() {
+                    $this.animate({
+                        "left": originalOffset.left,
+                        "top": originalOffset.top+50
+                    }, 5000);
+                });
+            });
+        });
+    });
+
+
diff --git a/index.html b/index.html
index f1b9af2..cf0e840 100644
--- a/index.html
+++ b/index.html
@@ -1,31 +1,28 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>So-and-so's Iconomation Assignment</title>
-    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
-    <link href="http://afeld.github.io/emoji-css/emoji.css" rel="stylesheet">
-    <style>
-      body {
-        text-align: center;
-      }
-      .playspace {
-        width: 600px;
-        height: 400px;
-        margin: auto;
-        position: relative;
-        border: 3px solid green;
-      }
-      i {
-        position: absolute;
-      }
-    </style>
-    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
-    <script src="scripts/jquery-ui.min.js"></script>
-  </head>
+
+<head>
+
   <body>
-    <h1>Play Chicken!</h1>
-    <div class="playspace"></div>
-    <p><em>refresh to see it again</em></p>
-    <script src="scripts/iconomation.js"></script>
-  </body>
+   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+  <script language="javascript" type="text/javascript" src= "iconomation.js"></script>
+    <title>Amelia's Iconomation Assignment</title>
+
+    <link rel="stylesheet" type="text/css" href="iconomation.css">
+     
+        <button class="button">Tall</button>
+        <button class="button2">Short</button>
+        <button class="button3">Wide</button>
+        <button class="button4">Narrow</button>
+        <button class="button5">Animate!</button>
+        <button class="button6">reset</button>
+        <div class="box" id="green">
+        </div>
+        <div class="box" id="blue">
+        </div>
+        <div class="box" id="red">
+       
+       </div>
+    </body>
+</head>
 </html>
diff --git a/paper.jpg b/paper.jpg
new file mode 100644
index 0000000..6cba5af
Binary files /dev/null and b/paper.jpg differ
diff --git a/scripts/iconomation.js b/scripts/iconomation.js
index 6ac601e..3810446 100644
--- a/scripts/iconomation.js
+++ b/scripts/iconomation.js
@@ -1,31 +1,11 @@
-// add icons
-$('.playspace').append('<i class="em em-rooster"></i>');
-$('.playspace').append('<i class="fa fa-futbol-o"></i>');
-
-
-// set the initial positions
-
-$('.em-rooster').css({
-  top: 200,
-  left: 300
-});
-
-$('.fa-futbol-o').css({
-  top: 210,
-  left: 100
-});
-
-
-// play!
-
-$('.em-rooster').animate({
-  left: 50
-}, 1000);
-
-// after 660ms...
-setTimeout(function() {
-  // ...move the ball
-  $('.fa-futbol-o').animate({
-    left: 0
-  }, 800, 'easeOutQuart');
-}, 660);
+$(document).ready(function() {
+        $(".button").click(function() {
+            $(".box").animate({
+                height: "400px"
+            });
+        });
+        $(".button2").click(function() {
+            $(".box").animate({
+                height: "50px"
+            });
+        });
\ No newline at end of file
