Project Introduction
Ciri AI is an online AI image generator showcase website template built with pure static HTML, available in two versions: MultiPage and OnePage. The template includes a complete homepage display, feature introduction, pricing, blog, contact, and other pages, making it suitable for quickly building marketing pages or landing pages for AI image generation tools.
Tech Stack
- HTML5 + Vanilla JavaScript (no build tools, pure static)
- Bootstrap 5 (responsive layout)
- Slick Slider (gallery carousel)
- RemixIcon (icon library)
- CSS3 (custom styles and media queries)
Project Structure
ciriaihtml-10/Main File/
├── Documentation/
│ ├── MultiPage-CiriAI/
│ │ ├── index.html
│ │ ├── header.html
│ │ ├── component.html
│ │ ├── features.html
│ │ ├── slider-type.html
│ │ ├── page-element.html
│ │ └── credit.html
│ └── OnePage-CiriAI/
│ └── (component documentation pages)
└── Online AI Image Generator HTML Template - Ciri AI/
├── MultiPage-CiriAI/
│ ├── index.html
│ ├── about.html, blog.html, contact.html
│ ├── features.html, pricing.html, faq.html
│ └── errorPage.html, comingSoon.html
└── OnePage-CiriAI/
└── index.html (single-page full-site)
Core File Description
MultiPage-CiriAI/index.html— Multi-page homepage, includes navigation, input generation area, gallery displayOnePage-CiriAI/index.html— Single-page version, all content aggregated in one long pageassets/css/style.css— Main stylesheet, defines overall visual styleassets/css/slick.css— Carousel style dependencyassets/css/bootstrap.min.css— Bootstrap base layout framework
Quick Start
Pure static project, no dependencies to install:
- Open
Online AI Image Generator HTML Template - Ciri AI/MultiPage-CiriAI/index.htmlorOnePage-CiriAI/index.htmldirectly in your browser - Or run using a local server (e.g., VS Code Live Server extension)
Usage Suggestions
The template comes with a complete page structure. It is recommended to replace the logo, copy, and image assets according to your actual AI product. The input fields and generate buttons are currently frontend-only displays; a backend integration with a real image generation API is required to make them functional.
