Daan - Charity Non-Profit HTML Template

Daan is a clean, fully responsive, highly flexible and beautifully designed template which is provided with two (2) unique homepage layouts to best suit the advanced requirements of your Charity Website Template or NGO Website Template website. To promote the ranking of your site, our skilled professionals have constructed it with latest search engine friendly parameters, viz. built-in SEO, fast loading and cross browser compatibility. Daan is an all-encompassing template which simultaneously fits for the cause of Charity, Nonprofit, One Cause, NGO and other non-profit projects. The design quality is exceptionally high, and the coding standards touch the pinnacle of perfections. There are separate pages for events or causes. Above all, it is for the first time that you will be able work with an HTML template in a totally coding-free environment because everything is provided as pre-designed. The personalization has also been made extremely easy.

DAAN Features

  • Super Responsive
  • 2 Fully Equiped Homepages
  • Revolution Slider
  • Latest Version Of Bootstrap
  • High Quality Graphics
  • Quick Loading
  • SEO Optimized
  • Clean & Well Commented Code
  • 2 Unique and Innovative Header Styles
  • Light and Smooth Hover Styles
  • Eye Catching Design
  • Touch Supported Mobile Menu
  • Font Awesome Icons Included
  • Multicolor Options
  • Well Commented CSS
  • Neat, clean, symmetrical and attractive layout
  • Owl Carousel 2
  • A number of ready-to-use Widgets included
  • Regular Updates with advanced new features
  • Complete, comprehensive and detailed documentation

DAAN Files Included

CSS FILES:

color.css

This is the color scheme file. In this file the special classes are written in which we wanted to add the color of our color scheme. This file is created so you can be able to change the color scheme of your website according to your need. In How To's section of the documentation you will be guided step by step about how to change the color scheme of your website.

responsive.css

This file is activated automatically when the template is browsed from smaller screen or devices. It makes the templates smart enough to recognize the screen size and adjust it self best according to the screen size.

style.css

This is the main css file of the template. All the stylings of the sections are kept in this file.

bootstrap.min.css

This is the main minified bootstrap file. As the theme based on the bootstrap framework so inclusion of this file enables the styling features of bootstrap.

icons.css

This files contains styles of the fontawesome icons.

JQUERY FILES:

counter.js

This file enables the feature of automatic counting starts when the section appears on screen.

bootstrap.min.js

This is customized bootstrap file which is used for the tabs functionality in the template provided by bootstrap.

html5lightbox.js & froogaloop2.min.js

This is the Lightbox plugin file which is used in different section on different pages. It enables the feature of image lightbox in the template.

isotope.js

This is one of the popular plugin which enable the functionality of filteration and masonary grids in the template.

jquery.min.js

This is the main jquery file that makes all other files work in this template.

owl.carousel.min.js

This is one of the famous carousel plugin file "Owl Carousel", All the carousel in the template are made with the help of this plugin.

script.js

This file contains some small scripts used in the templates

DAAN How To's

HOW TO GENERATE API KEY TO ENABLE MAP?

The map in the download version will not work until you generate your own api key from your google account. Go to https://developers.google.com/maps/documentation/javascript/get-api-key. Click on get a key button and genrate your key.

Now, Go to the HTML file your page and scoll down and locate the following code:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&" type="text/javascript">

In the above mentioned code replace YOUR_API_KEY with the key your genrated key. The Google map will now work perfectly on your website.

HOW TO MANAGE GAPS BETWEEN SECTIONS?

To manage gaps between two sections a few classes are created and used in the template. You can understand these classes easily and use them according to your need (if required). For every section there is a <div> with class "block". This class sets a padding / space of 100px from top and bottom of that section.

Suppose, There are two sections one after another and both with white backgrounds. So the block class in the both section will create extra gap between them, as the bottom gap of 100px of the top section and top gap of 100px of the bottom sections will join and becomes a gap of 200px, which is not that we require.

There are two ways to resolve this. There is a class remove-gap which removes the top gap from the block class. You can use this class in the bottom section to remove its top gap of 110px in this way. <div class="block remove-gap"> This will resolve the issue. Or you can use class remove-bottom which removes the bottom gap from the block class. You can use this class in the top section to remove its bottom gap of 100px in this way. <div class="block remove-bottom">

HOW TO CHANGE COLOR SCHEME?

To change the color scheme of your template you need to go to css folder given in the package and locate color.css file and open it in any editor. In this file locate for the properties "background-color" , "color" and "border-color". By default the blue color is given in template. Just replace the 6 digit color code with the one you like. and the whole color scheme of your website will be changed just in few seconds.