Glen Lago .com

<body>
<div id="db">
<div id="nam"><a href="/">Glen Lago .com</a></div>
<div class="crlf"></div>
<div id="block">
<div id="axle"></div>
<div id="corner"></div>
</div>
<?php
$zA = array (0 => 1, 1 => 1000, 2 => 1000);
$bcA = array (0 => '#000', 1 => '#232323', 2 => '#232323');

for ($t=30; $t<=430; $t+=40) {
for ($l=460; $l<=860; $l+=40) {
$z = rand(0, 2);
echo "<div class=\"chiklet\" style=\"top:" . $t . "px;left:" . $l . "px;background-color:" . $bcA[$z] . ";z-index:" . $zA[$z] . "\"></div>\r\n";
}
echo "\r\n";
}
?>
</div>
</body>

@charset "UTF-8";
/* CSS Document */
#nam {
margin: 20px 10px 40px;
float: left;
text-shadow: 1px 1px 1px #208;
transform: rotateZ(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-webkit-transform: rotateZ(-10deg);
}

#block {
z-index: 10;
position: relative;
top: 0;
left: 30px;
margin: 0;
padding: 0;
width: 100px;
height: 100px;
background-color: #06C;
border: thin solid #06C;
animation: rot8 5s 4;
-o-animation: rot8 5s 4;
-ms-animation: rot8 5s 4;
-moz-animation: rot8 5s 4;
-webkit-animation: rot8 5s 4;
}

#corner {
z-index: 2;
position: absolute;
top: -18px;
left: -6px;
width: 10px;
height: 10px;
background-color: #C03;
border: thin dotted #C03;
border-radius: 6px;
animation: rainbo 5s 4;
-o-animation: rainbo 5s 4;
-ms-animation: rainbo 5s 4;
-moz-animation: rainbo 5s 4;
-webkit-animation: rainbo 5s 4;
}

@keyframes rot8 {
0% {
left: 40px;
}
60% {
left: 800px;
border-color: #399;
background-color: #399;
transform: rotateZ(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
}
100% {
left: 30px;
border-color: #06C;
background-color: #06C;
transform: rotateZ(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
}
}

@-webkit-keyframes rot8 {
0% {
left: 30px;
}
60% {
left: 800px;
border-color: #399;
background-color: #399;
transform: rotateZ(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
}
100% {
left: 30px;
border-color: #06C;
background-color: #06C;
transform: rotateZ(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
}
}

@keyframes rainbo {
0% {
border-color: #C03;
background-color: #C03;
}
60% {
border-color: #0C3;
background-color: #0C3;
}
100% {
border-color: #C03;
background-color: #C03;
}
}

@-webkit-keyframes rainbo {
0% {
border-color: #C03;
background-color: #C03;
}
60% {
border-color: #0C3;
background-color: #0C3;
}
100% {
border-color: #C03;
background-color: #C03;
}
}