项目简介link

Metech（代码中标记为 Merga）是一款多用途创意机构与个人作品集 HTML 模板，适合科技公司、咨询公司或自由职业者搭建官网。模板包含首页变体、服务展示、作品集、博客、团队、定价等多类型页面，采用深色主题并内置 GSAP 动画与滚动交互效果。

技术栈link

• HTML5 + CSS3（原生 CSS + SCSS 源文件）
• Bootstrap 5（网格布局与基础组件）
• jQuery（DOM 操作与插件生态）
• GSAP + ScrollTrigger（高级动画与视差滚动）
• Swiper（轮播图）
• Magnific Popup（图片/视频灯箱）
• Font Awesome 6（图标）
• Google Fonts（Inter Tight、Poppins、Spline Sans）

项目结构link

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 源码

核心文件说明link

• metech/index.html — 首页入口，包含顶部工具栏、导航、幻灯片区域
• metech/css/main.css — 主样式表，涵盖排版、布局、动画等全部视觉规则
• metech/js/main.js — 交互逻辑，包括粘性导航、移动端菜单、计数器、灯箱、轮播等
• metech/scss/ — SCSS 源码目录，方便二次开发和主题定制
• metech/css/metech-icon.css — 自定义图标字体样式表
• documentation/index.html — 官方文档，包含文件结构说明与第三方依赖引用

快速开始link

本项目为纯静态模板，无需构建步骤：

1. 直接在浏览器打开 metech/index.html 即可预览
2. 或使用任意本地服务器（如 VS Code Live Server、http-server）运行
3. 修改页面内容请直接编辑 HTML 文件，修改样式可编辑 css/main.css 或 scss/ 目录

使用建议link

• 模板已内置 GSAP 动画与滚动触发动画，若需调整动画效果可查看 js/main.js 中 init() 方法及 animation.js
• SCSS 目录提供了完整的源码变量定义，建议通过修改 SCSS 变量来统一调整配色与间距，再重新编译为 CSS
• 移动端菜单、灯箱、轮播等交互均依赖 jQuery，确保页面底部正确引入 jQuery 库后再加载业务脚本