Welcome to Giving-Heart ! Get familiar with the Stripe products and explore their features:
Well organized and easy to understand. You can any work by following our docs easily
Code is clean if it can be understood.Our code is more formatting for your website
Our Template is full Perfect for all device. You can visit our template all device easily.
The template has Sass available for css. You can Change and customize css by sass.
Giving-Heart is faster loading speed. Giving-Heart create your template so much faster and easier
We are provide 24 hours support for all clients.You can purchase without hesitation.
Welcome to Giving-Heart
Giving-Heart is a non-profit organization dedicated to providing essential support to vulnerable communities. With a mission rooted in compassion, we focus on delivering nutritious meals, vital supplies, and educational resources to those in need. Our programs reach underserved populations, including low-income families, children, and individuals facing homelessness. Founded on the principles of empathy and action, Giving-Heart partners with local communities, Volunteers, and donors to create a sustainable impact. We believe that everyone deserves access to basic needs like food, shelter, and education. Through our various initiatives, we strive to bridge the gap between hunger and hope.
Giving-Heart - is highly customizable - looks awesome on tablets and mobile devices. We have included best web development practices - you can create a great website layout based on Bootstrap or Grid 1330px.
After purchasing Giving-Heart template on themeforest.net with your Envato account, go to your Download page. You can choose to download Giving-Heart template only or the entire Giving-Heart template package which contains the following files:
Installing a Giving-Heart template is not like WordPress or CMS theme installation, actually, installation keyword does not go with Giving-Heart template. Why? because you don’t install anything, yes Giving-Heart or HTML templates are automatically rendered by the browser.
Before all that you have to edit your template and place your own contents by replacing old demo contents, in this case, you will need a code editor such as – VScode, Sublime Text, etc. When template editing is done using editor, save the files and folder and go ahead to upload template files on live server.
First of all, If you don’t have your template on your computer, download Giving-Heart template to get started, when download/purchase complete you will get a package like this screenshot (after unzip).
This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into different section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Giving-Heart - Charities and Nonprofits HTML Template">
<meta name="keywords" content="charity template, nonprofit template, NGO template, fundraising website, donation website, charity HTML template, responsive charity template, charity organization, Volunteer, nonprofit, donation, Giving-Heart">
<title>Giving-Heart - Charities and Nonprofits HTML Template </title>
<!-- Place favicon.ico in the root directory -->
<link rel="shortcut icon" href="assets/imgs/favicon.svg">
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/fontawesome-pro.css">
<link rel="stylesheet" href="assets/css/flatpickr.css">
<link rel="stylesheet" href="assets/webfont/stylesheet.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<!-- JS here -->
<script src="assets/js/jquery-3.7.1.min.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/meanmenu.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
<script src="assets/js/counterup.js"></script>
<script src="assets/js/magnific-popup.min.js"></script>
<script src="assets/js/wow.js"></script>
<script src="assets/js/jquery.appear.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/flatpickr.min.js"></script>
<!-- gsap -->
<script src="assets/js/gsap.js"></script>
<script src="assets/js/scrollTrigger.js"></script>
<!-- gsap -->
<script src="assets/js/main.js"></script>
</body>
</html>
We are using one customed CSS files (style.css) and several vendor css files. CSS file structure is as follows:
/************ TABLE OF CONTENTS ***************
-----------------
01. THEME CSS
-----------------
1.1 Commmon
1.2 Theme
1.3 Typography
-----------------
02. utils CSS
-----------------
2.1 Breakpoint
2.2 Extends
2.3 Colors
2.4 Mixins
2.5 Root
-----------------
03. COMPONENTS CSS
-----------------
3.1 Animation
3.2 Back to top
3.3 Breadcrumb
3.4 Button
3.5 Offcanvas
3.6 Prealoder
3.7 Pagination
3.8 Section-title
-----------------
04. HEADER CSS
-----------------
4.1 Header 1
4.2 Header 2
4.3 Header 3
4.4 Header 4
---------------------------------
05. MENU CSS
---------------------------------
5.1 Meanmenu
5.2 Menu
---------------------------------
06. FOOTER CSS
---------------------------------
6.1 Footer 1
6.2 Footer 2
6.3 Footer 3
6.4 Footer 4
---------------------------------
07. BANNER CSS
---------------------------------
7.1 Banner Style 01
7.2 Banner Style 02
7.3 Banner Style 03
7.4 Banner Style 04
---------------------------------
08. PAGES CSS
---------------------------------
8.1 About css
8.2 Blog css
8.3 Blog Details css
8.4 Causes css
8.5 Choose css
8.6 Contact css
8.7 Counter css
8.8 Donation css
8.9 Donation Details css
8.10 Doner css
8.11 Event css
8.12 Event Details css
8.13 Moments css
8.14 Newsletter css
8.15 Team css
8.16 Team Details css
8.17 testimonial css
There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:
To change any images of the website
Example: Suppose you want to change the following image file:
<div class="logo">
<a href="index.html">
<img class="primary-logo" src="assets/imgs/logo/logo-white.svg" alt="logo">
<img class="secondary-logo" src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
To change any images of the website
Example: Suppose you want to change the following image file:
<div class="logo">
<a href="index.html">
<img class="primary-logo" src="assets/imgs/logo/logo-white.svg" alt="logo">
<img class="secondary-logo" src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files. Please make sure you compile the style.scss file after you have made changes in any of the .scss files.
Have a look at the following image for a visual description:
Welcome to Giving-Heart Header Elements! You can choose 3 Types of header package for creating you website.
<!-- Header area start -->
<header class="header-style">
<div class="header-sticky">
<div class="container-fluid">
<div class="main-header">
<div class="logo">
<a href="index.html">
<img class="primary-logo" src="assets/imgs/logo/logo-white.svg" alt="logo">
<img class="secondary-logo" src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
<div class="header-menu">
<div class="main-menu menu-style-one">
<nav id="mobile-menu">
<ul>
<li class="has_dropdown">
<a href="index.html">Home</a>
<ul class="sub-menu">
<li>
<a href="index.html">Home One</a>
</li>
<li>
<a href="index-2.html">Home Two</a>
</li>
<li>
<a href="index-3.html">Home Three</a>
</li>
</ul>
</li>
<li>
<a href="about.html"> About</a>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Donation</a>
<ul class="sub-menu">
<li>
<a href="donation-list.html">Donation List</a>
</li>
<li>
<a href="donation-grid.html">Donation Grid</a>
</li>
<li>
<a href="donation-details.html">Donation Details</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)">Event</a>
<ul class="sub-menu">
<li>
<a href="event-list.html">Event List</a>
</li>
<li>
<a href="event-grid.html">Event Grid</a>
</li>
<li>
<a href="event-details.html">Event Details</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Pages</a>
<ul class="sub-menu">
<li>
<a href="moments.html">Moments</a>
</li>
<li>
<a href="moments-details.html">Moments Details</a>
</li>
<li>
<a href="team.html">Team</a>
</li>
<li>
<a href="team-details.html">Team Details</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Blog</a>
<ul class="sub-menu">
<li>
<a href="blog-list.html">Blog List</a>
</li>
<li>
<a href="blog-grid.html">Blog Grid</a>
</li>
<li>
<a href="blog-details.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="header-right common-header-right">
<div class="search-icon">
<i class="fal fa-search"></i>
</div>
<div class="contact-nmbr d-none d-xxl-block">
<a href="tel:(123)0000-6666"><span>Call us</span>(123) 0000 - 6666</a>
</div>
<div class="user-id">
<span><i class="fa-light fa-user"></i></span>
<div class="user-dropdown">
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</div>
<button class="theme_btn" type="submit">DONATE NOW</button>
</div>
</div>
<div class="user-bar-wrapper d-lg-none">
<div class="user-id">
<span><i class="fa-light fa-user"></i></span>
<div class="user-dropdown">
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</div>
<div class="bars_icon">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header area end -->
<!-- Header area start -->
<header class="header-style header-style-one">
<div class="header-sticky">
<div class="container-fluid">
<div class="main-header">
<div class="logo">
<a href="index.html">
<img class="primary-logo" src="assets/imgs/logo/home1-logo.svg" alt="logo">
<img class="secondary-logo" src="assets/imgs/logo/home1-black-logo.svg" alt="logo">
</a>
</div>
<div class="header-menu">
<div class="main-menu home-one-menu">
<nav id="mobile-menu">
<ul>
<li class="has_dropdown">
<a href="index.html">Home</a>
<ul class="sub-menu">
<li>
<a href="index.html">Home One</a>
</li>
<li>
<a href="index-2.html">Home Two</a>
</li>
<li>
<a href="index-3.html">Home Three</a>
</li>
</ul>
</li>
<li>
<a href="about.html"> About</a>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Donation</a>
<ul class="sub-menu">
<li>
<a href="donation-list.html">Donation List</a>
</li>
<li>
<a href="donation-grid.html">Donation Grid</a>
</li>
<li>
<a href="donation-details.html">Donation Details</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)">Event</a>
<ul class="sub-menu">
<li>
<a href="event-list.html">Event List</a>
</li>
<li>
<a href="event-grid.html">Event Grid</a>
</li>
<li>
<a href="event-details.html">Event Details</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Pages</a>
<ul class="sub-menu">
<li>
<a href="moments.html">Moments</a>
</li>
<li>
<a href="moments-details.html">Moments Details</a>
</li>
<li>
<a href="team.html">Team</a>
</li>
<li>
<a href="team-details.html">Team Details</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Blog</a>
<ul class="sub-menu">
<li>
<a href="blog-list.html">Blog List</a>
</li>
<li>
<a href="blog-grid.html">Blog Grid</a>
</li>
<li>
<a href="blog-details.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="header-right header-one-right">
<div class="search-icon">
<i class="fal fa-search"></i>
</div>
<div class="contact-nmbr d-none d-xxl-block">
<a href="tel:(123)0000-6666"><span>Call us</span>(123) 0000 - 6666</a>
</div>
<div class="user-id">
<span><i class="fa-light fa-user"></i></span>
<div class="user-dropdown">
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</div>
<button class="btn_secondary" type="submit">DONATE NOW</button>
</div>
</div>
<div class="user-bar-wrapper d-lg-none">
<div class="user-id">
<span><i class="fa-light fa-user"></i></span>
<div class="user-dropdown">
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</div>
<div class="bars_icon">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header area end -->
<!-- Header area start -->
<header class="header-style header-style-two">
<div class="header-sticky">
<div class="container-fluid">
<div class="main-header">
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
<div class="header-menu">
<div class="main-menu">
<nav id="mobile-menu">
<ul>
<li class="has_dropdown">
<a href="index.html">Home</a>
<ul class="sub-menu">
<li>
<a href="index.html">Home One</a>
</li>
<li>
<a href="index-2.html">Home Two</a>
</li>
<li>
<a href="index-3.html">Home Three</a>
</li>
</ul>
</li>
<li>
<a href="about.html"> About</a>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Donation</a>
<ul class="sub-menu">
<li>
<a href="donation-list.html">Donation List</a>
</li>
<li>
<a href="donation-grid.html">Donation Grid</a>
</li>
<li>
<a href="donation-details.html">Donation Details</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)">Event</a>
<ul class="sub-menu">
<li>
<a href="event-list.html">Event List</a>
</li>
<li>
<a href="event-grid.html">Event Grid</a>
</li>
<li>
<a href="event-details.html">Event Details</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Pages</a>
<ul class="sub-menu">
<li>
<a href="moments.html">Moments</a>
</li>
<li>
<a href="moments-details.html">Moments Details</a>
</li>
<li>
<a href="team.html">Team</a>
</li>
<li>
<a href="team-details.html">Team Details</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Blog</a>
<ul class="sub-menu">
<li>
<a href="blog-list.html">Blog List</a>
</li>
<li>
<a href="blog-grid.html">Blog Grid</a>
</li>
<li>
<a href="blog-details.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="header-right">
<div class="search-icon">
<i class="fal fa-search"></i>
</div>
<div class="contact-nmbr d-none d-xxl-block">
<a href="tel:(123)0000-6666"><span>Call us</span>(123) 0000 - 6666</a>
</div>
<div class="user-id">
<span><i class="fa-light fa-user"></i></span>
<div class="user-dropdown">
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</div>
<button class="theme_btn" type="submit">DONATE NOW</button>
</div>
</div>
<div class="user-bar-wrapper d-lg-none">
<div class="user-id">
<span><i class="fa-light fa-user"></i></span>
<div class="user-dropdown">
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</div>
<div class="bars_icon">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header area end -->
<!-- Header area start -->
<header class="header-style header-style-three">
<div class="header-sticky">
<div class="container-fluid">
<div class="main-header">
<div class="logo">
<a href="index.html">
<img class="primary-logo" src="assets/imgs/logo/home3-logo.svg" alt="logo">
<img class="secondary-logo" src="assets/imgs/logo/logo.svg" alt="logo">
</a>
</div>
<div class="header-menu">
<div class="main-menu home-three-menu">
<nav id="mobile-menu">
<ul>
<li class="has_dropdown">
<a href="index.html">Home</a>
<ul class="sub-menu">
<li>
<a href="index.html">Home One</a>
</li>
<li>
<a href="index-2.html">Home Two</a>
</li>
<li>
<a href="index-3.html">Home Three</a>
</li>
</ul>
</li>
<li>
<a href="about.html"> About</a>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Donation</a>
<ul class="sub-menu">
<li>
<a href="donation-list.html">Donation List</a>
</li>
<li>
<a href="donation-grid.html">Donation Grid</a>
</li>
<li>
<a href="donation-details.html">Donation Details</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)">Event</a>
<ul class="sub-menu">
<li>
<a href="event-list.html">Event List</a>
</li>
<li>
<a href="event-grid.html">Event Grid</a>
</li>
<li>
<a href="event-details.html">Event Details</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Pages</a>
<ul class="sub-menu">
<li>
<a href="moments.html">Moments</a>
</li>
<li>
<a href="moments-details.html">Moments Details</a>
</li>
<li>
<a href="team.html">Team</a>
</li>
<li>
<a href="team-details.html">Team Details</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
<li class="has_dropdown">
<a href="javascript:void(0)"> Blog</a>
<ul class="sub-menu">
<li>
<a href="blog-list.html">Blog List</a>
</li>
<li>
<a href="blog-grid.html">Blog Grid</a>
</li>
<li>
<a href="blog-details.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="header-right header-three-right">
<div class="search-icon">
<i class="fal fa-search"></i>
</div>
<div class="user-id">
<span><i class="fa-light fa-user"></i></span>
<div class="user-dropdown">
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</div>
<button class="theme_btn-two" type="submit">DONATE NOW</button>
</div>
</div>
<div class="user-bar-wrapper d-lg-none">
<div class="user-id">
<span><i class="fa-light fa-user"></i></span>
<div class="user-dropdown">
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</div>
<div class="bars_icon">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header area end -->
<!-- Header area start -->
<header class="header-style header-style-four-top">
<div class="header-sticky">
<div class="header-top-area">
<div class="container">
<div class="header-top">
<div class="header-top-contact">
<div class="contact-single-information">
<div class="contact-text">CALL US</div>
<a href="tel:(123)0000-6666">(123) 0000 - 6666</a>
</div>
<div class="contact-single-information">
<div class="contact-text">EMAIL ADDRESS</div>
<a href="mailto:demo123@gmail.com">demo123@gmail.com</a>
</div>
<div class="contact-single-information">
<div class="contact-text">OUR LOCATION</div>
<a target="_blank" href="https://www.google.com/maps/place/Orville+St,+La+Presa,+CA+91977,+USA/@32.7092048,-117.0082772,17z/data=!3m1!4b1!4m5!3m4!1s0x80d9508a9aec8cd1:0x72d1ac1c9527b705!8m2!3d32.7092003!4d-117.0060885">St. Celina, Delaware</a>
</div>
</div>
<div class="header-top-btn">
<a href="contact.html">DONATE NOW</a>
</div>
</div>
</div>
</div>
<div class="header-bottom-area">
<div class="container">
<div class="main-header header-style-four">
<div class="logo">
<a href="index.html">
<img src="assets/imgs/logo/logo-four.svg" alt="Logo">
</a>
</div>
<div class="header-menu">
<div class="main-menu menu-style-four">
<nav id="mobile-menu">
<ul>
<li class="has-mega-menu">
<a href="javascript:void(0)">Home</a>
<ul class="mega-menu">
<li>
<div class="home-menu-grid" style="--transparent-color:#FF5134;">
<div class="menu-item">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu1.png" alt="Thumb Not Found">
<div class="menu-button">
<a class="btn_secondary-two" href="index.html">Tree Plantation</a>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu2.png" alt="Thumb Not Found">
<div class="menu-button">
<a class="btn_secondary-two" href="index-2.html">Fund Raiser</a>
</div>
</div>
</div>
<div class="menu-item">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu3.png" alt="Thumb Not Found">
<div class="menu-button">
<a class="btn_secondary-two" href="index-3.html">Blood Donate</a>
</div>
</div>
</div>
<div class="menu-item active">
<div class="menu-thumb">
<img src="assets/imgs/menu/home-menu4.png" alt="Thumb Not Found">
<div class="menu-button">
<a class="btn_secondary-two" href="index-4.html">Cancer Research</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="javascript:void(0)"> Pages</a>
<ul class="sub-menu">
<li>
<a href="event-list.html">Event List</a>
</li>
<li>
<a href="event-grid.html">Event Grid</a>
</li>
<li>
<a href="event-details.html">Event Details</a>
</li>
<li>
<a href="moments.html">Moments</a>
</li>
<li>
<a href="moments-details.html">Moments Details</a>
</li>
<li>
<a href="team.html">Team</a>
</li>
<li>
<a href="team-details.html">Team Details</a>
</li>
<li>
<a href="404.html">404</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)"> Donation</a>
<ul class="sub-menu">
<li>
<a href="donation-list.html">Donation List</a>
</li>
<li>
<a href="donation-grid.html">Donation Grid</a>
</li>
<li>
<a href="donation-details.html">Donation Details</a>
</li>
</ul>
</li>
<li>
<a href="javascript:void(0)"> Blog</a>
<ul class="sub-menu">
<li>
<a href="blog-list.html">Blog List</a>
</li>
<li>
<a href="blog-grid.html">Blog Grid</a>
</li>
<li>
<a href="blog-details.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<div class="header-right">
<div class="search-icon">
<i class="fal fa-search"></i>
</div>
<div class="header-social-icon">
<span>Follow Us -</span>
<ul>
<li>
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
<a href="#"><i class="fa-brands fa-pinterest-p"></i></a>
<a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
</li>
</ul>
</div>
</div>
<div class="user-bar-wrapper d-lg-none">
<div class="user-id">
<span><i class="fa-light fa-user"></i></span>
<div class="user-dropdown">
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</div>
</div>
<div class="bars_icon">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Header area end -->
Welcome to Giving-Heart Footer You can select any footer & customize easily and build your website.
Awesome Footer styles. See below image and code for more information.
<!-- Footer area start -->
<footer>
<div class="footer_area fix">
<div class="footer_top">
<div class="container">
<div class="footer_banner">
<div class="footer_left" data-background="assets/imgs/banner/footer-banner.png">
<h4 class="footer_title">Make a Tour</h4>
<button class="theme_btn"> book now</button>
<img class="footer_banner-plan d-none d-lg-block" src="assets/imgs/shape/footer-banner-plan.png" alt="footer shape">
</div>
<div class="footer_right">
<p>call for support</p>
<a href="tel:+00977445955"><span><i class="fa-light fa-phone"></i></span> +00 977 445 955</a>
</div>
</div>
</div>
<img class="footer_camera d-none d-md-block" src="assets/imgs/footer/camera.png" alt="footer shape">
</div>
<div class="footer_mid footer-space">
<div class="container">
<div class="row gy-40">
<div class="col-sm-6 col-lg-4 col-xl-4">
<div class="footer-widget">
<div class="footer-logo">
<a href="index.html">
<img src="assets/imgs/logo/logo-white.svg" alt="logo">
</a>
</div>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.
</p>
<div class="footer-social-icon">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 col-xl-3">
<div class="footer-widget-2 footer-common-widget">
<h4 class="footer-widget-title"> Company</h4>
<div class="footer_info-wrap">
<ul>
<li>
<a href="#"><span><i class="fal fa-home-lg-alt"></i></span>
2972 Westheimer Rd. Santa Ana,Illinois 85486
</a>
</li>
<li>
<a href="mailto:contact@example.com">
<span><i class="fa-light fa-envelope"></i></span>
Contact@example.com
</a>
</li>
<li>
<a href="tel:(229)555-0109">
<span><i class="fa-light fa-phone"></i></span>
(229) 555-0109
</a>
</li>
<li>
<p>
<span> <i class="fa-regular fa-clock-twelve"></i></span>
Mon - Fri: 9am - 5pm
</p>
</li>
</ul>
</div>
</div>
</div>
<div class="col-6 col-lg-2 col-xl-3">
<div class="footer-widget-3 footer-common-widget">
<h4 class="footer-widget-title">
Quick Links
</h4>
<div class="footer-link">
<ul>
<li> <a href="#"> search</a> </li>
<li> <a href="#"> about us</a> </li>
<li> <a href="#"> contact us</a> </li>
<li> <a href="#"> policy</a> </li>
<li> <a href="#"> terms of service</a> </li>
</ul>
</div>
</div>
</div>
<div class="col-6 col-lg-3 col-xl-2">
<div class="footer-widget-4 footer-common-widget">
<h4 class="footer-widget-title"> Tour</h4>
<div class="footer-link">
<ul>
<li> <a href="#"> about us</a> </li>
<li> <a href="#"> privacy policy</a> </li>
<li> <a href="#"> contact us</a> </li>
<li> <a href="#"> terms & conditions</a> </li>
<li> <a href="#"> terms & service</a> </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<img class="footer_plan" src="assets/imgs/footer/footer-plan.png" alt="footer shape">
<img class="footer_map" src="assets/imgs/footer/footer-map.png" alt="footer shape">
<img class="footer_shape2" src="assets/imgs/footer/footer-shape2.png" alt="footer shape">
</div>
<div class="footer-bottom">
<div class="container">
<div class="footer-bottom-inner">
<div class="footer-copyright-text">
<p>
Copyright © 2025
<a href="index.html"> Giving-Heart. </a>
All rights reserved
</p>
</div>
<div class="payment_method">
<ul>
<li>
<a href="#"><img src="assets/imgs/footer/visa.svg" alt="payment img"></a>
</li>
<li>
<a href="#"><img src="assets/imgs/footer/mastercard.svg" alt="payment img"></a>
</li>
<li>
<a href="#"><img src="assets/imgs/footer/discover.svg" alt="payment img"></a>
</li>
<li>
<a href="#"><img src="assets/imgs/footer/paypal.svg" alt="payment img"></a>
</li>
<li>
<a href="#"><img src="assets/imgs/footer/jcb.svg" alt="payment img"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<img class="footer_bg-shape" src="assets/imgs/footer/footer-shape.png" alt="footer-shape">
</div>
</footer>
<!-- Footer area end -->
Awesome Footer styles. See below image and code for more information.
<!-- Footer area start -->
<footer>
<div class="footer-style-one">
<div class="container">
<div class="foooter-style-one-top">
<div class="row g-0">
<div class="col-sm-6 col-lg-3">
<div class="subscribe-single news-letter-form wow fadeInUp" data-wow-delay=".3s" style="--single-bg:#6AC610;">
<h4 class="footer-widget-title"> Newsletter</h4>
<form action="#">
<div class="footer-input">
<input type="email" placeholder="Email address">
<button class="footer-input-btn" type="submit">
<i class="fa-regular fa-arrow-right-long"></i>
</button>
</div>
</form>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="subscribe-single wow fadeInUp" data-wow-delay=".5s" style="--single-bg:#1D2025;">
<div class="subscribe-icon">
<i class="fa-solid fa-location-dot"></i>
</div>
<h5 class="subscribe-title">Our Location</h5>
<p>4517 Washington. wnchester
Kentucky 39495</p>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="subscribe-single wow fadeInUp" data-wow-delay=".7s" style="--single-bg:#1A1C21;">
<div class="subscribe-icon">
<i class="fa-solid fa-paper-plane"></i>
</div>
<h5 class="subscribe-title">Email Address</h5>
<a href="mailto:demoer1234@gmail.com">demoer1234@gmail.com</a>
<a href="mailto:enva123@gmail.com">enva123@gmail.com</a>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="subscribe-single wow fadeInUp" data-wow-delay=".9s" style="--single-bg:#1D2025;">
<div class="subscribe-icon">
<i class="fa-solid fa-hourglass-start"></i>
</div>
<h5 class="subscribe-title">Opning Hours</h5>
<p>Mon to Sat day 7:00am - 9:00pm
Sunday <span>Closs</span></p>
</div>
</div>
</div>
</div>
<div class="footer-mid">
<div class="row gy-40">
<div class="col-sm-12 col-md-6 col-lg-3">
<div class="footer-widget">
<div class="footer-logo">
<a href="index.html">
<img src="assets/imgs/logo/home1-logo.svg" alt="logo">
</a>
</div>
<p class="color-white">True wealth is measured by how much we give, not how much we have</p>
<div class="footer-social-icon">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<div class="footer-widget-1 footer-common-widget">
<h4 class="footer-widget-title"> About</h4>
<div class="footer-link footer-link-one">
<ul>
<li> <a href="#"> Home</a> </li>
<li> <a href="#"> Donation</a> </li>
<li> <a href="#"> about us</a> </li>
<li> <a href="#"> Event</a> </li>
<li> <a href="#">Features</a> </li>
</ul>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<div class="footer-widget-2 footer-common-widget">
<h4 class="footer-widget-title">
Quick Links
</h4>
<div class="footer-link footer-link-one">
<ul>
<li><a href="#"> Causes</a></li>
<li><a href="#"> about</a></li>
<li><a href="#"> New campaign</a></li>
<li><a href="#"> Site map</a></li>
<li><a href="#">Stories</a></li>
</ul>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2">
<div class="footer-widget-2 footer-common-widget">
<h4 class="footer-widget-title">
Explore
</h4>
<div class="footer-link footer-link-one">
<ul>
<li><a href="#"> Donate</a></li>
<li><a href="#"> Campaigns</a></li>
<li><a href="#"> Fundraise</a></li>
<li><a href="#"> Volunteers</a></li>
<li><a href="#">Sponsors</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-3">
<div class="footer-gallery-widget footer-common-widget">
<h4 class="footer-widget-title"> Photo Gallery</h4>
<div class="footer-gallery-wrapper">
<div class="footer-gallery-thumb">
<a href="#"><img src="assets/imgs/footer/footer-gallery.png" alt="Footer Gellary Img"></a>
</div>
<div class="footer-gallery-thumb">
<a href="#"><img src="assets/imgs/footer/footer-gallery2.png" alt="Footer Gellary Img"></a>
</div>
<div class="footer-gallery-thumb">
<a href="#"><img src="assets/imgs/footer/footer-gallery3.png" alt="Footer Gellary Img"></a>
</div>
<div class="footer-gallery-thumb">
<a href="#"><img src="assets/imgs/footer/footer-gallery4.png" alt="Footer Gellary Img"></a>
</div>
<div class="footer-gallery-thumb">
<a href="#"><img src="assets/imgs/footer/footer-gallery5.png" alt="Footer Gellary Img"></a>
</div>
<div class="footer-gallery-thumb">
<a href="#"><img src="assets/imgs/footer/footer-gallery6.png" alt="Footer Gellary Img"></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom-inner footer-bottom-one">
<div class="payment_method">
<p>Donate by :</p>
<ul>
<li>
<a href="#"><img src="assets/imgs/footer/visa.svg" alt="payment img"></a>
</li>
<li>
<a href="#"><img src="assets/imgs/footer/mastercard.svg" alt="payment img"></a>
</li>
<li>
<a href="#"><img src="assets/imgs/footer/discover.svg" alt="payment img"></a>
</li>
<li>
<a href="#"><img src="assets/imgs/footer/paypal.svg" alt="payment img"></a>
</li>
</ul>
</div>
<div class="footer-copyright-text">
<p>
Copyright 2025 All Right Reserved
</p>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer area end -->
Awesome Footer styles. See below image and code for more information.
<!-- Footer area start -->
<footer >
<div class="footer-style-three section-space-top">
<div class="footer-top">
<div class="container">
<div class="row gy-40">
<div class="col-sm-6 col-lg-3">
<div class="footer-widget">
<div class="footer-logo">
<a href="index.html">
<img src="assets/imgs/logo/footer-logo.svg" alt="logo">
</a>
</div>
<p>True wealth is measured by how much we give, not how much we have</p>
<div class="footer-social-icon footer-three-social">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-whatsapp"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-2">
<div class="footer-widget-1 footer-common-widget">
<h4 class="footer-widget-title"> About</h4>
<div class="footer-link">
<ul>
<li> <a href="#"> Home</a> </li>
<li> <a href="#"> Donation</a> </li>
<li> <a href="#"> about us</a> </li>
<li> <a href="#"> Event</a> </li>
<li> <a href="#">Features</a> </li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="footer-blog">
<h4 class="footer-widget-title">
News Feeds
</h4>
<div class="footer-blog-wrapper">
<div class="footer-single-blog">
<div class="footer-blog-img">
<img src="assets/imgs/footer/footer-blog1.png" alt="blog img">
</div>
<div class="footer-blog-content">
<span><i class="fa-solid fa-clock"></i>Jan 18, 2015</span>
<h6 class="footer-blog-title"><a href="blog-details.html">Stroke care gains in falter after Hurricane</a></h6>
</div>
</div>
<div class="footer-single-blog">
<div class="footer-blog-img">
<img src="assets/imgs/footer/footer-blog2.png" alt="blog img">
</div>
<div class="footer-blog-content">
<span><i class="fa-solid fa-clock"></i>Jan 18, 2015</span>
<h6 class="footer-blog-title"><a href="blog-details.html">Wepetition injehumour or
non-characteristic</a></h6>
</div>
</div>
<div class="footer-single-blog">
<div class="footer-blog-img">
<img src="assets/imgs/footer/footer-blog3.png" alt="blog img">
</div>
<div class="footer-blog-content">
<span><i class="fa-solid fa-clock"></i>Jan 18, 2015</span>
<h6 class="footer-blog-title"><a href="blog-details.html">Stroke care gains in falter after Hurricane</a></h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="footer-widget-4 footer-common-widget">
<h4 class="footer-widget-title"> Newsletter</h4>
<p>The best way to find yourself is to lose yourself in service</p>
<form action="#">
<div class="footer-input">
<input type="email" placeholder="Email address">
<button class="footer-input-btn" type="submit">
<i class="fa-regular fa-arrow-right-long"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="footer-bottom-inner">
<div class="footer-copyright-text">
<p>
Copyright 2025 All Right Reserved
</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer area end -->
Awesome Footer styles. See below image and code for more information.
<!-- Footer area start -->
<footer>
<div class="footer-style-four section-space-top">
<div class="container">
<div class="footer-style-four-top">
<div class="row gy-40">
<div class="col-md-5 col-lg-3">
<div class="footer-widget">
<div class="footer-logo">
<a href="index.html">
<img src="assets/imgs/logo/logo-four.svg" alt="Logo">
</a>
</div>
<p class="color-white">The world needs more kindness, now more than ever.Together, we can make a lasting impact. </p>
<form action="#">
<div class="footer-input">
<input type="email" placeholder="Email address">
<button class="footer-input-btn" type="submit">
<i class="fa-regular fa-arrow-right-long"></i>
</button>
</div>
</form>
</div>
</div>
<div class="col-6 col-sm-6 col-md-4 col-lg-2">
<div class="footer-four-widget">
<h4 class="footer-four-widget-title"> About</h4>
<div class="footer-link footer-link-one">
<ul>
<li> <a href="#"> Home</a> </li>
<li> <a href="#"> Donation</a> </li>
<li> <a href="#"> about us</a> </li>
<li> <a href="#"> Event</a> </li>
</ul>
</div>
</div>
</div>
<div class="col-6 col-sm-6 col-md-3 col-lg-2">
<div class="footer-widget-2 footer-common-widget">
<h4 class="footer-four-widget-title">
Quick Links
</h4>
<div class="footer-link footer-link-one">
<ul>
<li><a href="#"> Causes</a></li>
<li><a href="#"> about</a></li>
<li><a href="#"> New campaign</a></li>
<li><a href="#"> Site map</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6 col-md-6 col-lg-2">
<div class="footer-gallery-widget footer-common-widget">
<h4 class="footer-four-widget-title"> Photo Gallery</h4>
<div class="footer-gallery-wrapper footer-gallery-two">
<div class="footer-gallery-thumb">
<a class="popup-img" href="assets/imgs/footer/footer-gallery7.png"><img src="assets/imgs/footer/footer-gallery7.png" alt="Footer Gellary Img"></a>
</div>
<div class="footer-gallery-thumb">
<a class="popup-img" href="assets/imgs/footer/footer-gallery8.png"><img src="assets/imgs/footer/footer-gallery8.png" alt="Footer Gellary Img"></a>
</div>
<div class="footer-gallery-thumb">
<a class="popup-img" href="assets/imgs/footer/footer-gallery9.png"><img src="assets/imgs/footer/footer-gallery9.png" alt="Footer Gellary Img"></a>
</div>
<div class="footer-gallery-thumb">
<a class="popup-img" href="assets/imgs/footer/footer-gallery10.png"><img src="assets/imgs/footer/footer-gallery10.png" alt="Footer Gellary Img"></a>
</div>
<div class="footer-gallery-thumb">
<a class="popup-img" href="assets/imgs/footer/footer-gallery11.png"><img src="assets/imgs/footer/footer-gallery11.png" alt="Footer Gellary Img"></a>
</div>
<div class="footer-gallery-thumb">
<a class="popup-img" href="assets/imgs/footer/footer-gallery12.png"><img src="assets/imgs/footer/footer-gallery12.png" alt="Footer Gellary Img"></a>
</div>
</div>
</div>
</div>
<div class="col-8 col-sm-6 col-lg-3">
<div class="footer-social-widget footer-common-widget">
<h4 class="footer-four-widget-title">
Explore
</h4>
<div class="footer-social-icon">
<ul>
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fa-brands fa-linkedin-in"></i></a></li>
<li><a href="#"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer-style-four-bottom wow fadeInUp" data-wow-delay=".3s">
<div class="footer-single-contact wow fadeInUp">
<div class="footer-contact-icon">
<i class="fa-solid fa-location-dot"></i>
</div>
<div class="footer-contact-text">
<h6>Our Location</h6>
<p>4517 Washington. wnchester Kentucky 39495</p>
</div>
</div>
<div class="footer-single-contact wow fadeInUp">
<div class="footer-contact-icon">
<i class="fa-solid fa-paper-plane"></i>
</div>
<div class="footer-contact-text">
<h6>Email address</h6>
<a href="mailto:demoer1234@gmail.com">demoer1234@gmail.com</a>
<a href="mailto:enva123@gmail.com">enva123@gmail.com</a>
</div>
</div>
<div class="footer-single-contact wow fadeInUp">
<div class="footer-contact-icon">
<i class="fa-solid fa-hourglass-start"></i>
</div>
<div class="footer-contact-text">
<h6>Opning Hours</h6>
<p>Mon to Sat day 7:00am - 9:00pm
Sunday <button type="button">Closs</button></p>
</div>
</div>
<div class="footer-single-contact footer-single-contact-four wow fadeInUp">
<div>
<p>More info call us</p>
<a href="tel:(123)0000-6666">(123) 0000 - 6666</a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer area end -->
We've used the following fonts, free icons and plugins as listed:
Thank you for purchasing my template.
If you have any questions that are
beyond the scope of this help file, please feel free to open a new ticket at our
Support
forum
-----------------------------------------------------
Version 1.0
-----------------------------------------------------
- Initial Release Giving-Heart
- Upadate all plugins / Library
- Improve site speed and image optimization
- Improve Responsive issues
- Product design quality enhanced
If you need to theme customization or make custom theme or template. Please, you can contact us for this.
Contact Us
If you need to theme customization or make custom theme or template. Please, you can contact us for this.
Contact