Hopeu – Charity & Donation HTML Template preview 1

Hopeu – Charity & Donation HTML Template

bookmark

Hopeu is a responsive HTML5 website template designed for non-profit organizations and charities. It features multiple homepage layouts, donation collection, event management, volunteer recruitment, and blog functionality, making it idea...

HTMLcharitablecharitychurchcrowdfundingdonatedonationfoundation

Project Overview

Hopeu is a responsive HTML5 website template designed for non-profit organizations and charities. It features multiple homepage layouts, donation collection, event management, volunteer recruitment, and blog functionality, making it ideal for quickly building official websites for foundations or crowdfunding campaigns. The template uses deep green (#2a493d) as its primary color, with a clean and professional overall style.

Tech Stack

  • Bootstrap 5 (responsive layout framework)
  • SCSS (style preprocessing, source in scss/ directory)
  • Google Fonts (Outfit + Amita fonts)
  • Font Awesome 6 (icon library)
  • Vanilla JavaScript (js/theme.js)

Project Structure

text
Template/hopeu/
├── index.html            # Homepage version 1
├── index-2.html          # Homepage version 2
├── index-3.html          # Homepage version 3
├── index-4-dark.html     # Dark homepage
├── about.html            # About Us
├── blog*.html            # Blog list/details
├── contact.html          # Contact page
├── donations*.html       # Donation-related pages
├── event*.html           # Event management pages
├── volunteer*.html       # Volunteer recruitment pages
├── faq.html              # FAQ
├── css/
│   ├── style.min.css     # Main styles (minified)
│   ├── responsive.css    # Responsive breakpoint styles
│   └── bootstrap.min.css # Bootstrap framework styles
├── js/theme.js           # Interactive scripts
├── scss/                 # SCSS source files
│   ├── _variables.scss   # Global variables
│   ├── _title.scss       # Title component
│   └── style.scss        # Entry file
├── images/               # Image assets
└── inc/contact.php       # Contact form backend

Core File Descriptions

  • index.html — Main homepage entry, includes navigation bar, slideshow, donation entry, and other core sections
  • css/style.min.css — Compiled and merged main stylesheet, generated from scss/style.scss
  • scss/_variables.scss — Global variable definitions (brand color #2a493d, font configuration, spacing, etc.)
  • js/theme.js — Navigation toggle, preloader animation, form interaction, and other logic
  • inc/contact.php — Contact form backend processing script (requires PHP environment)
  • index-4-dark.html — Dark theme homepage, suitable for dark mode reference

Quick Start

  1. Extract the archive, navigate to the Template/hopeu/ directory, deploy files to a web server (Apache/Nginx), or preview using a local server like VS Code Live Server
  2. Replace the logo and image assets in images/ with your actual content
  3. The contact form requires server-side PHP environment; enable inc/contact.php to receive submitted data
  4. To modify styles, edit scss/_variables.scss and recompile SCSS to generate css/style.min.css

Usage Suggestions

Directly modify the color variables in _variables.scss to batch adjust the site-wide brand color. It's recommended to keep multiple homepage versions for A/B testing or different campaign scenarios. Since the template uses the Bootstrap 5 grid system, follow its grid rules when customizing layouts to maintain responsiveness.

help_outline

FAQ