Donaty - 慈善登陆页面 HTML 模板 preview 1

Donaty - 慈善登陆页面 HTML 模板

bookmark

Donaty 是一款由 Laralink 开发的慈善公益网站着陆页模板,采用响应式全屏布局,支持捐款表单、视频弹窗、图片画廊等慈善机构常用功能。适用于公益组织、众筹项目、志愿者招募等场景。

HTML

项目简介

Donaty 是一款由 Laralink 开发的慈善公益网站着陆页模板,采用响应式全屏布局,支持捐款表单、视频弹窗、图片画廊等慈善机构常用功能。适用于公益组织、众筹项目、志愿者招募等场景。

技术栈

  • HTML5 / CSS3(静态页面)
  • Bootstrap 5.x
  • jQuery
  • Slick Slider(轮播)
  • WOW.js(动画效果)
  • Light Gallery(图片画廊)

项目结构

text
donatyhtml-10/
└── Donaty - Template/
    ├── index.html              # 首页
    ├── blog.html               # 博客列表
    ├── blog-with-sidebar.html  # 带侧边栏博客
    ├── blog-details.html       # 博客详情
    └── assets/
        ├── css/
        │   ├── style.css        # 主样式
        │   ├── bootstrap.min.css
        │   ├── animate.css
        │   └── slick.min.css
        ├── js/
        │   ├── main.js          # 交互逻辑
        │   └── jquery.min.js
        ├── img/                 # 示例图片
        └── fonts/               # 图标字体

核心文件说明

  • Donaty - Template/index.html — 首页入口,包含 Hero 轮播、捐款弹窗、团队展示等完整页面结构
  • assets/js/main.js — 全部交互功能(预加载器、移动端菜单、粘性导航、计数器、滑块等 17 项模块)
  • assets/css/style.css — 主样式表,定义主题色、排版、间距及所有组件样式
  • Donaty - Documentation/index.html — 官方文档,包含文件结构说明与定制指南

快速开始

直接用浏览器打开 Donaty - Template/index.html 即可预览。如需本地服务器:

bash
# 使用 Python
python -m http.server 8000

# 使用 Node.js (npx)
npx serve

使用建议

  • 修改首页中所有文字、图片路径(替换 assets/img/ 下的占位图)后即可使用
  • 捐款表单为前端演示,如需实际收款功能需对接支付接口
  • 模板已内置 SASS 文件,可通过修改 SCSS 变量快速更换主题色
help_outline

常见问题