A free CSS template · No. 0213

Flip Clock

A retro split-flap board for a small personal page.

The clock never moves — it is just text you can change by hand. There is no JavaScript, and there are no images anywhere on this page.

About

What this board is for.

Flip Clock is a page that pretends to be a departures board: chunky cards, a seam across the middle of every letter, and a time that greets you before the words do.

It is built for small personal sites — a diary, a project log, a page about you. Everything here is plain HTML and CSS, so you can open both files in Notepad and understand every line without a manual.

There are no photographs and no scripts. Each flap is a single empty <span> holding one character in a data-glyph attribute. The rest is done with borders, gradients and a pair of pseudo-elements.

Notes

A board of small thoughts.

Keep the list below as a journal. Change each time and sentence to whatever you like — the times are only text in a <span>.

  • 08:15 Write the first sentence before checking anything else.
  • 12:40 A short walk, and one photograph of the sky.
  • 16:05 Answer the two letters that have waited too long.
  • 21:30 Read twenty pages, then close the book.
  • 23:00 Lights out. The board will still be here.

Using

How to make it yours.

Everything on this page is a file you can open in Notepad. Edit, save, refresh the browser — that is the whole workflow.

  1. Change the words. Open index.html and type over any sentence. Save the file and refresh to see it.
  2. Change the time. Find a tile such as data-glyph="4" in the clock and swap the character for another digit. The tile redraws itself.
  3. Change the colours. Open style.css and look for the :root block at the top. Every colour on the page is named there.
  4. Change the layout. Each section sits in a .band, with a two-column .band__grid inside. Set that grid to one column to stack the heading above the text.
  5. Respect motion. The flip animation already switches itself off for anyone whose system asks for reduced motion.

Hello

That is the whole tour.

Change the title, the time and the palette, and this board becomes yours. Keep the footer link if you can — it is the only thing asked in return.

Write to hello@example.com, or leave the address out and let the page simply be a quiet record of what you are up to.

Back to the clock