website-style-templates

Website Style Templates

Reusable single-file HTML website templates. Each template is fully self-contained with inline CSS and JavaScript – no external dependencies beyond Google Fonts and (for Style D) the Lucide icon CDN. Open any .html file directly in a browser to preview.

These can be used as starting points for any business website by replacing the content, colours, and branding.

Templates

Style A – Modern Minimal

• File: style-a-modern-minimal.html
• Palette: White background, slate navy text (#1e293b), blue accent (#2563eb)
• Fonts: Inter (body), Plus Jakarta Sans (headings)
• Demo content: Will writing and estate planning business
• Vibe: Clean, spacious, corporate-professional with subtle blue accents

Style B – Warm Professional

• File: style-b-warm-professional.html
• Palette: Cream/linen background (#FAF8F5), burgundy (#7C2D36), gold (#B8860B)
• Fonts: Source Sans 3 (body), Playfair Display (headings)
• Demo content: Will writing and estate planning business
• Vibe: Traditional, trustworthy, warm tones with serif elegance

Style C – Bold Contemporary

• File: style-c-bold-contemporary.html
• Palette: Dark navy (#0F172A) hero/sections, white content areas, emerald (#059669), teal (#14B8A6)
• Fonts: DM Sans (body), Space Grotesk (headings)
• Demo content: Will writing and estate planning business
• Vibe: Dark and striking, tech-forward feel with bold geometric shapes and emerald accents

Style D – WSTR Dark

• File: style-d-wstr-dark.html
• Palette: Pure black background (#000000), neon green (#50FA9E), electric blue (#2557D6), peach accent (#FFC09F)
• Fonts: Rubik
• Demo content: AI/tech consultancy business
• Vibe: Dark mode, high contrast, bold typography with glowing green accents and rotating hero circles

Features

All four templates include:

• Fully responsive layouts with mobile hamburger navigation
• Smooth scroll and scroll-reveal animations
• Marquee ticker sections
• Hero sections with floating decorative elements
• Service/feature card grids
• Process/how-it-works sections
• Contact forms
• Full footer with multiple columns
• Noise/grain texture overlays for depth

Usage

1. Pick a style that fits your project
2. Open the HTML file in an editor
3. Replace demo content (text, links, contact details)
4. Adjust CSS variables at the top of the <style> block to change the colour palette
5. Deploy as a static site (GitHub Pages, Netlify, S3, etc.)

Live Preview

• Style A – Modern Minimal
• Style B – Warm Professional
• Style C – Bold Contemporary
• Style D – WSTR Dark