Charity Compassion - Nonprofit, Donation, Charity HTML5 Template preview 1

Charity Compassion - Nonprofit, Donation, Charity HTML5 Template

bookmark

Charity Sympathy is a responsive charity HTML5 website template based on Bootstrap 3.3.4, including complete pages such as Home, About, Blog, Events, Donation Projects, Shop, and Contact Form. It is suitable for quick setup of non-profit...

HTML

Project Introduction

Charity Sympathy is a responsive charity HTML5 website template based on Bootstrap 3.3.4, including complete pages such as Home, About, Blog, Events, Donation Projects, Shop, and Contact Form. It is suitable for quick setup of non-profit organizations, charitable foundations, or social relief websites.

Tech Stack

  • Bootstrap 3.3.4 (Responsive Framework)
  • jQuery (DOM Manipulation & Interaction)
  • Google Fonts (Montserrat + Open Sans)
  • Font Awesome 4.x (Icon Library)
  • Owl Carousel / bxSlider (Carousel Components)
  • FancyBox (Image Lightbox)
  • Rev Slider (Homepage Slider, depends on accompanying CSS/JS)
  • PHP (sendmail.php, Contact Form Backend)

Project Structure

text
Charity-sympathy/
├── index.html             # Homepage Entry
├── index-2.html           # Homepage Variant 2
├── index-3.html           # Homepage Variant 3
├── about.html             # About Us
├── blog-large.html        # Blog List Page
├── blog-details.html      # Blog Detail Page
├── causes.html            # Donation Project List
├── single-cause.html      # Single Project Detail
├── event.html             # Event List
├── event-details.html     # Event Detail
├── shop.html              # Product List
├── shop-single.html       # Product Detail
├── contact.html           # Contact Page
├── error.html             # 404 Error Page
├── sendmail.php           # Form Backend
├── css/
│   ├── style.css          # Main Stylesheet
│   ├── responsive.css     # Responsive Breakpoints
│   ├── bootstrap.min.css  # Bootstrap Core
│   └── ...                # Other Component Styles
├── js/
│   ├── bootstrap.min.js
│   ├── custom.js          # Custom Scripts
│   ├── bxslider.js        # Carousel
│   └── ...
└── fonts/                 # Icon Fonts

Core File Description

  • Charity-sympathy/index.html — Website Homepage Entry
  • Charity-sympathy/css/style.css — Main Stylesheet, defines global layout and theme colors
  • Charity-sympathy/js/custom.js — Custom interaction logic (navigation, animations, etc.)
  • Charity-sympathy/sendmail.php — Contact form email sending script
  • Charity-sympathy/contact.html — Contact Us page (includes form)
  • Charity-sympathy/css/responsive.css — Mobile responsive adaptation

Quick Start

  1. Open Charity-sympathy/index.html directly in a browser to preview the full effect
  2. To use the contact form, deploy the project to a PHP-supported web server (e.g., Apache/Nginx)
  3. Modify the theme color in css/style.css (e.g., #ff2e3d as the primary color) according to your needs

Usage Suggestions

This template is a pure static page, suitable for rapid prototyping or small to medium-sized charity organizations. Before deployment, it is recommended to check the email configuration (e.g., SMTP) in sendmail.php to ensure the form functions properly; if backend functionality is not needed, it can be used directly as a pure frontend project.

help_outline

FAQ