Editing the site — Ciketo HTML

Every page is a plain HTML file that you edit in a code editor. This guide shows where everything is, and how to add a service, a post or a page.

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, 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
blog/*.html              one page per post
legal/*.html             privacy policy, terms and conditions, cookie policy
assets/css/style.css     the stylesheet (generated — see design.md)
assets/js/main.js        the site's scripts (you rarely need to touch it)
assets/js/config.js      your settings: form endpoint
assets/images/           photos and the client logos
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, because they carry the layout. A heading looks like this:

<h2 class="text-[30px] md:text-[36px] lg:text-[42px] leading-[1.2] font-medium tracking-[-0.03em]">A simpler way to ship</h2>

Change A simpler way to ship, leave the class. Apostrophes and ampersands are often written as ' and & (Tell us what you're shipping, Kiln & Co); typing ' works too, & should stay &. When you search for a sentence, search for a part without them.

The Home title appears word by word, so it is split into one <span> per word:

<h1 …><span><span class="inline-block" data-appear="text" data-delay="0.3" …>Moving</span> </span><span>…</span></h1>

Change the words inside the inner spans, and keep one pair of spans per word; each word starts 0.075 seconds after the one before it (data-delay). To drop the effect, write the heading as plain text inside the <h1>. The line under it and the booking note (“Booking capacity · for Q4 2026”) appear the same way, one span each.

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://ciketo-html-framebrick.vercel.app`	Your domain, e.g. `https://www.yourcompany.com` (canonical links, share cards, `sitemap.xml`, `robots.txt`)
`hello@example.com`	Your email (footer and Contact page; in `mailto:` links and as text)
`support@example.com`	Your support email (the help card beside the services on Home)
`+1 (800) 555-0147` and `tel:+18005550147`	Your phone, as shown and as dialled (footer, Contact, the Home help card, “Call Customer Service” in the call to action)
`128 Harbor Avenue Suite 420 Rotterdam 3011 AA Netherlands`	Your address (footer and Contact)
`https://linkedin.com`, `https://x.com`, `https://facebook.com`, `https://instagram.com`	Your social profiles (footer)
`\| Ciketo` in `<title>` and share tags	`\| Your Company` (the Home title, `Ciketo - Logistics & Shipping Website`, has no suffix)
`content="Ciketo"` and `aria-label="Ciketo"`	Your company’s name (the site name for browsers and share cards, and the name of the logo link)
`Ciketo — logistics and shipping website template`	A description of your share image (`og:image:alt`, `twitter:image:alt`)

Include the .html, .xml and .txt files. Review each change before replacing all: “Ciketo” also appears in text you may want to rewrite rather than replace (the copyright line, the legal pages, the Home title and description). The year in the copyright line updates itself (data-current-year). The business hours are on the Contact page only.

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

Sections that repeat on several pages

Some sections are copied into several pages. Change them in every copy (find and replace in files works for text):

Section	Pages
Header and footer	Every page
Call to action (“Ready to Move Your Business Forward?”)	`index.html`, `about.html`, `services.html`, `blog.html`
How it works (the four steps)	`index.html`, `services.html` and every page in `services/`
The quote form	`index.html`, `contact.html` and every page in `services/`
Clients (“Since 2011” and the logo ticker), the four facts, Industries	`index.html`, `about.html`

Page titles and descriptions

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

<title>About Us | Ciketo</title>
<meta name="description" content="…" />
<link rel="canonical" href="https://yourdomain.com/about.html" />
<meta property="og:title" content="About Us | Ciketo" />
<meta property="og:url" content="https://yourdomain.com/about.html" />
<meta property="og:description" content="…" />
<meta property="og:image" content="https://yourdomain.com/opengraph-image.png" />
<meta name="twitter:title" content="About Us | Ciketo" />
<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 (Home’s is the root, https://yourdomain.com/).
A description of 80–160 characters shows in full in search results, and so does a title of up to 60 characters (drop the | Ciketo suffix when a title is longer).
Home’s title and description describe the template: write them for your business.
Service and post pages use their own photo as og:image and twitter:image: https://yourdomain.com/assets/images/<file>. Posts also give their date in article:published_time.

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 2400 × 1600).

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

A few files are used in more than one place: home-hero.jpg is also the 404 page’s cover, home-about-1.jpg also sits beside the quote form, and about-story.jpg also illustrates the key benefits on every service page. Replacing such a file changes every place; to show another photo in one of them, use a new file there.

Use .jpg for photos and keep files small: about 2400 px wide for the covers, the call to action and the service and post photos, 1200 px or less for the others. Compress them with Squoosh or TinyPNG. Write an alt text for images that carry meaning; leave alt="" for decorative ones.

Client logos

The ticker after the Home and About heroes (“Since 2011”) shows six sample logos, assets/images/client-*.svg, at 16 px tall. Replace the files with your clients’ logos (or change the src, for a PNG), and the alt with each client’s name. The row is written three times inside the ticker (data-ticker-copy="0", "1" and "2") so that it loops without a gap: make the same change in all three, in index.html and about.html. To drop the section, delete the <section> that holds “Since 2011” in both pages.

Links

Pages link to each other as about.html, services.html, services/<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. 404.html is the exception: its links start at the site’s root (/contact.html), because hosts show it at any address.

The header clock

On desktops, next to the “Get a Quote” button, and in the phone menu, the header shows the visitor’s own time and date. The script writes them as the page loads (the 00:00 and January 1, 2026 in the HTML are only placeholders) and keeps them current. data-clock="en-US" sets the language and order of the date: en-GB writes 3 October 2026, de-DE 3. Oktober 2026. The time always uses the 24-hour clock.

To remove the clock, delete the two <div data-clock="en-US" …> blocks in the header of every page.

Accordions, steps, testimonials and the FAQ

The services accordion (Home): one card per service, the first one open. Each card is a data-service-item whose button names its panel in aria-controls (service-0, service-1, …, the panel’s id). A closed card is white with black text (in its style) and its panel has hidden; the open card is black with white text.
How it works (Home, Services, every service page): four data-step cards, the first open (data-open). Classes that change when a step opens are listed in its data-on and data-off attributes; the number (“01 / 04”) is written in each card.
Testimonials (Home): four portraits and four quotes, matched by their order. The first portrait is chosen (aria-pressed="true") and its quote shows; the other quotes have aria-hidden="true" and opacity: 0. Each portrait’s button is named after the client (aria-label).
The FAQ (Home): each question opens on its own, and the first starts open. The button names its answer in aria-controls (faq-0, faq-1, …, the answer’s id).

Edit the text and keep these attributes: the site script relies on them.

The blog list

The Blog page holds every post but shows six; the next six appear as the visitor scrolls to the end of the list. The list is <ul data-load-more="6">: the first six cards are plain <li>, the others <li class="hidden">. Keep it that way when you add or remove posts. To show more posts at a time, change the 6 and leave as many cards without hidden.

Adding a service

A service is a page plus its place in the lists:

The page. Copy an existing one, e.g. services/ocean-freight.html → services/customs-brokerage.html. Use lower-case words joined by - for the file name; it becomes the address. Edit the title and summary, the photo, the introduction and its four figures, the key benefits, the lanes and the <head>. The steps and the quote form are the same on every service page.
The Services page. Copy a row in services.html (number, title, summary, “Explore …” button, photo, key benefits) and paste it where the service belongs.
Home. Copy a closed card of the services accordion in index.html and edit it: give its button’s aria-controls and its panel’s id the next number (service-6), and change the number shown (“07”).
The footer, if you want it there: its Services column lists Ocean, Air and Road Freight. Change it on every page (find and replace in files).

The sitemap. Add a line to sitemap.xml:

<url><loc>https://yourdomain.com/services/customs-brokerage.html</loc></url>

Adding a post

The page. Copy a page in blog/, e.g. blog/how-to-choose-the-right-shipping-method.html → blog/my-new-post.html. Edit the category, the title, the excerpt, the cover photo, the date (the <time> element’s datetime and its text, and article:published_time in the <head>), the text and the <head>. Paragraphs after the first carry mt-5 and headings mt-10, for the space above them.
The Blog page. Copy a card in blog.html and paste it where the post belongs (newest first). Keep the first six cards without hidden (the blog list).
Other lists. Home shows the first three posts (“Logistics Insights”), and “Other Posts” at the end of each post shows up to three others of the same category (Shipping, Supply Chain or Logistics). Copy a card there for the new post to appear.

The sitemap. Add a line with the post’s date:

<url><loc>https://yourdomain.com/blog/my-new-post.html</loc><lastmod>2026-10-05</lastmod></url>

To remove a service or a 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.

Adding a lane, a testimonial or a question

Lane: each service page lists its trade lanes as cards (frequency, route, transit time, departure, arrival, photo). Copy a <li> in the lanes list and edit it. The Home hero shows one lane in its own card (“New Lane”).
Testimonial: in index.html, copy a portrait (<li data-portrait>) and a quote (<figure data-quote>), edit both, and keep them in the same order. Copy ones that are not chosen (the second, for example), so the new client starts closed. The layout is drawn for four clients.
Question: copy a closed question in the FAQ of index.html, and give its button’s aria-controls and its answer’s id the next number (faq-6).

Adding a page

Copy about.html and rename it, e.g. careers.html. About opens without a dark cover, so its header is solid from the start; Home, Contact and 404 open with one, and their header is transparent at the top (Making it look like your brand).
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).
The copy marks About as the current page in both menus (the main menu and the phone menu). Make those two About links look like the others: remove aria-current="page", copy the data-motion and style attributes of the Blog link over theirs, and change text-white to text-ink in their class.
Link to it: add the link to the header menus 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: its sample form posts to your endpoint once you set one (Forms).