Tektona - Construction HTML Template

A complete website template for builders, contractors and renovation companies, with 24 home pages for 24 trades: general contractors, home renovation, roofing, electricians, plumbing and heating, carpentry, interior fit-out, solar, architecture and design-build, commercial construction, kitchens and bathrooms, painting, landscaping, handyman services, concrete, flooring, new homes, property maintenance, windows and doors, HVAC, demolition, steel fabrication, pools and heritage restoration. The design looks like a technical drawing on a building site: dimension lines, drawing callouts, title blocks, a blueprint grid, hatching and hazard tape, in hi-vis lime on graphite or any of 12 colour skins.

Visitors can price their project before they call: a cost calculator, a material estimator, a renovation planner, a colour visualizer, a 5-step estimate request and site visit booking. Every floor area switches between m² and ft².

Built on Bootstrap 5.3.8 with plain JavaScript. No build step and no jQuery: open index.html and it works.

What's included

• 112 HTML pages, plus a right-to-left copy of every page in the rtl/ folder
• 24 home pages: General contractor, Home renovation, Roofing, Electrician, Plumbing & heating, Carpentry & joinery, Interior fit-out, Solar & renewables, Architecture & design-build, Commercial construction (dark), Kitchens & bathrooms, Painting & decorating, Landscaping & hardscape, Handyman services, Concrete & foundations, Flooring & tiling, New homes developer, Property maintenance, Windows & doors, HVAC & heat pumps, Demolition & excavation (dark), Steel fabrication, Pools & outdoor living, Heritage restoration
• 6 one-page sites: Contractor, Roofer, Electrician, Painter, Handyman and Solar installer
• 6 landing pages for ad campaigns: Free estimate, Kitchen remodel offer, Roof inspection, Solar savings, 24/7 emergency plumber, Bathroom package
• Planning tools (7 pages): Tools overview, Cost calculator (room by room), Material estimator (paint, tiles, flooring, plasterboard, concrete, bricks), Renovation planner with a week-by-week programme, Colour visualizer, Free estimate in 5 steps, Book a site visit
• Services: Services (2 layouts), Service details, How we work, Pricing, Renovation packages, Maintenance plans, Financing, Warranty & aftercare, Service areas, Area details
• Projects: Projects grid, masonry and list, Project details, Case study, Before & after
• Company: About (2 layouts), Our history, Team, Team member, Careers, Job details, Safety & accreditations, Sustainability, Suppliers & partners, Client reviews, FAQ
• Client portal: Log in, Register, Reset password, Dashboard, Project tracker (programme, site diary, inspections), Documents, Invoices & payments, Messages, My account
• 6 printable documents: Estimate, Invoice, Work order, Warranty certificate, Site report, Building contract (print or save as PDF)
• Shop: Shop, Product, Cart, Checkout, Wishlist, Order received, mini cart and product quick view
• Blog & resources: Blog (3 layouts), Article, Guides, Guide, Construction glossary
• Contact: Contact, Offices & yards, 24/7 emergency repairs
• Utility: UI elements, Search results, 404, Coming soon, Maintenance, Thank you, Privacy, Terms, Cookie policy
• 12 e-mail templates: welcome, estimate ready, site visit, project kick-off, site diary, milestone payment, change order, invoice, payment received, handover, review request, newsletter
• HTML documentation, readable and minified CSS and JS, SCSS sources (21 partials), custom.css for your own styles

Technical details

• Bootstrap 5.3.8 and Bootstrap Icons 1.13.2 (MIT), included in assets/vendor
• Plain JavaScript, no jQuery
• Tested in current Chrome and Edge (Chromium) at phone, tablet and desktop widths, in light and dark mode
• The forms need a server with PHP 7.4 or newer and mail(); the mbstring and cURL extensions are optional. All other pages are static HTML.

Good to know

• Demo photos are not included. The live preview uses photos from Unsplash for presentation only. In the download every image is a labelled placeholder (assets/img/placeholder/) showing its size, and a list links to the free Unsplash originals.
• Forms send e-mail only through the PHP files on your own server. In the live preview they run in demo mode and send nothing.
• The calculators show rough ranges from sample rates; put in your own prices before you go live.
• The client portal, site visit slots and shop are front-end designs with sample data. To show real projects, bookings or take real orders, connect them to your job-management software, calendar or a shop platform. The "Pay" buttons are designs for your payment provider; the template takes no payments.
• The printable documents are layouts, not legal templates: check the terms with your own adviser.
• The maps are OpenStreetMap embeds. The template sends no tracking data; the Google Analytics example runs only if you add it and the visitor accepts analytics cookies.
• All company names, people, licence numbers, prices, figures and reviews in the sample content are fictional.

Credits

• Bootstrap 5.3.8, Bootstrap Icons 1.13.2 (MIT)
• Archivo, IBM Plex Mono, Big Shoulders Stencil (SIL Open Font License 1.1)
• Maps: © OpenStreetMap contributors (ODbL)
• Preview only: photos from Unsplash, video from Pexels

Changelog

Version 1.0.1 (16 Oct 2026)

• Fixed: sliders showed horizontal and vertical scrollbars on Windows. They now scroll with the arrow buttons, swipe or trackpad, without a scrollbar.
• Fixed: wide tables and Gantt charts no longer show a vertical scrollbar; a thin horizontal one appears only when the table is wider than the screen.

Version 1.0.0 (16 Oct 2026)

