DEV Community

Cover image for Tetris Testimonial Quotes
Mads Stoumann
Mads Stoumann

Posted on

20 3 3 2 2

Tetris Testimonial Quotes

Had a bit of fun last night with this week's Codepen Challenge.

I had no ideas for the topic — Testimonial Quotes — but then I noticed my wife playing Tetris on an ancient GameBoy, completely absorbed 😁

I fired up a CSS Grid with 7 columns and 14 rows. A real Tetris game has 10×20, but it would be too cramped on mobile devices.

I added colors, and a bunch of micro-classes that span columns and rows:

.cs1 { grid-column: span 1; }
.cs2 { grid-column: span 2; }
.cs3 { grid-column: span 3; }
.cs4 { grid-column: span 4; }
.rs2 { grid-row: span 2; }
.rs3 { grid-row: span 3; }
.rs4 { grid-row: span 4; }
Enter fullscreen mode Exit fullscreen mode

And then — in the markup — just a bunch of <b>-tags (for block!):

<b class="rs4 blue"></b>
<b class="rs3 cyan"></b>
<b class="cs1 cyan"></b>
<b class="cs4 yellow">
<!-- etc. -->
Enter fullscreen mode Exit fullscreen mode

For the quotes, I used <q> and <cite>-tags, occasionally adding a different writing-mode for vertical text:

.vtxt {
  text-orientation: mixed;
  writing-mode: vertical-rl;
}
Enter fullscreen mode Exit fullscreen mode

All font-sizes are using clamp, so they scale nicely, as in:

q {
  font-size: clamp(0.875rem, -0.2045rem + 5.3977vw, 3.25rem);
}
Enter fullscreen mode Exit fullscreen mode

Another way of doing that, would be with one of the container-units, such as cqi.


ChapGPT helped me write the testimonials, and I'm quite happy with the result:

Final


Codepen

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (4)

Collapse
 
mxglt profile image
Maxime Guilbert

Really nice!

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you!

Collapse
 
thallesrangel profile image
Thallesrangel

Looks good. :D

Collapse
 
madsstoumann profile image
Mads Stoumann

Thanks!

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up