Overview

A modern, animation-rich HTML template for loan companies, digital lenders, credit brokers and finance advisors. Lendora ships two distinct homepages — a classic lending design and an AI-driven variant — plus a four-calculator suite with real amortization math, a borrower dashboard with charts, a step-by-step application wizard and a full set of inner pages.

What’s included

• 2 homepage designs (classic lending and AI-driven lending)
• Loan calculator suite: repayment & year-by-year schedule, affordability, early payoff and refinance check — all real math, no dummy numbers
• Borrower dashboard with Chart.js balance and payment-split charts
• Four-step application wizard with live payment estimate and review step
• Services, service details, about with a dotted coverage map, team, blog with video / gallery / quote post types, blog article with sidebar and comments
• Contact with working PHP form and map, business finance application, login / register / forgot password, coming soon with countdown, 404
• three.js scenes: particle waves, wireframe globe, flowing lines, torus knot
• GSAP scroll reveals, Swiper sliders, animated counters, parallax
• Fully responsive, W3C-valid, zero console errors

Getting Started

Thank you for choosing Lendora. Follow the steps below to get your site live.

1. Open locally

Unzip the downloaded package and open index.html in any modern browser (Chrome, Firefox, Edge, Safari). No build tools or server are required — all files are ready to use as-is.

2. Deploy to a server

Upload the entire template folder to your hosting provider using an FTP client (such as FileZilla) or your hosting control panel. Once uploaded, navigate to your domain and the template will load immediately.

3. Customise

All custom styling lives in assets/css/style.css (with a numbered Table of CSS at the top) and assets/css/responsive.css. Colours and fonts are controlled by CSS variables — see Colors & Fonts below.

File Structure

Below is an overview of the key files and folders included in this template.

Colors & Fonts

The whole design is driven by CSS variables declared at the top of style.css. Change a token once and every section, button and card updates.

Fonts

Two Google Fonts are loaded in the head of each page: Source Serif 4 (headings and display type) and Inter (body text, buttons, navigation and figures). Swap them by editing the Google Fonts link and the --ld-ff-* variables.

Loan Calculators

Every calculator in Lendora runs the real amortization formula — the same math a lender uses — via the shared monthlyPayment(principal, annualRate, years) helper in JS block 06 Loan Math.

• Hero estimate (both homepages) — amount slider and term buttons with a live monthly payment; the representative rates per term live in block 07 as a small rates map you can edit.
• Repayment & Schedule — amount, rate and term sliders, a principal-vs-interest doughnut and a year-by-year amortization table with totals.
• Affordability — applies the standard 36% debt-service rule to take-home income and commitments.
• Early Payoff — simulates extra monthly payments month by month and reports the time and interest saved.
• Refinance Check — compares payments at the current and new rate, including switching costs, and gives an honest verdict either way.

The loan-type preset chips on the calculator page (block 17) hold the representative APRs in data- attributes — update those to your real rates and everything downstream recalculates.

JavaScript Guide

All custom behaviour lives in assets/js/main.js, wrapped in a jQuery IIFE and organised into numbered blocks (see the JS INDEX comment at the top of the file):

• 01–05 — Preloader, sticky header, offcanvas menu, scroll reveals, counters
• 06–08 — Loan math helper, hero calculator, calculator band
• 09–11 — Testimonial slider, back-to-top, anchor scroll
• 12–14 — three.js scenes (waves, globe, lines, particles, knot), X feed card, parallax
• 15–16 — X posts slider, hero slider
• 17–19 — Calculator suite, application wizard, dashboard charts
• 20–23 — AI extras, coming-soon countdown, AJAX contact form, blog gallery

Each block is a self-contained doSomething() function that safely skips pages where its section is not present — you can delete any block you do not need. Every animation respects prefers-reduced-motion automatically.

Images

The download package ships with neutral placeholder images so you can see every layout at the correct dimensions. Replace them with your own photos using the same file names, or update the src attributes. Images are grouped by section inside assets/img/.

The logo files, the dotted coverage map and the payment badges are included and ready to use. All demo photography shown on the live preview is for preview purposes only and is not included in the download.

Contact Form

The contact page posts to sendmail.php, a lightweight AJAX mail handler — the success or error message appears under the Send button without reloading the page. To activate it on your server:

1. Set your email address

Open sendmail.php and replace the placeholder recipient at the top of the file with your own address:

$toEmail = 'hello@yourdomain.com';

2. Upload to a PHP host

The form needs a server with PHP mail() support (virtually every shared host). It will not send from your local computer or from a static-only host — there the form shows a friendly “upload to a PHP-enabled host” notice instead.

3. Optional: enable Google reCAPTCHA v3

Invisible reCAPTCHA v3 spam protection is already built into the handler. It stays dormant until the form submits a token — that is why no badge or checkbox appears out of the box. To switch it on:

• Create v3 keys (a site key and a secret key) for your domain in the Google reCAPTCHA admin console
• In sendmail.php, replace YOUR_RECAPTCHA_V3_SECRET_KEY with your secret key
• In contact.html, add a hidden token field inside the form and load the reCAPTCHA script with your site key just before </body>:

<!-- inside the contact form -->
<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

<!-- before the closing </body> tag -->
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR_SITE_KEY', { action: 'contact' }).then(function (token) {
      document.getElementById('g-recaptcha-response').value = token;
    });
  });
</script>

Once the token field is present, sendmail.php verifies every submission with Google automatically and rejects low-score (bot) requests.

The newsletter, comment, application and account forms are front-end only by default — point their action attributes at your backend of choice.

Credits

This template is built using the following open-source libraries and resources.

• Bootstrap 5.3
• jQuery 3.7.1
• Swiper 11
• GSAP 3 + ScrollTrigger
• three.js r128
• Chart.js 4
• Font Awesome Free
• Google Fonts: Inter, Source Serif 4

All plugin files and icon fonts are loaded locally. The only external requests are the Google Fonts stylesheets and the optional Google Maps embed.

Support

If you have any questions or need help with the template, please reach out through our ThemeForest profile. We aim to respond within 24–48 hours.