Resonate - 音乐工作室制作 HTML 模板

# 项目简介 Resonate 是一款面向音乐工作室/录音棚租赁服务的静态 HTML 模板，采用深色主题设计，支持全响应式布局。模板包含首页、关于、团队、服务、录音棚展示、博客、FAQ、预约、联系等多个页面，适合快速搭建音乐工作室官网。 ## 技术栈 - HTML5 + CSS3 + JavaScript（原生 + jQuery） - Bootstrap 5.3（布局与栅格系统） - Font Awesome 6（图标） - Swiper（轮播组件） - AOS（滚动动画） - Animate.css（CSS 动画） ## 项目结构 ``` 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/ ← 脚本文件 ``` ## 核心文件说明 - `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` — 联系页面，含表单与地图占位 ## 快速开始 1. 进入 `HTML_TEMPLATE` 目录 2. 直接用浏览器打开 `index.html` 即可预览 3. 如需本地服务器运行，可使用： ```bash npx serve . # 或 python -m http.server 8080 ``` ## 使用建议 - 替换 `image/` 目录下的占位图为自己项目的真实素材 - 联系表单（`contact.html` / `appointment.html`）需接入后端或第三方服务（如 Formspree、EmailJS）才能实际收发数据 - 修改配色可编辑 `css/style.css` 中的 CSS 变量（`--primary`、`--accent-color` 等）