148
AI ready

Tech News Website Template

£29 View live demo or the whole Vault, £99

Nine-page technology news and reviews website template on true black with slanted colour bands: giant condensed headlines over duotone photographs, a filterable story wall, a sortable score wall, a two-phone comparison you drag, and a long read with redaction bars that lift.

ScrollTriggerFlip Lenis advanced
9 more details
scrubscroll-revealparallaxhover-effectclick-togglepointer-effectscount-upstaggermask-reveal
Open Tech News template in new tab

The business, people and figures in this demo are made up for the example. Any resemblance to a real company is a coincidence.

Released

About this template

A nine-page news and reviews site that sets out to be loud. The ground is true black, cut by slanted bands of off-white, yellow, violet and pink, and the type is a heavy extra condensed face at sizes that run the full width of the window. Every photograph is pushed into a saturated duotone by CSS alone, so you can drop in your own picture and keep the treatment.

Read the full template overview

The worked example is Solder, a reader-funded technology publication in Sheffield, with a front page holding fourteen headlines in its first two screens, a section page, an article with a dense sidebar, a reviews wall, a full review, a long read, a writer page, a subscribe page and an about page that prints the whole budget. Devices, prices, writers and sums stay consistent from page to page.

The visual language comes from repair guides. Photographs from the bench run in natural colour with numbered teardown callouts drawn from a real part to a short note, while reported stories are pushed into duotone. Device stories carry a yellow fact line, such as a screw count, a time and the price of the part.

Each page has something to handle: chips that reflow the story wall, a score wall that re-sorts by score, price or repairability, a divider dragged across two phones while bars and a table follow, black bars lifted off a leaked manual, and a budget bar you can pick apart.

It suits gaming news, science magazines, finance news, local news and sports news. Change the copy, the section colours and the photographs, and the structure holds.

Tech News - website template preview

What's included

15 items
  • Teardown callouts on bench photographs: stroke leader lines from a real part to a numbered note, drawn in with a mouse and simply visible on touch, with reduced motion and without JavaScript
  • Yellow repair fact lines on device stories and review tiles, in the form of screws, minutes and the price of the part
  • Front page wall that mixes one oversized story, runs of text-only headlines and a strip of bench notes, and still filters by topic
  • Front page with a huge two-line headline across a duotone photograph, then a row of five headlines and the first slanted band within the first screen
  • Duotone photographs made with CSS blending, with eight colour pairs and a stronger pair on hover, so swapping a photo keeps the look
  • Slanted bands in off-white, yellow, violet and pink, whose slant eases slightly with scroll
  • Section colour tags in sentence case on slanted chips, one colour per section
  • Story wall with topic chips that reflows with Flip and falls back to plain links without JavaScript
  • Score wall of fifteen devices sorted by score, price or repairability, coloured by verdict
  • Two-phone comparison with a draggable divider, native selects and range input, animated bars and a table that highlights the better value
  • Long read with a set document whose redaction bars lift on scroll or under a mouse-driven highlighter, each with a margin note
  • Article page with a dense sidebar, a pull quote and a parts bill you can switch between two repairers
  • Writer page with a filterable list of stories and subscribe page with working front-end validation and a changing price summary
  • About page with a selectable budget bar, tables that add up, eleven staff portraits, testing method and a corrections list
  • Full-screen phone menu with focus handling, Escape and a no-JS scrolling link row

Perfect for

5 use cases
  • Technology news sites, reviews publications and independent magazines
  • Gaming news and reviews sites with scores to compare
  • Science and finance publications with long investigations
  • Local and sports news sites that want a loud front page
  • Learning pattern: Flip reflows, a draggable comparison and scroll-scrubbed reveals generated from text line boxes

How it works

6 sections

Duotone made from CSS, not baked

Each photograph sits in a wrapper whose background is the highlight colour. The image is set to greyscale and multiplied onto it, and a pseudo-element lightens the result with the shadow colour. The photo file stays in full colour, so one class can show it as shot, and hovering a linked picture moves both colours to a stronger pair.

Teardown callouts

A callout is a thin SVG line, a ring and a numbered note, positioned by percentages of the picture so it stays on the same part at any width. For a mouse they draw in with GSAP when they scroll into view and again on hover or focus. They take no pointer events, so the link beneath still works. On phones the numbers stay on the picture and the notes become a list under it.

