# Free it support website template

> Free HTML IT support website template for managed IT firms and small offices, with a price calculator. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026.

IT support website template: one free HTML file for a managed IT provider that looks after the computers, Wi-Fi, email and backups of small offices. It has a phone line, a price calculator by headcount, five security layers and a free audit form, in cool grey with one orange accent. AGENTS.md lets Claude Code or Cursor adapt it.

- Page: https://8b.com/templates/quiet-systems/
- Live demo: https://8b.com/templates/quiet-systems/demo.html
- DESIGN.md (design tokens and motion rules): https://8b.com/templates/quiet-systems/DESIGN.md
- Repository (GitHub template): https://github.com/8bsite/it-support-website-template
- Download ZIP: https://8b.com/templates/quiet-systems/it-support-website-template.zip
- Template name in the repository: Quiet Systems
- At a glance: One 131 KB index.html with its CSS and JavaScript inside, 11 sections, 10 Unsplash photos credited in CREDITS.md, Asta Sans from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.4 smooth scroll loaded from jsDelivr.

## Use it with an AI coding agent

Download the files into the project (Windows PowerShell: `curl.exe`):

```bash
curl -LO https://raw.githubusercontent.com/8bsite/it-support-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/it-support-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/it-support-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/it-support-website-template/main/CREDITS.md
```

Then give the agent this prompt:

```text
Read AGENTS.md, then edit index.html. Make this the site for <my support firm: name, area, services, price per person and headcount range, hours, clients, team, how people book, legal name>. Replace first the firm name, the eight service rows, the client offices, the before and after notes and the team. Change data-rate together with the visible price, keep the ids and the listed classes, and set the phone number's --len to its character count. Ask me for missing facts and never invent prices, clients, response times or contacts.
```

Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `npx degit 8bsite/it-support-website-template my-site`.

## About

A managed IT provider, a cyber security consultant or a web agency that sells a monthly price per seat can start from this page. Owners often search for an it support web template or an it services website template and find layouts that quote nothing; this one is built around a price per person and a free first visit. An it consulting website template can reuse the same rows by renaming the eight services.

Vibe coding with Claude Code, Cursor or Codex goes fastest when the agent has the facts only the firm knows: services, area, hours, price per person and slider range, client names, team and legal name. The demo invents all of them, including the five offices, the three before and after notes and the portraits. The agent should change the data-rate attribute together with the visible price, keep the ids and the classes AGENTS.md lists, and ask before naming any client.

