Okai - 创意组合代理模板 preview 1

Okai - 创意组合代理模板

bookmark

Okai 是一套面向创意 portfolio 与 agency 场景的静态 HTML 模板，提供 13 种首页布局、5 种 portfolio 展示方式以及完整的内页（About、Services、Blog、Pricing、Store 等）。深色主题配合亮橙强调色（#F35A38），适合展示视觉类作品。

HTML

项目简介

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/）

项目结构

text
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 源码未包含在此包中，若需深度定制样式可联系原作者获取。

help_outline

常见问题