Slanted bands

Bands are ordinary sections shaped with a clip-path polygon driven by one slant token and a multiplier. ScrollTrigger scrubs the multiplier across the band's trip through the window, so the angle eases a little as you read. Without scripting the slant simply stays still.

Story wall and score wall

Chips and sort buttons change the order or visibility of plain article elements, and Flip animates the difference. The grid height is held and tweened during a filter so nothing beneath it jumps. Without JavaScript the chips are links to section pages and the sort buttons are hidden, leaving the wall in its printed order.

Comparing two phones

Two photographs are stacked and the upper one is clipped by a shared position value that dragging, the range input and an opening nudge all write to. Choosing a phone from a native select shows those two columns of a real HTML table, tweens the numbers and bars, and marks the better value in each row. Without JavaScript the whole six-phone table is on the page.

The redacted document

The document is real text with the sensitive sentences marked up. The script measures each marked line box and lays a black bar over it, then scroll scrubs those bars away one at a time and fades in the margin note. A mouse user can hold and drag a highlighter across a bar to lift it early. With reduced motion or no JavaScript, no bars are made and it reads in full.

Plugins ScrollTrigger, Flip
Difficulty Advanced
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this template's demo (9 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Questions about this template

Which kinds of publication does this tech news template suit besides technology?

Gaming news, a science magazine, finance news, local news or sports news. The sections and their colour chips are only names and tokens, so Repair, Devices, Work and Policy could become Politics, Business, Sport and Culture. The score wall suits anything you rate, from games to restaurants, and the long read suits any investigation.

How do I swap the photographs and keep the duotone look?

Replace the file in assets/img or change the src. The colour comes from CSS, so any photo picks up the treatment. Choose a pair with the duo classes, such as duo--orange or duo--duo-hot, or add your own by setting two colours. Use duo--off on any picture that should appear in natural colour.

How do I add a new story to the front page and the section pages?

Every story card is a plain article element you can copy, with its topic set on an attribute so the chips can find it. Duplicate story.html for the new piece and point the card at it. There is one article, one review and one section page to use as the pattern. To run a full publication, generate the same patterns from your CMS.

How do I add another phone to the comparison on the review page?

Add a column to the table with the device's values in data-val attributes, then add an option to both selects naming its photograph. The bars, the highlighting and the number tweens read the table, so no script changes are needed. Each row states whether a higher or lower number wins, and rows can be removed.

Do the subscribe form and newsletter forms really take payment or sign-ups?

No. They are unwired static front ends. The subscribe form collects a name, email, tier and billing period, checks them and shows a confirmation, and it says on the page that nothing is sent. Connect it to a payment and membership service such as Stripe with your own back end. Newsletter and reader question forms suit Formspree, Netlify Forms or your email provider.

Can I use the redaction effect on my own text?

Yes. Wrap any sentence in a mark element with the data-redact attribute inside a row, and add a note beside it. The script measures the lines itself, so it follows your text at every width and rebuilds on resize. It suits a court filing, a leaked email or a before and after explanation, as well as a manual.

Paid template

Purchase to unlock the code.

Buying Tech News opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£29 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

Quick Start

Open index.html through any static server, or upload the folder as it is. There is no build step. Pages are ordinary HTML linked by ordinary page loads, with a short crossfade from @view-transition where the browser supports it.

The pages are index.html, section.html, story.html, reviews.html, review.html, feature.html, author.html, subscribe.html and about.html.

Using It With Your Own Design

Repaint the tokens at the top of assets/style.css: the ground, the band colour, the accent and the section colours, then the duotone pairs below them. Each section colour has its own text colour token, so check that pair when you change it. Replace the logo in the header and footer of each page, then replace copy and photographs. Behaviour hangs on data- attributes, so you can restyle or rearrange freely while keeping them.

Any section can be deleted. Each script feature returns early when its markup is missing.

Pages and Configuration

Stories

A story card is <article class="st"> with an image link, a .tag, a heading, an optional deck and a byline. Size modifiers include st--big and st--row. Omit the image link for a text-only headline.

Duotone

