项目简介link

Resonate 是一款面向音乐工作室/录音棚租赁服务的静态 HTML 模板，采用深色主题设计，支持全响应式布局。模板包含首页、关于、团队、服务、录音棚展示、博客、FAQ、预约、联系等多个页面，适合快速搭建音乐工作室官网。

技术栈link

• HTML5 + CSS3 + JavaScript（原生 + jQuery）
• Bootstrap 5.3（布局与栅格系统）
• Font Awesome 6（图标）
• Swiper（轮播组件）
• AOS（滚动动画）
• Animate.css（CSS 动画）

项目结构link

resonatehtml-10/
└── Resonate - Music Studio Production HTML/
    ├── DOCUMENTATION/
    │   └── index.html          ← 在线文档入口
    └── HTML_TEMPLATE/
        ├── index.html          ← 首页
        ├── about.html          ← 关于我们
        ├── contact.html        ← 联系页面
        ├── services.html       ← 服务列表
        ├── studio.html         ← 录音棚展示
        ├── blog.html           ← 博客列表
        ├── team.html           ← 团队成员
        ├── faq.html            ← 常见问题
        ├── appointment.html    ← 预约表单
        ├── 404.html            ← 错误页
        ├── css/
        │   └── style.css       ← 主样式文件
        ├── font/               ← 字体文件
        ├── image/              ← 图片资源
        └── js/                 ← 脚本文件

核心文件说明link

• HTML_TEMPLATE/index.html — 首页，含 Banner、服务展示、录音棚预览等模块
• HTML_TEMPLATE/css/style.css — 主样式表，含 CSS 变量、响应式断点、动画定义
• HTML_TEMPLATE/js/video_embedded.js — 视频弹窗点击播放逻辑
• HTML_TEMPLATE/js/masonry.js — 瀑布流布局初始化（Isotope 插件）
• DOCUMENTATION/index.html — 模板官方文档（包含 HTML 结构、定制说明）
• HTML_TEMPLATE/contact.html — 联系页面，含表单与地图占位

快速开始link

1. 进入 HTML_TEMPLATE 目录
2. 直接用浏览器打开 index.html 即可预览
3. 如需本地服务器运行，可使用：
   bashcontent_copyCopy

   npx serve .
   # 或
   python -m http.server 8080
   

使用建议link

• 替换 image/ 目录下的占位图为自己项目的真实素材
• 联系表单（contact.html / appointment.html）需接入后端或第三方服务（如 Formspree、EmailJS）才能实际收发数据
• 修改配色可编辑 css/style.css 中的 CSS 变量（--primary、--accent-color 等）