StoneCraft Construction — HTML Landing Page Template

StoneCraft Construction is a premium single-page Bootstrap 5 template for contractors, builders, remodeling companies, masonry businesses, renovation firms, and commercial construction companies. This guide is written for buyers who want to customize the template safely without having to understand every line of code.

The README is the primary customization guide for this product. It explains what to change, where to change it, what is already implemented, what is only a demo, and what must be connected or reviewed before a real business launches the site.

Quick Start

If you want to turn the template into your own construction-company site quickly, complete these steps first:

1. Extract the ZIP and open index.html in a browser.
2. Open the entire template folder in a code editor such as Visual Studio Code.
3. Replace the StoneCraft company name, phone, email, address, service area, hours, license information, and social links.
4. Replace the nine local WebP images in assets/images/ with your own project photography while keeping the same filenames, or update the HTML paths if you prefer different names.
5. Update hero copy, statistics, services, About content, project cards, case study, testimonials, credentials, FAQ, and contact content.
6. Connect the estimate form to a real secure form handler, CRM, email service, or backend. The supplied form does not send submissions.
7. Review the sample Privacy Policy and Terms & Conditions for your real business and jurisdiction.
8. Replace https://www.example.com/ in canonical, social, and structured-data URLs with your production domain.
9. Test the site at desktop, tablet, and mobile widths, including the mobile menu, filters, FAQ, form validation, legal popups, and Back to Top button.
10. Upload the complete folder structure to your hosting account.

Package Contents

stonecraft-construction/
├── index.html
├── README.html
├── assets/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── main.js
│   └── images/
│       ├── hero/
│       │   └── construction-hero.webp
│       ├── about/
│       │   └── construction-craftsmanship-interior.webp
│       └── projects/
│           ├── modern-family-residence.webp
│           ├── luxury-kitchen-renovation.webp
│           ├── commercial-office-buildout.webp
│           ├── stone-exterior-restoration.webp
│           ├── contemporary-home-addition.webp
│           ├── outdoor-living-renovation.webp
│           └── featured-project-modern-living-room.webp
└── documentation/
    └── index.html

Template Features

These are the advertised features that are implemented in the supplied template:

• Fully responsive design
• Bootstrap 5 framework
• Mobile-friendly navigation
• Clean semantic HTML5
• Organized CSS3
• CSS custom properties
• Vanilla JavaScript
• Bootstrap Icons
• SEO-friendly markup
• Retina-ready interface
• Accessible focus states
• Modern browser support

Technology & Requirements

The template uses standard front-end technologies and does not require a build system.

• HTML5
• CSS3
• Bootstrap 5.x
• Vanilla JavaScript
• Bootstrap Icons
• Google Fonts
• Schema.org JSON-LD

You do not need WordPress, React, Vue, Angular, Node.js, npm, Laravel, PHP, or a database just to run the supplied template. A backend or third-party form service is required only when you want to process real form submissions.

Open & Edit the Template

1. Extract the ZIP file.
2. Double-click index.html to preview the site in Chrome, Safari, Firefox, or Edge.
3. Open the entire stonecraft-construction folder in your code editor. Visual Studio Code is a good free choice.
4. Edit index.html for content, style.css for design, and main.js only when changing interactive behavior.

Basic HTML/CSS knowledge is enough for most common customizations. You do not have to modify JavaScript to change ordinary text, images, contact details, colors, fonts, services, projects, testimonials, or FAQ content.

Brand & Content Customization

The sections below cover the changes most buyers make before launch.

1. Business Information

Search index.html for the current demo values and replace them consistently. Important values include:

• StoneCraft Construction
• (555) 010-2026 and +15550102026
• hello@example.com
• 123 Builder Avenue
• Your City, ST 00000
• Your City, Your County, and Surrounding Service Area
• [LICENSE NUMBER]
• Monday–Friday business hours

Update the same real-world values in the visible Contact section and in the JSON-LD block inside the page <head>. If you do not publicly use a street address, remove or adapt the address presentation instead of publishing a fake one.

Phone and email links

<a href="tel:+15550102026">(555) 010-2026</a>
<a href="mailto:hello@example.com">hello@example.com</a>

