# Free mortgage broker website template > Free HTML mortgage broker website template for advisers who compare the whole market and book free calls. AGENTS.md for Claude Code, or no code with 8B. Made by 8B (https://8b.com/), an AI website builder. Updated October 2026. 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. - Page: https://8b.com/templates/keylight/ - Live demo: https://8b.com/templates/keylight/demo.html - DESIGN.md (design tokens and motion rules): https://8b.com/templates/keylight/DESIGN.md - Repository (GitHub template): https://github.com/8bsite/mortgage-broker-website-template - Download ZIP: https://8b.com/templates/keylight/mortgage-broker-website-template.zip - Template name in the repository: Keylight Mortgages - At a glance: 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. ## Use it with an AI coding agent Download the files into the project (Windows PowerShell: `curl.exe`): ```bash 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 ``` Then give the agent this prompt: ```text Read AGENTS.md, then edit index.html. Make this the site for . 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. ``` Work on the downloaded file, not on a link. AGENTS.md lists what to keep and what to replace. Or copy the whole repository: `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. ```text 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. ``` ## About 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](https://8b.com/templates/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](https://8b.com/templates/evenkeel/) 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. ## Design - 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](https://8b.com/templates/animated/). ## Sections and motion - **Navigation** (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. Motion: 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.** (opening): a heading, a paragraph and two actions beside a card showing an example agreement in principle. Motion: 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.** (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. Motion: 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** (method): four steps at the left; a held photo frame at the right wipes from one photo to the next with status chips. Motion: 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.** (included): a headline about the fee and a ledger of nine included services. Motion: 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.** (advisers): four adviser portraits on a dark ground, each opening from a narrow pill to a full frame. Motion: 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.** (stories): three client stories with a photo, a quote, names and a result. Motion: 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.** (switch): a held section where a rate-switch timeline of four panels runs sideways while the ground warms from white to amber. Motion: 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.** (offer): a photo with a glass panel comparing two monthly payments beside the free review offer. Motion: 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** (faq): six questions and answers (native details) with a phone line. Motion: 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.** (contact): a glowing disc behind a house photo, the contact details and a call-back form on a dark ground. Motion: The glow disc rises and swells behind the photo while the photo settles from a zoom. - **Footer** (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 ## Good for - mortgage broker or mortgage adviser - independent financial adviser, insurance broker or loan broker - estate agent or conveyancer with a small advice team - any regulated service that sells a call and explains a process ## Questions **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](https://8b.com/templates/for-lovable/) 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](https://8b.com/). 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. ## Before publishing Replace: social preview image, favicon, phone number, email address and contact form (sends nothing yet), plus the invented demo facts (prices, dates, addresses). - 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. ## License Code MIT. Photos: Unsplash License (credits in CREDITS.md). Fonts: SIL Open Font License 1.1. Browsers: Chrome and Edge 111+, Safari 16.2+, Firefox 113+ (it uses color-mix(), cascade layers, small/dynamic viewport units).