Royalheart - 非营利筹款慈善机构 HTML 模板 preview 1

Royalheart - 非营利筹款慈善机构 HTML 模板

bookmark

Royalheart 是一款面向慈善机构、非营利组织和公益募捐网站的 HTML 模板，基于 Bootstrap 5 构建，包含 4 种首页布局和多种内页模板，支持响应式设计、进度条动画和倒计时功能，适合快速搭建公益项目网站。

HTMLcharitablecharitycrowdfundingdonationsfoundationfundraisinghumanitarian

项目简介

Royalheart 是一款面向慈善机构、非营利组织和公益募捐网站的 HTML 模板，基于 Bootstrap 5 构建，包含 4 种首页布局和多种内页模板，支持响应式设计、进度条动画和倒计时功能，适合快速搭建公益项目网站。

技术栈

  • Bootstrap 5.3.3
  • jQuery 3.7.1
  • Slick Slider（轮播）
  • Font Awesome 4.7.0 / 5.15.4
  • Google Fonts（Playfair Display、Poppins）
  • LightGallery（图片画廊）

项目结构

text
royalhearthtml-10/03_royalheart_mainfile/
├── mainfile/
│   ├── index.html              # 首页（第 1 套）
│   ├── index-2~5.html          # 其他首页变体
│   ├── about.html              # 关于我们
│   ├── cause-list.html         # 公益项目列表
│   ├── cause-detail.html       # 项目详情
│   ├── event-list.html         # 活动列表
│   ├── event-detail.html       # 活动详情
│   ├── blog-list.html          # 博客列表
│   ├── blog-single.html        # 博客正文
│   ├── contact.html            # 联系方式
│   ├── donation-form.html     # 捐款表单
│   ├── testimonial.html        # 用户评价
│   ├── volunteer.html          # 志愿者招募
│   ├── gallery.html           # 相册
│   ├── faq.html                # 常见问题
│   ├── css/
│   │   ├── styles.css          # 主样式表
│   │   ├── bootstrap.min.css   # Bootstrap 样式
│   │   ├── plugin.css          # 插件样式
│   │   └── default.css         # 默认样式
│   ├── js/
│   │   └── main.js             # 交互逻辑与轮播配置
│   └── images/                 # 图片资源
└── documentation/
    └── index.html              # 官方文档入口

核心文件说明

  • mainfile/index.html — 主首页，包含 Banner 轮播、进度条统计和捐款入口
  • mainfile/css/styles.css — 全部自定义样式规则
  • mainfile/js/main.js — 导航菜单、滚动监听、Slick 轮播等交互逻辑
  • mainfile/donation-form.html — 捐款表单页面
  • mainfile/cause-list.html — 公益项目列表页
  • mainfile/gallery.html — 图片画廊页面

快速开始

  1. 进入 mainfile 目录
  2. 双击 index.html 用浏览器直接打开即可预览
  3. 修改 css/styles.css 可调整主题配色与字体
  4. 替换 images/ 目录下的图片即可更换品牌素材

使用建议

该模板为纯静态站点，无需构建工具即可使用；若需部署到服务器，直接将整个 mainfile 文件夹上传即可。由于模板内置了完整的页面结构，实际使用中建议根据具体业务场景删除不需要的内页文件，以保持项目目录整洁。

help_outline

常见问题