Project Overviewlink

Okai is a set of static HTML templates designed for creative portfolio and agency use cases, offering 13 homepage layouts, 5 portfolio display styles, and complete inner pages (About, Services, Blog, Pricing, Store, etc.). The dark theme paired with a bright orange accent color (#F35A38) makes it ideal for showcasing visual work.

Tech Stacklink

• Bootstrap Grid (grid framework only, no full Bootstrap JS dependency)
• Font Awesome 6 (icons)
• Swiper (carousel/slideshow)
• Google Fonts — Poppins
• Pure CSS + compilable SCSS variables (documentation explains output to css/ via VS Code Live Sass Compiler)

Project Structurelink

okaihtml-10/
├── okai/                     # Template main directory
│   ├── index.html            # Homepage entry
│   ├── home-*.html           # 13 homepage variants
│   ├── portfolio-*.html      # Portfolio layouts
│   ├── project.html          # Project detail page
│   ├── about.html            # About page
│   ├── services.html         # Services page
│   ├── blog.html             # Blog page
│   ├── pricing.html          # Pricing page
│   ├── contact.html          # Contact page
│   ├── store.html            # Store page
│   ├── css/
│   │   └── style.css         # Main stylesheet
│   ├── fonts/css/            # Font Awesome fonts
│   └── img/                  # Sample images
└── doc/                      # Official documentation and sample resources
    └── index.html

Key File Descriptionslink

• okai/index.html — Template homepage entry file
• okai/home-*.html (13 files) — Homepage variants, can be copied and renamed to index.html for use
• okai/css/style.css — Compiled main stylesheet, defines color variables (dark background + orange-red accent)
• okai/css/plugins/bootstrap-grid.css — Bootstrap Grid system
• okai/css/plugins/swiper.min.css — Swiper carousel component styles
• doc/index.html — Official template documentation, includes template configuration notes and SCSS variable reference

Quick Startlink

Pure static project, no dependencies to install:

1. Open okai/index.html directly in a browser to preview the homepage
2. If a local server is needed (recommended to avoid certain resource path issues), use any static server, for example:

npx serve okaihtml-10/okai
# or
python -m http.server 8080 -d okaihtml-10/okai

To modify colors or fonts, refer to the SCSS variable definitions in doc/index.html, and use VS Code + Live Sass Compiler to compile _variables.scss back to css/style.css.

Usage Suggestionslink

The 13 homepage variants differ significantly (single-page scroll, fullscreen slideshow, video background, etc.). It's recommended to open each home-*.html in a browser to determine which layout best suits your needs, then customize the content accordingly. The complete SCSS source code is not included in this package; contact the original author if deep style customization is required.