CODE ✦ VERIFY.

[lucavi]

Select all squares containing

a human

If there are none, click skip

SKIP

Select all squares containing

Hikaru

If there are none, click skip

SKIP

MORE SAMPLES:

Select all squares containing

hinako shimizu

If there are none, click skip

SKIP

A simple front page splash mimicking picture Captcha. The "SKIP" button is a functioning button and can be used to link to whatever page you desire. There are two variants, a 4x4 grid and a 3x3 grid.

✓ CUSTOMISABLE
✓ RESPONSIVE
✗ COMMENT FRIENDLY
✗ NOT EMAIL-FRIENDLY / EMAIL-TESTED

Most modifiable areas are consolidated as variables at the very top of the code. Here's what they are and what they'll affect:

✦ --font Font family for the text.
✦ --bg The passive background colour. It is shared by the font colour.
✦ --verify The colour of the box with the text and verify buttons.
✦ --image01 The first image to be overlaid on the grid. This is the image that will start on the top-leftmost square.
✦ --image02 The second image to be overlaid on the grid.

VERIFY: 4x4 GRID

<raw-code><!--- 4x4 GRID // ---> <div style="display:grid; place-items:center;"> <div style="display:flex; flex-flow:column nowrap; gap:5px; width:100%; max-width:400px; padding:10px; font:14px/1.2 var(--font); color:var(--bg); background:var(--bg); box-shadow:0 3px 6px rgba(0,0,0,0.5); --font: Arial,sans-serif; --bg: #eee; --verify:#2871da; --image01: url(); --image02: url();"> <div style="display:block; padding:30px 20px; letter-spacing:1px; background:var(--verify);"> Select all squares containing <div style="font:600 200%/1 var(--font); text-shadow:-1px -1px #b9223d, 1px 1px #008a9d;"> text </div> If there are none, click skip </div> <div style="display:grid; place-items:stretch; grid-template-areas:'pile';"> <!--- IMAGES // ---> <div style="z-index:1; grid-area:pile; display:block; aspect-ratio:1 !important; clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 0% 25%, 0% 50%, 100% 50%, 100% 75%, 0% 75%, 0% 100%, 100% 100%, 100% 0%, 75% 0%, 75% 100%, 50% 100%, 50% 0%, 25% 0%, 25% 100%, 0% 100%); background:var(--image01) center no-repeat; background-size:cover;"></div> <div style="grid-area:pile; display:block; aspect-ratio:1 !important; background:var(--image02) center no-repeat; background-size:cover;"></div> <div style="z-index:10; grid-area:pile; display:grid; grid-template-columns:1fr 2px 1fr 2px 1fr 2px 1fr;"> <div style="grid-column:2; background:var(--bg);"></div> <div style="grid-column:4; background:var(--bg);"></div> <div style="grid-column:6; background:var(--bg);"></div> </div> <div style="z-index:10; grid-area:pile; display:grid; grid-template-rows:1fr 2px 1fr 2px 1fr 2px 1fr;"> <div style="grid-row:2; background:var(--bg);"></div> <div style="grid-row:4; background:var(--bg);"></div> <div style="grid-row:6; background:var(--bg);"></div> </div> </div> <!--- VERIFY BUTTON // ---> <a href="" style="align-self:flex-end; padding:15px 30px; text-decoration:none; color:var(--bg); background:var(--verify);"> SKIP </a> </div> </div> <!--- 4x4 GRID END // ---></raw-code>

VERIFY: 3x3 GRID

<raw-code><!--- 3x3 GRID // ---> <div style="margin-top:25px; display:grid; place-items:center;"> <div style="display:flex; flex-flow:column nowrap; gap:5px; width:100%; max-width:333px; padding:10px; font:14px/1.2 var(--font); color:var(--bg); background:var(--bg); box-shadow:0 3px 6px rgba(0,0,0,0.5); --font: Arial,sans-serif; --bg: #eee; --verify:#2871da; --image01: url(); --image02: url();"> <div style="display:block; padding:30px 20px; letter-spacing:1px; background:var(--verify);"> Select all squares containing <div style="font:600 200%/1 var(--font); text-shadow:-1px -1px #b9223d, 1px 1px #008a9d;"> text </div> If there are none, click skip </div> <div style="display:grid; place-items:stretch; grid-template-areas:'pile';"> <!--- IMAGES // ---> <div style="z-index:1; grid-area:pile; display:block; aspect-ratio:1 !important; clip-path: polygon(0% 0%, 100% 0%, 100% 33.3%, 0% 33.3%, 0% 66.6%, 100% 66.6%, 100% 100%, 66.6% 100%, 66.6% 0%, 33.3% 0%, 33.3% 100%, 0% 100%); background:var(--image01) center no-repeat; background-size:cover;"></div> <div style="grid-area:pile; display:block; aspect-ratio:1 !important; background:var(--image02) center no-repeat; background-size:cover;"></div> <div style="z-index:10; grid-area:pile; display:grid; grid-template-columns:1fr 2px 1fr 2px 1fr;"> <div style="grid-column:2; background:var(--bg);"></div> <div style="grid-column:4; background:var(--bg);"></div> </div> <div style="z-index:10; grid-area:pile; display:grid; grid-template-rows:1fr 2px 1fr 2px 1fr;"> <div style="grid-row:2; background:var(--bg);"></div> <div style="grid-row:4; background:var(--bg);"></div> </div> </div> <!--- VERIFY BUTTON // ---> <a href="" style="align-self:flex-end; padding:15px 30px; text-decoration:none; color:var(--bg); background:var(--verify);"> SKIP </a> </div> </div> <!--- 3x3 GRID END // ---></raw-code>

Comments

[lucavi]

it's so handy! mfw i saw it actually works in dw code like 😯