Metech - Multipurpose Creative Agency and Digital Marketing HTML Template

# 项目简介 Metech（代码中标记为 Merga）是一款多用途创意机构与个人作品集 HTML 模板，适合科技公司、咨询公司或自由职业者搭建官网。模板包含首页变体、服务展示、作品集、博客、团队、定价等多类型页面，采用深色主题并内置 GSAP 动画与滚动交互效果。 ## 技术栈 - HTML5 + CSS3（原生 CSS + SCSS 源文件） - Bootstrap 5（网格布局与基础组件） - jQuery（DOM 操作与插件生态） - GSAP + ScrollTrigger（高级动画与视差滚动） - Swiper（轮播图） - Magnific Popup（图片/视频灯箱） - Font Awesome 6（图标） - Google Fonts（Inter Tight、Poppins、Spline Sans） ## 项目结构 ``` metechhtml-10/ └── package/ ├── documentation/ # 模板使用文档 │ ├── index.html │ └── css/ └── metech/ # 模板主体 ├── index.html # 首页 1 ├── index-2.html # 首页 2 ├── about.html ├── services.html ├── service-details.html ├── projects.html ├── project-details.html ├── blog.html ├── blog-details.html ├── team.html ├── pricing.html ├── faq.html ├── contact.html ├── css/ │ ├── main.css # 核心样式 │ └── metech-icon.css # 自定义图标字体 ├── fonts/ # 图标字体文件 ├── img/ # 图片资源 ├── js/ │ ├── main.js # 交互逻辑 │ └── animation.js # GSAP 动画配置 └── scss/ # SCSS 源码 ``` ## 核心文件说明 - `metech/index.html` — 首页入口，包含顶部工具栏、导航、幻灯片区域 - `metech/css/main.css` — 主样式表，涵盖排版、布局、动画等全部视觉规则 - `metech/js/main.js` — 交互逻辑，包括粘性导航、移动端菜单、计数器、灯箱、轮播等 - `metech/scss/` — SCSS 源码目录，方便二次开发和主题定制 - `metech/css/metech-icon.css` — 自定义图标字体样式表 - `documentation/index.html` — 官方文档，包含文件结构说明与第三方依赖引用 ## 快速开始 本项目为纯静态模板，无需构建步骤： 1. 直接在浏览器打开 `metech/index.html` 即可预览 2. 或使用任意本地服务器（如 VS Code Live Server、http-server）运行 3. 修改页面内容请直接编辑 HTML 文件，修改样式可编辑 `css/main.css` 或 `scss/` 目录 ## 使用建议 - 模板已内置 GSAP 动画与滚动触发动画，若需调整动画效果可查看 `js/main.js` 中 `init()` 方法及 `animation.js` - SCSS 目录提供了完整的源码变量定义，建议通过修改 SCSS 变量来统一调整配色与间距，再重新编译为 CSS - 移动端菜单、灯箱、轮播等交互均依赖 jQuery，确保页面底部正确引入 jQuery 库后再加载业务脚本