Radianz - 太阳能和绿色可再生能源 HTML 模板 preview 1

Radianz - 太阳能和绿色可再生能源 HTML 模板

bookmark

Radianz 是一套面向太阳能与绿色能源企业的静态 HTML 网站模板，包含首页、关于页、服务、项目、定价、团队、招聘、博客等完整页面。通过 Swiper 实现轮播、Flatpickr 处理日期选择、SlimSelect 美化下拉框，适合快速搭建清洁能源公司官网。

HTMLbusinessclean energyclean techeco businesseco friendlyeco technologygreen company

项目简介

Radianz 是一套面向太阳能与绿色能源企业的静态 HTML 网站模板，包含首页、关于页、服务、项目、定价、团队、招聘、博客等完整页面。通过 Swiper 实现轮播、Flatpickr 处理日期选择、SlimSelect 美化下拉框，适合快速搭建清洁能源公司官网。

技术栈

  • Bootstrap 5（导航、表单、栅格）
  • Swiper.js（合作伙伴、评价、项目轮播）
  • Flatpickr（安装预约日期时间选择）
  • SlimSelect（下拉框美化）
  • IntersectionObserver（滚动动画、计数器触发）
  • 静态 HTML/CSS/JS（无构建工具）

项目结构

text
radianzhtml-10/
├── HTML_Template/
│   ├── index.html              # 首页
│   ├── about.html
│   ├── services.html / services-detail.html
│   ├── project.html / project-detail.html
│   ├── installation.html       # 安装预约表单
│   ├── pricing.html
│   ├── team.html / testimonials.html
│   ├── contact.html / faqs.html
│   ├── career.html
│   ├── blog-post.html / single-post.html
│   ├── 404-page.html
│   ├── css/
│   │   ├── style.css           # 全局样式（CSS变量、按钮、响应式）
│   │   └── swiper.css          # Swiper自定义样式
│   ├── img/                    # 品牌图、案例图、背景图
│   ├── font/                   # WorkSans、Urbanist 字体
│   ├── lib/css/                # Bootstrap、Flatpickr、SlimSelect
│   └── lib/js/                 # Bootstrap、Swiper、Flatpickr、SlimSelect
└── Documentation/

核心文件说明

  • HTML_Template/index.html — 首页入口，含 Hero、计数器、合作伙伴、评价等区块
  • HTML_Template/css/style.css — 主样式表，定义颜色变量（--color-main 为主色 #215343）
  • HTML_Template/css/swiper.css — Swiper 分页器与按钮样式覆盖
  • HTML_Template/js/index.js — 轮播初始化、计数器、FAQ 折叠、表单提交弹窗、视频弹窗
  • HTML_Template/installation.html — 安装预约表单页，依赖 Flatpickr 和 SlimSelect

快速开始

直接在浏览器打开 HTML_Template/index.html，或使用任意本地服务器（如 VS Code Live Server）运行。

使用建议

模板默认使用 #215343 深绿主色与 #efe51c 黄色强调色，风格偏向工业/商业能源场景。如需替换 Logo、品牌色或图片，直接在 img/ 目录替换同名文件即可，无需修改代码路径。

help_outline

常见问题