FlowPro Plumbing
Plumbing Landing Page Template

5-Minute Setup

1. Extract flowpro-plumbing.zip and keep an untouched backup. Open the extracted folder in a code editor.
2. Replace the business name, sample phone and email, service areas, hours, rates, offers, and testimonials in index.html.
3. Review the five supplied WebP images. Replace them with your business photography if desired, keeping the local paths described below.
4. Choose how customers will request service. The included form previews input only; it does not send email, save information, or book appointments. See section 12 before enabling live requests.
5. Update page metadata, favicon, and policy content. Test the mobile menu, service buttons, gallery, FAQ, and contact links.
6. Upload index.html and the entire assets/ folder together to your domain’s document root or chosen subfolder.

Package Contents

Place this README beside index.html. Its styling is embedded, so it also opens independently. There is no README.md, separate icon folder, PHP handler, database, or build configuration in the supplied website.

Template Features

• Dark navy and mint single-page design with six service cards and sample starting prices.
• Four-item project gallery with enlarged previews, previous/next buttons, arrow-key navigation, and an image counter.
• Business hours, emergency contact area, three sample testimonials, and a new-customer offer.
• Seven service choices in a validated demonstration request form.
• Eight FAQ panels and separate Privacy Policy and Terms of Service modals.
• Responsive navigation and mobile call/request actions.
• Local Bootstrap, Manrope fonts, SVG icons, WebP imagery, and favicon.
• Visible focus styles, reduced-motion handling, labeled fields, and a dynamic footer year.

Technology Used

Editing the Template

Use a plain-text code editor and open the entire extracted folder. Search by the exact IDs, class names, and sample values in this guide; the source contains long compact lines. Save files as UTF-8. Keep a backup before each major edit. A browser is enough to preview the static page, but test any future server integration over HTTP or HTTPS.

1. Update Business Information

Open / search: index.html and assets/js/main.js. Search for FlowPro, flowpro, Austin, (512) 555-0148, +15125550148, and hello@flowpro.example.

1. Replace the name and contact details throughout the header, hero, emergency section, form area, contact section, footer, metadata, and policies.
2. Update visible phone text and every tel: destination together. Update visible email text and the corresponding mailto: destination.
3. Change the phone number embedded in the form-preview message in assets/js/main.js.
4. Update service areas, business story, hours, payment options, and warranty statements to match the real company.

Check: Search all files again for the old values. Tap phone and email links on a phone.

<a href="tel:+15125550148">(512) 555-0148</a>
<a href="mailto:hello@flowpro.example">hello@flowpro.example</a>

The code above shows the current sample values, not live contact information.

2. Logo, Brand Name, and Favicon

Open / search: index.html: class="brand", brand-sub, brand-mark, and rel="icon".

1. Edit the header and footer wordmarks, including the PLUMBING subtitle and any accessible link labels.
2. The droplet icon uses the inline #i-drop symbol. Keep that symbol if it is used elsewhere. To use an image logo, add a local file with alt text and explicit dimensions, then adjust the brand styles.
3. Replace or edit assets/images/favicon.svg. Update its link if the filename changes.
4. Update the page title, social title, business references, and footer name.

Check: Check the header and footer at narrow widths, browser tab icon, and keyboard focus.

3. Colors

Open / search: assets/css/style.css: :root.

1. Edit the palette variables shown below.
2. Review direct color values in buttons, validation states, borders, and other components as well as the root variables.
3. Update meta name="theme-color" in index.html if the dark background changes.

Check: Review every section and hover/focus state for readable contrast, then increase the CSS version suffix.

:root {
  --bg: #0c191f;
  --surface: #12242b;
  --panel: #172b33;
  --mint: #a5edcf;
  --ink: #f4f7f4;
  --muted: #a8b9bd;
  --line: #2a3c43;
}

4. Fonts

Open / search: assets/css/style.css: @font-face and --bs-body-font-family; index.html: the font preload.

1. The template loads five local Manrope weights using relative CSS paths such as ../fonts/manrope-400.ttf.
2. To change fonts, include your licensed local font files and edit the font-family, source path, format, and weight in each relevant rule.
3. Update the body font variable and the preload for manrope-800.ttf if you replace that font. Keep preloads limited to files actually used.
4. Preserve font license notices in LICENSES.txt for any bundled fonts you retain.

