Peak Potential Chiropractic — 脊医诊所网站模板
一套现代响应式脊医诊所网站模板,由 Themedown 设计评审并手工构建。免费用于个人和商业项目。
快速开始
bash
git clone https://github.com/themedown-templates/heightschiro-redesign.git
cd heightschiro-redesign
# 直接用浏览器打开 index.html,或用本地服务器:
npx serve .
无需构建、无需 npm install,打开即用。
页面
| 页面 | 说明 |
|---|---|
| 首页 | 全宽 Hero + 服务概览 + 信任区域 + YouTube 视频 + 新患者须知 + 评价 |
| 关于 | 诊所故事 + 医生介绍 + 使命与价值观 |
| 服务 | 服务卡片(图标 + 治疗说明 + 适用症状) |
| 联系 | 分栏布局:联系表单 + 诊所地址 + Google 地图嵌入 |
技术栈
- HTML5 — 语义化、可访问性标记
- CSS3 — CSS 自定义属性、响应式网格,无预处理器
- Vanilla JavaScript — 移动端导航、平滑滚动、表单验证
- Font Awesome 6 — 本地 webfont 图标库
- Inter — Google Fonts,字重 400–800
特性
- 全响应式 — 桌面 1440px 到手机 390px,1320px 居中容器
- 固定导航栏 + 滚动感知行为
- 海军蓝 (#0a2746) + 青色 (#11b7b2) 专业配色
- Hero 图片延伸至视口边缘,内容保持在网格内
- YouTube 视频区域(隐私增强嵌入 + 延迟加载)
- 联系表单客户端验证 + 同意复选框
- 锚点平滑滚动导航
- 零构建工具、零依赖 — 静态文件夹即可运行
设计规范
完整设计规范见 design-qa.md — 包含色彩体系、字体层级、组件行为、布局原则及响应式断点。
开源协议
MIT — 免费用于个人和商业项目。
