Free mortgage broker website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: keylight.md, data: keylight.json

Mortgage broker website template: first screen on a phone

About this mortgage broker website template

Mortgage broker website template: one free HTML page for an adviser who compares the whole market and books free calls. It holds an example agreement in principle, a chart of 94 lenders, a fee ledger, adviser portraits and a call-back form, in white and zinc with an amber glow. AGENTS.md lets Claude Code, Cursor or Codex adapt it.

At a glance, October 2026. One 91 KB index.html with its CSS and JavaScript inside, 12 sections, 13 Unsplash photos credited in CREDITS.md, Host Grotesk from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.27 smooth scroll loaded from jsDelivr.

A borrower checks three things: how much, what it costs and who will ring. This page answers them in that order. It suits a website for mortgage brokers, a remortgage specialist or a loan officer, and the fee ledger and four steps carry over to an insurance broker website template. If you are comparing mortgage website templates, the shape here is one scroll with one booking action repeated six times.

A mortgage broker website template for Claude Code, Cursor or Codex goes fastest when you hand the agent the facts only the firm has: fee model, regulator wording, lender count, rates, advisers and stories. The demo invents all of them, including the 4.9 rating. The agent should swap the name everywhere, then change the 94 in the lead paragraph's data element, the chart's inline count and the five other places it appears, keeping data-bank below the new count. The steps for Claude Code cover folder setup and a first prompt.

As a mortgage company website template it fits a small advice firm that sells a free call and explains a process. A practice that lists fixed monthly fee plans suits the accountancy template better. The weak spot is booking: the buttons jump to a form that sends nothing, and there is no rate calculator. A financial advisor website template with many service pages needs more than one page. If you want no code at all, 8B's own builder designs a site from a sentence.

Good for:

Mortgage broker or mortgage adviserIndependent financial adviser, insurance broker or loan brokerEstate agent or conveyancer with a small advice teamAny regulated service that sells a call and explains a process

Turn the mortgage broker website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/mortgage-broker-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/mortgage-broker-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/mortgage-broker-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/mortgage-broker-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my brokerage: name, city, regulator wording, fee model and amounts, lender count, advisers and specialities, client stories, rates to show, hours, booking>. Replace first the firm name, the fees, the lender count (data element, chart variables, every 94 in the text), the advisers and the stories. Keep the section ids, four method steps with four photos and four dots, and the classes AGENTS.md lists. Ask me for missing facts; never invent rates, fees, reviews, regulatory claims or contacts.

In a terminal

npx degit 8bsite/mortgage-broker-website-template my-site

Mortgage broker website design prompt for any AI tool

Use this to build a mortgage broker site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It is this template's design written as decisions; with the template itself, the short prompt above is enough.

Build a one-page website for a mortgage broker who compares the whole market and sells a free call. Audience: home buyers and remortgagers asking how much they can borrow, what it costs and who will ring. Sections in order: navigation, opening screen with an example agreement in principle card, a market chart of lender lines, four method steps beside a held photo, a fee ledger, advisers, client stories, a sideways rate timeline, an offer panel, questions, a call-back form, footer. Type: Host Grotesk only, regular weight headings with tight tracking, medium for labels and buttons, semibold for the wordmark. Colours: white #ffffff ground, ink #18181b text, grey #62626b secondary text, soft zinc #f4f4f5 rows and fields, amber #ffb547 and ember #fc5f2b used as a glow on the first screen and on the contact disc, warm near black #120d0a for the contact section and footer. Layout: two-column grids, small ember dots as bullets, no purple gradient, no three icon cards, no centred hero with two buttons, no second typeface, no hard shadows. Motion idea: the lender lines grow on scroll and the method photos wipe up over each other, with GSAP and ScrollTrigger; switch it all off under prefers-reduced-motion. Ask me for the fee model, regulator wording, lender count, rates, advisers and client stories; never invent them, and list every placeholder. One primary action, Book a free call, repeated in the navigation, the opening, the fee ledger and the form. On phones keep tap targets large and the form one column. Check: no console errors, works at 390 px, visible keyboard focus.

Mortgage broker website design and motion

Palette

#ffffff page ground, the nav bar, the footer card and the call-back form card, text on the dark sections#18181b body text, the dark buttons, the advisers section ground, the bank's line in the chart, the switch dots and fill line#62626b secondary small text and the descriptions in the fee ledger#f4f4f5 alternate ledger rows, the FAQ section ground, the form fields#ffb547 amber: the middle of the glow gradient, the switch section's final ground, adviser specialities, the method index dots, the line in the offer panel's chart#fc5f2b ember: the chart lines other than the bank's, bullets and step markers, the round badge icon behind the white tick, the link underline on hover, the end of the glow#120d0a warm near black: the contact section and footer ground, the backing of the photo frames, the dark photo chips and the offer panel#a1a1aa muted small text, such as the one-line adviser notes and the photo chip subtitles#e4e4e7 hairlines, field borders, the pale start of the chart lines and the dimmed ledger and FAQ rows before they light up#ffe3b3 the cream centre of every glow: the first screen, the button hover, the logo mark and the contact disc

Fonts

Host Grotesk: the only typeface, loaded as one variable file for weights 400 to 600: regular headings with tight tracking, medium labels and buttons, a semibold wordmark

Two-column grids carry most sections, heads mostly split 7 to 5, content mostly 6 to 5. A photo frame stays held beside four scrolling steps, the fee is a nine-row ledger with zinc stripes on alternate rows, advisers sit four across on a dark ground, and the stories swap photo sides. Small ember dots repeat as bullets and markers, and a glowing dot is the logo mark. Grounds run glow, white, dark zinc, white, amber, white, light zinc, near black.