Check: Check for missing font requests, changed line wraps, button widths, and heading fit on mobile.

5. Hero and Homepage Copy

Open / search: index.html: #home and plumbing-hero.webp.

1. Change “Good plumbing. Peace of mind.” and the supporting paragraph to your own promise.
2. Edit the neighborhood label, Austin location line, hero photo caption, and trust strip.
3. Keep the main service button linked to #request unless you replace the request flow. Update its destination everywhere if you do.
4. If a new headline wraps badly, shorten it or adjust deliberate line breaks before changing layout styles.

Check: Review the first screen on desktop and mobile, including the photo crop, phone number, and primary action.

6. Services and Starting Prices

Open / search: index.html: #services, .service-card, data-service, and #service.

1. Edit the card title, description, displayed price, and accessible link text.
2. For a card that selects a form service, keep its data-service text exactly equal to the matching option’s value. The current options have no explicit value attributes, so their text is the value.
3. Review the pricing footnote and FAQ so they agree with the rates and scope you offer.

Check: Click each service action and confirm the expected form option is selected.

These are sample service rates, not guaranteed installed prices. The current page states that inspection, parts, access, and the agreed scope determine the final price.

7. Image Replacement Guide

Folder: assets/images/. All five supplied photographs are original generated WebP files. Each is 1536 × 1024 pixels. There are no stock-image URLs or image-download dependencies.

Open / search: index.html: search each filename; assets/css/style.css: image rules.

1. Export replacement photographs as actual WebP files. Renaming a JPG or PNG extension does not convert the image format.
2. The simplest replacement is to keep the same filename, folder, and 3:2 aspect ratio. Back up the existing image first.
3. If you change the filename, update every matching src. The gallery reads its full-size source from the card image; it has no separate large-image URL to update.
4. Update the alt text to describe the new image. Keep each image’s width and height attributes aligned with its actual dimensions. If you change the gallery image ratio, review the shared #gallery-image dimensions too.
5. Keep below-the-fold images lazy-loaded. Preserve the hero loading priority and review CSS object-fit and object-position if important details are cropped.
6. The same plumber-at-work.webp file appears in both About and the gallery, so replacing it changes both areas.

Check: Open all four gallery previews and check the hero/About crops at desktop and mobile sizes.

<img src="assets/images/drain-repair.webp"
     alt="Plumber inspecting a tidy under-sink drain assembly"
     width="1536" height="1024" loading="lazy">

Use optimized exports that retain fine detail; compare the visual result and file size rather than increasing resolution unnecessarily. Generated illustrations should not be presented as proof of completed customer jobs.

8. Desktop Navigation and Section Links

Open / search: index.html: #main-nav and href="#.

The offer section has no own ID in the current markup. Its #claim-offer button leads to the form and displays an offer notice. If you rename a section ID, update every matching navigation, footer, and button link. Keep IDs unique. Smooth scrolling uses scroll-padding-top:110px; adjust that if the sticky header height changes.

9. Mobile Navigation and Sticky Actions

Open / search: index.html: #main-nav and .mobile-actions; assets/js/main.js: const nav.

1. Keep the menu toggle’s Bootstrap target aligned with #main-nav.
2. The custom script closes an open menu after one of its links is selected. Bootstrap’s local bundle must load before main.js.
3. Update the mobile call destination along with all other phone links. Preserve the request link or change it to your live service flow.
4. Keep the CSS bottom spacing and safe-area handling that prevent fixed mobile actions from covering page content.

Check: At phone widths, open the menu, follow a link, and confirm it closes. Scroll to the footer and verify buttons do not cover links or text.

10. Project Gallery and Image Preview

Open / search: index.html: #projects, [data-gallery], .project-title, and #gallery-modal.

1. Edit each card’s image, alt text, category label, title, and button aria-label.
2. The script collects all [data-gallery] elements in document order. Numeric attribute values label the items, but DOM order determines navigation.
3. Keep #gallery-image, #gallery-title, #gallery-counter, #gallery-prev, and #gallery-next intact.
4. Previous/next wraps through all items. Left/right arrow keys work while focus is inside the modal; Bootstrap supplies Escape dismissal. On closing, focus moves to the card for the currently viewed image.

Check: Test every card, both buttons, arrow keys, Escape, counter updates, captions, and returned keyboard focus.

11. Business Hours and Emergency Availability

