Project Introduction
Prozen is a multi-page HTML template designed for the business consulting industry, built on Bootstrap 5. It includes multiple complete pages such as Home, About, Blog, Case Studies, Team, Services, and Pricing, along with interactive components like smooth animations and Swiper carousels, making it suitable for quickly building corporate showcase websites.
Tech Stack
- Bootstrap 5 (Layout & Responsive Grid)
- jQuery 3.7.1 (DOM Manipulation & Plugin Driver)
- Swiper (Brand Showcase, Client Testimonials, Project Carousels)
- Magnific Popup (Image & Video Lightbox)
- WOW.js (Scroll-triggered Entrance Animations)
- Nice Select (Dropdown Select Styling)
- CounterUp (Number Scroll Counting)
- Sass (Style Development Script)
Project Structure
prozenhtml-10/
├── documentation/
│ └── index.html # Template official documentation
└── html/
├── assets/
│ ├── css/
│ │ ├── main.css # Main stylesheet (includes theme variables)
│ │ └── style.css # Utility classes (margin/padding)
│ └── js/
│ └── main.js # All interaction logic
├── *.html # Page files (index, about, blog, contact, etc.)
└── package.json # npm entry point (supports sass --watch)
Core File Description
html/index.html— Homepage entry, includes Banner, client carousel, service blocks, etc.html/assets/css/main.css— Core stylesheet, defines theme color (#28E98C), fonts, component styleshtml/assets/css/style.css— Bootstrap supplementary utility classes, extensive margin/padding atomic classeshtml/assets/js/main.js— All interactions: navigation menu, search bar, carousels, counters, sticky header, etc.html/package.json— Usenpm run devto watch SCSS for real-time compilationdocumentation/index.html— Official documentation page, structure explanation and customization guide
Quick Start
Simply open prozenhtml-10/html/index.html in your browser to preview. To modify styles, navigate to the html/ directory and run:
npm install
npm run dev
This will watch changes in assets/scss/style.scss and automatically compile them to assets/css/style.css.
Usage Suggestions
The template includes 3 built-in homepage variants (index, index-2, index-3). You can directly copy the corresponding file and rewrite the content based on your business scenario. Interactive effects (Swiper carousels, WOW animations, etc.) are already initialized in main.js and require no additional configuration. To change the theme color, simply modify the CSS variable --theme at the top of main.css.