Wrap any image in <span class="duo duo--orange">. The pairs are orange, yellow, pink, violet, cyan, night, duo-hot, duo-ocean and duo-sun. Each sets --hi and --lo, and --hi2 and --lo2 for the hover state. duo--off shows the photo as shot. White headlines only sit on pairs whose highlight is dark enough: orange and night are measured for this.

Bench photographs run in natural colour and reported stories in duotone. Review tiles take the ink of their verdict: yellow, cyan or pink. duo--split prints one photograph in two inks on a slant, and .loupe adds a magnified circle of a picture.

Teardown callouts ([data-anno])

A stage holds the picture, an SVG of line.anno__line, an .anno__dot and .anno__mk for each point, and two copies of the notes: .anno__desk beside the lines and .anno__mob as a list for phones. All coordinates are percentages of the picture, so keep its aspect ratio. If you swap the photograph, re-aim the lines at the new part and rewrite the notes from what is really in the picture.

Fact lines

<p class="fact">6 screws, 6 minutes, £29 for the battery</p> sits under a device headline. Use it only where the fact belongs to that story.

Bands

Add band band--white, band--yellow, band--violet or band--pink to a section. data-band adds the scroll easing, and --slant sets the angle.

Topic filter ([data-filter-root])

Used on index.html, section.html and author.html. Chips take data-filter="Topic" (all shows everything) and cards in [data-filter-grid] take data-topic="Topic". On the front page the chips are links, so they lead somewhere without scripting.

Score wall ([data-sort-grid])

Each tile in reviews.html carries data-score, data-price and data-repair, and its colour comes from sc--hi, sc--mid or sc--lo. Sort buttons name a field with data-sort. Tiles without data-score stay at the end.

Comparison ([data-compare])

On review.html. The table is the data: each cell has data-dev and data-val, each row has data-better="high" or "low" and data-fmt, which names a formatter at the top of assets/script.js. Each select option has data-img and data-alt. A bar group names a row label with data-cb and its scale with data-max.

Redacted document ([data-doc])

On feature.html. Each [data-doc-row] holds text, with <mark data-redact> around the hidden part, and a [data-doc-note] for the margin.

Parts bill, budget and subscribe

[data-bill] on story.html reads data-a and data-b from its rows. [data-money] on about.html links slices (data-mb), text (data-mb-text) and table rows (data-mb-row) by index. The prices shown by [data-sub-form] on subscribe.html are in SOLDER_initForms in assets/script.js.

Example

Code snippet omitted: it ships with the download.

Forms

All forms are front ends only. They validate and show a message, and nothing is sent. Connect the newsletter and question forms to Formspree, Netlify Forms or your email provider, and the subscribe form to your own payment and membership service. The handlers are in SOLDER_initForms.

Palette

The ground is #060606, the band #F2F0EA and the accent #FF4B1F, with a darker #C42D05 for accent text on the band. Section chips are yellow #FFE600, violet #6A26FF, pink #FF3D94, cyan #19C8FF and the accent. The measured contrast pairs are in the first comment of assets/style.css.

Accessibility and Fallbacks

Without JavaScript or with a blocked CDN, every page is complete: the chips are links, the comparison shows the full table, the document reads unredacted, the callouts are all visible, and the phone menu becomes a scrolling row of links. With reduced motion, Lenis and the reveals are off, the document is unredacted, and filter, sort and comparison still work without animation. The comparison uses native selects and a native range input, and the phone menu handles Escape, focus and aria-expanded.

Dependencies

GSAP 3.12+ with ScrollTrigger, and Flip on the pages with a wall (the demo is built against 3.15.0), plus Lenis 1.3+ (the demo is built against 1.3.17), loaded from CDN tags at the end of each page. data-smooth="off" on <html> or ?smooth=off turns Lenis off.

Fonts

Sofia Sans Extra Condensed, Source Serif 4 and Instrument Sans, self-hosted as latin woff2 in assets/fonts, all under the SIL Open Font License 1.1, with the full text in assets/fonts/OFL.txt.

Images and Credits

assets/img holds art-directed WebP derivatives of photographs from Pexels, used under the Pexels licence, plus six generated product shots of the fictional phones (dev-*.webp), which are placeholders for your own. Replace a file under the same name, and update its alt text and any caption. Replacement images need no recolouring.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.