Open / search: index.html: #hours, 24/7, Emergency calls, and the emergency FAQ.

Change all availability statements together. Distinguish answering the phone from guaranteeing a dispatch time. The request date picker does not use these hours: it allows today or a future date, based on the visitor’s local date, without checking weekends, holidays, technician availability, or service-area coverage.

Check: Confirm that the hours, hero/contact copy, FAQ, and Terms of Service describe the same operating schedule.

12. Service Request Form and Live Integration

Current behavior: #service-form is a browser-only demonstration. Its submit listener calls event.preventDefault(), validates input, and writes a preview into #form-status. It contains no fetch request, endpoint setting, email service, data storage, or booking integration.

Option A: Use an existing scheduling or request service

1. Choose the real scheduling/request destination used by the business. Replace service-request links throughout the page with that destination, or replace the demo form with the provider’s supported integration.
2. Remove or guard the form-dependent script code before removing the form. It currently expects #date, #service-form, #service, #name, #message, and #form-status to exist. Also adapt service-card selection and offer behavior.
3. Update all demo notices, consent text, appointment FAQ, and privacy disclosures to describe the chosen flow.

Option B: Implement your own handler

1. Create and configure a server endpoint separately. No PHP or other backend file is included. A qualified developer should connect the endpoint and its delivery destination.
2. Replace the existing demo submit handler with one that submits the validated fields and handles loading, timeout, server error, and accepted-request states. Do not keep two competing submit handlers.
3. Validate fields and dates again on the server, enforce length limits and service-area rules, and add abuse controls appropriate to the endpoint. Keep mail credentials and other secrets on the server.
4. Show an accepted-request message only after the server confirms acceptance. A requested date remains subject to scheduling confirmation. On an error, keep the entered information available for retry.
5. If the FLOW50 offer must be transmitted, add an explicit submitted field and validate its eligibility on the server; currently it is only a visible notice.
6. Only after real delivery works, replace “Preview service request” and the demo wording in the form, consent, FAQ, footer, and policies.

Check: Test empty and malformed fields, past dates, consent, successful delivery to the real destination, network failures, duplicate clicks, and server rejection. Do not treat a browser preview or an HTTP response alone as proof that an email arrived.

13. Reviews and Testimonials

Open / search: index.html: #reviews.

1. Replace the three sample quotes, initials, names, and service labels with customer content you have permission to publish.
2. Keep the sample-testimonial disclosure while the reviews are fictional. Remove or revise it only after the content is replaced.
3. Do not label these testimonials as verified Google reviews; the supplied page has no Google review integration.

Check: Check that quote lengths fit the cards and that ratings and any attribution accurately reflect the real feedback.

14. New Customer Offer

Open / search: index.html: .offer-section, #claim-offer, #offer-notice, FLOW50, and #terms-modal.

1. The sample offer is $50 off a first residential repair of $250 or more, once per household. It excludes parts, emergency surcharges, and installations; the terms also exclude combining offers.
2. Change the amount, eligibility, exclusions, button text, and Terms of Service together.
3. The Claim button reveals a notice asking the customer to mention FLOW50 when calling. It does not reserve a discount, send a coupon, or persist a claim after refresh.
4. For live online requests, explicitly carry offer information through the integration described in section 12.

Check: Click Claim, confirm the form is reached and the notice appears, then verify all offer wording agrees.

15. About the Business and Trust Content

Open / search: index.html: #about and #why.

1. Replace the sample business story and team label with the company’s real background and values.
2. Review the four service commitments: communication, scheduling, respect for the property, and workmanship coverage.
3. Replace the About image through the shared plumber-at-work.webp file or give About its own local image path.
4. Use only substantiated experience, qualifications, and business claims if you add them.

Check: Confirm that About and the trust cards agree with the services, policies, and actual team.

16. Service Areas and Contact

Open / search: index.html: #contact, .area-tags, and the service-area FAQ.

1. The sample locations are Austin, Round Rock, Cedar Park, Pflugerville, Georgetown, and Leander. Replace the tags and matching FAQ answer together.
2. The page says the team travels to customers and visits are by appointment. No street address, map embed, or driving-directions link is supplied. Add those only if useful for the real business.
3. Update the scheduling and arrival-window copy and repeat contact details consistently.

Check: Search for the old city names in the full page, including metadata and About text.

