BOOTSTRAP 5 LANDING PAGE

Make Torque
your own.

A practical guide to the included files, editable content, and inquiry features.

Back to Template ↗

01. Quick start

Open index.html in a modern browser. There is no build step. For a consistent preview of clipboard features, use a local HTTP server, such as python3 -m http.server 8000, then open http://localhost:8000. Keep the asset folders beside the HTML file.

All photographs, styles, scripts, and Bootstrap dependencies are included locally. The template makes no external font requests.

02. What is included

torque-auto-repair/
  index.html
  README.html
  LICENSES.txt
  assets/
    css/style.css
    js/main.js
    images/mark.svg
    images/workshop.webp
    images/brake-service.webp
    vendor/bootstrap.min.css
    vendor/bootstrap.bundle.min.js
    vendor/BOOTSTRAP-LICENSE.txt

The package contains one responsive landing page with service filters, an About/Why choose us section, a three-step service process, testimonial starter copy, inquiry preparation, numbered FAQs, a mobile Call / Request bar, and Privacy and Terms of Use dialogs.

03. Make it your business

Edit the text in index.html: logo wording, headline, introduction, service descriptions, sample prices, location, contacts, hours, approach, and FAQs. Replace demonstration details with your own verified information. The landing page uses a business-owner voice without visitor-facing setup notes. Confirm all starter details before public use.

The default city is Sacramento, California. The phone is the fictional sample (916) 555-0146, the email is hello@torqueautorepair.example, and the address is 214 Torque Lane, Sacramento, CA 95814. Phone links use tel:+19165550146 without visitor-facing setup labels. They hand off to the device dialer but the fictional number is not a working business contact. Replace the displayed number and every tel: destination before launch.

Update matching details in the top bar, Visit section, footer, policy text where needed, and page metadata. Sample hours are Monday–Friday 8 AM–6 PM, Saturday 9 AM–2 PM, and Sunday closed. The shop introduction and service-practice copy are sample content. The testimonial names Daniel Reyes, Melissa Carter, and Jason Bennett and their quoted text are starter copy, not verified customer feedback. Replace them with authorized reviews or remove them before launch. No review rating, credentials, years of experience, or warranty terms are claimed.

04. Services, categories & prices

Each service is an article.service-row with a data-category value. Filter buttons use data-filter. Matching values connect the filter and service; all displays every row.

To add a service, copy a row, update its name, description, sample price, category, and data-service inquiry link. Add the same name to the form's Service select. Clicking a service link preselects that service and preserves unrelated form entries.

All displayed prices are illustrative starting prices, not quotes. Replace them with accurate prices and clarify scope. No service duration, membership, deposit, or warranty is assumed.

05. Shop story, process & reviews

Edit the About/Why choose us section, the three-step process, and the three review examples in index.html. The service process illustrates an appointment request, assessment/estimate conversation, and direct repair approval; only the browser-side inquiry preparation is implemented here.

Sample shop practices such as estimates before repairs and planned drop-off must match your operation. Do not add technician certifications, warranties, years of experience, ratings, or operating claims without verified details.

The review section is written in the business voice without on-page setup labels. Its names and quotes are starter content. Replace them with authorized, verified customer testimonials or remove the section. Do not put sample reviews or sample ratings in structured metadata.

The FAQ covers estimates, vehicle eligibility, warranties, appointment requests, turnaround, drop-off, draft copying, and estimate requests. Supply your actual terms where relevant. Arrival and parking arrangements are confirmed directly with the shop.

06. Colors, type & layout

Edit the CSS variables at the top of assets/css/style.css: graphite --ink: #202522, warm white --paper: #f5f4ef, and orange --orange: #ef783e. System Arial/Helvetica fonts require no font downloads.

Body text is 18px on desktop and 17px on phones. The hero description is 20px/18px. Service descriptions, FAQ questions and answers, contact details, and policies use 16px. Form labels use 15px, fields 16px, and secondary notes around 12–13px. Main heading sizes adapt to screen width; section headings are generally 38–62px desktop and 36–40px mobile.

