Web brutalism Animated HTML website template

The sample page

Oplata. Independent architecture magazine, Dorćol, Belgrade.

The idea

The headline becomes a house that grows floor by floor: each word is a concrete block that drops and stacks until the satellite dish, the clothesline and the guard dog show up on the roof.

What to try

Scroll down to drop the blocks, squash them together and build the house; once it’s topped out, the guard dog barks.

Made for

Magazines, agencies, portfolios and indie shops

Palette

• #FFFDF5
• #0A0A0A
• #1A3CFF
• #FFE14D
• #FF3B1F
• #BDB6A8

Typefaces

Archivo Black + Space Mono

Cultural notes

• AA contrast, a 5 px blue focus ring and large buttons: raw, never unreadable.
• The house, dish, dog and laundry are invented and drawn in code; no real buildings and nothing political.
• With reduced motion or no JavaScript, the finished house stands still.

The HTML

What you download

• A single index.html file with nothing to install: open it, swap in your brand and copy, and upload it to your hosting.
• In English and Spanish, tested on desktop and mobile.
• Instructions for changing copy, colors, language and prices, plus its license.