Editing the site — Titen 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 project, a service 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 forms), 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, projects.html, services.html, blog.html, testimonial.html, contact.html
residential.html, hospitality.html, commercial.html   one page per project category
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)
projects/*.html          one page per project
services/*.html          one page per service
blog/*.html              one page per post
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 and video posters
assets/fonts/            Plus Jakarta Sans, and Inter for the search panel
icon.svg, apple-icon.png, opengraph-image.png, brochure.pdf
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, because they carry the layout. A heading looks like this:

<h2 class="text-[30px] md:text-4xl lg:text-[42px] leading-[1.2] font-medium">Your headline</h2>

Change Your headline, leave the class.

Headings that appear word by word are split into one <span> per word:

<h1 …><span><span class="inline-block" data-appear="word" …>Designing</span> </span><span>…</span></h1>

Change the words inside the inner spans, and keep one pair of spans per word. To drop the effect, write the heading as plain text inside the <h1>.

Text that repeats on every page

The header, the footer, the contact details and the site’s name are copied into every 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://titen-html-marcframe.vercel.app`	Your domain, e.g. `https://www.yourstudio.com` (canonical links, share cards, `sitemap.xml`, `robots.txt`)
`contact@example.com`	Your email (in `mailto:` links and as text)
`+1 (212) 555-7890` and `tel:+12125557890`	Your phone, as shown and as dialled
`500 Park Avenue, 12th Floor, Suite 1205 New York, NY 10022, USA`	Your address (footer)
`Titen Architecture & Design 1234 Madison Avenue, Suite 567 New York, NY 10001, USA`	Your address on the Contact page (written `&` in the HTML)
`https://instagram.com`, `https://facebook.com`, `https://linkedin.com`, `https://pinterest.com`	Your social profiles
`\| Titen` in `<title>` and share tags	`\| Your Studio`

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

The logo is an <svg> drawing in the header and the footer of every page; see Making it look like your brand.

Page titles and descriptions

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

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

Keep these in step:

The title, the og: and the twitter: versions say the same thing.
The canonical link and og:url are the page’s own address.
A description of 80–160 characters shows in full in search results, and so does a title of up to 60 characters (drop the | Titen suffix when a title is longer).
Project, service 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 is to 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 (projects/…, services/…, blog/…), the path starts with ../: src="../assets/images/my-photo.jpg".

Use .jpg for photos (around 1920 px wide for wide photos, 1400 px for service photos, 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

Two 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 hero video behind the Home title	`index.html`
The studio video between the approach slideshow and the team	`about.html`

Change src to your own file (put an MP4 in assets/ and use src="assets/hero.mp4") or another link, and poster to your picture. The demo plays stock clips, which are not part of the download: the About clip plays from the web, and the hero’s assets/videos/home-hero.mp4 (or the path in index.html) is a short placeholder in the download. Keep a wide format (16:9) and small files (a few MB): they play muted and in a loop.

The brochure

“Download our brochure” (Home) and “Download Brochure” (every service page) download brochure.pdf. The file in the download is a placeholder page: replace it with your own PDF under the same name.

Links

Pages link to each other as about.html, projects.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.

Slideshows, accordion and service list

The Home testimonials: a slideshow of five cards. For the endless loop, the first card is repeated after the last one, and the last one before the first (aria-hidden="true"), so a change to the first or the last card goes in two places.
The About approach: a slideshow of four slides, built the same way.
The principles accordion and the service list (Home and Testimonials): each row is a data-toggle block. Classes that change when a row opens are listed in its data-on and data-off attributes, and the first row starts open. Edit the text and keep those attributes.

Adding a project

A project is a page plus a card wherever it should be listed:

The page. Copy an existing one, e.g. projects/urban-wellness-spa.html → projects/harbour-library.html. Use lower-case words joined by - for the file name; it becomes the address. Edit the title, the photos, the texts and the <head>.
The cards. Copy a card in projects.html and in its category page (residential.html, …), and paste it where the new project belongs. Home shows seven projects, and “Other Projects” at the end of a project page shows up to three of the same category.
The search. Every page has the list the header search looks through, <ul data-search-items hidden> near the end. Add a <li> with a link to the new page (and its text in data-text) to every page. Find in files helps.

The sitemap. Add a line to sitemap.xml:

<url><loc>https://yourdomain.com/projects/harbour-library.html</loc></url>

Adding a service, a post or a testimonial

Service: copy a page in services/, edit it, then copy a row in services.html. Home and the Testimonials page list the first four services in their expanding list. 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 “Similar Posts” at the end of a post shows up to three of the same category. Add a line to sitemap.xml.
Testimonial or team member: copy a card in testimonial.html (testimonials) or about.html (team) and edit it.

To remove a project, service or post, do the reverse: delete the page, its cards, any link to it, its search entry and its line in sitemap.xml. Search the folder for the file name to catch any link left behind.

Adding a page

Copy contact.html and rename it, e.g. careers.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). In the header menu, remove aria-current="page" and the orange text-orange class from the Contact link, which the copied page marks as current.
Link to it: add the link to the header menu and/or the footer of 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, which is 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.