bfl-itp · Astrolingus · Oct 30, 2014
diff --git a/Iconomation.html b/Iconomation.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Sharang's Iconomation Assignment: Sex Ed Part 1 Yay!</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: 500px;
+        height: 500px;
+        margin: auto;
+        position: relative;
+        border: 3px solid red;
+      }
+      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>
+  <body>
+    <h1>Sex Ed Part 1</h1>
+    <div class="playspace"></div>
+    <p><em>Refresh to see it again</em></p>
+    <script src="Iconomation.js"></script>
+  </body>
+</html>
diff --git a/Iconomation.js b/Iconomation.js
@@ -0,0 +1,43 @@
+// add icons
+$('.playspace').append('<i class="em em-person_with_blond_hair"></i>');
+$('.playspace').append('<i class="em em-woman"></i>');
+
+
+// set the initial positions
+
+$('.em-person_with_blond_hair').css({
+  top: 200,
+  left: 300
+});
+
+$('.em-woman').css({
+  top: 200,
+  left: 100
+});
+
+
+// play!
+
+$('.em-woman').animate({
+  left: 190
+}, 1000);
+
+$('.em-person_with_blond_hair').animate({
+  left: 200
+}, 1000);
+
+
+
+
+//after 660ms...
+setTimeout(function() {
+  //place baby
+
+  $('.playspace').append('<i class="em em-baby"></i>');
+
+  $('.em-baby').css({
+    top: 225,
+    left: 196
+  });
+
+}, 660);