Moonwalk

Tutorials of (Moonwalk) by Dustin leer

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Moonwalk</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="wrapper">
<div class="astronaut1">
  <!--ASTRONAUT'S MOVE 1-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut2">
  <!--ASTRONAUT'S MOVE 2-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut3">
  <!--ASTRONAUT'S MOVE 3-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>

</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut4">
  <!--ASTRONAUT'S MOVE 4-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut5">
  <!--ASTRONAUT'S MOVE 5-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut6">
  <!--ASTRONAUT'S MOVE 6-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut7">
  <!--ASTRONAUT'S MOVE 7-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="astronaut8">
  <!--ASTRONAUT'S MOVE 8-->
<!--01-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--02-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--03-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--04-->
<ul>
<li></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--05-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--06-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--07-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--08-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--09-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
</ul>
<!--10-->
<ul>
<li class="pixel white"></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
</ul>
<!--11-->
<ul>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel red"></li>
<li class="pixel red"></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
</ul>
<!--12-->
<ul>
<li></li>
<li class="pixel white"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--13-->
<ul>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li class="pixel white"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li class="pixel grey"></li>
<li class="pixel grey"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!--14-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
* {
margin:0;
padding:0;
}

body {
overflow:hidden;
margin:0 auto; 
background:#000;
}

.wrapper {
width:500px;
position:relative;
margin-top:3em; 
display:block;
background:#000;

-webkit-animation:moonwalk 5s linear infinite;
   -moz-animation:moonwalk 5s linear infinite;
    -ms-animation:moonwalk 5s linear infinite;
     -o-animation:moonwalk 5s linear infinite;
        animation:moonwalk 5s linear infinite;
}

@-webkit-keyframes moonwalk {
from {left:120%;  }
to   {left:-500px;}
}

@-moz-keyframes moonwalk {
from {left:120%;  }
to   {left:-500px;}
}

@-ms-keyframes moonwalk {
from {left:120%;  }
to   {left:-500px;}
}

@-o-keyframes moonwalk {
from {left:120%;  }
to   {left:-500px;}
}

@keyframes moonwalk {
from {left:120%;  }
to   {left:-500px;}
}

ul {
list-style:none;
display:inline-block;
}

ul li {
margin-right:-4px;
background:#000;
}

.pixel,
ul li {
width:10px;
height:10px;
}