17. FAQ Content

Open / search: index.html: #faq-list and #faq-0 through #faq-7.

1. Edit the question inside its button and the answer inside .accordion-body.
2. When duplicating a panel, assign a unique panel ID and match both the button’s data-bs-target and aria-controls.
3. Keep data-bs-parent="#faq-list" if you want a single panel open at a time.
4. Review the sample 12-month workmanship warranty, accepted payment methods, emergency availability, and appointment answer before launch.

Check: Open every panel by mouse and keyboard and confirm no button opens the wrong answer.

18. Social Links and Inline Icons

The supplied page does not contain a social-profile link list. If you add one, use the real business URLs, descriptive accessible link names, and local icons consistent with the design. Do not add empty href="#" links.

Existing icons live in the inline SVG sprite in index.html and are referenced with <use href="#i-phone"> and similar symbol references. Keep symbol IDs unique and avoid deleting a symbol still referenced elsewhere.

19. SEO Setup Before Launch

Update the visible business name, location, services, contact details, and page metadata together. Keep one clear page heading and descriptive section headings. Retain meaningful image alt text and working internal links. The supplied page is a single landing page, not a collection of separate service or city pages.

Search the source for sample names, locations, contact information, and demo text before making it public. Remove the demonstration-business footer disclosure only after replacing the sample material and accurately describing the live contact flow.

20. Page Titles and Meta Descriptions

Open / search: the <head> of index.html. The following title and description are included:

<title>FlowPro Plumbing | Plumbing Repairs & Service in Austin</title>
<meta name="description" content="Dependable plumbing for Austin homes. Explore drain cleaning, leak repairs, water heater services, and fixture installations with FlowPro Plumbing.">

Replace them with accurate business and service information. Update og:title and og:description too; these are separate values and do not automatically inherit the title or description.

21. Canonical URLs, Social Metadata, and Structured Data

After choosing the live URL, you can add a canonical link and social URL using that exact HTTPS page address. If you add a social image, publish the actual image and use an absolute URL. A website preview screenshot and an image for social sharing may need different crops.

If you add structured data later, make every business detail match the visible page and real company. Do not publish the demonstration testimonials as real rating data. These additions are optional buyer work, not existing features of the supplied files.

22. Sitemap and Search-Engine Files

No sitemap.xml, robots.txt, or search-console verification file is included. If you create them, use the actual production URL and keep development/demo URLs out of the sitemap. Coordinate with existing files if you install the landing page on a domain that already has a website.

This README contains noindex metadata to discourage its appearance in search results. That is not access control; keep the README out of your public folder if you do not want visitors reading the guide.

23. Performance and Image Optimization

The photographs, fonts, Bootstrap, and scripts are local. Avoid adding large external assets without a clear purpose. Keep image dimensions accurate, lazy-load below-the-fold photographs, and preserve the font display behavior. Test on a mobile connection after replacing assets.

Do not delete font weights or local vendor files solely to reduce file count while they remain referenced. If you deliberately consolidate assets, update all paths and preload declarations, then check for missing requests.

24. Cache Busting

The custom CSS and JavaScript currently use ?v=1.0.0. After changing either file, increase its version suffix in index.html, for example:

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

Keep the Bootstrap bundle before main.js. If you replace an image under the same filename and an older image persists, use a new filename or update its URL version wherever referenced. Clear any enabled host/CDN cache and hard-refresh the browser when checking your changes.

25. Responsive Testing

After editing, check narrow phones (about 375–390 px), tablets (about 768–820 px), and desktop screens (about 1280–1440 px). Test portrait and landscape where practical.

• Long headings and service titles wrap cleanly.
• Navigation opens, closes, and reaches each intended section.
• Cards, form controls, photos, and modals stay within the screen.
• The mobile action bar does not cover footer links or form feedback.
• Gallery controls remain usable and enlarged photos are visible.
• There is no page-level horizontal scroll.

26. Accessibility

Keep the existing skip link, form labels, visible focus styling, modal titles, and reduced-motion styles. If an icon-only button is changed, retain a descriptive accessible name. Image alt text should describe its subject or purpose without repeating nearby copy unnecessarily.

Use Tab and Shift+Tab through the page; test menu, service buttons, form errors, FAQ, and all modals without a mouse. Check browser zoom at 200%. After changing colors, verify the contrast of normal text, smaller muted copy, controls, and focus indicators.

