.poster
- var r = 0
while r < 5
.row
- var i = 0
while i < 10
.invader
-i++
-r++
h1.game-over Game Over, Man!
h2.aliens Aliens
View Compiled
$color-a: #c3bfad;
$color-b: rgba(#222, 0);
$color-c: #455528;
body {
background: #222;
font-size: 8px;
}
.poster{
background: linear-gradient($color-c, darken($color-c, 15));
border: 5em solid $color-a;
margin: 20em auto;
padding: 25em 5em 10em;
width: 132em;
}
.row{
display: block;
height: 10em;
width: 100%;
&:nth-child(even){
.invader{
animation-delay: .5s;
}
}
}
.invader{
background: rgba($color-a,0);
display: inline;
float: left;
height: 1em;
margin-right: 12em;
margin-bottom: 10em;
width: 1em;
animation: pulse 1s infinite;
&:nth-child(even){
}
}
@keyframes pulse {
0%,49.999%,100% {
box-shadow:
2em 0em 0 $color-b, 3em 0em 0 $color-b, 4em 0em 0 $color-a, 5em 0em 0 $color-b, 6em 0em 0 $color-b, 7em 0em 0 $color-b, 8em 0em 0 $color-b, 9em 0em 0 $color-b, 10em 0em 0 $color-a, 11em 0em 0 $color-b, 12em 0em 0 $color-b,
2em 1em 0 $color-b, 3em 1em 0 $color-b, 4em 1em 0 $color-b, 5em 1em 0 $color-a, 6em 1em 0 $color-b, 7em 1em 0 $color-b, 8em 1em 0 $color-b, 9em 1em 0 $color-a, 10em 1em 0 $color-b, 11em 1em 0 $color-b, 12em 1em 0 $color-b,
2em 2em 0 $color-b, 3em 2em 0 $color-b, 4em 2em 0 $color-a, 5em 2em 0 $color-a, 6em 2em 0 $color-a, 7em 2em 0 $color-a, 8em 2em 0 $color-a, 9em 2em 0 $color-a, 10em 2em 0 $color-a, 11em 2em 0 $color-b, 12em 2em 0 $color-b,
2em 3em 0 $color-b, 3em 3em 0 $color-a, 4em 3em 0 $color-a, 5em 3em 0 $color-b, 6em 3em 0 $color-a, 7em 3em 0 $color-a, 8em 3em 0 $color-a, 9em 3em 0 $color-b, 10em 3em 0 $color-a, 11em 3em 0 $color-a, 12em 3em 0 $color-b,
2em 4em 0 $color-a, 3em 4em 0 $color-a, 4em 4em 0 $color-a, 5em 4em 0 $color-a, 6em 4em 0 $color-a, 7em 4em 0 $color-a, 8em 4em 0 $color-a, 9em 4em 0 $color-a, 10em 4em 0 $color-a, 11em 4em 0 $color-a, 12em 4em 0 $color-a,
2em 5em 0 $color-a, 3em 5em 0 $color-b, 4em 5em 0 $color-a, 5em 5em 0 $color-a, 6em 5em 0 $color-a, 7em 5em 0 $color-a, 8em 5em 0 $color-a, 9em 5em 0 $color-a, 10em 5em 0 $color-a, 11em 5em 0 $color-b, 12em 5em 0 $color-a,
2em 6em 0 $color-a, 3em 6em 0 $color-b, 4em 6em 0 $color-a, 5em 6em 0 $color-b, 6em 6em 0 $color-b, 7em 6em 0 $color-b, 8em 6em 0 $color-b, 9em 6em 0 $color-b, 10em 6em 0 $color-a, 11em 6em 0 $color-b, 12em 6em 0 $color-a,
2em 7em 0 $color-b, 3em 7em 0 $color-b, 4em 7em 0 $color-b, 5em 7em 0 $color-a, 6em 7em 0 $color-a, 7em 7em 0 $color-b, 8em 7em 0 $color-a, 9em 7em 0 $color-a, 10em 7em 0 $color-b, 11em 7em 0 $color-b, 12em 7em 0 $color-b;
}
50%,99.999% {
box-shadow:
2em 0em 0 $color-b, 3em 0em 0 $color-b, 4em 0em 0 $color-a, 5em 0em 0 $color-b, 6em 0em 0 $color-b, 7em 0em 0 $color-b, 8em 0em 0 $color-b, 9em 0em 0 $color-b, 10em 0em 0 $color-a, 11em 0em 0 $color-b, 12em 0em 0 $color-b,
2em 1em 0 $color-b, 3em 1em 0 $color-b, 4em 1em 0 $color-b, 5em 1em 0 $color-a, 6em 1em 0 $color-b, 7em 1em 0 $color-b, 8em 1em 0 $color-b, 9em 1em 0 $color-a, 10em 1em 0 $color-b, 11em 1em 0 $color-b, 12em 1em 0 $color-b,
2em 2em 0 $color-a, 3em 2em 0 $color-b, 4em 2em 0 $color-a, 5em 2em 0 $color-a, 6em 2em 0 $color-a, 7em 2em 0 $color-a, 8em 2em 0 $color-a, 9em 2em 0 $color-a, 10em 2em 0 $color-a, 11em 2em 0 $color-b, 12em 2em 0 $color-a,
2em 3em 0 $color-a, 3em 3em 0 $color-a, 4em 3em 0 $color-a, 5em 3em 0 $color-b, 6em 3em 0 $color-a, 7em 3em 0 $color-a, 8em 3em 0 $color-a, 9em 3em 0 $color-b, 10em 3em 0 $color-a, 11em 3em 0 $color-a, 12em 3em 0 $color-a,
2em 4em 0 $color-a, 3em 4em 0 $color-a, 4em 4em 0 $color-a, 5em 4em 0 $color-a, 6em 4em 0 $color-a, 7em 4em 0 $color-a, 8em 4em 0 $color-a, 9em 4em 0 $color-a, 10em 4em 0 $color-a, 11em 4em 0 $color-a, 12em 4em 0 $color-a,
2em 5em 0 $color-b, 3em 5em 0 $color-a, 4em 5em 0 $color-a, 5em 5em 0 $color-a, 6em 5em 0 $color-a, 7em 5em 0 $color-a, 8em 5em 0 $color-a, 9em 5em 0 $color-a, 10em 5em 0 $color-a, 11em 5em 0 $color-a, 12em 5em 0 $color-b,
2em 6em 0 $color-b, 3em 6em 0 $color-b, 4em 6em 0 $color-a, 5em 6em 0 $color-b, 6em 6em 0 $color-b, 7em 6em 0 $color-b, 8em 6em 0 $color-b, 9em 6em 0 $color-b, 10em 6em 0 $color-a, 11em 6em 0 $color-b, 12em 6em 0 $color-b,
2em 7em 0 $color-b, 3em 7em 0 $color-a, 4em 7em 0 $color-b, 5em 7em 0 $color-b, 6em 7em 0 $color-b, 7em 7em 0 $color-b, 8em 7em 0 $color-b, 9em 7em 0 $color-b, 10em 7em 0 $color-b, 11em 7em 0 $color-a, 12em 7em 0 $color-b;
}
}
.game-over{
border: .2em solid $color-a;
color: $color-a;
font: 400 5em/2.65em 'Press Start 2P', cursive;
height:2.5em;
margin: 5em auto 15em;
text-align: center;
text-transform: uppercase;
width: 16em;
}
.aliens{
color: $color-a;
font: 400 25em/1em 'Six Caps', sans-serif;
margin: 0 0 0 .5em;
text-align: center;
letter-spacing: .5em;
text-transform: uppercase;
}
View Compiled
// based off http://pin.it/nWSBil_
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.