Make this practice
feel like your own.

1. Quick start

1. Extract the ZIP. Keep the brightsmile-dental folder and its assets folder together.
2. Open index.html in a modern browser to view the landing page. You can open this guide independently.
3. Use a plain-text code editor to edit HTML, CSS, and JavaScript. Save a backup before making substantial changes.
4. Replace the starter practice details, review the content, and check the page on desktop and mobile before public use.

The page works with local Bootstrap, local photographs, local icons, and system fonts. There are no remote font files, embedded maps, analytics scripts, or package-install steps. Browser clipboard permissions differ for local files; the manual-copy fallback is available.

2. What's in the folder

brightsmile-dental/
  index.html
  README.html
  LICENSES.txt
  assets/
    css/styles.css
    js/inquiry.js
    js/main.js
    images/consultation.webp
    images/practice-interior.webp
    icons/favicon.svg
    vendor/bootstrap/bootstrap.min.css
    vendor/bootstrap/bootstrap.bundle.min.js
    vendor/bootstrap/LICENSE

3. Replace the practice content

Practice identity and contacts

Edit the plain-text BrightSmile wordmark in the header and footer, the dental subtitle, the page title and description in <head>, and all practice-name references. Update the SVG favicon if you have your own brand mark.

The 555 phone number and .example email are reserved starter destinations, not working practice contacts. There is no live open/closed indicator. Confirm the timezone and actual office hours independently.

Services and practice approach

The six service cards introduce examinations, cleaning, fillings, crowns and bridges, whitening consultations, and dental concerns. Verify each service with the practice. Edit or remove cards that do not apply. Each appointment link has a data-visit value matching an option in #visitInterest; update both together. The dental-concern card leads to a phone call.

Review the practice introduction, care commitments, first-visit steps, and FAQ answers so they match how your team actually works. The concept does not include clinician biographies, qualifications, treatment results, insurer logos, pricing offers, or specialty-care promises. Add only accurate supplied details. Check patient age groups, specialty services, accessibility, parking, languages, and any first-visit requirements before including them.

Fees, insurance, and patient feedback

The fees section invites direct questions and does not list treatment prices or accepted plans. Replace it with your actual arrangements only after verification. Review relevant policy wording when you make these changes.

The three quotes attributed to Elena M., Daniel R., and Priya S. are invented starter copy. Replace them with verified patient feedback authorized for use or remove the complete feedback section before public launch. Do not present the starter quotes as actual patient reviews, add a fabricated review score, or include them in structured data.

Photography

The included photographs are starter visual assets. They are not verified photographs of actual practice staff, patients, or premises. Replace them with suitable licensed practice photographs when representing a real business. Write alt text describing the image itself without making unsupported identity claims.

Both supplied images are 1536 × 1024 WebP files. Keep descriptive filenames, update src, width, height, and alt text when replacing them. The hero is eager-loaded with high priority and has a preload link in the head; update both the image and preload paths together. The supporting image loads lazily.

4. Colors, typography, and responsive design

Edit CSS variables at the beginning of styles.css to make broad color changes.

Headings use Georgia with a Times New Roman fallback. Body text uses Arial/Helvetica and the system sans-serif fallback. No font download is needed.

Responsive rules are grouped near the end of the stylesheet at 1199px, 991px, 767px, 479px, and 359px. Services move from three to two to one column. The inquiry uses a two-column section on large screens and a single-column section on smaller screens. Inputs stack below 576px. FAQs use two independent columns, then one column on phones.

The hero and practice photographs use object-fit: cover. Change their object-position and responsive heights if a different photograph needs another crop. Preserve natural proportions in the image files. Check subjects and faces at phone and tablet sizes.

5. Appointment inquiry and email drafting

This is a nonclinical appointment-inquiry form. It is not a booking system, patient portal, backend submission service, payment flow, or health-record integration. It has no live appointment availability.

Configure the recipient and timezone

Open assets/js/inquiry.js and update the settings:

practiceName: 'BrightSmile Dental',
recipient: 'hello@brightsmile-dental.example',
timeZone: 'America/Los_Angeles',
timeLabel: 'Riverside / Pacific time'

Use a valid IANA timezone for the actual practice. The default rejects dates before the current calendar day in Riverside, including when a visitor is in another timezone. Morning and afternoon are preferences in practice-local time. The form does not enforce working hours, weekends, holidays, or available slots.

What visitors can enter

Name and email are required. Phone, new/existing patient selection, visit interest, date, time, and scheduling notes are optional. Notes are limited to 300 characters and are for practical scheduling details only. Do not adapt this ordinary email flow to collect symptoms, medical history, records, birth dates, identification, insurance numbers, payment details, or uploaded clinical material.