.grey  {background:#ccc;}
.white {background:#fff;}
.red   {background: red;}

.astronaut1,
.astronaut2,
.astronaut3,
.astronaut4,
.astronaut5,
.astronaut6,
.astronaut7,
.astronaut8 {position:absolute;}

.astronaut1 {
-webkit-animation:move1 1s linear infinite;
   -moz-animation:move1 1s linear infinite;
    -ms-animation:move1 1s linear infinite;
     -o-animation:move1 1s linear infinite;
        animation:move1 1s linear infinite;
}
.astronaut2 {
-webkit-animation:move2 1s linear infinite;
   -moz-animation:move2 1s linear infinite;
    -ms-animation:move2 1s linear infinite;
     -o-animation:move2 1s linear infinite;
        animation:move2 1s linear infinite;
}
.astronaut3 {
-webkit-animation:move3 1s linear infinite;
   -moz-animation:move3 1s linear infinite;
    -ms-animation:move3 1s linear infinite;
     -o-animation:move3 1s linear infinite;
        animation:move3 1s linear infinite;
}
.astronaut4 {
-webkit-animation:move4 1s linear infinite;
   -moz-animation:move4 1s linear infinite;
    -ms-animation:move4 1s linear infinite;
     -o-animation:move4 1s linear infinite;
        animation:move4 1s linear infinite;
}
.astronaut5 {
-webkit-animation:move5 1s linear infinite;
   -moz-animation:move5 1s linear infinite;
    -ms-animation:move5 1s linear infinite;
     -o-animation:move5 1s linear infinite;
        animation:move5 1s linear infinite;
}
.astronaut6 {
-webkit-animation:move6 1s linear infinite;
   -moz-animation:move6 1s linear infinite;
    -ms-animation:move6 1s linear infinite;
     -o-animation:move6 1s linear infinite;
        animation:move6 1s linear infinite;
}
.astronaut7 {
-webkit-animation:move7 1s linear infinite;
   -moz-animation:move7 1s linear infinite;
    -ms-animation:move7 1s linear infinite;
     -o-animation:move7 1s linear infinite;
        animation:move7 1s linear infinite;
}
.astronaut8 {
-webkit-animation:move8 1s linear infinite;
   -moz-animation:move8 1s linear infinite;
    -ms-animation:move8 1s linear infinite;
     -o-animation:move8 1s linear infinite;
        animation:move8 1s linear infinite;
}

/*MOVE1*/
@-webkit-keyframes move1 {
0%   {opacity:1;}
12%  {opacity:1;}
13%  {opacity:0;}
99%  {opacity:1;}
100% {opacity:0;}
}
@-moz-keyframes move1 {
0%   {opacity:1;}
12%  {opacity:1;}
13%  {opacity:0;}
99%  {opacity:1;}
100% {opacity:0;}
}
@-ms-keyframes move1 {
0%   {opacity:1;}
12%  {opacity:1;}
13%  {opacity:0;}
99%  {opacity:1;}
100% {opacity:0;}
}
@-o-keyframes move1 {
0%   {opacity:1;}
12%  {opacity:1;}
13%  {opacity:0;}
99%  {opacity:1;}
100% {opacity:0;}
}
@keyframes move1 {
0%   {opacity:1;}
12%  {opacity:1;}
13%  {opacity:0;}
99%  {opacity:1;}
100% {opacity:0;}
}

/*MOVE2*/
@-webkit-keyframes move2 {
0%   {opacity:0;}
12%  {opacity:0;}
13%  {opacity:1;}
23%  {opacity:1;}
24%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move2 {
0%   {opacity:0;}
12%  {opacity:0;}
13%  {opacity:1;}
23%  {opacity:1;}
24%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move2 {
0%   {opacity:0;}
12%  {opacity:0;}
13%  {opacity:1;}
23%  {opacity:1;}
24%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move2 {
0%   {opacity:0;}
12%  {opacity:0;}
13%  {opacity:1;}
23%  {opacity:1;}
24%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move2 {
0%   {opacity:0;}
12%  {opacity:0;}
13%  {opacity:1;}
23%  {opacity:1;}
24%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

/*MOVE3*/
@-webkit-keyframes move3 {
0%   {opacity:0;}
23%  {opacity:0;}
24%  {opacity:1;}
34%  {opacity:1;}
35%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move3 {
0%   {opacity:0;}
23%  {opacity:0;}
24%  {opacity:1;}
34%  {opacity:1;}
35%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move3 {
0%   {opacity:0;}
23%  {opacity:0;}
24%  {opacity:1;}
34%  {opacity:1;}
35%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move3 {
0%   {opacity:0;}
23%  {opacity:0;}
24%  {opacity:1;}
34%  {opacity:1;}
35%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move3 {
0%   {opacity:0;}
23%  {opacity:0;}
24%  {opacity:1;}
34%  {opacity:1;}
35%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

/*MOVE4*/
@-webkit-keyframes move4 {
0%   {opacity:0;}
34%  {opacity:0;}
35%  {opacity:1;}
45%  {opacity:1;}
46%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move4 {
0%   {opacity:0;}
34%  {opacity:0;}
35%  {opacity:1;}
45%  {opacity:1;}
46%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move4 {
0%   {opacity:0;}
34%  {opacity:0;}
35%  {opacity:1;}
45%  {opacity:1;}
46%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move4 {
0%   {opacity:0;}
34%  {opacity:0;}
35%  {opacity:1;}
45%  {opacity:1;}
46%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move4 {
0%   {opacity:0;}
34%  {opacity:0;}
35%  {opacity:1;}
45%  {opacity:1;}
46%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

/*MOVE5*/
@-webkit-keyframes move5 {
0%   {opacity:0;}
45%  {opacity:0;}
46%  {opacity:1;}
56%  {opacity:1;}
57%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move5 {
0%   {opacity:0;}
45%  {opacity:0;}
46%  {opacity:1;}
56%  {opacity:1;}
57%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move5 {
0%   {opacity:0;}
45%  {opacity:0;}
46%  {opacity:1;}
56%  {opacity:1;}
57%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move5 {
0%   {opacity:0;}
45%  {opacity:0;}
46%  {opacity:1;}
56%  {opacity:1;}
57%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move5 {
0%   {opacity:0;}
45%  {opacity:0;}
46%  {opacity:1;}
56%  {opacity:1;}
57%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

/*MOVE6*/
@-webkit-keyframes move6 {
0%   {opacity:0;}
56%  {opacity:0;}
57%  {opacity:1;}
67%  {opacity:1;}
68%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move6 {
0%   {opacity:0;}
56%  {opacity:0;}
57%  {opacity:1;}
67%  {opacity:1;}
68%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move6 {
0%   {opacity:0;}
56%  {opacity:0;}
57%  {opacity:1;}
67%  {opacity:1;}
68%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move6 {
0%   {opacity:0;}
56%  {opacity:0;}
57%  {opacity:1;}
67%  {opacity:1;}
68%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move6 {
0%   {opacity:0;}
56%  {opacity:0;}
57%  {opacity:1;}
67%  {opacity:1;}
68%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

/*MOVE7*/
@-webkit-keyframes move7 {
0%   {opacity:0;}
67%  {opacity:0;}
68%  {opacity:1;}
78%  {opacity:1;}
79%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move7 {
0%   {opacity:0;}
67%  {opacity:0;}
68%  {opacity:1;}
78%  {opacity:1;}
79%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move7 {
0%   {opacity:0;}
67%  {opacity:0;}
68%  {opacity:1;}
78%  {opacity:1;}
79%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move7 {
0%   {opacity:0;}
67%  {opacity:0;}
68%  {opacity:1;}
78%  {opacity:1;}
79%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move7 {
0%   {opacity:0;}
67%  {opacity:0;}
68%  {opacity:1;}
78%  {opacity:1;}
79%  {opacity:0;}
99%  {opacity:0;}
100% {opacity:0;}
}

/*MOVE8*/
@-webkit-keyframes move8 {
0%   {opacity:0;}
78%  {opacity:0;}
79%  {opacity:1;}
89%  {opacity:1;}
90%  {opacity:0;}
100% {opacity:0;}
}

@-moz-keyframes move8 {
0%   {opacity:0;}
78%  {opacity:0;}
79%  {opacity:1;}
89%  {opacity:1;}
90%  {opacity:0;}
100% {opacity:0;}
}

@-ms-keyframes move8 {
0%   {opacity:0;}
78%  {opacity:0;}
79%  {opacity:1;}
89%  {opacity:1;}
90%  {opacity:0;}
100% {opacity:0;}
}

@-o-keyframes move8 {
0%   {opacity:0;}
78%  {opacity:0;}
79%  {opacity:1;}
89%  {opacity:1;}
90%  {opacity:0;}
100% {opacity:0;}
}

@keyframes move8 {
0%   {opacity:0;}
78%  {opacity:0;}
79%  {opacity:1;}
89%  {opacity:1;}
90%  {opacity:0;}
100% {opacity:0;}
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Moonwalk ) is write by Dustin Leer, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Dustin Leer