As an it company web template it suits a firm that sells a calm, fixed monthly service to small offices and wants to sound exact rather than loud. The weak spot is the single page: a firm with many service pages, a client portal or a ticket form needs more. A shop that [fixes phones and laptops](https://8b.com/templates/reflow/) over the counter fits a different layout, and an owner who will not edit HTML can design a site in 8B's builder instead.

## Design

- Palette: #e3e3e7 (page background, the form fields and the compact nav bar), #24262c (body text, filled buttons, and the dark phone-line section, security panel, menu overlay and footer), #f2f2f5 (the price card and audit form, the before and after notes section, the light buttons on dark blocks, and text on the dark blocks), #595b63 (leads, captions, nav links, FAQ answers, the regular half of the wordmark and the grey the Before lines fade to), #ca350d (the only accent: focus outlines, the dot in buttons, plus marks, the slider and the arc on the contact ring), #c2c3ca (hairlines, field borders, empty photo frames and the contact ring outline), #a7a9b1 (small labels and descriptions on the dark blocks, and the regular half of the footer wordmark), #81838b (declared with a large muted text style that no element in the shipped markup uses)
- Fonts: Asta Sans (the only typeface, loaded from Google Fonts: regular weight for headings and body text, medium on buttons, semibold on the bold half of the wordmark and the Before label)

Full-width sections on a pale grey ground, with one vertical hairline down the left edge of the first section. The first screen is a heading block with two actions, then a ruled list of eight services. Later sections repeat the same pieces: a hairline, a large heading, a short lead, then rows or cards. Cards, the five client photos and the team portraits share the clipped upper-left corner.

The look is a technical drawing in grey: one sans family, clipped upper-left corners and dark blocks for the phone line, the security panel and the footer. Orange appears only as focus rings, small marks, the slider and the contact ring arc, which suits an it services web template.

## Sections and motion

- **Navigation** (navigation): four links, a wordmark, a Book a free audit button and a Menu button that opens a full-screen overlay. Motion: The bar slides away after 24 px of scrolling down past 80 px and returns in a compact form after 40 px of scrolling up; on phones Menu opens a full-screen overlay.
- **If it plugs in, it is ours to look after.** (inventory): first screen: the h1 If it plugs in, it is ours to look after. with a lead and two actions, then a ruled list of eight things looked after. Motion: On load the heading block slides in from the right while opening from the left, and on scroll the rows below the first screen settle onto their lines as their hairlines draw.
- **Call one number. Someone who knows your office answers.** (line): a large phone number with three facts: hours, who answers and out of hours. Motion: The heading and the large phone number slide in while opening, and the three hairlines draw.
- **Sixty offices call us. Here are five of them.** (offices): a grid of five client offices that starts zoomed in on one photo and zooms out to all five with captions. Motion: On wide screens the section is held while the grid zooms out from one photo to all five; on phones it zooms out from 1.7 times as it scrolls in.
- **Locked, without the lecture.** (security): a dark cut-corner panel with five security layers that slide out from under each other. Motion: Scrubbed with the scroll, the lower four rows start stacked on the first and slide down into place while the panel's clipped corner closes.
- **One price per person. Everything in it.** (plans): one price per person: a checklist beside a card with a headcount slider and a live monthly total. Motion: The heading settles, the hairlines draw and the card arrives with a deep clipped corner that closes; the slider updates the total as you drag.
- **What changed after the first month.** (cases): three before and after notes where the old complaint shrinks and what changed rises in. Motion: As each note crosses the screen, the Before line shrinks from 1.75 times its size and turns grey while the change line rises and fades in.
- **Five people. You will know them by name.** (team): five engineers as portraits; on wide screens an index of names drives one held portrait that opens from a cut corner. Motion: On wide screens the name at the middle of the screen darkens and its portrait opens over the last one from the frame's corner; on narrower screens each portrait opens as it scrolls in.
- **Questions offices ask before they call.** (faq): five questions and answers (native details). Motion: The heading and note settle in and a hairline draws above each question; the answers open natively.
- **Book a free audit.** (contact): a drawn ring and rotating radius behind the heading, contact details and an audit request form. Motion: A thin ring and a radius line behind the heading turn by 130 degrees as the section scrolls in, drawing an orange arc along the ring.
- **Footer** (footer): wordmark with a sentence, four columns of links and details, and a base line. Motion: A hairline draws across above the four columns.

## Good for

- managed IT support provider for small offices
- cyber security consultant, web agency or software support firm with per-seat pricing
- any B2B service that sells a monthly price per person and a free first visit
- any business that wants a calm, technical, drawing-like look with one warm accent

## Questions

**Does this IT company website design template include a price calculator?** Yes. The price section has a slider for people in the office, from 3 to 60 and starting at 12, and a script multiplies it by the rate in data-rate to write the monthly total. Change data-rate together with the visible £42, and the slider's min and max if your range differs.

**Does the free audit form send anything?** No. The form has name, company, contact, office size and message fields; as shipped the script checks them and shows a thank-you line, and nothing leaves the page. Connect Formspree or Netlify Forms for real requests, or point the booking buttons at your Calendly or Cal.com page instead.

**How do I hand a managed IT services website template to Claude Code or Cursor?** Download index.html and AGENTS.md with the curl lines in the README, put this it support template in a folder and paste the prompt above, which starts with Read AGENTS.md, then edit index.html. The agent should ask you for prices, client names and hours before writing them in.

**What must stay when I rename and reprice the page?** Keep the ids and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists for each script. Keep data-rate on the price, and set the phone number's --len to its new length. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

**What happens with reduced motion or without JavaScript?** With reduced motion on, the scroll scenes, smooth scrolling and the heading's load-in are off, but the nav bar still slides away on scroll and hover effects still run. Without JavaScript the Menu button, the slider total and the form stop working; the four header links stay on wide screens and the questions still open.

**Can I get a site like this without editing code?** Yes, with [8B's AI website builder](https://8b.com/). You describe the site in a sentence and it designs a new one, not this template. Designing and restyling are free. Publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT through the 8B connector.

## Before publishing

Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses).

- Book a free audit buttons in the header, the menu overlay, the first screen, the phone line and the price card, and the Check our office button in the security section lead to #contact, the audit form now; point them to your booking page URL (Calendly, Cal.com) if you take bookings there, or keep them on the form.
- See the offices we look after link in the first screen lead to #offices now; point them to keep it as an anchor.
- The large phone number in the phone-line section and the phone links in the contact section and the footer lead to tel: links to the demo number now; point them to your own number in the tel: link and the visible text.
- The audit form lead to nothing is sent; the script checks the fields and shows a thank-you line now; point them to a form service (Formspree, Netlify Forms) or your own endpoint, in the form action.
- The audit form sends nothing: it validates and shows a thank-you line only.
- The headings, rows and portraits are clipped or moved by scroll scenes, so a very fast scroll past them on a phone shows them half-open for a moment.
- The offices section holds its photo stage in place (CSS sticky) for about 0.9 of a screen on wide screens and the team section holds a portrait beside five tall name rows, which feels long on a short laptop screen.
- With reduced motion the scroll scenes, the first-screen entrance and smooth scrolling stop, but the nav still hides on scroll down, the hover effects keep running, and on wide screens the offices stage still stays in place for about 0.9 of a screen with nothing moving.

## License

Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).