Editing the site — Kalme HTML

Every page is a plain HTML file: you change the words, pictures and links in a code editor and reload the browser. This guide shows where everything is and how to add a service, a project or a post by hand.

Open it

Double-click index.html — the site opens in your browser and every link works, straight from the folder. To see it exactly as a host serves it (and to test the form), run a small local server from the folder:

npx serve .

Then edit the files in a code editor and reload the browser to see the change.

What is where

index.html, about.html, services.html, projects.html, blog.html, contact.html
404.html                 shown for addresses that don't exist
style-guide.html         every component with its name (noindex; delete it if you don't want it)
services/*.html          one page per service
projects/*.html          one page per project
blog/*.html              one page per post
legal/*.html             Terms of Service and Privacy Policy
assets/css/style.css     the stylesheet (generated — see design.md)
assets/js/main.js        the site's scripts (don't edit)
assets/js/config.js      your settings: form endpoint
assets/images/           photos, logos and video posters
assets/fonts/            Inter
icon.svg, apple-icon.png, opengraph-image.png
sitemap.xml, robots.txt
src/css/style.css        the stylesheet's source: colours, breakpoints, fonts

Text

Find the words on the page and change them in the HTML. Keep the tags and classes around them — they carry the layout. A heading looks like this:

<h1 class="text-[42px] md:text-[52px] lg:text-[64px] leading-[1.2] font-semibold tracking-[-0.03em]">Your headline</h1>

Change Your headline, leave the class.

Button labels appear three times on purpose: one invisible copy gives the button its width, and two more slide past each other on hover (<span class="invisible block">Contact us</span> … Contact us … Contact us). Change all three.

Text that repeats on every page

The header, the footer, the contact details and the site’s name are copied into every page (and the call to action above the footer into Home and every project page). Change them once for all files with your editor’s Find in Files / Replace in Files (VS Code: Ctrl/Cmd + Shift + H):

Replace	With
`https://kalme-html-marcframe.vercel.app`	your domain, e.g. `https://www.youragency.com` (canonical links, share cards, `sitemap.xml`, `robots.txt`)
`hello@example.com`	your email (in `mailto:` links and as text)
`+44 20 7946 0854` and `tel:+442079460854`	your phone, as shown and as dialled
`Kalme Digital Agency 45 Shoreditch High Street, London, E1 6PQ, United Kingdom`	your address
`https://cal.com/`	your booking link (“Schedule a call”, “Book free consultation”, “Book an intro call”)
`https://facebook.com`, `https://instagram.com`, `https://youtube.com`, `https://x.com`	your social profiles
`\| Kalme` in `<title>` and share tags	`\| Your Agency`

Include the .html, .xml and .txt files. Review each change before replacing all — “Kalme” also appears in text you may want to rewrite rather than replace (the copyright line, the About page, the project stories, the legal texts).

Page titles and descriptions

Each page’s <head> holds what search engines and share cards show:

<title>About | Kalme</title>
<meta name="description" content="…" />
<link rel="canonical" href="https://yourdomain.com/about.html" />
<meta property="og:title" content="About | Kalme" />
<meta property="og:description" content="…" />
<meta property="og:url" content="https://yourdomain.com/about.html" />
<meta property="og:image" content="https://yourdomain.com/opengraph-image.png" />
<meta name="twitter:title" content="About | Kalme" />
<meta name="twitter:description" content="…" />
<meta name="twitter:image" content="https://yourdomain.com/opengraph-image.png" />

Keep the title, the og: and the twitter: versions the same, and the canonical and og:url equal to the page’s own address. A description of 80–160 characters shows in full in search results; a title of up to 60 characters too (drop the | Kalme suffix when a title is longer). Service, project and post pages use their own photo as og:image and twitter:image: https://yourdomain.com/assets/images/<file>.

Images

assets/images/ holds every photo. The easiest change: replace a file with yours under the same name and the same proportions — every page that shows it updates. The download ships with grey placeholders that state the size each image was designed for (for example 1920 × 1280).

To use a new file instead, change the src: <img src="assets/images/my-photo.jpg" …>. In pages inside a folder (services/…, projects/…, blog/…, legal/…) the path starts with ../: src="../assets/images/my-photo.jpg".

Use .jpg for photos (around 1920 px wide for project and service photos, 1200 px for the others, 800 px for portraits) and keep files small — compress them with Squoosh or TinyPNG. Write an alt text for images that carry meaning; leave alt="" for decorative ones.

Videos

Three videos play on the site, each a <video> with a src (the clip) and a poster (the picture shown before it plays):

Video	File
The page video under the Home hero (it rises as you scroll)	`index.html`, the first `<video`
The portrait clip between the testimonials	`index.html`, the second `<video`
The studio video between the values and the team	`about.html`

Change src to your own file (put an MP4 in assets/ and use src="assets/showreel.mp4") or another link, and poster to your picture. The demo plays stock clips from the web; they are not part of the download. Keep the proportions (16:9, the portrait clip 9:16) and the files small (a few MB) — they play muted and in a loop. To remove the page video, delete the <section aria-hidden="true" …> that holds it.

The pricing card

Each service page has a pricing card with two plans. Both are in the HTML: the switch buttons (data-plan="weekly", data-plan="monthly") and one block of details per plan (data-plan-details="weekly", data-plan-details="monthly", the second one hidden) with the list of what’s included, the price and its note. Edit the text inside them; the switch keeps working as long as the data-plan and data-plan-details names match.

Links

Pages link to each other as about.html, services.html, projects/<slug>.html; from inside a folder, add ../ (../contact.html). Keep the .html — it’s what lets the site work from any host and from disk.

Adding a service

A service is a page plus a card wherever it should be listed. The cards are the same block copied into several files, so this takes a few minutes.

The page. Copy an existing one, e.g. services/content-marketing.html → services/brand-strategy.html. Use lower-case words joined by - for the file name; it becomes the address. Edit the title, the description, the image, “What We Offer”, “Key Benefits”, “Tools”, the pricing card (above) and the <head>.
The cards. Copy a service row in services.html and paste it where the new service belongs. The Home accordion in index.html shows five services; “More Services” at the end of every service page shows four.
The form. Add a choice to the “Services” question in contact.html: copy one radio button and change its value and its label.

The sitemap. Add a line to sitemap.xml:

<url><loc>https://yourdomain.com/services/brand-strategy.html</loc></url>

Adding a project, a post or a team member

Project: copy a page in projects/, edit it, then copy a card in projects.html. Home shows four projects (and the showreel in the hero shows their four images); “Related Projects” at the end of every project page shows four. Add a line to sitemap.xml.
Post: copy a page in blog/, edit it, then copy a card in blog.html; Home shows the first three posts, and “More Blog” at the end of a post shows up to three of the same category. Add a line to sitemap.xml.
Team member or testimonial: copy a card in about.html (team) or index.html (testimonials) and edit it.

To remove a service, project or post, do the reverse: delete the page, its cards, any link to it, and its line in sitemap.xml. Search the folder for the file name to catch any link left behind (a project’s service tags link to service pages too).

Adding a page

Copy contact.html — its menu marks no item as the current page, which is what a new page needs — and rename it, e.g. pricing.html.
Replace the sections inside <main> with the ones you want. Every section in the template is a block you can copy from its page (or from style-guide.html) and paste between <main> and </main>.
Update the <head> (title, description, canonical, og:url).
Link to it: add the link to the header menu and/or the footer — in every page (find and replace in files helps) — and add it to sitemap.xml.

Removing a page

Delete the file, remove its links from the header and footer of every page, and its line from sitemap.xml. Search the folder for the file name to catch any link left behind.

The style guide

style-guide.html shows every component with its name — handy for copying a button or a card. It’s hidden from search engines. Delete it before publishing if you don’t want it online.