Barsi - 建筑与室内设计 HTML 模板 preview 1

Barsi - 建筑与室内设计 HTML 模板

bookmark

Barsi 是一套面向建筑与室内设计公司的响应式 HTML 模板，提供首页、服务、作品集、团队、博客、招聘等多个完整页面。内置 GSAP 动画、Lenis 平滑滚动、Swiper 轮播等交互功能，适合快速搭建专业设计机构官网。

HTML

项目简介

Barsi 是一套面向建筑与室内设计公司的响应式 HTML 模板，提供首页、服务、作品集、团队、博客、招聘等多个完整页面。内置 GSAP 动画、Lenis 平滑滚动、Swiper 轮播等交互功能，适合快速搭建专业设计机构官网。

技术栈

  • Bootstrap 5 — 栅格布局与基础 UI 组件
  • jQuery — DOM 操作与插件初始化
  • GSAP — 页面动画与时间线特效
  • Lenis — 平滑滚动效果
  • Swiper — 轮播与滑动组件
  • Font Awesome — 图标库
  • SCSS — 样式预处理

项目结构

text
barsihtml-10/
├── Documentation/          # 官方文档入口
│   ├── index.html
│   └── assets/            # 文档用静态资源
├── barsi-html/            # 模板主体（用于部署）
│   ├── index.html         # 首页
│   ├── about.html         # 关于我们
│   ├── services*.html     # 服务页（多个变体）
│   ├── projects*.html     # 项目页（多个变体）
│   ├── team*.html         # 团队页（多个变体）
│   ├── blog*.html         # 博客页（多个变体）
│   ├── contact-us.html    # 联系页面
│   ├── price.html         # 定价页
│   ├── faqs.html          # FAQ 页
│   ├── career*.html       # 招聘相关页面
│   └── assets/
│       ├── css/main.css   # 主样式
│       ├── js/main.js     # 交互逻辑
│       └── img/           # 图片资源

核心文件说明

  • barsi-html/index.html — 主首页，集成 Banner、服务展示、项目轮播等模块
  • barsi-html/assets/js/main.js — 动画初始化、sticky 导航、offcanvas 菜单、轮播配置
  • barsi-html/assets/css/main.css — 全站样式，包含 50+ 章节定义（header、hero、services 等）
  • barsi-html/services*.html — 服务详情页，支持多布局切换
  • barsi-html/projects*.html — 作品集展示页，含详情页模板
  • Documentation/index.html — 官方文档，含自定义 Logo、Favicon、更换图片等配置说明

快速开始

  1. 直接在浏览器中打开 barsi-html/index.html 即可预览效果
  2. 如需本地服务器，可使用 VS Code Live Server 插件或运行：
    bash
    npx serve barsi-html

使用建议

模板中所有页面均为纯静态 HTML，可直接部署到任意 Web 服务器或静态托管平台。正式使用时需将示例 Logo、图片及联系信息替换为真实内容；如需后端表单处理，需自行对接后端服务（当前 contact.php 仅为占位文件）。

help_outline

常见问题