✦ StealThis .dev
Pages Easy

DIY — Project Contest Page

A themed maker-community contest page for the fictional MAKELOG Contests, built in plain HTML, CSS and vanilla JavaScript. It pairs a confetti-flecked hero with a live ticking deadline countdown, three SVG-medal prize tiers with an elevated grand prize, an eligibility checklist beside weighted judging bars that fill on scroll, a filterable entries gallery with like toggles and staggered reshuffling, hoverable judge bios, an accordion FAQ and a validated entry dialog.

Open in Lab
html css vanilla-js
Targets: JS HTML

Code

Project Contest Page

A complete competition landing page for a fictional maker community running its “Scrap Wood Challenge 2026”. The hero states the theme, the entry count and the prize pool, then hands the visitor two things at once: a countdown that ticks down to the second, and an Enter button that opens a small validated submission dialog. The countdown card is topped by a three-stop gradient rule and repeats the key dates underneath, so the urgency never comes at the cost of the actual schedule.

Below it the page walks the full contest information architecture. Three prize tiers sit in a row with hand-drawn SVG medals — silver, gold, bronze — with the grand prize card physically larger, gold-bordered, lifted on its own shadow and carrying an extra perks list. Rules split into two columns: an eligibility checklist with teal tick badges on the left, and weighted judging criteria on the right whose bars animate from zero to 40/30/20/10 percent the first time the section scrolls into view.

The entries gallery renders twelve fictional builds from a data array, each with a CSS/SVG illustration generated from a small shape library, a maker chip with generated initials, a “New” badge on recent submissions and a like toggle that bumps, recolours and reports through a toast. Filter tabs re-sort by likes or recency and the cards re-enter with a 45 ms stagger. Judges expand their bios on hover or keyboard focus, the FAQ accordion measures its own content for a smooth height transition, and everything collapses cleanly to a single column at 520px.

How this look is built

The layout is in the spirit of Instructables-style contest pages, but the mechanics are modern: CSS grid handles the asymmetric hero and the auto-fill entries gallery without a single float or media-query breakpoint per column, layered radial-gradients paint the confetti-lit hero and dark judges band with no image requests, and an IntersectionObserver toggles one class on the criteria list so the four bars animate their --w custom property with staggered transition-delays instead of a scroll listener firing on every frame. The old approach — background JPEGs, a jQuery scroll handler recalculating offsets, and fixed pixel columns — cost bytes and repaints; here the whole page is three files with no network dependencies beyond the font link, and prefers-reduced-motion shuts every animation off in one rule.

Illustrative UI only — always follow real safety guidance when working with tools, electronics, or repairs.