diff --git a/README.md b/README.md
index 2706d92..d16479c 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
 # beng
 
-ancient thoughts ago... the followers of the great SRETSIS fought the ethereal war against the reapers of the same, led by the vile REHTORB... the start of the never end was marked by the coming of the seven sisters, who together reflected the face of one love, though revealing themselves only as thought. SILATNEM could change not only the shape of things, but the minds of men, TIRALOP, ITARBIV, TYHR, ITASUAC, OPSERROC & ENDEG, each gifted... but the cosmic cleansing had separated the sisters of one love, and so to entwine their intentions with timelessness, the siblings merged themselves into every soulful atom across the somethingverse... a dance had begun, one that will last for all human heartbeats, seeking to reunite the sisters & reignite the memory of the legendary eson, son of jam
+ancient thoughts ago... the followers of the great SRETSIS fought the ethereal war against the reapers of the same, led by the vile REHTORB... the start of the never end was marked by the coming of the seven sisters, who together reflected the face of one love, though revealing themselves only as thought. SILATNEM could change not only the shape of things, but the minds of men, TIRALOP, ITARBIV, TYHR, ITASUAC, OPSERROC & ENDEG, were each gifted... but the cosmic cleansing had separated the sisters of one love, and so to entwine their intentions with timelessness, the siblings merged themselves into every soulful atom across the somethingverse... a dance had begun, one that will last for all human heartbeats, seeking to reunite the sisters & reignite the memory of the legendary beng
 
 # about
 
-beng is a single or multi player game, designed with the aim of helping anyone to understand their emotions, through understanding their thoughts.
+beng is a single or multi player game, designed to help humans understand their emotions, through understanding their thoughts. 
 
 # contributers
 
@@ -27,4 +27,5 @@ beng is a single or multi player game, designed with the aim of helping anyone t
   <li>Jade - https://github.com/jade-neve</li>
   <li>Chante - https://github.com/ChanteMalan</li>
   <li>Ashley - https://github.com/aqhimngqoshe</li>
