Solax is a premium Solar Energy HTML5 Template built for solar companies, renewable energy providers, green tech startups, wind power firms, and sustainable energy consultancies. With 18 pages, 3 distinct home layouts, and a rock-solid foundation on Bootstrap 5.3.3, Solax delivers everything you need to launch a professional solar energy website straight out of the box.
What separates Solax from every other solar or renewable energy HTML template on ThemeForest? Two things no competitor offers: a full dark mode toggle (the first and only solar energy HTML template in this category with one) and verified ARIA 1.2 accessibility compliance. The leading competitor in this niche (R-Energy, 40 pages) has no dark mode, no colour switcher, and zero accessibility work. Solax matches or beats it on page count where it matters and leaves it behind on every modern web standard.
Key Features
- 18 hand-crafted pages covering every section a solar energy website needs
- 3 unique home page layouts (Home 1, Home 2, Home 3)—pick your favourite or A/B test them
- 4 portfolio/project layout variations: grid, masonry, slider, and detail view
- Full dark mode toggle—the ONLY solar energy HTML template on ThemeForest with one
- 8 live colour themes switchable via CSS custom properties (color1.css through color8.css)
- ARIA 1.2 accessibility pass—the ONLY solar energy HTML template on ThemeForest with verified ARIA compliance
- Bootstrap 5.3.3 (latest stable)—modern grid, components, and utilities
- Google Fonts: Oswald + Roboto for a bold, authoritative typographic pairing
- Fully responsive and mobile-first across all breakpoints
- Clean, well-commented HTML, CSS, and JS—easy to customise and hand off to clients
- W3C valid HTML5 markup
- Cross-browser compatible: Chrome, Firefox, Safari, Edge
- Font Awesome icons throughout
- Dedicated Team Details pages (not just a team grid)
- Dedicated Why Choose Us page (standalone, not just a section)
- FAQ page with accordion
- 3-layout blog system: Standard, Grid, and Details
Dark Mode Toggle
- Full site-wide dark mode—every page, every section, every component
- Toggle switch in the header with sun/moon icon for instant visual feedback
- User preference saved to
localStorage—dark mode persists across page loads and sessions - Activated via
body.mht-darkclass—clean, single-point override, easy to extend - Solar energy buyers increasingly expect a dark mode option, especially for dashboard-adjacent sites and technical audiences
- Competitive research: zero solar or renewable energy HTML templates on ThemeForest (as of March 2026) offer a dark mode toggle—Solax is the first and only
- R-Energy, the category benchmark at 40 pages, has no dark mode whatsoever
- Dark mode is a strong selling point for client pitches—it is a visible, immediately impressive demo feature
8 Colour Theme System
- 8 ready-made colour themes included: color1.css through color8.css
- Built entirely on CSS custom properties (variables)—no Sass required, no build step needed
- Switching themes is one line: swap the colour stylesheet link in
<head> - Primary default: Red
#f64b3c—bold, energetic, and high-contrast against both light and dark backgrounds - Each colour theme is fully compatible with dark mode—light/dark x 8 colours = 16 visual combinations from one purchase
- Enables agencies to reuse the template across multiple solar clients, each with a distinct brand colour
- Competitive research: no competitor solar HTML template on ThemeForest offers a multi-colour CSS variable system
Accessibility and ARIA Compliance
- Full ARIA 1.2 pass completed 03/10/2026—documented in changelog
- Skip-to-content link at page top for keyboard and screen reader users
-
<main>landmark element on every page for correct document structure - Focus-visible outlines: 3px solid outline on all interactive elements—meets WCAG 2.1 AA focus indicator requirement
- Social icon aria-labels auto-injected by JS—no manual label maintenance required when adding social links
- Slider/carousel:
role="button",aria-label, and full keyboard navigation (Enter and Space activate controls) - Mobile navigation toggle:
aria-expandedattribute correctly toggled on open/close - Back-to-top button: explicit
aria-label="Back to top" - Competitive research: zero solar or renewable energy HTML templates on ThemeForest mention WCAG or ARIA in their descriptions or changelogs
- ARIA compliance is a mandatory procurement requirement for many government, utilities, and public-sector solar energy clients—Solax is ready for those contracts out of the box
3 Unique Home Layouts
- Home 1 (index.html)—bold hero with full-width slider, services strip, and stats counter
- Home 2 (index2.html)—video or image hero variant with alternating content sections
- Home 3 (index3.html)—clean, minimal layout ideal for consultancy-style solar brands
- All three home layouts share the same header, footer, dark mode toggle, and colour theme system—swapping is effortless
- Each layout demonstrates a different content hierarchy so you can match the home page structure to the client’s sales funnel
- Three home layouts from a single template purchase is a significant value multiplier—most competitors offer one
4 Portfolio Layout Variations
- Portfolio Grid (project.html)—uniform card grid, clean and scannable
- Portfolio Masonry (portfolio-masonary.html)—dynamic Pinterest-style layout, great for varied image sizes
- Portfolio Slider (portfolio-slider.html)—full-width carousel showcase for hero project presentations
- Portfolio Details (portfolio-details.html)—deep-dive individual project page with gallery, specs, and call to action
- 4 portfolio layouts is unmatched in the solar energy HTML template category on ThemeForest
- Solar companies need strong project showcases—installed systems are their primary sales proof, and four layout options cover every presentation scenario
Services System
- Services Page (services.html)—full services listing with icons, descriptions, and call-to-action links
- Service Details Page (services-details.html)—individual service deep-dive with sidebar, related services, and contact prompt
- Two-tier services system mirrors how solar companies actually sell: broad category pages feeding into specific service detail pages
- Service detail pages are ideal for SEO—individual pages for “Solar Panel Installation”, “Battery Storage”, “Commercial Solar”, etc.
- Sidebar on the detail page includes a services navigation list and a quick contact/quote widget area
Team Pages System
- Team Page (team.html)—responsive card grid of team members with photo, name, role, and social links
- Team Details Page (team-details.html)—individual profile page with biography, skills, experience, and contact details
- Individual team detail pages are rare in HTML templates at this price point—Solax includes them as standard
- Critical for solar companies that sell on trust and expert credentials (engineers, NABCEP-certified installers, etc.)
- Social links on team cards have ARIA labels auto-injected by the accessibility JS layer
Why Choose Us Page
- Why Choose Us (why-choose-us.html)—a dedicated standalone page, not just a homepage section
- Includes icon feature blocks, statistics counters, testimonials strip, and a call-to-action row
- Having a standalone “Why Choose Us” page improves internal linking and gives sales teams a direct URL to share with prospects
- Content sections are modular—reorder, add, or remove blocks to match your client’s unique selling points
Blog System
- Blog Standard (blog-standard.html)—classic vertical list layout with sidebar, categories, recent posts, and tags
- Blog Grid (blog-grid.html)—two or three column card grid, clean and modern
- Blog Details (blog-details.html)—full single post page with author bio, tags, share buttons, related posts, and comment form area
- Three blog layouts from one purchase—use the layout that fits the content volume and editorial style
- Blog sidebar includes search, categories, recent posts, and tags widgets
- Content marketing is essential for solar companies (education-heavy buying journey)—a capable blog system is not optional
FAQ System
- FAQ Page (faq.html)—full dedicated FAQ page with accordion-style collapsible sections
- Solar energy is a high-consideration purchase—buyers have many questions about ROI, installation, warranties, and financing
- Accordion uses Bootstrap 5.3.3 Collapse component—accessible by default with keyboard navigation
- Expandable structure: add as many question-answer pairs as needed without layout changes
- FAQ content helps SEO by capturing long-tail question queries (“how long does solar panel installation take”, etc.)
Contact System
- Contact Page (contact.html)—full contact form, office address block, phone, email, and embedded Google Map area
- Contact form fields: Name, Email, Phone, Subject, Message—covers the minimum viable lead capture for a solar enquiry
- Map embed placeholder is ready for a real Google Maps iframe—just paste your embed code
- Multiple contact info columns support companies with multiple offices or service regions
- Form inputs use Bootstrap 5 form components—fully styled and validation-ready
Navigation and UX
- Sticky header navigation—stays visible as users scroll, keeping calls to action always accessible
- Mobile hamburger menu with smooth slide-out panel and
aria-expandedtoggle for screen reader users - Dropdown menus for multi-level navigation—fully keyboard navigable
- Back-to-top button with smooth scroll and
aria-label="Back to top" - Smooth page scrolling throughout
- Skip-to-content link for keyboard users (ARIA pass, v1.2)
- Active state highlighting on current page navigation item
- Breadcrumb trail on inner pages for clear wayfinding
Typography and Design
- Primary font: Oswald—bold, condensed, authoritative for headings and display text
- Body font: Roboto—clean, highly legible for paragraphs and UI copy
- Primary accent colour: Red
#f64b3c—energetic, urgent, high-contrast, strong in both light and dark modes - 8 alternative colour themes available (color1.css through color8.css) for instant brand customisation
- Consistent 8px spacing grid and visual rhythm across all pages
- Section backgrounds alternate between white, light grey, and dark tones for visual separation without borders
- Icon library: Font Awesome—consistent, scalable, and widely recognised
- All images are demo-only placeholders—final purchase files contain no stock images
Performance and Loading
- CSS and JS files are logically separated and clearly named—easy to minify with any build tool
- Images in the live demo are optimised WebP/JPEG—ready for production sizing
- Google Fonts loaded via standard
<link>—can be swapped for a self-hosted font stack for GDPR compliance - Bootstrap 5.3.3 loaded from CDN by default—replace with a local copy for offline or intranet deployments
- No jQuery dependency—pure vanilla JS and Bootstrap 5 native JS throughout
- Minimal third-party dependencies reduce attack surface and long-term maintenance overhead
- Lazy-loading attributes (
loading="lazy") on below-the-fold images for faster initial paint
Cross-Browser and Device Compatibility
- Google Chrome (latest)
- Mozilla Firefox (latest)
- Apple Safari (latest, macOS and iOS)
- Microsoft Edge (latest)
- Fully responsive across all Bootstrap 5.3.3 breakpoints: xs, sm, md, lg, xl, xxl
- Tested on desktop, laptop, tablet (portrait and landscape), and mobile (portrait and landscape)
- Touch-friendly tap targets and swipe-enabled sliders on mobile
- Retina/HiDPI display ready—vector icons and scalable SVG elements throughout
Pages Included
- Home 1 (index.html)
- Home 2 (index2.html)
- Home 3 (index3.html)
- About (about.html)
- Services (services.html)
- Service Details (services-details.html)
- Team (team.html)
- Team Details (team-details.html)
- Portfolio Grid (project.html)
- Portfolio Masonry (portfolio-masonary.html)
- Portfolio Slider (portfolio-slider.html)
- Portfolio Details (portfolio-details.html)
- Why Choose Us (why-choose-us.html)
- FAQ (faq.html)
- Blog Standard (blog-standard.html)
- Blog Grid (blog-grid.html)
- Blog Details (blog-details.html)
- Contact (contact.html)
Credits and Sources
- Bootstrap 5.3.3—getbootstrap.com (MIT License)
- Font Awesome—fontawesome.com (Free tier, CC BY 4.0 icons)
- Google Fonts: Oswald—fonts.google.com/specimen/Oswald (Open Font License)
- Google Fonts: Roboto—fonts.google.com/specimen/Roboto (Open Font License)
- Demo images: Freepik—freepik.com
- Demo images: Unsplash—unsplash.com
- Note: All images are used for preview/demo purposes only and are NOT included in the final purchase files.
Changelog
- See version history below.
v1.2 03/10/2026 - ARIA 1.2 accessibility pass across all 18 pages - Added skip-to-content link on all pages - Added <main> landmark element on all pages - Focus-visible 3px solid outline on all interactive elements - Social icon aria-labels auto-injected via JS (no manual maintenance needed) - Slider/carousel: added role="button", aria-label, Enter/Space keyboard activation - Mobile nav toggle: added aria-expanded attribute, correctly toggled on open/close - Back-to-top button: added aria-label="Back to top" v1.1 02/27/2026 - Bootstrap upgraded from 5.0.2 to 5.3.3 - Popper.js upgraded to 2.11.8 - Updated all data-toggle attributes to Bootstrap 5 API (data-bs-toggle) - Added bootstrap-compat.css shim for any legacy attribute references - Added 8-colour theme switcher: color1.css through color8.css using CSS custom properties - Added full Dark Mode toggle: sun/moon icon, body.mht-dark class, localStorage persistent
