BlockZen Documentation v1.0.0

Welcome to the official documentation for BlockZen — a modern, Web3-ready HTML template designed for DeFi platforms, crypto projects, and blockchain applications. This guide covers installation, folder structure, customization, and usage of all included components.

Requirements

• A code editor (VS Code recommended)
• A local server — XAMPP, WAMP, or VS Code Live Server
• Modern browser (Chrome, Firefox, Edge)

Installation

Option 1 — Local Server (XAMPP)

1. Place the blockzen/ folder inside htdocs/.
2. Start Apache from the XAMPP Control Panel.
3. Open http://localhost/blockzen/main/home-1.html in your browser.

Option 2 — VS Code Live Server

1. Open the project folder in VS Code.
2. Right-click any HTML file → Open with Live Server.

Folder Structure

blockzen/
├── main/                  ← Main HTML templates
│   ├── home-1.html ... home-5.html
│   └── assets/
│       ├── css/           ← bootstrap, style, responsive, animations
│       ├── js/            ← jquery, bootstrap bundle, main.js
│       ├── images/
│       ├── fonts/
│       └── vendor/        ← swiper, aos, chartjs
└── documentation/         ← This documentation
    ├── index.html
    ├── css/
    ├── js/
    └── assets/

Home Pages

CSS Files

Override CSS variables in style.css under :root { } to change the global color scheme without touching any other file.

JavaScript Files

Add your page-specific scripts inside js/plugins/ and link them before </body>.

Vendor Libraries

Colors & Typography

All colors are defined as CSS custom properties. Edit main/assets/css/style.css:

:root {
  --primary-color:  #6c63ff;   /* Purple accent */
  --secondary-color: #00d4aa;  /* Teal accent */
  --dark-bg:        #0d0d1a;   /* Page background */
  --dark-card:      #13132b;   /* Card background */
  --text-light:     #ffffff;
  --text-muted:     #a0a0c0;
}

Changelog

v1.0.0 — 2026

• Initial release with 5 home page variants
• AOS, Swiper, Chart.js vendor integrations
• Full documentation

Credits