• First release.
• 112 HTML pages: 24 home pages, 6 one-page sites, 6 landing pages, client portal, shop and 6 printable documents, with a right-to-left copy of every page.
• Planning tools: cost calculator, material estimator, renovation planner, colour visualizer, 5-step estimate request and site visit booking.
• m² / ft² switch for every floor area, calculator and filter.
• 12 colour skins, custom colour picker, light and dark mode, three corner styles and a blueprint grid switch.
• 12 responsive e-mail templates.
• PHP contact and newsletter handlers with spam protection, file uploads, an optional CSV copy and Mailchimp.
• Cookie consent with categories and Google Consent Mode v2.
• HTML documentation.

Features

• Cost calculator: rooms, floor area, finish level and extras give a budget range and the time on site; the rates are your own data- attributes, documented step by step
• Material estimator for paint, tiles, flooring, plasterboard, concrete and bricks, with waste allowances
• Renovation planner: pick the stages, set their length and get a week-by-week chart and a checklist to print
• Colour visualizer: try wall, feature wall, trim, cabinet and floor colours on a room drawing, start from ready schemes and keep a paint list
• Estimate wizard in 5 steps with project type, details, budget, contact and a summary, plus a site visit booking form with day and time slots (sample slots until you connect your calendar)
• m² / ft² switch in the top bar: every floor area, calculator and filter follows the visitor's choice
• A tool for the trade on many home pages, for example roof measuring, solar system size and payback, stair calculator, concrete volume, floor size, window and door builder, yearly heating cost, steel beam guide, pool size and excavation volume
• Client portal layouts: dashboard with budget, payments, site diary and decisions, a project tracker with a programme (Gantt chart), documents, invoices and messages
• Printable documents that always print on white paper, in every skin and in dark mode
• 12 colour skins (hi-vis lime, safety orange, amber, brick, corten steel, copper, timber, sage, moss, teal, violet, concrete), a custom colour picker, light and dark mode, three corner styles and a blueprint grid switch in the style panel
• Drawing details you can reuse anywhere: dimension lines, callouts, title blocks, hatching, hazard tape, crop marks, stencil numbers, Gantt charts and a before / after slider
• Project, service and shop filters, category filters, carousels, counters, lightbox and video popup, countdowns, "load more", table of contents and reading progress
• Front-end shop: cart in the browser, product quick view, coupon codes, free-shipping progress bar, checkout and wishlist
• Live site search while you type, and a search results page
• Cookie consent with categories and Google Consent Mode v2: analytics and marketing scripts run only after consent
• PHP forms with AJAX sending, file uploads (plans and photos), spam protection (honeypot, time check, rate limit, optional reCAPTCHA v3), an optional CSV copy of every entry and a Mailchimp newsletter
• SEO: unique titles and descriptions, Open Graph, schema.org GeneralContractor data, sitemap.xml, robots.txt
• Fonts are self-hosted (Archivo, IBM Plex Mono, Big Shoulders Stencil), so pages make no requests to Google Fonts
• Accessible markup: one h1 per page, skip link, visible focus, labels on every field, keyboard-friendly menus, tabs, sliders and wizard steps, reduced-motion support
• Deferred scripts, lazy-loaded images, minified CSS and JS, an icon font subset and .htaccess with compression and caching
• Preloader, newsletter popup, WhatsApp button, a measuring-tape scroll bar and a sticky Call / Estimate bar on phones
• Language switcher ready for your translations
• Documentation maps every page to the matching WordPress and WooCommerce template

Requirements

• A current web browser. Tested in Chrome and Edge; the CSS is supported by current Firefox and Safari too
• A code editor to change the content, for example Visual Studio Code
• Any web hosting for the static pages (Apache, nginx, LiteSpeed or a static host); no database
• PHP 7.4 or newer with mail() only for the contact, estimate, site visit and newsletter forms (assets/php/); the mbstring and cURL extensions are optional. All other pages are plain HTML and work without PHP
• Optional: a Mailchimp account for the newsletter and a Google reCAPTCHA v3 key for extra spam protection
• Optional: a Sass compiler, only if you want to edit the SCSS sources instead of style.css. It is not needed to use the template
• To take payments, bookings or show real project data: your payment provider, calendar or job-management software (the template is the front end)

Instructions

1. Unzip the download. The tektona/ folder is the template; the documentation is in Documentation/index.html.
2. Open tektona/index.html in your browser to look around. No build step is needed.
3. Pick your colours: choose one of the 12 skins, or change the brand variables in section 02 of tektona/assets/css/style.css. Put your own CSS in tektona/assets/css/custom.css.
4. Choose your home page (rename it to index.html), delete the pages you do not need and replace the texts. Replace the placeholder images in tektona/assets/img/placeholder/ with your own photos.
5. Put your own prices into the calculators (the data-rate, data-mult and data-wk attributes), and your company name, phone, address and licence number into every page with find and replace.
6. Set your e-mail address in tektona/assets/php/contact.php and newsletter.php. Optionally add your Mailchimp and reCAPTCHA keys. The forms send only when these PHP files run on your server.
7. Replace https://tektona.example with your domain, then upload the contents of the tektona folder to your web hosting. Using the RTL version? Upload the rtl/ folder too.
8. Optional: switch the pages to style.min.css, main.min.js and the icon subset for a faster site (documentation, "Before going live").

The documentation explains every page, component, calculator and setting, with a FAQ and a list of what runs on sample data. For help, send us a message through this item page.