diff --git a/src/spider.html b/src/spider.html
new file mode 100644
index 0000000..e9d96d7
--- /dev/null
+++ b/src/spider.html
@@ -0,0 +1,475 @@
+
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background: #fcdc58;
+  text-align: center;
+}
+
+#wrapper {
+  position: relative;
+  margin-bottom: 10px;
+  height: 300px;
+}
+
+#spiderman {
+  -webkit-animation: swinganimation 3.5s infinite alternate;
+  -moz-animation: swinganimation 3.5s infinite alternate;
+  -ms-animation: swinganimation 3.5s infinite alternate;
+  -o-animation: swinganimation 3.5s infinite alternate;
+  animation: swinganimation 3.5s infinite alternate;
+  position: absolute;
+  width: 70px;
+  height: 103px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
+#spiderman:before {
+  content: " ";
+  position: absolute;
+  width: 0;
+  height: 1000px;
+  left: 50%;
+  bottom: 100%;
+  margin-bottom: -18px;
+  margin-left: -1px;
+  border: solid;
+  border-width: 1px;
+  border-color: white;
+  z-index: 10;
+}
+#spiderman .head {
+  -webkit-border-radius: 15px 15px 10px 10px;
+  -moz-border-radius: 15px 15px 10px 10px;
+  -ms-border-radius: 15px 5px 10px 10px;
+  -o-border-radius: 15px 5px 10px 10px;
+  border-radius: 15px 15px 10px 10px;
+  position: absolute;
+  width: 28px;
+  height: 28px;
+  bottom: 5px;
+  left: 50%;
+  margin-left: -14px;
+  background: #ff6d36;
+  border: solid 1px #1b405f;
+  /* Neck */
+}
+#spiderman .head:before {
+  content: " ";
+  position: absolute;
+  height: 4px;
+  width: 8px;
+  top: -6px;
+  left: 50%;
+  margin-left: -5px;
+  background: #ff6d36;
+  border: solid 1px #1b405f;
+}
+#spiderman .head .ear-left,
+#spiderman .head .ear-right {
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: 100%;
+  border-style: solid;
+  border-color: #1b405f transparent transparent transparent;
+}
+#spiderman .head .ear-left:before,
+#spiderman .head .ear-right:before {
+  content: " ";
+  position: absolute;
+  width: 0;
+  height: 0;
+  top: -6px;
+  border-style: solid;
+  border-color: #ff6d36 transparent transparent transparent;
+}
+#spiderman .head .ear-left {
+  left: -1px;
+  border-width: 6px 8px 0 0;
+}
+#spiderman .head .ear-left:before {
+  left: 1px;
+  border-width: 5px 5px 0 0;
+}
+#spiderman .head .ear-right {
+  right: -1px;
+  border-width: 6px 0 0 8px;
+}
+#spiderman .head .ear-right:before {
+  right: 1px;
+  border-width: 5px 0 0 5px;
+}
+#spiderman .head .eye-left,
+#spiderman .head .eye-right {
+  -webkit-animation: eyesanimation 1s infinite alternate;
+  -moz-animation: eyesanimation 1s infinite alternate;
+  -ms-animation: eyesanimation 1s infinite alternate;
+  -o-animation: eyesanimation 1s infinite alternate;
+  animation: eyesanimation 1s infinite alternate;
+  -moz-border-radius-topleft: 50%;
+  -webkit-border-top-left-radius: 50%;
+  border-top-left-radius: 50%;
+  -moz-border-radius-topright: 50%;
+  -webkit-border-top-right-radius: 50%;
+  border-top-right-radius: 50%;
+  position: absolute;
+  width: 9px;
+  height: 2px;
+  bottom: 9px;
+  background: white;
+  border: solid 1px #1b405f;
+}
+#spiderman .head .eye-left {
+  left: 3px;
+}
+#spiderman .head .eye-right {
+  right: 3px;
+}
+#spiderman .body {
+  position: absolute;
+  width: 32px;
+  height: 34px;
+  top: 34px;
+  left: 50%;
+  margin-left: -16px;
+  background: #336687;
+  border: solid 1px #1b405f;
+  z-index: 2;
+}
+#spiderman .body:before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 4px;
+  right: 4px;
+  bottom: 0;
+  background: #ff6d36;
+}
+#spiderman .body:after {
+  content: " ";
+  position: absolute;
+  width: 36px;
+  height: 6px;
+  top: -7px;
+  left: 50%;
+  margin-left: -19px;
+  background: #ff6d36;
+  border: solid 1px #1b405f;
+  z-index: 0;
+}
+#spiderman .body .spider {
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -o-border-radius: 50%;
+  border-radius: 50%;
+  position: absolute;
+  width: 4px;
+  height: 10px;
+  left: 50%;
+  bottom: 5px;
+  margin-left: -2px;
+  background: #1b405f;
+}
+#spiderman .body .spider:before, #spiderman .body .spider:after {
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -o-border-radius: 50%;
+  border-radius: 50%;
+  content: " ";
+  position: absolute;
+  width: 10px;
+  height: 12px;
+  left: 50%;
+  margin-left: -6px;
+  border-style: double;
+  border-width: 1px;
+}
+#spiderman .body .spider:before {
+  top: 50%;
+  border-color: #1b405f transparent transparent transparent;
+}
+#spiderman .body .spider:after {
+  bottom: 50%;
+  border-color: transparent transparent #1b405f transparent;
+}
+#spiderman .body .arm-left,
+#spiderman .body .arm-right {
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  -ms-border-radius: 6px;
+  -o-border-radius: 6px;
+  border-radius: 6px;
+  -webkit-transform-origin: bottom center 0 50%;
+  -moz-transform-origin: bottom center 0 50%;
+  -ms-transform-origin: bottom center 0 50%;
+  -o-transform-origin: bottom center 0 50%;
+  transform-origin: bottom center 0 50%;
+  position: absolute;
+  width: 12px;
+  height: 54px;
+  bottom: -2px;
+  background: #336687;
+  border: solid 1px #1b405f;
+  z-index: 1;
+}
+#spiderman .body .arm-left:before,
+#spiderman .body .arm-right:before {
+  -webkit-border-radius: 6px 6px 0 0;
+  -moz-border-radius: 6px 6px 0 0;
+  -ms-border-radius: 6px 6px 0 0;
+  -o-border-radius: 6px 6px 0 0;
+  border-radius: 6px 6px 0 0;
+  content: " ";
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: 50%;
+  background: #ff6d36;
+  border: solid 1px #1b405f;
+}
+#spiderman .body .arm-left {
+  -webkit-transform: rotate(20deg);
+  -moz-transform: rotate(20deg);
+  -ms-transform: rotate(20deg);
+  -o-transform: rotate(20deg);
+  transform: rotate(20deg);
+  left: -9px;
+  z-index: 2;
+}
+#spiderman .body .arm-right {
+  -webkit-transform: rotate(-20deg);
+  -moz-transform: rotate(-20deg);
+  -ms-transform: rotate(-20deg);
+  -o-transform: rotate(-20deg);
+  transform: rotate(-20deg);
+  right: -9px;
+}
+#spiderman .legs {
+  -webkit-border-radius: 35px;
+  -moz-border-radius: 35px;
+  -ms-border-radius: 35px;
+  -o-border-radius: 35px;
+  border-radius: 35px;
+  position: absolute;
+  width: 70px;
+  height: 28px;
+  top: 6px;
+  left: 50%;
+  margin-left: -35px;
+  background: transparent;
+  border: solid 10px #1b405f;
+  z-index: 0;
+}
+#spiderman .legs:before {
+  -webkit-border-radius: 35px;
+  -moz-border-radius: 35px;
+  -ms-border-radius: 35px;
+  -o-border-radius: 35px;
+  border-radius: 35px;
+  content: " ";
+  position: absolute;
+  width: 52px;
+  height: 10px;
+  top: -9px;
+  left: 50%;
+  margin-left: -34px;
+  background: transparent;
+  border: solid 8px #336687;
+  z-index: 0;
+}
+#spiderman .legs .boot-left,
+#spiderman .legs .boot-right {
+  position: absolute;
+  width: 19px;
+  height: 12px;
+  top: -11px;
+  background: #ff6d36;
+  border: solid 1px #1b405f;
+}
+#spiderman .legs .boot-left:before, #spiderman .legs .boot-left:after,
+#spiderman .legs .boot-right:before,
+#spiderman .legs .boot-right:after {
+  content: " ";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+#spiderman .legs .boot-left {
+  right: 50%;
+  margin-right: 1px;
+}
+#spiderman .legs .boot-left:before {
+  top: -7px;
+  right: -1px;
+  border-color: transparent transparent #1b405f transparent;
+  border-width: 0 0 7px 7px;
+}
+#spiderman .legs .boot-left:after {
+  top: -5px;
+  right: 0;
+  border-color: transparent transparent #ff6d36 transparent;
+  border-width: 0 0 5px 5px;
+}
+#spiderman .legs .boot-right {
+  left: 50%;
+  margin-left: 1px;
+}
+#spiderman .legs .boot-right:before {
+  top: -7px;
+  left: -1px;
+  border-color: transparent transparent #1b405f transparent;
+  border-width: 0 7px 7px 0;
+}
+#spiderman .legs .boot-right:after {
+  top: -5px;
+  left: 0;
+  border-color: transparent transparent #ff6d36 transparent;
+  border-width: 0 5px 5px 0;
+}
+
+@-webkit-keyframes eyesanimation {
+  0% {
+    height: 2px;
+  }
+
+  100% {
+    height: 5px;
+  }
+}
+
+@-moz-keyframes eyesanimation {
+  0% {
+    height: 2px;
+  }
+
+  100% {
+    height: 5px;
+  }
+}
+
+@-ms-keyframes eyesanimation {
+  0% {
+    height: 2px;
+  }
+
+  100% {
+    height: 5px;
+  }
+}
+
+@keyframes eyesanimation {
+  0% {
+    height: 2px;
+  }
+
+  100% {
+    height: 5px;
+  }
+}
+
+@-webkit-keyframes swinganimation {
+  0% {
+    -webkit-transform: translateY(-100px);
+    -moz-transform: translateY(-100px);
+    -ms-transform: translateY(-100px);
+    -o-transform: translateY(-100px);
+    transform: translateY(-100px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px);
+  }
+}
+
+@-moz-keyframes swinganimation {
+  0% {
+    -webkit-transform: translateY(-100px);
+    -moz-transform: translateY(-100px);
+    -ms-transform: translateY(-100px);
+    -o-transform: translateY(-100px);
+    transform: translateY(-100px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px);
+  }
+}
+
+@-ms-keyframes swinganimation {
+  0% {
+    -webkit-transform: translateY(-100px);
+    -moz-transform: translateY(-100px);
+    -ms-transform: translateY(-100px);
+    -o-transform: translateY(-100px);
+    transform: translateY(-100px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px);
+  }
+}
+
+@keyframes swinganimation {
+  0% {
+    -webkit-transform: translateY(-100px);
+    -moz-transform: translateY(-100px);
+    -ms-transform: translateY(-100px);
+    -o-transform: translateY(-100px);
+    transform: translateY(-100px);
+  }
+
+  100% {
+    -webkit-transform: translateY(0px);
+    -moz-transform: translateY(0px);
+    -ms-transform: translateY(0px);
+    -o-transform: translateY(0px);
+    transform: translateY(0px);
+  }
+}
+
+
+<div id="wrapper">
+  <div id="spiderman">
+    <div class="head">
+      <div class="eye-left"></div>
+      <div class="eye-right"></div>
+    </div>
+    <div class="body">
+      <div class="spider"></div>
+      <div class="arm-left"></div>
+      <div class="arm-right"></div>
+    </div>
+    <div class="legs">
+      <div class="boot-left"></div>
+      <div class="boot-right"></div>
+    </div>
+  </div>
+</div>
+
+<p>Inspired by a dribbble from <a href="http://dribbble.com/MarkusM" target="_blank">Markus Magnusson</a>.</p>