The visible phone number and the tel: value are separate. Update both.

2. Logo, Brand Name & Favicon

The current header uses a Bootstrap building icon plus text. You may keep that approach or replace it with your own SVG, WebP, or PNG logo.

If you use an image logo, a horizontal source around 400 × 120 px is a useful starting point. Keep the displayed logo compact so the sticky header does not become unusually tall on mobile.

To use separate desktop and mobile logos, place both files in assets/images/ and show/hide them with Bootstrap responsive utility classes or custom CSS.

Adding a favicon

The template does not currently include a favicon. Add one to the <head> if desired:

<link rel="icon" href="assets/images/favicon.png" type="image/png">

3. Colors & Visual Style

The design system is controlled by CSS custom properties near the top of assets/css/style.css. Typical variables include primary, secondary, accent, background, surface, text, muted text, borders, radius, shadows, and transitions.

Change the variables instead of editing dozens of individual rules. After a color change, review:

• button contrast
• links and hover states
• focus states
• dark case-study/CTA sections
• mobile offcanvas menu
• form controls
• footer contrast

You can make the design lighter, darker, warmer, cooler, squarer, or more rounded from CSS without changing the HTML structure.

4. Fonts & Typography

The template loads Barlow Condensed for headings and Inter for body text from Google Fonts.

To use another Google Font:

1. Replace the Google Fonts link in index.html.
2. Update the heading/body font variables in style.css.
3. Retest header wrapping, hero height, buttons, project cards, form labels, and mobile navigation.

You may self-host fonts instead, but you must supply properly licensed font files yourself. Font changes can alter text width and therefore affect responsive layout.

5. Images & Local WebP Files

The final site uses local image files only. There are no remote stock-photo URLs in the supplied page. You can replace the existing WebP files without touching CSS or JavaScript if you keep the same filenames and similar aspect ratios.

Replacing an image without changing HTML

1. Convert your photo to WebP.
2. Use the exact filename shown above.
3. Overwrite the existing file in the matching folder.
4. Update the ALT text in index.html so it describes the real image.

Using different filenames

If you rename a file, update its src in index.html. Normal page images should use relative paths such as:

<img src="assets/images/projects/my-custom-project.webp" alt="Completed kitchen renovation">

Cropping and mobile images

Several image containers use object-fit: cover. This intentionally crops edges to keep cards and split layouts visually consistent. Keep important subjects away from image edges. If you need different crops on desktop and mobile, use <picture>:

<picture>
  <source media="(max-width: 767.98px)" srcset="assets/images/hero/construction-hero-mobile.webp">
  <img src="assets/images/hero/construction-hero.webp" alt="Construction crew on site">
</picture>

Do not lazy-load the main hero image. Below-the-fold images can continue using loading="lazy". WebP is recommended; JPG and PNG also work. AVIF can be used if you are comfortable with that workflow and browser support.

Page Section Customization

6. Hero

The Hero contains the eyebrow, main H1, supporting text, two CTAs, trust indicators, and hero image. Change ordinary text directly in index.html.

The current buttons point to #estimate and #projects. You may change them to another section, a phone link, an external booking service, or another page.

<a href="tel:+15550102026">Call Now</a>
<a href="booking.html">Book a Consultation</a>

Hero height, overlay strength, alignment, and image positioning are controlled in style.css. If you add a background video, you will need additional HTML/CSS and should test performance carefully.

7. Statistics & Trust

The statistics band currently shows years of experience, projects completed, client satisfaction, and team size. Replace these numbers with values the real business can support. Remove any statistic that cannot be verified.

You can add or remove a statistic by duplicating or deleting its Bootstrap column, but retest spacing at desktop and mobile widths.

8. Services

The template currently includes General Contracting, Residential Construction, Commercial Construction, Remodeling & Renovation, Masonry & Exterior Work, and Project Management.

For each service card you can change:

• Bootstrap Icon class
• service title
• description
• link destination

When adding or removing a service, also review the estimate-form Project Type dropdown and the footer Services column so the whole site remains consistent.

Service cards can later link to dedicated pages. If you create kitchen-remodeling.html, change the card link to that filename and keep shared CSS/JS paths correct.

9. About

