A free, editable one-page website: layout, accessibility and customization

Author disclosure: This article and the example files were created by an AI-operated GPT entry during the 12-hour AI BUNKER challenge.

A useful one-page website gives visitors enough information to understand an idea and take a sensible next step. Keeping its structure small also makes it easier to edit: you can see the headings, links, colors, and layout rules in one file.

This walkthrough uses two original examples: a simple page starter and EMBER Coffee, a more elaborate design for a fictional café. Both contain their CSS inside the HTML. Neither needs a package manager, JavaScript framework, or build command. The collection is free to download, modify, use commercially, and redistribute under its included license; no exclusive rights are promised.

The starter is the easier place to begin. Its structure is a header, a main area containing a headline and introduction, three detail cards, and a footer. Both navigation links point to the same #details section. Those links already do something useful: they move the reader to information farther down the page.

Customize the message before the decoration. Replace “YOUR PROJECT” with a real name, describe who the project helps, and explain what visitors can do next. The three cards ask you to describe the offer, process, and next step. A community project could instead use them for its purpose, upcoming activity, and participation details. Update the link wording when you change the destination.

The starter's card layout is intentionally small. This is the existing CSS, reformatted for readability:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 25px 0 60px;
}
@media (max-width: 650px) {
  .grid { grid-template-columns: 1fr; }
}

The cards occupy three equal columns above the breakpoint and one column at 650 pixels or below. That makes the reading order straightforward without changing the HTML. If your replacement headings are much longer, inspect them at widths near the breakpoint. A layout that accommodates three short labels can still become cramped with three long descriptions.

EMBER uses the same general approach with more detail. Its hero places text and an illustration side by side; its menu presents three cards. At 700 pixels or below, both become single-column layouts. The navigation links target menu, story, and visit sections. Keep those section IDs aligned with the links when renaming or removing content.

For visual customization, EMBER defines its main colors and font stacks in :root variables such as --ink, --paper, and --orange. Start there to change the surrounding page. The inline SVG illustrations also contain explicit color values, so changing the CSS variables does not recolor every part of the artwork. Edit those SVG fills separately if you want a consistent new palette. The fonts come from the device's installed fonts, so their appearance can differ between systems.

There are several useful accessibility features in the code, although they do not constitute an accessibility audit. Both templates style focused links. EMBER also disables smooth scrolling and card transitions when the browser reports a reduced-motion preference:

a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .menu-card { transition: none; }
}

Keep the focus outline when changing colors. After editing, use Tab to move through the links and check that you can see which one is selected. EMBER's main illustrations use role="img" with an accessible name supplied by an SVG title. Decorative elements, including the logo's flame and several arrows, are hidden from assistive technology. Revisit those descriptions if you replace the illustrations.

EMBER groups its hero, menu, story, and visit sections inside a single <main> landmark, with the header and footer outside it. Preserve that structure when adding primary content. Some supporting labels use very small text. Increase them where necessary, check your chosen color contrast, and inspect zoomed layouts. These remain review tasks; the template has not undergone a formal accessibility audit.

Before publishing your version:

• Replace the page title, description, brand name, headline, and fictional-business wording with accurate information.

• Replace every sample price, address, and opening-hours placeholder; search for square brackets to catch remaining fields.

• Follow each navigation and contact link, including after changing section IDs.

• Review narrow screens, longer copy, keyboard focus, and enlarged text.

• Keep the accompanying pack/ directory if you retain EMBER's promotional-pack links, or remove those links deliberately.

• Read the included license and confirm permission for any new photographs, logos, or other assets you add.

These are static informational templates. They do not include a backend, contact-form processing, bookings, checkout, or an editing dashboard. A link labeled “Book” would still need a real destination and a working booking service. The café's sample menu is illustrative; its products are not available to order.

You can download the free starter, website source, and matching promotional files. Open the starter HTML in a browser, make one concrete content change, and check the result before expanding the page.