After you buy

How to edit and publish an HTML/CSS landing page template

These are the instructions from the README delivered with every template: change the 5 colour variables, replace the placeholder text, connect the form to your own form handler and host the file. All you need is a text editor.

Re-brand by editing 5 variables

The first rule in the <style> block holds the palette:

:root {
  --brand: #0b5cad;
  --brand-dark: #083b70;
  --accent: #c2410c;
  --ink: #14202b;
  --tint: #eef5fc;
}
VariableUsed forKeep readable
--brandHero gradient end, step numbers, outlinesWhite text sits on it: choose a dark shade
--brand-darkHero gradient start, links, icon colorWhite text sits on it, and it is text on white and on --tint
--accentCall and submit buttons, emergency band, focus outlineWhite text sits on it: choose a dark shade
--inkBody text, demo notice and footer backgroundVery dark: white text sits on it in the footer
--tintAlternate section and form backgroundVery light: --ink text sits on it

After changing colors, test each pair with any contrast checker and aim for a ratio of at least 4.5:1.

Replace the placeholder content

Everything in the pages is placeholder content. Nothing describes a real business. Search each file for these and replace them:

  • Your Business Name (Your Practice Name in the dentist file, Your Law Firm Name in the lawyer file)
  • Your City, Your County, Neighborhood One, Neighborhood Two, Neighborhood Three, Nearby Town One, Nearby Town Two, Neighboring County One, Neighboring County Two
  • The phone number, which appears as visible text such as 555-0110 and as a link such as href="tel:5550110". Change both. Numbers used: plumber 555-0110, dentist 555-0120, lawyer 555-0130, cleaner 555-0140, electrician 555-0150, landscaper 555-0160.
  • The placeholder email address
  • 123 Example Street and Your City, ST 00000
  • $00 prices in the dentist and cleaner files
  • The hours in the footer
  • The <title> and <meta name="description"> text at the top of the file
  • Service descriptions, FAQ answers and the "why us" points. Several of them are written as instructions, for example "State your call-out policy here". Keep only statements that are true for your business.
  • The footer links Privacy policy and Terms of service point to #. Point them at your own pages.

Customer quote slot

The dashed box labelled "Add a real customer quote here" is empty on purpose. Put in words a real customer gave you permission to publish, or delete the whole <div class="quote-slot"> block. Do not invent quotes.

Demo notice

Each page starts with a dark bar saying it is a demonstration template and not a real business. Once every placeholder is replaced, delete the whole <aside class="demo"> block near the top of the <body>.

Wire up the contact form

The form is plain HTML and ships with action="#", so pressing the button sends nothing until you connect it. A static page cannot receive form submissions on its own. You need a form handler: one included with your web host, or a form service you sign up for.

  1. Get the form endpoint address from your form handler.
  2. Find <form action="#" method="post"> in the file and replace # with that address.
  3. The fields are sent under these names: name, phone, email, service, message, plus address (plumber, electrician, landscaper), date and time (dentist), contact-time (lawyer), bedrooms and frequency (cleaner). If your handler expects other names, change the name="..." attributes.
  4. Send a test submission and check that it arrives.

A form collects personal data. Link your privacy policy near the form and switch on your handler's spam protection.

Publish

Rename your edited file to index.html and upload it to any static web host. No build step is needed.

Your responsibilities

You are responsible for your own content, for your privacy policy and terms pages, for any advertising rules that apply to your profession (law firms and dental practices in particular), and for the accessibility compliance of the site you publish. The templates include a skip link, landmarks, one h1, labelled form fields and visible focus styles as a starting point, not as a certificate of compliance.