+  <li>Hugh - https://github.com/themeticus</li>
 </ul>
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..b4fee6a
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,435 @@
+body {
+  background: #95D4C3;
+}
+
+span {
+  display: block;
+}
+
+div.character {
+  width: 500px;
+  height: 500px;
+  margin: 0 auto;
+  text-align: center;
+  position: relative;
+}
+
+.little-dude {
+  text-align: center;
+  position: relative;
+  top: 25%;
+  display: inline-block;
+  -webkit-animation: levitation 3s ease-in-out infinite;
+  -moz-animation: levitation 3s ease-in-out infinite;
+  -ms-animation: levitation 3s ease-in-out infinite;
+  -o-animation: levitation 3s ease-in-out infinite;
+  animation: levitation 3s ease-in-out infinite;
+}
+.little-dude:hover .mouth {
+  height: 45px;
+}
+.little-dude:hover .mouth:after {
+  height: 10px;
+}
+.little-dude:hover .leg-left {
+  -webkit-animation: moveLegLeft .15s ease-in-out infinite;
+  -moz-animation: moveLegLeft .15s ease-in-out infinite;
+  -ms-animation: moveLegLeft .15s ease-in-out infinite;
+  -o-animation: moveLegLeft .15s ease-in-out infinite;
+  animation: moveLegLeft .15s ease-in-out infinite;
+}
+.little-dude:hover .leg-right {
+  -webkit-animation: moveLegRight .15s ease-in-out infinite;
+  -moz-animation: moveLegRight .15s ease-in-out infinite;
+  -ms-animation: moveLegRight .15s ease-in-out infinite;
+  -o-animation: moveLegRight .15s ease-in-out infinite;
+  animation: moveLegRight .15s ease-in-out infinite;
+}
+
+.dude-body {
+  background: #48ACE0;
+  margin: 0 auto;
+  width: 155px;
+  height: 200px;
+  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+  position: relative;
+  z-index: 4;
+}
+
+.face {
+  width: 105px;
+  position: relative;
+}
+
+.eyes {
+  width: 155px;
+  height: 40px;
+  position: relative;
+}
+.eyes .eye {
+  position: absolute;
+  width: 15px;
+  height: 40px;
+  background: black;
+  top: 25px;
+  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
+}
+.eyes .eye:after {
+  content: "";
+  display: block;
+  width: 4px;
+  height: 4px;
+  background: white;
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  border-radius: 50%;
+}
+.eyes .eye.eye-left {
+  left: 30%;
+}
+.eyes .eye.eye-right {
+  right: 30%;
+}
+
+.mouth {
+  width: 35px;
+  height: 10px;
+  background: black;
+  position: relative;
+  top: 30px;
+  left: 60px;
+  border-radius: 70% 70% 0% 0% / 140% 140% 0% 0%;
+  -webkit-transition: all .1s ease-in-out;
+  -moz-transition: all .1s ease-in-out;
+  -ms-transition: all .1s ease-in-out;
+  -o-transition: all .1s ease-in-out;
+  transition: all .1s ease-in-out;
+}
+.mouth:after {
+  content: "";
+  display: block;
+  width: 10px;
+  height: 4px;
+  background: #C6563D;
+  position: absolute;
+  bottom: 0;
+  left: 12px;
+  border-radius: 70% 70% 0% 0%;
+  -webkit-transition: all .1s ease-in-out;
+  -moz-transition: all .1s ease-in-out;
+  -ms-transition: all .1s ease-in-out;
+  -o-transition: all .1s ease-in-out;
+  transition: all .1s ease-in-out;
+}
+
+.ears .ear {
+  border: 5px solid #48ACE0;
+  width: 4px;
+  height: 45px;
+  border-radius: 50%;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  position: absolute;
+  -webkit-transform-origin: center;
+  -moz-transform-origin: center;
+  -ms-transform-origin: center;
+  -o-transform-origin: center;
+  transform-origin: center;
+}
+.ears .ear.ear-left {
+  left: 0px;
+  -webkit-transform: rotateZ(120deg);
+  -moz-transform: rotateZ(120deg);
+  -ms-transform: rotateZ(120deg);
+  -o-transform: rotateZ(120deg);
+  transform: rotateZ(120deg);
+}
+.ears .ear.ear-right {
+  left: 140px;
+  -webkit-transform: rotateZ(60deg);
+  -moz-transform: rotateZ(60deg);
+  -ms-transform: rotateZ(60deg);
+  -o-transform: rotateZ(60deg);
+  transform: rotateZ(60deg);
+}
+.ears .ear.ear.top {
+  top: 35px;
+}
+.ears .ear.ear.middle {
+  top: 50px;
+  -webkit-transform: rotateZ(90deg);
+  -moz-transform: rotateZ(90deg);
+  -ms-transform: rotateZ(90deg);
+  -o-transform: rotateZ(90deg);
+  transform: rotateZ(90deg);
+}
+.ears .ear.ear.bottom {
+  top: 60px;
+  -webkit-transform: rotateZ(60deg);
+  -moz-transform: rotateZ(60deg);
+  -ms-transform: rotateZ(60deg);
+  -o-transform: rotateZ(60deg);
+  transform: rotateZ(60deg);
+}
+.ears .ear.ear.bottom.ear-right {
+  -webkit-transform: rotateZ(110deg);
+  -moz-transform: rotateZ(110deg);
+  -ms-transform: rotateZ(110deg);
+  -o-transform: rotateZ(110deg);
+  transform: rotateZ(110deg);
+}
+
+.legs {
+  position: relative;
+  z-index: 2;
+}
+.legs > * {
+  width: 45px;
+  height: 25px;
+  border-radius: 50%;
+  background: #3585AD;
+  position: absolute;
+  -webkit-transform-origin: center;
+  -moz-transform-origin: center;
+  -ms-transform-origin: center;
+  -o-transform-origin: center;
+  transform-origin: center;
+}
+.legs .leg-left {
+  bottom: 5px;
+  left: 0px;
+  -webkit-transform: rotateZ(-105deg);
+  -moz-transform: rotateZ(-105deg);
+  -ms-transform: rotateZ(-105deg);
+  -o-transform: rotateZ(-105deg);
+  transform: rotateZ(-105deg);
+}
+.legs .leg-right {
+  bottom: 5px;
+  left: 30px;
+  -webkit-transform: rotateZ(105deg);
+  -moz-transform: rotateZ(105deg);
+  -ms-transform: rotateZ(105deg);
+  -o-transform: rotateZ(105deg);
+  transform: rotateZ(105deg);
+}
+
+.shadow {
+  display: block;
+  width: 110px;
+  height: 110px;
+  background: #69AA98;
+  border-radius: 50%;
+  left: 155px;
+  position: absolute;
+  bottom: 10%;
+  -webkit-transform: rotateX(100deg);
+  -moz-transform: rotateX(100deg);
+  -ms-transform: rotateX(100deg);
+  -o-transform: rotateX(100deg);
+  transform: rotateX(100deg);
+  -webkit-animation: shadow 3s ease-in-out infinite;
+  -moz-animation: shadow 3s ease-in-out infinite;
+  -ms-animation: shadow 3s ease-in-out infinite;
+  -o-animation: shadow 3s ease-in-out infinite;
+  animation: shadow 3s ease-in-out infinite;
+}
+
+/* keyframes */
+@-webkit-keyframes shadow {
+  0%, 100% {
+    -webkit-transform: scale(1) rotateX(100deg);
+    -moz-transform: scale(1) rotateX(100deg);
+    -ms-transform: scale(1) rotateX(100deg);
+    -o-transform: scale(1) rotateX(100deg);
+    transform: scale(1) rotateX(100deg);
+  }
+  50% {
+    -webkit-transform: scale(0.7) rotateX(100deg);
+    -moz-transform: scale(0.7) rotateX(100deg);
+    -ms-transform: scale(0.7) rotateX(100deg);
+    -o-transform: scale(0.7) rotateX(100deg);
+    transform: scale(0.7) rotateX(100deg);
+  }
+}
+@-moz-keyframes shadow {
+  0%, 100% {
+    -webkit-transform: scale(1) rotateX(100deg);
+    -moz-transform: scale(1) rotateX(100deg);
+    -ms-transform: scale(1) rotateX(100deg);
+    -o-transform: scale(1) rotateX(100deg);
+    transform: scale(1) rotateX(100deg);
+  }
+  50% {
+    -webkit-transform: scale(0.7) rotateX(100deg);
+    -moz-transform: scale(0.7) rotateX(100deg);
+    -ms-transform: scale(0.7) rotateX(100deg);
+    -o-transform: scale(0.7) rotateX(100deg);
+    transform: scale(0.7) rotateX(100deg);
+  }
+}
+@keyframes shadow {
+  0%, 100% {
+    -webkit-transform: scale(1) rotateX(100deg);
+    -moz-transform: scale(1) rotateX(100deg);
+    -ms-transform: scale(1) rotateX(100deg);
+    -o-transform: scale(1) rotateX(100deg);
+    transform: scale(1) rotateX(100deg);
+  }
+  50% {
+    -webkit-transform: scale(0.7) rotateX(100deg);
+    -moz-transform: scale(0.7) rotateX(100deg);
+    -ms-transform: scale(0.7) rotateX(100deg);
+    -o-transform: scale(0.7) rotateX(100deg);
+    transform: scale(0.7) rotateX(100deg);
+  }
+}
+/* Levitation of the dude */
+@-webkit-keyframes levitation {
+  0%, 100% {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    -o-transform: translateY(0);
+    transform: translateY(0);
+  }
+  50% {
+    -webkit-transform: translateY(-25px);
+    -moz-transform: translateY(-25px);
+    -ms-transform: translateY(-25px);
+    -o-transform: translateY(-25px);
+    transform: translateY(-25px);
+  }
+}
+@-moz-keyframes levitation {
+  0%, 100% {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    -o-transform: translateY(0);
+    transform: translateY(0);
+  }
+  50% {
+    -webkit-transform: translateY(-25px);
+    -moz-transform: translateY(-25px);
+    -ms-transform: translateY(-25px);
+    -o-transform: translateY(-25px);
+    transform: translateY(-25px);
+  }
+}
+@keyframes levitation {
+  0%, 100% {
+    -webkit-transform: translateY(0);
+    -moz-transform: translateY(0);
+    -ms-transform: translateY(0);
+    -o-transform: translateY(0);
+    transform: translateY(0);
+  }
+  50% {
+    -webkit-transform: translateY(-25px);
+    -moz-transform: translateY(-25px);
+    -ms-transform: translateY(-25px);
+    -o-transform: translateY(-25px);
+    transform: translateY(-25px);
+  }
+}
+/*! Leg Left */
+@-webkit-keyframes moveLegLeft {
+  0%, 100% {
+    -webkit-transform: rotateZ(75deg);
+    -moz-transform: rotateZ(75deg);
+    -ms-transform: rotateZ(75deg);
+    -o-transform: rotateZ(75deg);
+    transform: rotateZ(75deg);
+  }
+  50% {
+    -webkit-transform: rotateZ(100deg);
+    -moz-transform: rotateZ(100deg);
+    -ms-transform: rotateZ(100deg);
+    -o-transform: rotateZ(100deg);
+    transform: rotateZ(100deg);
+  }
+}
+@-moz-keyframes moveLegLeft {
+  0%, 100% {
+    -webkit-transform: rotateZ(75deg);
+    -moz-transform: rotateZ(75deg);
+    -ms-transform: rotateZ(75deg);
+    -o-transform: rotateZ(75deg);
+    transform: rotateZ(75deg);
+  }
+  50% {
+    -webkit-transform: rotateZ(100deg);
+    -moz-transform: rotateZ(100deg);
+    -ms-transform: rotateZ(100deg);
+    -o-transform: rotateZ(100deg);
+    transform: rotateZ(100deg);
+  }
+}
+@keyframes moveLegLeft {
+  0%, 100% {
+    -webkit-transform: rotateZ(75deg);
+    -moz-transform: rotateZ(75deg);
+    -ms-transform: rotateZ(75deg);
+    -o-transform: rotateZ(75deg);
+    transform: rotateZ(75deg);
+  }
+  50% {
+    -webkit-transform: rotateZ(100deg);
+    -moz-transform: rotateZ(100deg);
+    -ms-transform: rotateZ(100deg);
+    -o-transform: rotateZ(100deg);
+    transform: rotateZ(100deg);
+  }
+}
+/*! Leg Right */
+@-webkit-keyframes moveLegRight {
+  0%, 100% {
+    -webkit-transform: rotateZ(105deg);
+    -moz-transform: rotateZ(105deg);
+    -ms-transform: rotateZ(105deg);
+    -o-transform: rotateZ(105deg);
+    transform: rotateZ(105deg);
+  }
+  50% {
+    -webkit-transform: rotateZ(75deg);
+    -moz-transform: rotateZ(75deg);
+    -ms-transform: rotateZ(75deg);
+    -o-transform: rotateZ(75deg);
+    transform: rotateZ(75deg);
+  }
+}
+@-moz-keyframes moveLegRight {
+  0%, 100% {
+    -webkit-transform: rotateZ(105deg);
+    -moz-transform: rotateZ(105deg);
+    -ms-transform: rotateZ(105deg);
+    -o-transform: rotateZ(105deg);
+    transform: rotateZ(105deg);
+  }
+  50% {
+    -webkit-transform: rotateZ(75deg);
+    -moz-transform: rotateZ(75deg);
+    -ms-transform: rotateZ(75deg);
+    -o-transform: rotateZ(75deg);
+    transform: rotateZ(75deg);
+  }
+}
+@keyframes moveLegRight {
+  0%, 100% {
+    -webkit-transform: rotateZ(105deg);
+    -moz-transform: rotateZ(105deg);
+    -ms-transform: rotateZ(105deg);
+    -o-transform: rotateZ(105deg);
+    transform: rotateZ(105deg);
+  }
+  50% {
+    -webkit-transform: rotateZ(75deg);
+    -moz-transform: rotateZ(75deg);
+    -ms-transform: rotateZ(75deg);
+    -o-transform: rotateZ(75deg);
+    transform: rotateZ(75deg);
+  }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..24508ee
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
+	<link href="css/main.css" rel="stylesheet" type="text/css" />
+	<title>beng</title>
+</head>
+<body>
+	<!-- beng's world -->
+	<div class="somethingverse">
+		<!-- beng 1.0 -->
+		<div class="character">
+		  <div class="little-dude">
+		    <figure class="dude-body">
+		      <span class="face">
+		        <span class="eyes">
+		          <span class="eye eye-left"></span>
+		          <span class="eye eye-right"></span>
+		        </span>
+		        <span class="mouth"></span>
+		      </span>
+		    </figure>
+		    <figure class="ears">
+		      <span class="ear ear-left top"></span>
+		      <span class="ear ear-left middle"></span>
+		      <span class="ear ear-left bottom"></span>
+		      <span class="ear ear-right top"></span>
+		      <span class="ear ear-right middle"></span>
+		      <span class="ear ear-right bottom"></span>
+		    </figure>
+		    <figure class="legs">
+		      <span class="leg-left"></span>
+		      <span class="leg-right"></span>
+		    </figure>
+		  </div>
+		  <figure class="shadow"></figure>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 0000000..e69de29