Royalheart - Nonprofit Fundraising Charity HTML Template preview 1

Royalheart - Nonprofit Fundraising Charity HTML Template

bookmark

Royalheart is an HTML template designed for charities, non-profit organizations, and donation websites. Built with Bootstrap 5, it includes 4 homepage layouts and various inner page templates, supporting responsive design, progress bar a...

HTMLcharitablecharitycrowdfundingdonationsfoundationfundraisinghumanitarian

Project Overview

Royalheart is an HTML template designed for charities, non-profit organizations, and donation websites. Built with Bootstrap 5, it includes 4 homepage layouts and various inner page templates, supporting responsive design, progress bar animations, and countdown functionality—ideal for quickly building public welfare project websites.

Tech Stack

  • Bootstrap 5.3.3
  • jQuery 3.7.1
  • Slick Slider (carousel)
  • Font Awesome 4.7.0 / 5.15.4
  • Google Fonts (Playfair Display, Poppins)
  • LightGallery (image gallery)

Project Structure

text
royalhearthtml-10/03_royalheart_mainfile/
├── mainfile/
│   ├── index.html              # Homepage (Version 1)
│   ├── index-2~5.html          # Other homepage variants
│   ├── about.html              # About Us
│   ├── cause-list.html         # Cause List
│   ├── cause-detail.html       # Cause Detail
│   ├── event-list.html         # Event List
│   ├── event-detail.html       # Event Detail
│   ├── blog-list.html          # Blog List
│   ├── blog-single.html        # Blog Single
│   ├── contact.html            # Contact
│   ├── donation-form.html      # Donation Form
│   ├── testimonial.html        # Testimonials
│   ├── volunteer.html          # Volunteer
│   ├── gallery.html            # Gallery
│   ├── faq.html                # FAQ
│   ├── css/
│   │   ├── styles.css          # Main stylesheet
│   │   ├── bootstrap.min.css   # Bootstrap styles
│   │   ├── plugin.css          # Plugin styles
│   │   └── default.css         # Default styles
│   ├── js/
│   │   └── main.js             # Interaction logic & carousel config
│   └── images/                 # Image assets
└── documentation/
    └── index.html              # Official documentation entry

Key Files

  • mainfile/index.html — Main homepage with banner carousel, progress bar stats, and donation entry
  • mainfile/css/styles.css — All custom style rules
  • mainfile/js/main.js — Navigation menu, scroll listener, Slick carousel, and other interactions
  • mainfile/donation-form.html — Donation form page
  • mainfile/cause-list.html — Cause list page
  • mainfile/gallery.html — Image gallery page

Quick Start

  1. Enter the mainfile directory
  2. Double-click index.html to open it directly in your browser for preview
  3. Modify css/styles.css to adjust theme colors and fonts
  4. Replace images in the images/ directory to update brand assets

Usage Tips

This template is a pure static site and requires no build tools. To deploy to a server, simply upload the entire mainfile folder. Since the template includes a complete page structure, it is recommended to delete unused inner pages based on your specific use case to keep the project directory clean.

help_outline

FAQ