< Back to Frontend Friday Folks Index

Tetris

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (410 characters)
1 
<p><p><p><p><p r><p>
2 
<p><p><p><p r><p r><p>
3 
<p y><p y><p><p r><p><p>
4 
<p y><p y><p r><p><p p><p>
5 
<p r><p r><p r><p t><p p><p p>
6 
<p y><p t><p t><p t><p p><p t>
7 
<style>
8 
  body>* {
9 
    margin:0;
10 
    background: var(--c,#173889);
11 
  }
12 
  [r]{--c:#EE4F63}
13 
  [p]{--c:#B069F7}
14 
  [y]{--c:#F8DA37}
15 
  [t]{--c:#2CE1EA}
16 
  body{margin:0 50;display:grid;grid-template-columns:repeat(6, 1fr);gap:6px;background:#173889}
17 
</style>

This is a straightforward solution to the puzzle. By using one element for each of the grids, it's only a matter of coloring their background based on where they are on the grid.

< Back to Frontend Friday Folks Index