The service list is two columns on desktop and one column on phones. The workshop/approach panel and inquiry layout stack on smaller screens. Adjust individual section spacing, rather than applying a global compression rule. Test changes at 320px, 390px, tablet, and desktop widths.

07. Photos & logo

Replace the two local WebP files in assets/images/. The hero uses a background-style image with a dark overlay, and the approach image uses a full-height crop. Adjust .hero-image and .approach-photo img in the CSS to change focal points. Preserve image proportions and update descriptive alt text.

The photographs are illustrative and do not represent verified staff, customer vehicles, or completed repairs. Replace these with your own photos where available; do not claim the supplied images show verified staff or completed work. The text logo is editable HTML; the orange T mark is a local SVG and favicon.

09. Inquiry settings & actual behavior

At the top of assets/js/main.js, change TORQUE_SETTINGS.recipient to your real email and confirm timezone: 'America/Los_Angeles'. Also replace the visible email address in the Visit section. The reserved .example address cannot receive customer mail.

The form requires name, a valid email, and service. Phone, vehicle, date, time, and message are optional. A supplied date must be today or later in the configured business timezone. Opening hours and real appointment availability are not checked.

“Prepare email draft” produces visible, reviewable text and an email-app link. It does not automatically open the email app, send anything, create a booking, or store entries. “Open email app” uses mailto:; the visitor must send the message. There is no backend, payment integration, or live scheduling.

“Copy draft” tries the browser clipboard API. If unavailable or denied, the draft text is selected and manual-copy guidance appears. Clipboard use usually needs HTTPS or localhost. Editing any field invalidates and hides the old draft. Reset clears all entries, the draft, and status text. No external booking link is included.

10. FAQs, dialogs & footer

FAQ panels are numbered in logical row order, two columns on desktop and stacked on mobile. Bootstrap collapse allows one answer open at a time, with all initially closed. Each question is a semantic button with matching target ID and accessibility attributes.

When adding FAQs, give each collapse a unique ID and update data-bs-target and aria-controls. Preserve data-bs-parent="#faqGroup" for single-answer behavior.

Privacy and Terms of Use open Bootstrap dialogs with close buttons, Escape handling, focus trapping and return, and scrollable content. Footer buttons align with the other links; the copyright notice has no year. Review policies against your actual operation before launch. Adding analytics, a backend, or external services requires corresponding policy updates.

11. Metadata & asset versions

Update the title, meta description, theme color, favicon, and visible brand text in index.html. No fabricated review or local-business structured data is included. Add business metadata only when you have accurate details.

Custom CSS and JavaScript references use ?v=1.2. After changing an asset, bump its token in the HTML, for example ?v=1.3, and distribute matching HTML and assets. Cached HTML or hosting caches can still require refresh.

12. Before your public launch

  • Replace every sample contact, price, opening hour, and location.
  • Confirm services and shop practices, and replace or remove fictional review examples.
  • Check all call links and the mobile action bar after replacing the sample number.
  • Set a working email recipient and correct business timezone.
  • Replace demonstration photos and disclosures as appropriate.
  • Review Privacy and Terms of Use against your actual practices.
  • Check phone, tablet, desktop, and keyboard navigation.
  • Prepare a draft, copy it, reset, and test your own email app.
  • Confirm all images, licenses, FAQs, and local asset paths.

13. Troubleshooting

Images or styles are missing: keep all folders and filenames intact and check relative paths. FAQ or dialogs do not open: confirm the local Bootstrap bundle loads before main.js.

Copy does not work: use HTTPS or localhost; use the provided manual-copy fallback if clipboard access is denied. Email app does not open: configure an email handler or copy the message manually. Very long messages can exceed email-app URL limits; copying remains available.

Header covers a destination: check the header measurement after changing row structure. Old styling appears: check that you delivered the latest HTML and assets, then refresh or inspect any actual caching behavior.

14. Dependency & license notices

Bootstrap 5 is distributed under its included MIT license. Read assets/vendor/BOOTSTRAP-LICENSE.txt and LICENSES.txt. System fonts need no bundled font license. No remote libraries or build tools are needed to use the template.