BlockZen — Getting Started

1Requirements

• A modern web browser (Chrome, Firefox, Edge, Safari)
• A text editor such as VS Code, Sublime Text, or Atom
• A local web server is recommended (XAMPP, WAMP, or VS Code Live Server extension)
• Basic knowledge of HTML5, CSS3, and JavaScript

2File Structure

blockzen/
├── main/                     # All template files
│   ├── home-1.html             # Demo 1 — Classic ICO (Purple)
│   ├── home-2.html             # Demo 2 — SaaS Web3 (Teal)
│   ├── home-3.html             # Demo 3 — Futuristic (Neon Green)
│   ├── home-4.html             # Demo 4 — Exchange/Wallet (Gold)
│   ├── home-5.html             # Demo 5 — Presale/NFT (Orange)
│   └── assets/
│       ├── css/
│       │   ├── blockzen.css    # Main stylesheet (all 5 pages)
│       │   ├── animations.css  # Animation utilities
│       │   ├── responsive.css  # Responsive overrides
│       │   ├── style.css       # Base reset and utilities
│       │   └── bootstrap.min.css
│       ├── js/
│       │   ├── blockzen.js     # Main JavaScript (all 5 pages)
│       │   ├── main.js         # Shared jQuery utilities
│       │   ├── jquery.min.js
│       │   └── bootstrap.bundle.min.js
│       ├── images/             # Add your images here
│       │   └── og-preview.jpg  # Social share preview image
│       ├── favicon.svg         # Browser tab icon
│       ├── fonts/              # Optional local fonts
│       └── vendor/
│           ├── aos/            # Animate On Scroll
│           ├── bootstrap-icons/
│           ├── chartjs/
│           └── swiper/
├── documentation/
│   └── index.html              # Full documentation
└── getting-started.html        # This file

3Quick Start

1. Unzip the downloaded package to a folder of your choice.
2. Open the folder in your text editor.
3. Open any main/home-N.html file in your browser — or use a local server for best results.
4. Customize colors, content, and sections as needed (see §4 below).
5. Replace placeholder images in main/assets/images/ with your own artwork.
6. Upload all files to your web host and you're live!

4Customization

Changing colors: Each page's accent color is defined at the top of blockzen.css under its body.page-N {} block using CSS custom properties:

/* Page 1 — Purple */
body.page-1 {
  --p:   #7c3aed;   /* primary accent */
  --p2:  #a855f7;   /* secondary accent */
  --bg:  #0d0d1a;   /* page background */
}

Dark / Light theme: All pages ship with a dark default and a dim-palette light mode. Users can toggle using the sun/moon icon in the navbar. The preference is saved in localStorage under the key bzn-theme.

5Adding Images

Place your images inside main/assets/images/ and its subdirectories:

• background/ — Hero and section backgrounds
• logo/ — Brand logos
• team/ — Team member photos (recommended: 400×400 px, square, .jpg or .webp)
• blog/ — Blog or news article thumbnails
• icons/ — Feature/section icons (SVG recommended)

Update the src attributes in the HTML to match your file names. The template uses Bootstrap's img-fluid class on all images for responsiveness.

6JavaScript Notes

• blockzen.js — Page-scoped JS. Each section runs only on the page it belongs to (detected by navbar ID). AOS, countdown, chart, counters, theme toggle are all here.
• main.js — jQuery utilities: preloader fade-out, back-to-top button, counter animation, smooth scroll.
• AOS (Animate On Scroll) initializes automatically. To disable animations on a specific element, remove its data-aos attribute.
• The tokenomics chart on Demo 01 uses Chart.js. Edit the labels/data array in blockzen.js under the #navbar guard block.

7Browser Support

8Credits & Licenses

9Support

For support requests, please use the Comments section on the ThemeForest item page. Include your purchase code and describe the issue in detail. We typically respond within 1–2 business days.

For full API and component references, see the Documentation.