About This Template
A premium, framework-free HTML/CSS/vanilla-JS template for an independent daily business & world newsroom. Built bespoke from the subject — not a recolored scaffold.
MERIDIAN is part of the uiuxlabz collection — a set of premium, framework-free HTML templates designed from each subject to feel genuinely unique. Open the folder, edit the text and tokens, and you have a production-ready website for a media & news business.
Key Features
- ✓Breaking-news ticker — seamless CSS animation, duplicated track for infinite loop
- ✓Masthead rule animation — `scaleX(0→1)` on load
- ✓Sticky section nav — Front Page / Business / Markets / Technology / Culture / Opinion / Newsroom
- ✓Lead story layout — 1.55fr/1fr grid with Live badge hover scale
- ✓Briefs rail — thumbnail + headline + meta, border-separated
- ✓Story grid — 2-column responsive, hover lift on thumbnails
- ✓Feature story — spans both columns, larger headline
- ✓Sticky rail — Most Read (ranked numerals) + Topics (pill tags)
- ✓Topic band — alternating feature + mini-lists on warm paper wash
- ✓Newsletter band — dark ink background, inline email capture
- ✓Article page — drop-cap `::first-letter`, pull-stats grid, blockquote, inline figures, author bio, related grid, share icons
- ✓Newsroom — Secure tip line (Signal handle, PGP fingerprint, policy link), contact emails, location, contact form
- ✓Form validation — `data-form` with `.form-ok`/`.form-err` inline messages, no `alert()`
- ✓Mobile drawer — burger toggles `.nav2 .links.open`, aria-expanded
- ✓Scroll reveals — IntersectionObserver, type-set wipe (`clip-path`), staggered delays (`.d1`…`.d4`)
- ✓Active nav — auto-highlight via `location.pathname`
- ✓Footer year — `[data-year]` auto-fills current year
- ✓Reduced motion — `@media (prefers-reduced-motion)` disables all animation
- ✓Original imagery — 15 source images from BizNews (`assets/img/`): `news-800x500-[1-3].jpg`, `news-700x435-[1-5].jpg`, `news-110x110-[1-5].jpg`, `ads-728x90.png`, `user.jpg`