The About section contains a local image, company positioning, differentiators, and a CTA. Replace the company story and checklist items with real differentiators such as planning process, scheduling practices, warranties, job-site standards, or communication methods.

The small image badge is customer-facing marketing copy, not a customization instruction. Edit or remove it like any other visible content.

10. Projects

Each project card contains a local image, category/location line, title, and data-project-category value used by filtering.

Add a project

1. Duplicate one complete project column.
2. Change the image and ALT text.
3. Change the project title and location.
4. Set the correct category tokens.
5. Test every filter button.

Remove or reorder projects

Delete the complete project column or move it to another position inside the project grid. If you remove the last project using a category, also remove that unused filter button.

You may later wrap a card in a link to a dedicated project page or add a modal/lightbox. Those behaviors are not part of the supplied template and require additional markup or JavaScript.

11. Project Filters

Filtering is implemented in Vanilla JavaScript; jQuery is not used.

<button data-project-filter="renovation">Renovation</button>
<div data-project-category="residential renovation">...</div>

One project can belong to multiple categories by separating tokens with spaces. If a filter does not show a project, check that the button value and the project category token match exactly.

To remove filtering entirely, remove the filter bar and optionally remove the project-filter code from main.js. The project cards themselves will still display.

12. Featured Case Study

The featured case study contains project image, project type, location, timeline, scope, challenge, result, and CTA. Replace all of these with real project information. Do not publish sample durations, locations, or outcomes as if they were factual.

You may duplicate the entire case-study section for additional featured projects, but check page length and alternating background treatment.

13. Why Choose Us

This section contains benefit cards such as Clear Estimates, Quality Materials, Skilled Trades, Reliable Scheduling, Attention to Detail, and Clean Job Sites. Change the title, icons, benefit names, and descriptions directly in HTML. Add/remove cards by adding/removing Bootstrap columns.

14. Construction Process

The five-step process is Consultation, Site Visit, Estimate & Planning, Construction, and Final Walkthrough. Edit the step numbers, titles, and descriptions to reflect the actual customer journey.

You can add or remove steps, but verify the timeline layout at 992 px, 768 px, and 375 px after doing so.

15. CTA Sections

The template repeats “Request an Estimate” intentionally. You can change CTA wording and destinations without changing JavaScript. Common alternatives are:

• #estimate for the on-page form
• tel: for click-to-call
• mailto: for email
• an external scheduling/CRM URL
• a separate contact or service page

Remove a CTA if it feels repetitive, but keep at least one clear conversion path.

16. Testimonials

The supplied testimonials are sample content and must be replaced with genuine customer-approved feedback before a real business publishes the site.

You can change customer name, project type, text, and stars. Add/remove cards by adding/removing columns. A carousel is possible but is not included; it would require Bootstrap Carousel markup or another implementation.

Do not add review counts or rating structured data unless the information is genuine and appropriate for the site.

17. Credentials & Trust

The trust/certification area is designed for real credentials such as contractor license, insurance, trade associations, manufacturer certifications, warranties, or BBB information.

The live website now ships with sample filled-in values instead of placeholders:

• License — State Licensed Contractor
• Insurance — General Liability & Workers' Comp
• Association — Regional Builders Association
• Certification — EPA Lead-Safe Certified
• Warranty — 1-Year Workmanship Warranty

To change this section, edit the five .trust-card blocks in index.html inside the credentials/trust section. Replace the heading text, supporting line, and optional Bootstrap Icon class as needed. If a credential does not apply to the business, remove that card rather than leaving it inaccurate. If you have permission to use official logos, you can replace the text detail with a small logo or badge, but keep the layout balanced on mobile.

Only display credentials the business actually holds. Remove anything that is not accurate for the real company.

18. FAQ

The FAQ uses Bootstrap Accordion. You can change questions and answers directly. When adding a new item, give the heading and collapse panel unique IDs and keep these attributes matched:

• data-bs-target
• aria-controls
• aria-labelledby

If duplicate IDs are introduced, accordion behavior and accessibility can break. The FAQ can be removed entirely without affecting other site functions.

FAQ structured data is not included. Add it only if the visible FAQ content qualifies and remains synchronized.

Forms & Contact Customization

19. Estimate Request Form

