Flap 1 · Coral
A small kindness
A small kindness you had already forgotten about will find its way back to you before the week is out. When it does, pass it on to the next person who needs it.
↑ Fold this one backA paper cootie catcher
Fold. Pick a number. Read what the paper says.
Long before a phone could answer anything, a square of paper could. Fold it, slip your fingers into the pockets, and it becomes a fortune teller — a cootie catcher. Pick a numbered flap and it opens like a little flower to show you what is waiting inside.
Hover or tap a numbered flap — the fortune unfolds below.
Each flap opens onto one of the notes below. They sit in a loose two-column grid, one column dropped a little lower, so the page feels hand-arranged rather than perfectly stacked.
Flap 1 · Coral
A small kindness you had already forgotten about will find its way back to you before the week is out. When it does, pass it on to the next person who needs it.
↑ Fold this one backFlap 2 · Teal
The detour you have been dreading is the part of the journey you will want to tell people about later. Take the long road and leave an hour early.
↑ Fold this one backFlap 3 · Coral
There is something you have been rehearsing quietly in your head. Say it out loud today — someone has been waiting a long time to hear it.
↑ Fold this one backFlap 4 · Teal
Money or time you set aside “for nothing in particular” is about to find a very good use. Let it go, and do not keep a receipt.
↑ Fold this one backEvery triangle is a link. Hover or focus one and it lifts up, then jumps to the matching fortune below.
The chosen note unfolds with a small 3D flip. The crease lines and shadows are drawn with plain CSS gradients.
Edit the words in index.html. Change the two accent colours in the :root block of style.css and the whole sheet repaints.
Replace this line with your own details. A short note at hello@example.com is usually all a one-page site needs. To make it a link, wrap it in an anchor tag like the ones in the menu above.