Tawba - 伊斯兰中心 HTML 模板 preview 1

Tawba - 伊斯兰中心 HTML 模板

bookmark

tawba 是一款面向伊斯兰文化中心（Islamic Center）的 HTML 模板，基于 Bootstrap 5 构建，提供首页、博客、活动、课程、慈善、商城、祈祷时间等完整页面，适合用于清真寺、伊斯兰教育机构或非营利组织的官方网站。

HTML

项目简介

tawba 是一款面向伊斯兰文化中心（Islamic Center）的 HTML 模板，基于 Bootstrap 5 构建，提供首页、博客、活动、课程、慈善、商城、祈祷时间等完整页面，适合用于清真寺、伊斯兰教育机构或非营利组织的官方网站。

技术栈

  • 框架: Bootstrap 5
  • 样式: SCSS + CSS（style.css）
  • 图标: Font Awesome 6 Pro
  • 字体: Google Fonts（Playfair Display + Inter）
  • 交互: jQuery
  • 其他: Swiper Slider、Magnific Popup、NiceSelect

项目结构

text
tawbahtml-10/
├── documentation/          # 模板使用文档
│   ├── index.html
│   ├── css/
│   └── images/
├── download-version/       # 生产版本
│   ├── index.html          # 首页入口
│   ├── home-*.html         # 3 种首页变体
│   ├── blog*.html          # 博客列表/详情
│   ├── event*.html         # 活动列表/详情
│   ├── courses-details.html
│   ├── charity*.html
│   ├── sermon*.html
│   ├── shop*.html          # 商城页面
│   ├── prayer-times.html
│   ├── contact.html
│   ├── mail.php            # 邮件处理
│   └── assets/
│       ├── css/style.css
│       ├── js/main.js
│       └── img/

核心文件说明

  • download-version/index.html — 入口首页（Al Noor Haven 风格）
  • assets/js/main.js — 主导脚本，含移动端菜单、滚动置顶、轮播、表单提交等 20+ 功能模块
  • assets/css/style.css — 主样式文件，采用 CSS 变量定义主题色（--theme-color: #374868）
  • mail.php — 联系表单后端邮件处理脚本
  • documentation/index.html — 完整模板使用文档（含 HTML/CSS/JS 结构说明）
  • home-*.html — 三套首页模板，可根据需求选择或组合使用

快速开始

纯静态项目，无需安装依赖：

  1. 直接在浏览器中打开 download-version/index.html 预览首页
  2. 各功能页面位于 download-version/ 根目录，按需复制修改
  3. 如需邮件表单功能，将项目部署至支持 PHP 的 Web 服务器

使用建议

模板提供了 30+ 页面，建议优先从 home-*.html 中选择适配的首页风格，再沿用相同的 Header/Footer 结构扩展其他页面。修改主题色只需调整 assets/css/style.css 中的 CSS 变量即可全局换肤。

help_outline

常见问题