Solaris — Free Website Template for Solar & Renewable Energy Companies
Solaris is a free two-page Bootstrap 5 website template built for solar installers, battery-storage integrators, and renewable-energy companies. It combines a bright solar-gold and sustainability-green identity with a live monthly-bill savings calculator, a six-service offerings page, and a validated free-quote form, and ships completely jQuery-free with vanilla JavaScript powering the calculator, lightbox, testimonials slider, and count-up stats.
Key features
- Live savings calculator — drag your monthly bill to see system size, first-year savings, 25-year net savings, and payback period update instantly
- Two-page site: home + a detailed services page (offerings, financing comparison, calculator, quote form)
- 100% vanilla JavaScript — no jQuery, no plugins, one function per feature
- Filterable project gallery with a keyboard-accessible, focus-trapped lightbox
- Validated free-quote form with inline field errors and a success confirmation message
- Animated count-up stats for installs, capacity, CO2 offset, and customer rating
- Testimonials slider with dot navigation, arrow controls, and swipe-friendly touch support
- FAQ accordion covering pricing, timelines, warranties, and net metering
- Fully accessible: semantic landmarks, labelled forms, ARIA on custom widgets, visible focus states, reduced-motion support
Best for
- Residential and commercial solar installers
- Battery storage and EV charger installation companies
- Renewable-energy and clean-tech service businesses
- Solar sales and financing brokers who need a lead-capture calculator
- Developers who want a jQuery-free Bootstrap 5 base with real niche content already written
At a glance
- Bootstrap 5 with no jQuery and no plugin dependencies
- Two-page site: home + services (offerings, calculator, quote form)
- Custom design layer: Sora (headings) + Manrope (body), solar-gold + sustainability-green + navy-ink palette
- Vanilla JavaScript: savings calculator, quote-form validation, lightbox, testimonials slider, count-up stats, scroll reveals
- Mobile-first responsive layout with a working collapsible mobile menu
- Reduced-motion support throughout
How to use it
Download the ZIP, unzip it, and open index.html — no build step, nothing to install. Edit the text and images, point any forms at your backend or a form service, and deploy the folder to any static host. Colours and fonts live in css/style.css; the interactions are in js/main.js.
Frequently asked questions
Is Solaris free to use, including for commercial projects?
Yes. Solaris is free and follows the standard uiCookies license, which covers commercial use. The one requirement is attribution, and the exact terms are listed on the uiCookies license page. There's no paid tier or locked version — what you download is the complete two-page template.
Does the savings calculator actually work, or is it just a static graphic?
It's a fully working calculator. Moving the monthly-bill slider recalculates recommended system size, gross and net installed cost, first-year savings, 25-year net savings, and payback period in real time, using a transparent formula (grid rate, offset percentage, production ratio, install cost per kW, the 30% federal tax credit, and utility rate inflation) that's documented and easy to edit in js/main.js. It appears on both the home page and the services page.
What pages does Solaris include?
Two pages: a home page covering the hero, savings calculator, services overview, why-choose-us section, process steps, stats, tax-incentive note, project gallery, testimonials, service areas, and FAQ; and a services page that goes deeper on each of the six offerings (residential solar, commercial solar, battery storage, EV chargers, maintenance, energy audits), compares financing options, repeats the calculator, and hosts the free-quote form.
Can I edit Solaris without coding skills or a build tool?
Solaris is a static front-end template — HTML, CSS, and JavaScript files you edit directly, with no build step required to launch it. Basic HTML is enough to swap text, links, and images. All colors and type are defined as CSS custom properties at the top of css/style.css, so restyling the palette is a matter of changing a handful of values in one place.
How do I change the colors and fonts?
The palette (solar gold, sustainability green, navy ink, and the neutral grays) is defined as CSS custom properties in the :root block at the top of css/style.css, along with the two Google Fonts variables — Sora for headings and Manrope for body text. Change the variable values or swap the Google Fonts link in each page's <head> and the whole site updates.
Is Solaris responsive and mobile-friendly?
Yes. It's built on the Bootstrap 5 grid and tested down to small phone widths, with a mobile navbar that collapses into a working hamburger menu using Bootstrap's own collapse component — no third-party plugin. Grids for the services, gallery, stats, and process sections all reflow to one or two columns on smaller screens.
Does the quote form actually send messages, and is it accessible?
Solaris is a static front-end, so the free-quote form is fully marked up, keyboard-accessible, and validated client-side (required fields, email format, ZIP format, and a required consent checkbox all show inline error messages) but has no backend attached. Point the form at your own server-side handler or a form-submission service to make it live. The savings mini-form in the hero and the full quote form on the services page share the same validation logic.
What makes Solaris different from a generic Bootstrap template with the copy swapped out?
Every section is written with real, niche-specific content — actual panel and inverter models, actual financing APR ranges, actual warranty terms, and a working savings formula — instead of placeholder lorem ipsum with a green color swap. The design also commits to a distinct palette (solar gold plus sustainability green on navy and white) and a Sora/Manrope type pairing rather than defaulting to Bootstrap's out-of-the-box look.