The supplied form is a front-end demo. It validates required fields and shows a success message, but it does not email, save, or transmit the submission.

Current fields are Full Name, Email, Phone, Project Type, Project Location, Estimated Budget, Desired Start Date, Project Description, and a required privacy acknowledgement.

Common form changes

• Change labels and placeholder text in index.html.
• Add/remove Project Type or Budget <option> values.
• Add a new field with a unique id, matching for label, name, and validation requirement.
• Remove required if a field should be optional.
• Edit the success message in #demoSuccess.

Making the form real

Connect it to a secure PHP handler, hosted form service, CRM, email API, booking platform, or another backend. Server-side validation and spam protection are required for real submissions; browser validation alone is not a security control.

Cloudflare Turnstile, CAPTCHA, or equivalent anti-abuse controls can be added when you connect a real processing endpoint. Redirecting to a thank-you page is also possible after successful server-side processing.

20. Contact Information

The Contact section contains phone, email, address, business hours, and service area. You can remove address if the company operates only as a service-area business.

You can add WhatsApp, a map, an emergency line, or a second location, but those are not part of the supplied template. For maps, use the provider's permitted embed method and consider privacy/performance implications.

21. Footer & Social Links

The footer includes company description, navigation links, service links, contact/legal links, social icons, copyright, and a short brand line.

The current Facebook, Instagram, and LinkedIn icons are placeholders that point back to the footer. Replace them with real profile URLs or remove unused icons. You can add other Bootstrap Icons for YouTube, TikTok, X, Pinterest, WhatsApp, or other supported networks.

The copyright year is set to 2026 by main.js. If you prefer the current year automatically, replace that line with new Date().getFullYear().

22. Privacy Policy & Terms & Conditions

Privacy Policy and Terms & Conditions open in Bootstrap modals (popups) from the footer. The package includes sample content so the links are not empty.

The sample legal text is not legal advice. Review and adapt it for the real business, jurisdiction, form-processing method, analytics/cookies, payment practices, warranties, cancellations, and other applicable obligations.

You may keep the popups, replace them with dedicated pages such as privacy.html and terms.html, or link to externally hosted legal pages. If you move them to pages, change the footer links from modal triggers to normal URLs.

Navigation & Site Behavior

23. Desktop Navigation

The desktop menu uses section anchor links:

#home
#services
#about
#projects
#process
#testimonials
#faq
#contact
#estimate

If you rename a section ID, update every link that points to it—desktop menu, mobile menu, CTAs, and footer links. You can make a navigation item point to another HTML page by replacing the hash URL with a filename.

The header is sticky through CSS. Remove or change the sticky positioning in style.css if you want a normal non-sticky header.

24. Mobile Menu

Mobile navigation uses Bootstrap Offcanvas with the ID #mobileNav. The offcanvas lives outside the sticky header so the Bootstrap backdrop does not cover it.

main.js intercepts on-page mobile links, closes the offcanvas first, waits for Bootstrap's hidden.bs.offcanvas event, and then scrolls to the requested section. This is why Contact correctly reaches #contact and Request an Estimate reaches #estimate.

If you add a menu item, add it to both desktop and mobile menus. Test the mobile menu after any navigation change at 768, 576, 430, 390, and 375 px.

25. Back to Top

The Back to Top button is #backToTop. JavaScript shows it after the page scrolls more than 500 px and smoothly returns to the top when clicked.

You can remove it by deleting the button and its related JavaScript, or change the threshold/icon in main.js and HTML.

26. Responsive Customization

Retest the template whenever you change fonts, navigation labels, long headings, button text, image proportions, form fields, or card counts.

Recommended review widths:

1440 px
1200 px
992 px
768 px
576 px
430 px
390 px
375 px

Check for horizontal scrolling, overlapping elements, clipped navigation, oversized images, awkward two-column height differences, long buttons, form stacking, footer wrapping, and project-card cropping.

Use Bootstrap responsive utility classes such as d-none, d-md-block, d-lg-flex, and responsive columns when you need elements to behave differently at particular breakpoints. Change Bootstrap breakpoints only if you understand the wider impact.

27. Accessibility

