Accounting Firm Homepage Template

A complete Bootstrap 6 accounting firm homepage for a fictional CPA practice, Tallyfield & Co, in forest green and lime. It includes a live savings estimator, services, onboarding steps, testimonials and a consultation booking form.

How it works

.ac-page is light, while the header, consultation panel and footer use data-bs-theme="dark". style.css maps the Bootstrap 6 primary role to green in light areas and lime in dark areas, so btn-solid theme-primary keeps its contrast.

Navbar: navbar lg:navbar-expand with a <dialog class="drawer drawer-end"> on small screens. "Services" opens a .menu.
Hero: headline, pill buttons and a photo with the .ac-calc estimator. Its two Bootstrap 6 Range sliders fire input events that update the <output> labels and [data-ac-total].
Stats and services: a <dl> stat row and a bento grid (.ac-bento).
How it works: four numbered .ac-steps rows.
Clients: a large lime quote and two cards with portraits.
Consultation: <form data-bs-validate novalidate> with:
a <select class="form-control">
btn-check service chips
a Datepicker in a form-adorn field
a radio btn-group

At load, the script sets data-bs-date-min (tomorrow) and data-bs-date-max (60 days ahead), so no date goes stale. On submit it flags invalid fields and requires a service and a date. It then simulates sending and opens #ac-toast.

FAQ and footer: an exclusive accordion accordion-gap and a dark footer with a final call to action.

Customization

To rebrand, change --ac-forest, --ac-green and --ac-lime on .ac-page in style.css, plus the --bs-primary-* blocks.
Adjust AC_HOURLY_RATE, AC_WORK_WEEKS and AC_TAX_SAVING in script.js to tune the estimator.
Change the max.setDate(max.getDate() + 60) offset in script.js to widen the booking window.
Replace the setTimeout in the .ac-form submit handler with fetch() to your booking or CRM endpoint.
Add or remove .ac-chip labels to match the services you sell.
Remove .ac-service-feature from the first card to give all services the same size.
The photos come from Unsplash. Replace them with your own team and office images.

Accessibility

A skip link targets #ac-main. Sliders have labels and <output> values, the total is in an aria-live region, and chip groups use fieldset/legend. A failed submit moves focus to the first invalid field, and the toast uses role="status". Focus rings are visible in light and dark areas, and transitions stop under prefers-reduced-motion.