Donacion - 筹款和慈善 HTML5 模板 preview 1

Donacion - 筹款和慈善 HTML5 模板

bookmark

Donacion 是一款面向慈善机构的静态 HTML 网站模板，提供筹款、活动、志愿者招募等完整页面。模板包含 3 种首页风格及博客、活动、捐赠等十余个页面，适合快速搭建公益组织官网。完全基于 HTML/CSS/JS，无需构建工具即可部署。

HTML

项目简介

Donacion 是一款面向慈善机构的静态 HTML 网站模板，提供筹款、活动、志愿者招募等完整页面。模板包含 3 种首页风格及博客、活动、捐赠等十余个页面，适合快速搭建公益组织官网。完全基于 HTML/CSS/JS，无需构建工具即可部署。

技术栈

  • HTML5 / CSS3（单文件样式）
  • Bootstrap 5（布局与组件）
  • jQuery（交互逻辑）
  • Swiper（轮播图）
  • MeanMenu（移动端导航）

项目结构

text
donacionhtml-10/
├── documentation/          # 官方文档
│   └── index.html
└── donacion/              # 模板主体
    ├── index.html          # 首页（3 种风格：index, index-2, index-3）
    ├── about.html          # 关于我们
    ├── blog.html           # 新闻列表
    ├── blog-details.html   # 新闻详情
    ├── cause.html          # 公益项目
    ├── cause-details.html  # 项目详情
    ├── event.html          # 活动列表
    ├── event-details.html  # 活动详情
    ├── volunteer.html      # 志愿者
    ├── volunteer-details.html
    ├── donation.html       # 在线捐赠
    ├── contact.html        # 联系方式
    ├── mission.html        # 使命
    ├── faq.html            # 常见问题
    └── assets/
        ├── css/main.css    # 全部样式
        ├── js/main.js      # 交互脚本
        └── mail.php        # 表单后端

核心文件说明

  • donacion/index.html — 主首页入口文件
  • donacion/assets/css/main.css — 所有样式（含 29 个区块注释）
  • donacion/assets/js/main.js — 轮播、菜单、表单交互动画
  • donacion/assets/mail.php — 联系表单后端处理
  • donacion/contact.html — 联系页面（表单在此）
  • donacion/donation.html — 捐赠入口页面

快速开始

  1. 直接在浏览器打开 donacion/index.html 预览；
  2. 或将 donacion 文件夹上传至服务器（如 public_html）后通过域名访问；
  3. 修改 main.css 中的颜色变量即可更换主题色。

使用建议

模板为纯静态，表单提交依赖 mail.php，部署时需确保服务器支持 PHP。移动端菜单使用 MeanMenu，响应式断点为 992px，修改样式时优先覆盖 main.css 末尾的自定义区块。

help_outline

常见问题