Complete Roof Redesign — 屋顶公司网站重设计
工业风格、信任导向的屋顶承包商静态网站重设计,由 Themedown 设计并手工构建。
快速开始
bash
git clone <repo-url>
cd complete-roof-redesign
# 直接用浏览器打开 index.html,或用本地服务器:
python -m http.server 8000 --directory .
# 或
npx serve .
无需构建、无需 npm install,打开即用。
页面
| 页面 | 说明 |
|---|---|
| 首页 | 暗色 Hero + 认证信任条 + 服务卡片网格 + 施工流程 + 评价 + CTA |
| 关于 | 时间线 + 资质认证 + 总监简介 |
| 服务 | 详细服务行(交替图文布局 + 材料/地区标签) |
| 联系 | 联系信息 + 报价表单 |
技术栈
- HTML5 — 语义化标签,ARIA 属性
- CSS3 — 自定义属性、Grid、clamp() 流体排版
- JavaScript — IIFE 模式,移动端菜单
- Google Fonts — Barlow Condensed、Inter、IBM Plex Mono
特性
- 全响应式 — 900px / 560px 两个断点
- 暗色 Hero + 材料标签服务卡片 + 编号施工流程
- 波纹钢板剖面分割线(repeating-linear-gradient)—— 行业标志性元素
- 认证信任条(LBP、RANZ、HazardCo)
- 交替图文服务行
- 全站免费报价 CTA
- 无障碍(focus-visible、aria-expanded)
- prefers-reduced-motion 支持
- 零构建工具、零框架依赖
设计规范
完整设计规范见 design.md — 包含色彩体系、字体层级、布局理念、设计自审(避免通用 AI 设计默认值)。
脚本
script.js— 移动端菜单切换(IIFE 模式)
开源协议
MIT — 免费用于个人和商业项目。
