LandingKit Pro documentation

Quick start

1. Open index.html in your browser. It is a gallery of everything in the kit.
2. Open one of the three files in pages/. If one is close to what you need, copy it and start editing the words.
3. To build your own mix, open any file in sections/ in a text editor, copy the part between the two marker comments, and paste it into your page.
4. Set your two brand colours once (see Colours).
5. Upload the page and the assets folder to any web host.

You do not need Node, npm, Tailwind or a build tool. A text editor and a browser are enough.

What is in the box

LandingKit-Pro/
  index.html                gallery of every block
  documentation.html        this guide
  README.md  LICENSE.txt  CHANGELOG.md
  assets/
    landingkit.css          the two colour variables and a small page base
  pages/                    3 finished landing pages, one file each
    saas-dark.html
    startup-light.html
    studio-editorial.html
  sections/                 28 sections, one file each
    navbar-01-sticky-glass.html
    hero-01-bold-centered.html
    feature-01-icon-grid.html
    ...
  heroes/                   15 split-screen heroes
    hero-01.html ... hero-15.html
    assets/splithero.css  assets/splithero.js
  pricing/                  12 pricing tables
    pricing-01-classic-cards.html ...
    assets/pricingcraft.css  assets/pricingcraft.js
  previews/                 images used by the gallery only

You can delete index.html, previews/ and this guide from the copy you upload. Your visitors never need them.

Building a page

1. Start with this empty page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your product: what it does in one line</title>
  <meta name="description" content="One or two sentences for search results.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/landingkit.css">
</head>
<body>

  <!-- paste sections here, top to bottom -->

</body>
</html>

2. Copy a section

Open a file from sections/ in your editor. Copy everything between these two lines, including the <style> block and, where there is one, the <script> block:

<!-- ========== COPY FROM HERE: FEATURE 01 - ICON GRID (3-COL) ========== -->
...
<!-- ========== COPY TO HERE ========== -->

3. Paste in page order

A typical order is navbar, hero, logos, features, proof, pricing, FAQ, call to action, footer. Each section carries its own styles and script, with its own class prefix, so any mix works on one page. Use each section once per page.

Tidy option: once your page works, you can move all the <style> blocks into the <head> and the <script> blocks to just before </body>. The three files in pages/ are arranged this way.

4. Link the navigation

Give a section an id and point a menu link at it. Scrolling is smooth and stops below a fixed navbar.

<section class="lk-price-01" id="pricing"> ... </section>

<a href="#pricing" class="lk-nav-link">Pricing</a>

Colours

The 28 sections and the 3 pages take their brand colour from two CSS variables. Set them once in your page, after the link to landingkit.css:

<style>
  :root {
    --lk-accent: #2563eb;     /* buttons, links, highlights */
    --lk-accent-2: #60a5fa;   /* lighter partner: gradients, accents on dark backgrounds */
  }
</style>

Lighter tints, hover shades and soft glows are worked out from these two with CSS color-mix(), so they follow automatically.

Buttons put white text on --lk-accent. Pick a colour dark enough for white text to read clearly. Very light colours such as yellow need a darker shade.

Other colours

Backgrounds, text greys, and the green, amber and red used for status marks are plain hex values inside each section's <style> block. Search for the value and replace it. The most common ones:

One section in a different colour

Variables can be set on a single section. This makes only the pricing section green:

<section class="lk-price-01" style="--lk-accent: #047857">

Fonts

Most sections use Inter. Four heroes use a display font. The fonts load from Google Fonts with one link tag in the page head.

A page with hero-01 and Inter sections needs both families in one link:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@300;400;600;700;800&display=swap" rel="stylesheet">

Using your own font

Load your font, then search the page for font-family: 'Inter', sans-serif and replace 'Inter' with your font name. If a font fails to load, the page falls back to the visitor's system font and stays readable.

Section notes

Sections without a script are not listed. They are plain HTML and CSS: edit the words and you are done.

Navbars (navbar-01, navbar-02)

Both stay fixed at the top and turn into a menu button below 768 or 820 pixels. Because they are fixed, the first section under them needs top padding. The heroes already have it. The menu closes on Escape and on a click outside.

Waitlist hero (hero-04)

Set your launch date on the countdown. Left empty, it counts from 14 days so the sample never reaches zero.

<div class="lk-h4-countdown" data-lk-launch="2027-01-15T09:00:00">

The email form works like the other forms. See Connecting forms.

Stats row (stats-01)

Write the final number in the HTML and repeat it in data-target. The script counts up to it when the row scrolls into view. Use data-prefix and data-suffix for signs and units. Decimals follow data-target.

<span class="lk-s1-num" data-target="99.99" data-suffix="%">99.99%</span>
<span class="lk-s1-num" data-target="2" data-prefix="&lt;" data-suffix=" min">&lt;2 min</span>

Pricing (pricing-01)

Each price holds both amounts. Change the numbers in the HTML. The script does not need editing.

<span class="lk-p1-amount" data-monthly="49" data-yearly="39">49</span>

Tabs (feature-04)

To add a tab, copy one <button role="tab"> and one panel, and give them matching id and aria-controls values. Left and right arrow keys move between tabs.

FAQ (faq-01)

One answer is open at a time. To add a question, copy a whole lk-faq-item block and give the answer a new id that matches the button's aria-controls.

Quote carousel (testimonial-02)

Add or remove lk-t2-slide blocks and keep one dot button per slide. It changes every 6 seconds and pauses while the pointer or keyboard focus is on it. To turn autoplay off, set AUTOPLAY_MS = 0 in its script.

Offer banner (cta-03)