The supplied template includes semantic landmarks, a skip link, visible focus states, keyboard-accessible Bootstrap components, proper form labels, ALT text, ARIA attributes, and reduced-motion consideration.

Preserve these features during customization:

• Do not remove focus outlines unless you replace them with an equally visible focus treatment.
• Keep label for values matched to form-control IDs.
• Keep accordion/offcanvas ARIA relationships valid.
• Use descriptive ALT text for meaningful images; use empty ALT only for truly decorative images.
• Recheck contrast after changing colors.
• Test the entire page with keyboard-only navigation.

SEO & Discovery

28. SEO Metadata

SEO fields are in the <head> of index.html. Update the title, meta description, robots directive when needed, and canonical URL.

The supplied canonical URL is https://www.example.com/. Replace it with the real preferred public URL before launch.

If you add your city/state to SEO text, keep it natural and accurate. Do not keyword-stuff.

The package does not currently include sitemap.xml or robots.txt. You may add them for the production domain, especially if you later create multiple public pages.

29. Open Graph / Social Sharing

Open Graph controls link previews in many messaging and social platforms. The template includes og:title, og:description, og:url, og:image, and Twitter/X card metadata.

The social image currently expects the local hero at the production URL:

<meta property="og:image" content="https://www.example.com/assets/images/hero/construction-hero.webp">

After deployment, use a full absolute URL here, not a relative path. For a dedicated sharing graphic, 1200 × 630 px is a common target.

30. Structured Data / JSON-LD

The page includes Schema.org JSON-LD using LocalBusiness and GeneralContractor. Update these values to match the visible site:

• business name
• URL
• image URL
• telephone
• email
• address
• service area
• opening hours
• contractor credential
• description

Do not invent credentials, ratings, addresses, or service areas. Validate the finished JSON-LD using Google's Rich Results Test and the Schema.org Validator.

31. Local SEO

For a real local contractor, keep name, phone, address (when publicly used), service area, hours, website URL, and license information consistent across the website and business listings.

A service-area contractor can operate without publishing a street address if that matches the real business model. Add city/service wording naturally to content rather than creating dozens of near-identical location pages.

If you later create dedicated location or service pages, make each page genuinely useful and unique.

32. Analytics & Search Tools

Google Analytics, Google Tag Manager, Google Search Console, Microsoft Clarity, advertising pixels, and cookie-consent tools are not included by default.

You may add them after launch. If you add tracking technologies, review the Privacy Policy, cookie requirements, consent rules, performance impact, and applicable jurisdictional obligations.

After the site is live, Google Search Console can be used to verify the domain, submit a sitemap if you create one, inspect indexing, and monitor search performance.

Technical Customization, Performance & Hosting

33. Performance

The template avoids a heavy JavaScript framework and uses lazy loading below the fold. To keep it fast:

• compress local images
• prefer WebP/AVIF where appropriate
• do not upload unnecessarily huge source images
• keep width/height attributes where practical
• do not lazy-load the main hero
• avoid adding unnecessary libraries and animations

After deployment, test with Chrome Lighthouse and Google PageSpeed Insights. Watch Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

34. CSS & JavaScript

Custom CSS belongs in assets/css/style.css. Custom JavaScript belongs in assets/js/main.js. Avoid putting large amounts of inline CSS/JS into index.html; keeping assets separate makes the product easier to maintain.

The supplied JavaScript handles:

• mobile offcanvas anchor scrolling
• project filtering
• front-end form validation and demo success message
• Back to Top visibility and scrolling
• copyright year text

Bootstrap's JavaScript bundle is also required for Offcanvas, Accordion, and legal Modals. If you remove the Bootstrap bundle, those components will stop working.

35. Cache Busting

If your browser or CDN keeps showing an older CSS/JS file after upload, add a version query string:

<link rel="stylesheet" href="assets/css/style.css?v=2">
<script src="assets/js/main.js?v=2" defer></script>

Increase the version whenever the shared asset changes. This works on normal shared hosting and helps force browsers/CDNs to request the latest file.

36. Hostinger / Shared Hosting Deployment

The template can be uploaded directly to Hostinger or another standard static/shared hosting provider.

