Project Overviewlink

LeBari is a Bootstrap 4-based HTML5 template for educational websites, featuring 5 homepage style variations covering online courses, coach training, kindergarten, university, and other educational scenarios. The template includes multiple business pages such as course details, blog, events, faculty, and membership, making it ready to use as an official website for educational platforms or training institutions.

Tech Stacklink

• HTML5 / Bootstrap 4 (responsive framework)
• CSS3 (custom styles + animations)
• Font Awesome 5 (icon library)
• jQuery (interactive functionality)
• Noto Sans TC (Google Fonts Chinese typeface)
• PHP (contact form email sending)

Project Structurelink

lebarihtml-10/lebari-package/lebari/
├── index.html              # Homepage (online courses)
├── index-2.html ~ index-5.html   # Other homepage variants
├── about.html              # About Us
├── course.html             # Course list
├── course-detail.html      # Course details
├── blog.html               # Blog list
├── blog-detail.html        # Blog details
├── event.html              # Events list
├── teacher.html            # Faculty team
├── membership.html         # Membership page
├── contact.html            # Contact Us
├── sendemail.php           # Email sending script
├── css/
│   ├── bootstrap.css       # Bootstrap core
│   ├── style.css           # Main stylesheet
│   ├── responsive.css      # Responsive adaptations
│   └── font-awesome.css    # Icon styles
└── fonts/                  # Custom font files

Key File Descriptionslink

• index.html — Main homepage with Banner, course showcase, faculty, testimonials, and other modules
• css/style.css — Core theme styles defining global fonts, colors, and layout (primary color #43b97e)
• css/bootstrap.css — Bootstrap 4 framework styles providing grid system and components
• course.html — Course category listing page with filter layout support
• sendemail.php — Contact form backend script that receives user submissions and sends emails
• contact.html — Contact Us page with form and map section

Quick Startlink

1. Open lebari/index.html directly in a browser to preview the full effect
2. To run with a local server, use VS Code Live Server or execute:
   textcontent_copyCopy

   npx serve lebarihtml-10/lebari-package/lebari
   

3. To modify the contact form recipient address: edit the recipient email in sendemail.php

Usage Suggestionslink

• This template consists of pure static pages. For deployment, simply upload the lebari folder to any web server or static hosting platform (such as Vercel, Netlify)
• To integrate with backend data, consider replacing listing pages like course.html and blog.html with dynamic templates (e.g., React/Vue components)