SMALT - Dental Clinic HTML Template

SMALT is a website template for dental practices — the kind that competes on being calm and on being understood, not on the biggest discount.

It is hand-written HTML, CSS and JavaScript. No build step, no npm install, no framework. You open the folder, edit the text, and upload it.

WHAT MAKES IT LOOK DIFFERENT

The first screen is split down the middle: flat greige on the left, a muted clinic video on the right. The headline sits across that seam and is painted with a hard gradient, so the same letters are charcoal on the left half and white on the right. As you scroll, the video slides across and fills the screen, the first headline leaves, and a second one arrives over it. All of it is driven by scroll position rather than by a timer, so it runs backwards as cleanly as forwards.

WHAT IT DOES, NOT JUST HOW IT LOOKS

A price estimator that works with no backend: pick a treatment, get the range. Seven treatments are pre-filled and the ranges live in HTML attributes, so you edit them as text. A new-patient form — the intake questionnaire a clinic actually asks for. A pinned services switcher and a pinned technology list that move with the scroll instead of jumping. A testimonial slider that stops rotating for visitors who ask for reduced motion. A privacy page that is an honest GDPR stub, not invented legal text.

SPEED, MEASURED ON THE ARCHIVE YOU DOWNLOAD

Not on a warm demo server: on the unpacked archive, throttled to a mid-range phone (390x844 viewport, 4x CPU slowdown, 1.6 Mbit/s, 150 ms latency), median of five cold runs.

Home — LCP 1.03 s, CLS 0.001, TBT 0 ms, 875 KB New patient — LCP 0.95 s, CLS 0.044, TBT 0 ms, 350 KB Contact — LCP 0.96 s, CLS 0.013, TBT 0 ms, 357 KB Team — LCP 1.48 s, CLS 0.043, TBT 0 ms, 372 KB Services — LCP 1.63 s, CLS 0.000, TBT 0 ms, 363 KB Technology — LCP 1.85 s, CLS 0.026, TBT 0 ms, 517 KB Privacy — LCP 0.68 s, CLS 0.000, TBT 0 ms, 121 KB

Google's "good" threshold is 2.5 s for LCP and 0.1 for CLS.

Fonts are self-hosted — no request goes to Google, so the template also works on a site that has to pass a cookie audit.

Every page carries a single H1, a unique title and description, Dentist JSON-LD, plus sitemap.xml and robots.txt. Content stays visible with JavaScript disabled, and a failsafe reveals everything after 1.5 s if the script never runs at all. Every image declares its real width and height.

ABOUT THE MEDIA

Three photographs come from Unsplash under the Unsplash Licence and their source URLs are listed in CREDITS.txt. The remaining images and the hero video were generated with AI tools by the author of this template: the people in them do not exist, no release is required, and no third-party rights are involved. Marketplaces differ in how they treat AI-generated media — if you resell work based on this template, check the policy of the platform you publish on.

Lenis 1.1.14 is included for inertial scrolling, under the MIT licence, with the licence text beside the file.

Features

Seven pages: home, services, technology, team, new patient, contact, privacy Working price estimator - no backend, ranges edited as HTML attributes New-patient intake form Scroll-driven split hero with a two-colour headline Pinned services switcher and pinned technology list Testimonial slider, paused under prefers-reduced-motion Self-hosted fonts (Instrument Serif, Inter Tight) - no Google Fonts request Dentist JSON-LD, sitemap.xml, robots.txt Forms stay disabled until you give them an endpoint Failsafe reveal if the script is blocked or fails to load Responsive from 320 px up

Requirements

None. Plain HTML, CSS and JavaScript - no framework, no build step, no package manager, no server-side code. Any static host works.

Tested in current Chrome, Safari, Firefox and Edge.

Instructions

1. Unzip the archive. 2. Open index.html in a browser - it works straight from disk. 3. Edit the text in the seven pages. 4. Set the calculator ranges in the data-min and data-max attributes on new-patient.html. 5. Point the forms at your own endpoint. 6. Replace the images in img/ and the hero video in video/. 7. Upload the folder.

Full documentation is in documentation/index.html inside the archive.