This file holds two separate blocks: a dismissible banner for the top of the page and a wide call-to-action bar. Use either one or both.

Comparison table (compare-01)

On phones the table scrolls sideways inside its own box. The highlighted column is the one with the class lk-cp1-us.

Connecting forms

Four sections contain a form: hero-04, cta-02, newsletter-01 and contact-01. A static page cannot send email by itself, so the forms ship in demo mode. They check the input and show the success message, but send nothing.

To go live, set action to the address your form service gives you and delete data-lk-demo:

<!-- before -->
<form class="lk-nw1-form" action="#" method="post" data-lk-demo novalidate>

<!-- after -->
<form class="lk-nw1-form" action="https://formspree.io/f/your-id" method="post" novalidate>

The page still checks the fields first, then the browser submits the form to your service in the normal way.

Add a link to your privacy policy near any form that collects email addresses, and only send what people signed up for.

Split heroes

The 15 pages in heroes/ are full-height openers with their own stylesheet and script. To use one, copy its <section class="sh-hero"> block into your page and link the two files:

<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="heroes/assets/splithero.css">
...
<script src="heroes/assets/splithero.js"></script>

A few heroes (09, 10 and 15) also have a short <style> block in their page head. Copy that too.

Colours

Heroes use their own variables, set at the top of splithero.css. Most heroes also set colours directly in style attributes, so each one can have its own palette. Search the hero for the colour and replace it.

:root {
  --sh-indigo: #5b4fff;  --sh-coral: #ff4f3b;  --sh-amber: #ffb347;
  --sh-emerald: #3dbf82; --sh-sky: #38bdf8;    --sh-violet: #a855f7;
  --sh-font-display: 'Syne', sans-serif;
  --sh-font-body: 'DM Sans', sans-serif;
}

Effects

Effects switch on with a data- attribute. No JavaScript to write.

Visitors who ask their device for reduced motion see the still version of every effect.

Layout classes

sh-split--50-50, --60-40, --40-60, --65-35 and --35-65 set the column widths. --diagonal and --curved cut the media side. Below 900 pixels every split stacks into one column.

Pricing tables

The 12 pages in pricing/ share one stylesheet and one script. Copy the <div class="pc-wrapper"> block into your page and link the two files:

<link rel="stylesheet" href="pricing/assets/pricingcraft.css">
...
<script src="pricing/assets/pricingcraft.js"></script>

Prices

Write the monthly price in your base currency in data-base-usd. The script works out the yearly price and the other currencies.

<span class="pc-price-amount" data-base-usd="29">29</span>

Settings

Add this block before the script tag to change the yearly discount, the starting currency or the list of currencies. Leave out any line you do not need.

<script>
  window.PricingCraftConfig = {
    currency: 'EUR',          // shown first
    yearlyDiscount: 20,       // percent off when "yearly" is on
    currencies: {
      USD: { symbol: '$', rate: 1,    decimals: 2 },
      EUR: { symbol: '€', rate: 0.92, decimals: 2 },
      JPY: { symbol: '¥', rate: 150,  decimals: 0 }
    }
  };
</script>
<script src="pricing/assets/pricingcraft.js"></script>

If you change the list of currencies, change the buttons to match. Each button needs the same code in data-currency. To drop the switcher, delete the pc-currency-wrap block.

The rates are fixed numbers that you type in. They are not live exchange rates, and the table does not charge anyone. Use it to show prices, and let your payment provider do the real conversion.

Colours and fonts

Set these at the top of pricingcraft.css, or in your own page after it:

:root {
  --pc-primary: #2563eb;        --pc-primary-hover: #1d4ed8;
  --pc-primary-light: #eff6ff;  --pc-accent: #f59e0b;
  --pc-font-display: 'Syne', sans-serif;
  --pc-font-body: 'DM Sans', sans-serif;
}

From your own code

PricingCraft.setYearly(true);
PricingCraft.setCurrency('EUR');

Images and logos

The kit ships without image files. Dashboards, charts, avatars and logos are drawn with CSS and SVG so the pages load fast and nothing is missing. Swap in real images where you have them:

• Customer logos (logos-01): replace each list item's content with <img src="logo.svg" alt="Company name" height="28">. Only show logos of real customers who agreed to it.
• Team photos (team-01): put <img src="photo.jpg" alt="Name"> inside lk-tm1-photo in place of the initials.
• Blog covers (blog-01): put <img src="cover.jpg" alt=""> inside lk-bl1-cover in place of the SVG.
• Product screenshot (hero-01, hero-02): replace the mock window's inner blocks with one <img> of your product.

Give every meaningful image a short alt text. Use alt="" for decoration.

The names, numbers, quotes and people in the sample content are invented placeholders. Replace them with real ones before you publish.

Going live

1. Put your page, the assets folder, and the heroes/assets or pricing/assets folders if you used them, in one folder. Name the page index.html.
2. Upload the folder to Netlify, Cloudflare Pages, Vercel, GitHub Pages or any shared hosting. On most of these you can drag the folder into the browser.
3. Before you share the link, check the page title and description, replace every sample name and number, connect the forms, and open the page on your phone.

Browser support

Current versions of Chrome, Edge, Firefox and Safari, on desktop and mobile. The colour variables use CSS color-mix(), supported in Chrome and Edge 111, Firefox 113 and Safari 16.2 and newer. Older browsers still show the page with the main colours and lose only the soft tints and glows.

Layouts were checked at 320, 375, 768 and 1280 pixels wide.

Help and license

For help, reply to your purchase receipt email and say which file you are working on.

You may use the kit in unlimited projects for yourself and for clients. You may not resell or redistribute the kit itself. The full terms are in LICENSE.txt.