As mortgage website design goes, this one rations its colour. The amber glow shows in the first screen's ground, in the circle that fills each button on hover, and in the switch section, which warms from white to amber as you scroll, like other scroll-driven pages.

Every value of this mortgage broker website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the mortgage broker website page

Navigation
Four links, a wordmark with a round mark, the phone, a Book a free call button and a Menu button; a menu overlay with five links
The bar slides up out of view when you scroll down and returns when you scroll up, with or without reduced motion.
Know your number before you fall for a house.
A heading, a paragraph and two actions beside a card showing an example agreement in principle
On load the heading block rises in three beats and the agreement card follows a moment later.
Your bank shows you one shelf. We show you the whole market.
A chart of 94 thin lines, your bank as one dark line, which light up and grow outward as you scroll, above three lender kinds
Scrubbed with the scroll, every line except the bank's grows from a fifth of its height to full and turns from pale grey to ember, outward from the dark line.
How it works
Four steps at the left; a held photo frame at the right wipes from one photo to the next with status chips
The photo frame is held by CSS while the steps scroll past; each new photo wipes up over the last, which shifts up and darkens, and the index dot moves on.
Brokers can charge up to £995. Our fee is £0.
A headline about the fee and a ledger of nine included services
The headline rises line by line out of a mask, then the nine ledger rows light up one after another, once.
The adviser on your first call is the one who hands you the keys.
Four adviser portraits on a dark ground, each opening from a narrow pill to a full frame
Each portrait opens from a narrow pill to its full frame while the photo brightens, with a lag along the row, and the text rises into place.
Bought, moved, switched.
Three client stories with a photo, a quote, names and a result
The heading rises line by line, and each photo comes up from dim and slightly zoomed as it scrolls into view.
A fixed rate ends. We're already watching.
A held section where a rate-switch timeline of four panels runs sideways while the ground warms from white to amber
Pinned: the intro and four panels run sideways for about 1,300 px of scrolling on a 1440 px screen, a line fills under them, each dot pops as it is reached and the ground warms from white to amber.
Start with a free mortgage review.
A photo with a glass panel comparing two monthly payments beside the free review offer
The photo settles from a zoom, the glass panel rises from below and the payment line draws left to right.
Questions people ask before the first call
Six questions and answers (native details) with a phone line
The heading rises, then the six rows light up in turn, once; opening a question turns its plus into a minus.
The keys are closer than they look.
A glowing disc behind a house photo, the contact details and a call-back form on a dark ground
The glow disc rises and swells behind the photo while the photo settles from a zoom.
Footer
A white card on the near-black ground with the logo, a tagline, a button, two link columns and a regulatory text with the copyright

Before you publish the mortgage broker website site

Replace social preview image, favicon, phone number, email address and contact form (sends nothing yet) and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book a free call buttons (header, menu, first screen, included, offer and footer) lead to #contact now; point them to your booking calendar URL (Calendly, Cal.com) if you take bookings there, or keep them on the call-back form.
Call link in the header, menu, FAQ, contact block and footer lead to a tel: link to the office phone now; point them to your own number.
Request a call button of the call-back form lead to action="#contact" with method post; a script checks required fields, clears the form and shows a thank-you line, nothing is sent now; point them to your form endpoint (Formspree, Netlify Forms) or your own handler; replace section-script:contact when you do, since it resets the fields inside the submit handler and a plain post without its preventDefault would send them empty.
Privacy and Complaints links in the footer legal line lead to /privacy and /complaints on your own domain, which do not exist yet now; point them to your privacy notice and complaints procedure pages.
See how it works link in the first screen lead to #method now; point them to keep it.
The call-back form is a demo: with JavaScript it only checks the required fields, clears itself and shows the thank-you line; without it the form posts to #contact.
The switch section pins for the whole sideways run of its panels: about 1,300 px of scrolling at 1440 px wide and 1,270 on a 375 px phone.
The footer links to /privacy and /complaints do not exist on a static copy: point them to real pages.
gsap, ScrollTrigger, SplitText and Lenis load from a CDN before the motion scripts; offline they are missing and the motion does not run.

Questions about this mortgage broker website template

Is this a free mortgage website template I can use for client sites?

Yes. It is a single index.html under the MIT license, so a freelancer can build mortgage broker sites for clients at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step and no CMS, and CREDITS.md lists the Unsplash photos.

Does it include regulatory wording for a UK or US broker?

It includes demo wording only. The footer says the firm is authorised and regulated by the Financial Conduct Authority and carries a repossession warning, and the prices are in pounds. Replace them with the wording your regulator and compliance officer require; the page shows no firm reference number.

Does the call-back form send anything?

No. The script checks the required fields, clears the form and shows a thank-you line, and nothing is sent. Connect Formspree or Netlify Forms, or point the Book a free call buttons at a Calendly or Cal.com link. Replace the contact script when you do: it clears the fields before a plain post could send them.

What is the mortgage broker website design prompt, and how do I use it with Claude Code?

Put index.html and AGENTS.md in the project folder and paste the short prompt above, working on the file, not on the page fetched by URL. To vibe code from scratch in Codex or v0, paste the mortgage broker website design prompt below; in Lovable, one button opens that chat with the prompt and the demo.

What must I keep when I change the content?

Keep the section ids and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists. Keep four method steps with four photos and four dots, give each new switch panel a dot, and change the lender count in all its places together.

Can I get a site like this without editing code?

Yes, with 8B's AI website builder. You describe the firm in a sentence and its engine designs a new site, its own design and not this template. Designing and restyling are free; publishing with hosting and SSL, HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT.

Not a mortgage broker website? More free templates