27. Adding or Removing Content

Services: Duplicate a complete service-card column and give it the correct title, description, price, icon, and service-selection value. Add or update its form option. Remove or revise matching FAQ content when a service is no longer offered.

Gallery: Duplicate a complete [data-gallery] button with its image and .project-title. Keep at least one item while gallery controls remain active. If removing the gallery entirely, remove or guard its dependent JavaScript too.

Sections: Update navigation and footer links when deleting or renaming a section. Removing the form, offer button, gallery, or year element without adapting main.js can cause a null-element error and stop later interactions.

Optional browser integration: The end of main.js conditionally registers a read-only view_plumbing_services tool when document.modelContext.registerTool is available. It reads service-card headings and prices. It is not required for normal visitor interactions; if you alter the card structure, review its selectors as well.

28. Hostinger / Shared Hosting Deployment

1. Back up the existing website before uploading. Identify the correct document root for your chosen domain or subdomain; on a typical Hostinger setup this is public_html, but confirm your account’s actual location.
2. Extract the ZIP locally or upload it and extract it using the hosting file manager. For the domain homepage, place index.html and assets/ directly inside the document root. Do not accidentally leave them inside an extra nested project folder.
3. For a demo subfolder such as demos/landing-pages/flowpro-plumbing/, keep index.html and assets/ together inside that folder. The template’s relative asset paths support this layout.
4. Keep LICENSES.txt with distributed copies. Decide whether README.html should remain private or be uploaded for documentation access.
5. Check for an existing index.php or other default page that could take precedence over the new landing page. Resolve it intentionally rather than deleting unrelated website files.
6. Open the public page over HTTPS and test the assets, links, and interactions. No npm installation or build command is required.
7. If you have added a backend, deploy and configure it separately, then verify actual delivery. Uploading this static template alone does not enable form submissions.

Check: Load the exact domain/subfolder URL on a phone and desktop, verify filename capitalization, and confirm that no browser requests return missing-file errors.

29. Privacy and Terms of Service

Open / search: index.html: #privacy-modal, #terms-modal, #privacy-consent, and demo-disclosure.

The current policies describe a demonstration business and a form that does not send or store information. They also describe the template’s local assets and absence of included analytics or advertising trackers. If you add a form service, analytics, cookies, payments, or another provider, revise the text to describe the actual data flow and business practices.

Keep estimates, appointment confirmation, offer terms, payment methods, and workmanship coverage consistent across the page. Preserve the modal trigger IDs, accessible titles, and close controls when replacing policy text. This guide does not supply a new legal policy for the buyer’s business.

30. Third-Party Libraries and Image Credits

LICENSES.txt contains the included Bootstrap MIT license and Manrope SIL Open Font License notices. Retain those notices when distributing the corresponding assets.

The five plumbing photographs were generated for this template and are stored locally as WebP files. There are no Unsplash images or external stock-photo links in this package. Keep provenance and license details for any replacement photography, logos, fonts, or icons you add.

31. Pre-Launch Checklist

• Real name, telephone, email, service areas, and business hours replace all sample details.
• Services, pricing, warranty, payment options, and emergency statements are accurate.
• Sample testimonials and demonstration disclosures are handled consistently.
• Offer amount, terms, code, and any live submission field agree.
• All image files are local, optimized, correctly sized, and described with suitable alt text.
• Every menu link, service action, gallery control, FAQ panel, and policy modal works.
• A live request flow is tested end to end, or the form remains explicitly a demonstration.
• Metadata, favicon, and any added production URLs are correct.
• Privacy and terms describe the actual service and data flow.
• Mobile, tablet, desktop, zoom, and keyboard checks are complete.
• Cache versions are updated and the uploaded HTTPS page is checked.
• Backups and required third-party notices are retained.

32. Template License and Usage

The included LICENSES.txt documents third-party assets; it does not establish a separate commercial license for the complete FlowPro template. Follow the purchase license supplied by PixelToWeb or your seller for project limits, client use, redistribution, and support terms. This guide does not grant additional resale or redistribution rights.

33. Troubleshooting and Support

When requesting support, include the template name, page URL, browser/device, a screenshot, the files you changed, and steps to reproduce the issue. Share credentials only through the support provider’s appropriate secure process; do not put secrets in HTML or JavaScript.