Project Overview
Babun is a versatile HTML5 template designed for corporate and financial consulting websites. Built on Bootstrap 5.3.1, it offers both LTR and RTL versions, covering multiple business scenarios including homepage, blog, shop, services, and team pages—ideal for quickly building commercial showcase websites.
Tech Stack
- HTML5 / CSS3
- Bootstrap 5.3.1
- JavaScript (Vanilla + Third-party Plugins)
- SCSS (compiled files not included in source)
- Lazy Loading for images
- Google Fonts (SVG/woff2 font files stored in the fonts directory)
Project Structure
text
babunhtml-10/Babun - Business & Finance HTML5 Template/
├── documentation/HELP/
│ └── index.html ← Online documentation homepage
└── Template/
├── babun/ ← LTR main template
│ ├── css/ ← Stylesheets (includes responsive.css)
│ ├── js/ ← Script files
│ ├── fonts/ ← Icon fonts
│ ├── images/ ← Image assets
│ ├── inc/ ← Contact form logic
│ ├── scss/ ← SCSS source files
│ ├── vendor/ ← Third-party plugins
│ ├── index.html ← Homepage (8 variants)
│ ├── about-us-v1.html
│ ├── blog-v1.html
│ ├── shop-grid.html
│ └── ... (30+ pages)
└── RTL/ ← RTL version, same structure
Key Files
Template/babun/index.html— Homepage entry point, 8 style variants availableTemplate/babun/css/style.min.css— Main stylesheetTemplate/babun/css/responsive.css— Responsive layout stylesTemplate/babun/js/main.js— Interaction logic and plugin initializationTemplate/babun/inc/— PHP contact form handlerdocumentation/HELP/index.html— Complete configuration guide (fonts, logo, forms, etc.)
Quick Start
- Extract the archive and navigate to
Template/babun(orTemplate/RTL) - Upload the entire directory to your server, or double-click
index.htmlfor local preview - Customize the logo: Replace SVG/PNG files in
images/logo/with your brand assets - Contact form requires backend integration (PHP example provided in
inc/)
Usage Tips
- For Chinese content, use the LTR version and replace fonts with Source Han Sans/SimSun
- Adjust spacing or components directly in
css/style.min.css; if using SCSS, modify files inscss/and compile manually - The RTL version has the same directory structure as LTR;
<html lang="en" dir="rtl">is already embedded in HTML—no extra configuration needed
