“Gracious - Charity and Donation HTML Template” by “Mannat Studio”

Created: 08 Jan, 2021

Email: mannatstudio.themes@gmail.com

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. Contact Form
  5. Sources and Credits

A) HTML Structure - top

Gracious template is based on Bootstrap 4 - a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.

Bootstrap's base grid is a variation of the 1170px grid system. The syntax is simple and it's effective cross browser, but the awesome part is that it also has the flexibility to go mobile like a champ. You can really easily customize all part of site or build new.

 

1. Firstly add 1170px container
    <div class="container"></div>
    <!-- end -->
2. Secondly add a few columns from one to twelve (that's max columns)
    <div class="container">
        <div class="col-md-6">1/2 Column - Content Here</div>
        <div class="col-md-6">1/2 Column - Content Here</div>
    </div>
    <!-- end -->

This Template is a Liquid Responsive layout with 5 primery section that called :
2) header
3) container (Content)
4) footer

we have try to write simple code for better usability when you want edit this. Our tags is very clear for example: if you want change "logo" just change address in this tag (follow picture) under header section

HTML Stucture


B) CSS Files and Structure - top

we are using 9 CSS files for main layout and 13 CSS files for color variations in this template: "base.css" - "theme-default.css" - "bootstrap.min.css" - "flexslider.css" - "font-awesome.min.css" - "jquery.fancybox.css" - "media_queries.css" - "portfolio.css" etc.. - contains all general styling, such as colors, font-sizes, etc. but also all of the specific stylings for the page and slider in home page

The "style.css" file is separated into sections using:

CSS Structure.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

I.E. you want to change the header height:

/* HEADER */
header { padding:5px 0 0 0; background:#f6f6f6; }

C) JavaScript - top

This template imports 18 Javascript files.

  1. jquery.min.js
  2. modernizr.latest.js
  3. bootstrap-min.js
  4. owl.carousel.min.js
  5. theme-custom.js
  6. masonry.pkgd.min.js
  7. jquery.flexslider-min.js
  8. jquery.fancybox.pack.js
  9. stellar/js
  10. jquery.mixitup.min.js
  11. jquery.appear.min.js
  12. jquery.themepunch.revolution.min.js
  13. jquery.validate.min.js
  14. jquery.gmap.min.js

D) Contact Form - top

we are design unique and simple php contact form you can edit 1 file "contact.php"

The PHP contact form allows your website visitors to send you a Email via a contact form.

To make this contact form work you need to just edit the "contact.php" file.

Change following lines below on this picture to make it work:

PHP Mail


F) Sources and Credits - top

I've used the following images, icons or other files as listed.


Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the templates on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

www.mannatstudio.com

Go To Table of Contents