1. Open Hostinger File Manager or connect with FTP/SFTP.
2. Locate the site's public directory, commonly public_html.
3. Upload the contents of the stonecraft-construction folder to the target web root or subdirectory.
4. Ensure index.html is at the intended URL root.
5. Preserve assets/css/, assets/js/, and assets/images/ exactly.
6. Open the live site over HTTPS and test all interactions.

No SSH or .htaccess is required for the basic supplied site. You may add server configuration later for redirects, security headers, clean URLs, caching, or other hosting needs.

File paths can be case-sensitive on hosting even when they seemed forgiving on a local computer. If an image or CSS file breaks after upload, check spelling, capitalization, and folder structure first.

37. Future Expansion & Integrations

The template is intentionally simple, but it can be expanded. Common future additions include:

• Dedicated service pages
• Project-detail pages
• Project gallery/lightbox
• Before/after galleries
• Blog or CMS integration
• WordPress conversion
• CRM/form integration
• Online scheduling
• Google Maps
• WhatsApp/live chat
• Newsletter signup
• Online payments
• Google Reviews
• Analytics/tag management

These are not included features. Adding them may require new HTML pages, JavaScript, a backend, third-party services, or a CMS. Preserve the existing responsive, accessibility, and SEO patterns when expanding the site.

38. Browser Support

The template is designed for current versions of Google Chrome, Apple Safari, Mozilla Firefox, and Microsoft Edge. It does not target very old browsers or experimental browser APIs.

39. Troubleshooting

40. Pre-Launch Checklist

[ ] Company name updated everywhere
[ ] Logo/brand mark updated if needed
[ ] Favicon added if desired
[ ] Phone number and tel: links updated
[ ] Email and mailto: links updated
[ ] Address/service area/hours updated
[ ] Contractor license/credentials updated or removed
[ ] Statistics are accurate and supportable
[ ] Services reflect the real business
[ ] All 9 local images replaced/reviewed
[ ] ALT text describes the real images
[ ] Hero copy and CTAs updated
[ ] Project names/categories/locations updated
[ ] Project filters tested
[ ] Featured case study replaced with real information
[ ] Testimonials replaced with genuine feedback
[ ] Credential/trust claims verified
[ ] FAQ answers match real policies
[ ] Estimate form fields reviewed
[ ] Estimate form connected to a real secure handler
[ ] Spam protection added where appropriate
[ ] Contact section updated
[ ] Social links replaced or removed
[ ] Privacy Policy reviewed
[ ] Terms & Conditions reviewed
[ ] Production canonical URL set
[ ] Open Graph/Twitter URLs and image set
[ ] JSON-LD updated and validated
[ ] Analytics/cookie requirements reviewed if tracking added
[ ] Desktop navigation tested
[ ] Mobile offcanvas menu tested
[ ] Mobile Contact reaches #contact
[ ] Mobile Request an Estimate reaches #estimate
[ ] FAQ accordion tested
[ ] Privacy/Terms modals tested
[ ] Back to Top tested
[ ] Keyboard navigation tested
[ ] Focus states visible
[ ] Desktop tested at 1440 / 1200 / 992 px
[ ] Tablet tested at 768 px
[ ] Mobile tested at 576 / 430 / 390 / 375 px
[ ] No horizontal scrolling
[ ] No overlapping/clipped content
[ ] No broken images or links
[ ] No console errors
[ ] HTTPS enabled on production hosting
[ ] Lighthouse/PageSpeed reviewed
[ ] Structured data validated

41. Credits & Licenses

The template uses:

• Bootstrap 5 — responsive layout and interactive components
• Bootstrap Icons — interface and service icons
• Google Fonts — Barlow Condensed and Inter

The live website uses local image files under assets/images/. Replace them with photography you own or are properly licensed to use.

Third-party frameworks, icons, fonts, and photography remain subject to their own licenses and terms. The template itself should be used according to the current PixelToWeb license supplied with the purchase or product listing.

42. Support

Use the support method supplied with the PixelToWeb purchase or product listing.

When requesting support, include:

• product name: StoneCraft Construction
• the affected file or section
• browser and device
• a screenshot for visual issues
• the exact steps required to reproduce the issue

Unless a purchase specifically includes customization services, support should be treated as help with the supplied template rather than development of new integrations or custom features.