Binoz - Creative Business Agency HTML Template

# 项目简介 Binoz 是一款创意商业机构 HTML 模板，提供完整的多页面网站解决方案，适合展示Agency服务、案例作品、团队介绍及博客内容。模板内置5种首页变体，涵盖Portfolio、Blog、Pricing、FAQ 等完整业务页面。 ## 技术栈 - Bootstrap 5.x（响应式布局框架） - Vanilla JavaScript（原生JS交互） - SCSS（样式源码） - Font Awesome 6 Pro（图标库） - Swiper / Slick（轮播组件） - Isotope（瀑布流布局） - Nice Select（下拉选择） - PureCounter（数字动画） - Wow.js（滚动动画） ## 项目结构 ``` binozhtml-10/ ├── binoz/ │ ├── index.html # 首页主文件 │ ├── index-2~5.html # 首页变体 │ ├── about.html, team.html # 关于/团队 │ ├── blog*.html # 博客相关页 │ ├── portfolio*.html # 作品集页 │ ├── service*.html # 服务详情页 │ ├── pricing.html # 价格页 │ ├── contact.html # 联系页 │ ├── error.html # 404错误页 │ └── assets/ │ ├── css/ # 编译后样式 │ ├── scss/ # SCSS源码 │ ├── js/ # JS脚本 │ ├── img/ # 图片资源 │ └── fonts/ # 图标字体 └── documentation/ └── index.html # 官方文档页 ``` ## 核心文件说明 - `binoz/index.html` — 首页主入口，完整展示Hero、Services、Portfolio等区块 - `binoz/assets/css/main.css` — 全局样式与主题变量定义（约1700行） - `binoz/assets/js/main.js` — 16个交互模块：预加载、滚动动画、平滑滚动、移动端菜单、灯箱、计数器等 - `binoz/assets/scss/main.scss` — SCSS样式源码，方便自定义主题 - `binoz/portfolio.html` — 作品集页，使用Isotope实现筛选过滤 - `binoz/contact.html` — 联系页面，含表单与地图区域 ## 快速开始 纯静态模板，无需构建： 1. 直接在浏览器打开 `binoz/index.html` 即可预览 2. 如需本地服务器（推荐），使用任意静态服务器工具： ```bash npx serve binoz ``` 3. 修改内容：编辑各 `.html` 文件中的文本、图片路径 4. 自定义样式：编辑 `assets/scss/main.scss`，重新编译为CSS ## 使用建议 - 该模板适合快速搭建企业官网或作品集站点，响应式布局已适配移动端 - `assets/mail.php` 提供邮件发送后端支持，需部署至PHP环境并配置收件地址 - 修改主题色时优先查看 `main.css` 顶部的 CSS 变量（`--tp-theme-primary` 等）