Royalheart - Nonprofit Fundraising Charity HTML Template

# 项目简介 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（图片画廊） ## 项目结构 ``` 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` 文件夹上传即可。由于模板内置了完整的页面结构，实际使用中建议根据具体业务场景删除不需要的内页文件，以保持项目目录整洁。