How the controls work

1. Prepare email draft validates the form and displays the message. It does not open an email app or send anything.
2. Open email app uses a mailto: link containing the recipient, subject, and body. The visitor must send the message themselves. An email app must be configured on the device.
3. Copy draft requests clipboard access when available. If blocked, the page selects the draft and explains how to copy it manually.
4. Editing any form field hides and invalidates the old draft. The visitor must prepare a new one.
5. Reset form clears the form, validation styling, and visible draft. It does not erase content already copied to the clipboard or handed to an email app.

The form does not write entries to localStorage, sessionStorage, console logs, or analytics. Data remains in page memory until reset, edited as part of the form, or the page is closed/reloaded. Browser autofill or restoration and email-provider behavior are outside the page's own logic. The form fields start disabled and are enabled only after the script loads, preventing a JavaScript-disabled fallback from submitting a normal form URL.

Use a real scheduling service if needed

If your practice uses an approved scheduling service or patient portal, replace relevant appointment links with its genuine URL. Update buttons, form text, FAQs, and policies to describe what actually happens. Do not label the current draft-only flow “confirmed booking.” Keep general contact email separate from sensitive patient communication.

6. Navigation, FAQs, and focus behavior

The information bar and main navigation share one sticky wrapper. main.js measures only those pinned rows, excluding the expanded mobile menu, and updates --header-height. The mobile action bar is measured separately for bottom clearance and safe-area support. Measurements update on resize, font readiness, and size changes.

Anchor links focus and scroll to the target with header clearance. Mobile navigation closes before scrolling. Escape closes an open mobile menu and returns focus to its toggle. The menu can scroll within the available viewport on short screens. Essential content does not depend on motion, and reduced-motion preferences are respected.

FAQs use Bootstrap Collapse, unique IDs, semantic question buttons, aria-controls, and aria-expanded. They begin closed and share data-bs-parent="#faqAccordion" so only one answer stays open at a time. Each panel retains its own content-driven height. If you add a question, create a unique matching target ID and number. Do not give FAQ items fixed heights.

Privacy and Terms of Use use Bootstrap Modal with close buttons, Escape support, focus trapping, and focus return through the triggers. Keep the modal markup outside the sticky header and above the closing body tag. Footer policy buttons use the same font size, baseline, and spacing as adjacent links.

Cache versions

Custom CSS and JavaScript links currently use ?v=1.0. Bump the affected token when changing an asset, and deliver the updated HTML and matching assets together. A query token does not refresh old cached HTML or every hosting cache. Confirm the exact page and file version when investigating a missing change.

7. Review the visitor policies

Find #privacyModal and #termsModal near the end of index.html. The supplied wording describes the delivered draft-only behavior, optional clipboard use, email handoff, general service information, and direct appointment confirmation.

Before public use, review these statements against the actual practice, email handling, hosting, and any added services. Do not claim specific retention practices, insurance arrangements, legal guarantees, compliance certification, or clinical capabilities unless verified. If analytics, a backend, payments, external scheduling, or a patient portal are added, update the page and its policy wording accordingly.

8. Before your practice goes live

• Replace the reserved phone and email, invented address, starter hours, and practice identity everywhere.
• Verify every offered service and all first-visit, cost, insurance, accessibility, and operating information.
• Replace or remove all starter patient quotes. Confirm permission for any real patient feedback and imagery.
• Replace starter photos as appropriate and check their crops and alt text.
• Confirm the draft recipient, timezone, inquiry labels, and any actual external scheduling destination.
• Review the policy dialogs for actual business and technical behavior.
• Open the page on desktop, tablet, and phones down to 320px. Check heading wrapping, pinned-header height, menu scrolling, footer alignment, and bottom action-bar clearance.
• Use a keyboard to test navigation, FAQs, form fields, policy open/close, Escape, and focus return.
• Try empty/invalid fields, a past date, optional fields left blank, a valid draft, editing, copying, and reset.
• Test the configured email-app handoff on your own device and review the recipient before sending a test message.
• Keep the complete asset folder with the HTML and preserve dependency license notices.

9. Troubleshooting

10. Dependencies and license notices

Bootstrap 5.3.3 is included locally under the MIT license. The bundled JavaScript includes Popper; its complete MIT license notice is included in LICENSES.txt. See LICENSES.txt and assets/vendor/bootstrap/LICENSE. Keep upstream notices when distributing the template.

The wordmark, line icons, favicon, custom styles, and scripts are included with the template. Georgia, Arial, and their fallbacks use fonts already installed on the visitor's device; no font binaries are redistributed. Apply the license supplied with your purchase to use of the template itself, and verify rights for any replacement assets you add.