Okai - Creative Portfolio Agency Template

# 项目简介 Okai 是一套面向创意 portfolio 与 agency 场景的静态 HTML 模板，提供 13 种首页布局、5 种 portfolio 展示方式以及完整的内页（About、Services、Blog、Pricing、Store 等）。深色主题配合亮橙强调色（#F35A38），适合展示视觉类作品。 ## 技术栈 - Bootstrap Grid（仅用 grid 框架，不依赖完整 Bootstrap JS） - Font Awesome 6（图标） - Swiper（轮播 / 幻灯片） - Google Fonts — Poppins - 纯 CSS + 可编译 SCSS 变量（文档说明通过 VS Code Live Sass Compiler 输出到 css/） ## 项目结构 ``` okaihtml-10/ ├── okai/ # 模板主体 │ ├── index.html # 首页入口 │ ├── home-*.html # 13 种首页变体 │ ├── portfolio-*.html # Portfolio 布局 │ ├── project.html # 项目详情页 │ ├── about.html # 关于页 │ ├── services.html # 服务页 │ ├── blog.html # 博客页 │ ├── pricing.html # 定价页 │ ├── contact.html # 联系页 │ ├── store.html # 商店页 │ ├── css/ │ │ └── style.css # 主样式文件 │ ├── fonts/css/ # Font Awesome 字体 │ └── img/ # 示例图片 └── doc/ # 官方文档与示例资源 └── index.html ``` ## 核心文件说明 - `okai/index.html` — 模板首页入口文件 - `okai/home-*.html`（13 个） — 首页变体，可直接复制改名为 `index.html` 使用 - `okai/css/style.css` — 编译后的主样式，定义了颜色变量（深色背景 + 橙红强调色） - `okai/css/plugins/bootstrap-grid.css` — Bootstrap Grid 系统 - `okai/css/plugins/swiper.min.css` — Swiper 轮播组件样式 - `doc/index.html` — 模板官方文档，附带模板配置说明与 SCSS 变量参考 ## 快速开始 纯静态项目，无需安装依赖： 1. 直接在浏览器打开 `okai/index.html` 预览首页 2. 若需本地服务器（推荐，避免某些资源路径问题），可使用任意静态服务器，例如： ```bash npx serve okaihtml-10/okai # 或 python -m http.server 8080 -d okaihtml-10/okai ``` 修改颜色或字体时，可参考 `doc/index.html` 中的 SCSS 变量定义，使用 VS Code + Live Sass Compiler 将 `_variables.scss` 编译回 `css/style.css`。 ## 使用建议 模板提供 13 种首页差异较大（单页滚动、全屏幻灯片、视频背景等），建议先在浏览器逐一打开 `home-*.html` 确认哪种布局符合需求，再以此为基础定制内容。完整 SCSS 源码未包含在此包中，若需深度定制样式可联系原作者获取。