Radianz - Documentation

Introduction

Thank you for purchasing Radianz! This documentation will help you understand the template's structure and guide you through the customization process. If you have any questions that are beyond the scope of this documentation, please feel free to email us at zaderonstudio@gmail.com.

Template Overview

Radianz is a modern, responsive HTML template designed for Solar & Green Renewable Energy websites. Built with Bootstrap 5.3, it features a clean and professional design with multiple page layouts and components. The template is fully responsive and works perfectly on all devices and browsers.

Key Features

Built with Bootstrap 5.3
Fully Responsive Design
Modern and Clean UI
Multiple Page Layouts
Cross-browser Compatibility
Font Awesome Icons
Google Fonts Integration
Fast Loading Speed
Easy to Customize

Installation

Requirements

A modern web browser (Chrome, Firefox, Safari, Edge)
A code editor (VS Code recommended)
Basic knowledge of HTML, CSS, and JavaScript

Installation Steps

Download the template package from ThemeForest
Extract the downloaded zip file
Open the extracted folder
Navigate to the HTML_Template folder
Start editing the files using your preferred code editor

File Structure

The template package contains the following files and folders:


HTML_Template/
├── css/
│   ├── style.css
│   └── swiper.css
├── js/
│   └── index.js
├── lib/
│   ├── css/
│   │   ├── bootstrap.min.css
│   │   └── fontawesome.css
│   │   ├── flatpickr.min.css
│   │   └── swiper-bundle.min.css
│   │   └── slimselect.css
│   └── js/
│       ├── bootstrap.bundle.min.js
│       └── swiper-bundle.min.js
│       └── flatpickr.min.js
│       └── countUp.js
│       └── slimselect.js
├── img/
│   └── (all template images)
└── *.html (all HTML files)

HTML Structure

The template follows a consistent HTML structure across all pages. Here's the basic structure:


<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Meta tags, title, and CSS links -->
</head>
<body>
  <!-- Header/Navigation -->
  <!-- Main Content -->
  <!-- Footer -->
  <!-- JavaScript files -->
</body>
</html>

CSS Customization

The template uses CSS variables for easy customization. You can find these in the style.css file:


              :root {
                --text-color: #5c5c5b;
                --color-main: #215343;
                --color-primary: #1e3029;
                --color-secondary: #cecece;
                --color-accent: #efe51c;
                --color-bg-1: #fcf8ea;
                --color-bg-2: #ffffff;
                --color-border: #888888;
                --font-1: "worksans";
                --font-2: "urbanist";
              }
              
              html,
              body {
                font-size: 16px;
                width: 100%;
                overflow-x: hidden;
                margin: 0;
                padding: 0;
              }

Customizing Colors

To change the color scheme, modify the CSS variables in the :root selector. This will automatically update all elements using these variables.

Customizing Fonts

The template uses Google Fonts. To change the font, update the --font-1 variable and make sure to include the new font in the HTML head section.

JavaScript

The template includes several JavaScript features:

Bootstrap 5.3 components
Swiper slider for tour packages and testimonials
Custom animations
Interactive maps integration
Tour booking functionality

Counters Configuration


              const initCounters = (sectionId, counters) => {
                if (!counters.length) return;
              
                const startCounters = () => {
                  counters.forEach(({ id, endVal, suffix }) => {
                    const counterAnim = new countUp.CountUp(id, endVal, {
                      suffix,
                      duration: 3,
                    });
                    if (!counterAnim.error) {
                      counterAnim.start();
                    } else {
                      console.error(counterAnim.error);
                    }
                  });
                };
              
                const section = document.getElementById(sectionId);
                if (section) {
                  const observer = new IntersectionObserver((entries, obs) => {
                    if (entries[0].isIntersecting) {
                      startCounters();
                      obs.unobserve(section);
                    }
                  }, { threshold: 0.5 });
              
                  observer.observe(section);
                }
              };
              
              
              initCounters("aboutCounters", [
                { id: "successProjects", endVal: 500, suffix: " +" },
                { id: "winAwards", endVal: 100, suffix: " +" },
                { id: "solarEfficiency", endVal: 99, suffix: " %" },
                { id: "yearExperience", endVal: 15, suffix: " +" },
              ]);

Browser Compatibility

The template has been tested and is compatible with the following browsers:

Google Chrome (latest)
Mozilla Firefox (latest)
Safari (latest)
Microsoft Edge (latest)
Opera (latest)

Support

If you need any help with the template, please contact us at zaderonstudio@gmail.com. We provide support for:

Template installation
Customization issues
Bug fixes
General questions

Note: We do not provide support for custom development or third-party integrations.

Changelog

Version 1.0.0 - 22 September 2025

Initial release
Added all basic pages
Implemented responsive design
Added documentation

Credits

The template uses the following third-party resources:

Bootstrap 5.3 - Front-end framework
Swiper - Touch slider
Font Awesome - Icons
Google Fonts - Web fonts
Envato Elements - Images
Google Maps - Maps integration