index.htm

<!DOCTYPE html> 
<html lang="en" class="no-js"> 
<head class="html5reset-kitchensink-clean"> 
<meta charset="utf-8" /> 
<title>Treebit.fm Labs | CSS3 Only Tabs</title>
<link href="style.css" rel="stylesheet" type="text/css"> 
<link href="http://fonts.googleapis.com/css?family=Yellowtail" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head> 
<body>

<div id="container" class="clearfix">
<div id="content">
<h1>Animated 3D Pixel Font with CSS3</h1>
<p>Click on a letter, or use your keyboard!</p>
<p>(You'll need a somewhat recent version of Chrome, <del>Firefox</del>, or Safari.)</p>
<div id="letter-selector" class="clearfix">
<!-- Chrome shows some weird 3D transition movements when tabindex is set; Safari is smooth as butter -->
<a href="#A">A</a>
<a href="#B">B</a>
<a href="#C">C</a>
<a href="#D">D</a>
<a href="#E">E</a>
<a href="#F">F</a>
<a href="#G">G</a>
<a href="#H">H</a>
<a href="#I">I</a>
<a href="#J">J</a>
<a href="#K">K</a>
<a href="#L">L</a>
<a href="#M">M</a>
<a href="#N">N</a>
<a href="#O">O</a>
<a href="#P">P</a>
<a href="#Q">Q</a>
<a href="#R">R</a>
<a href="#S">S</a>
<a href="#T">T</a>
<a href="#U">U</a>
<a href="#V">V</a>
<a href="#W">W</a>
<a href="#X">X</a>
<a href="#Y">Y</a>
<a href="#Z">Z</a>
</div>
</div>

<!-- Start of Container -->
<div id="alphabet-container" class="clearfix">

<div id="A" class="letter-container">
<!-- Top Row -->
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="B" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="C" class="letter-container">
<!-- Top Row -->
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="D" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="E" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="F" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="G" class="letter-container">
<!-- Top Row -->
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="H" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="I" class="letter-container">
<!-- Top Row -->
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x2 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x2 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="J" class="letter-container">
<!-- Top Row -->
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x3 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="K" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="L" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="M" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x4 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x4 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x4 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x4 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x4 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="N" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="O" class="letter-container">
<!-- Top Row -->
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="P" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="Q" class="letter-container">
<!-- Top Row -->
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Sixth Row -->
<div class="x3 y5">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="R" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="S" class="letter-container">
<!-- Top Row -->
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x1 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="T" class="letter-container">
<!-- Top Row -->
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x2 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x2 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="U" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="V" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="W" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x4 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x4 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x0 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x4 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x4 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="X" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x1 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x0 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x0 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="Y" class="letter-container">
<!-- Top Row -->
<div class="x0 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x0 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x1 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x3 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>

<div id="Z" class="letter-container">
<!-- Top Row -->
<div class="x1 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y0">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Second Row -->
<div class="x3 y1">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Third Row -->
<div class="x2 y2">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fourth Row -->
<div class="x1 y3">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<!-- Fifth Row -->
<div class="x1 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x2 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
<div class="x3 y4">
  <ul class="cube">
    <li class="side one"></li>
    <li class="side two"></li>
    <li class="side three"></li>
    <li class="side four"></li>
    <li class="side five"></li>
    <li class="side six"></li>
  </ul>
</div>
</div>
</div>
<!-- End of Container -->
<div id="about">
<h1>About</h1>
<p>This little experiment is basically a modificaction of Peter Magenheimer's <a href="http://peterjmags.com/css3-animated-type/">Animated Pixel Font with CSS3</a> that includes CSS3 3D transforms. Just like Peter's experiment this is pretty much pure HTML5 and CSS3, with only minor touches of jQuery to add keyboard support and to fix certain bugs that arose during the creation of the experiment.</p>
<p>The source code <a href="https://github.com/Reita/Animated-3D-Pixel-Font-with-CSS3">has been posted on GitHub</a> for your studying and forking pleasure.</p>
<p>For now this demo should work on Safari and Chrome under Windows and Mac OS X; for some odd reason I couldn't get 3D transforms to work on my Linux box.</p>
<h1>Credits</h1>
<p>As I said this experiment is a rewritten version of Peter Magenheimer's experiment; I even tried to replicate the layout and just added minor changes.</p>
<p>The typeface used for the titles is called <a href="http://www.google.com/webfonts/specimen/Yellowtail">Yellowtail</a> and is available on Google Web Fonts.</p>
</div>

</div>
<footer>
<ul>
<li>Built by <a href="http://twitter.com/Reita">Ale Tello</a></li>
<li><a href="#about">About/Credits</a></li>
</ul>
</footer>

</body>
</html>