Binoz - 创意商业机构 HTML 模板 preview 1

Binoz - 创意商业机构 HTML 模板

bookmark

Binoz 是一款创意商业机构 HTML 模板，提供完整的多页面网站解决方案，适合展示Agency服务、案例作品、团队介绍及博客内容。模板内置5种首页变体，涵盖Portfolio、Blog、Pricing、FAQ 等完整业务页面。

HTML

项目简介

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（滚动动画）

项目结构

text
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 等）
help_outline

常见问题