Using the HTML templates

Download a pack

Find a design in the template hub, open its pack and click Download free. The zip downloads straight away, no sign-up needed.

What's in the zip

• index.html: a preview gallery of every design, with Desktop, Tablet and Phone buttons.
• A folder of designs (for example sections/, headers/ or pages/): one standalone .html file per design.
• README.txt: these steps in short, plus the licence.

Add a design to your site

1. Open the design's .html file in your code editor.
2. Copy the markup between <body> and </body> into your page.
3. Copy the CSS inside the first <style> into your stylesheet. Skip the second block marked "Preview page only".
4. If the file has a <script> at the bottom, copy it too. It's plain JavaScript with no libraries.

Safe to paste anywhere. Each design's CSS is scoped to its own outer class (like .bs-hero-03), so it won't restyle the rest of your site, and your site's classes (.btn, .container…) won't change the design. Shared names carry a bs- prefix. Several designs can sit on one page without clashing.

Change colours and fonts

Each design sets a few variables on its outer element. Change them and the whole design follows:

.bs-pricing-02 {         /* each design's own class */
  --bs-brand: #4f46e5;   /* buttons, links, highlights */
  --bs-ink: #0f172a;     /* text */
  --bs-radius: 14px;     /* corner roundness */
}

The designs use the Inter font from Google Fonts. To use another font, replace the font <link> in the <head> and the font-family line.

Tips for WordPress and frameworks

• WordPress: paste the markup into a Custom HTML block and the CSS into Appearance → Customize → Additional CSS.
• React, Vue, Astro and others: the markup works as-is; in React rename class to className. Keep the CSS in a global stylesheet.
• Images: designs use CSS shapes and SVG placeholders. Swap in your own images with normal <img> tags.

What the licence allows

Free for personal and commercial projects, including websites you build for clients. You can't resell or redistribute the templates themselves, on their own or in a template pack. See the full licence.