Oxpitan

- Nonprofit Charity and Fundraising HTML5 Template

Created : 1/07/2019
By : Layerdrops
Email : Layerdrops.com

Thank you for purchasing Oxpitan - Nonprofit Charity and Fundraising HTML5 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 or put a ticket at Support Center. Thank you so much!

We continue to add new things to make our template more beautiful and strong every day. You will be free to use all our updates.

Template Features


  • Owl-carousel Slider
  • Clean & Modern Design
  • Clean Code
  • Font-awesome icon
  • fontello icon
  • Bootstrap 4
  • Barfiller js
  • wow js
  • Lightbox
  • Counter up
  • jQuery Nice Select
  • HTML5 Validated Code Valid HTML
  • CSS3 Validated Code Valid CSS!
  • BEM Structure (Block, Element, methodology)
  • Modular Structure
  • Google Map
  • Magnific-popup
  • Fully Responsive Design
  • All files are well commented
  • Crossbrowser Compatible with IE10+, Firefox, Safari, Opera, Chrome
  • Detailed Documentation

Installation


Follow the steps below to setup your site template:

  1. FTP Upload:

  2. Unzip the downloaded package and open the Oxpitan/main-file folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your own website.
  3. You need to upload all files inside the Ostion/main-file folder to your website root.
  4. Oxpitan/css css files
  5. Oxpitan/fonts Icon, fonts files
  6. Oxpitan/images images files
  7. Oxpitan/js Javascript files
  8. You are now good... Start adding your content/images generate your beautiful brand new website for your awesome users.

HTML Structure


The html template uses Latest Bootstrap 4 with valid HTML5 tags. This template is a responsive layout with 4 column Support column. All of the information in content area is nested within a class and comes with predefined classes.

Basic Grid HTML

For a simple two column layout, create a .container and add the appropriate number of .col-md* columns.

Given this example, we have .col-md-4 and .col-md-8, making for 12 total columns and a complete row.


...
...

Nesting Columns

To nest your content with the default grid, add a new .container and set of .col-md* columns within an existing .col-md* column. Nested rows should include a set of columns that add up to the number of columns of its parent.


Level 1 column
Level 2
Level 2
Level 2 column

CSS Files Structure


There are three main files are in this template. The first one bootstrap.min.css, second one is style.css which for this template and third one is responsive.css to control responsive layouts.

If you would like to edit a specific section of the site, then go to css folder and open style.css file, and then scroll down until you find the appropriate style that needs to be edited.


These are the css files that are loaded into templates in the top of document.












                

Font

We used two font from the google font library you can change the font from google font library or with your bought font


@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,900&display=swap');
                

Logo and Title setting


To change the logo, and favicon image of your site. you go to top of the documentation, then change the src with your logo image like images/logo.png

Title Setting

Favicon img setting

Logo Setting

Jquery and javascript


This theme imports three types of Javascript files.

  • jQuery
  • Custom scripts (main.js)
  • Some plugins

  • jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  • Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.

In addition to the custom scripts, I have implemented few "tried and true" plugins to create the effects. This plugin is packed, so you won't need to manually edit anything in the file. The only necessary thing to know is how to call the method



These are the JS files that are loaded into templates in end of the Body Section.


















                

Google Map Settings


For editing default contact map you have to edit it's data-attribute. See the screenshot below for more clarification

Google map scripts

Revolution Slider Settings


we use slider revolution for all two homepages, if you want to edit content, transition, and image, then see the example on the below,
you will change the all revolution slider content like these example.

Open the document and edit with your own content like these example.


NOTE: you wil change the other slider's content like these example.

Tutorial


NAVMENU


This is the basic HTML structure.



Add your own menu item to that ul li item. and if you want to add dropdown menu just make a nesting ul li ul with class of dropdown-menu-item



FOOTER COPYRIGHT




                

replace "© copyright by Layerdrops" with the copyright info.

Sources and Credits


Images used in this template from

Shutterstock

Fotolia

iStock

Pixels


Font Used in the template from google fonts library, you can find them on Google Fonts API

Font Used is:

Poppins

Playfair Display


CSS files:

bootstrap.min.css (in css Folder)

font-awesome.min.css (in css Folder)

owl.carousel.min.css (in css Folder)

owl.theme.default.min.css (in css Folder)

fontello.css (in css Folder)

magnific-popup.css (in css Folder)

style.css (in css Folder)

responsive.css (in css Folder)


Sliders Used is :

Owl Carousel


Plugins Used Are :

jquery.min.js (can be located in js folder)

bootstrap.min.js (can be located in js folder)

Owl-carousel (can be located in js folder)

waypoint.min.js (can be located in js folder)

jquery.counterup.min.js (can be located in js folder)

magnific-popup.min.js (can be located in js folder)

isotop.js (can be located in js folder)

jQuery Nice Select (can be located in js folder)

Gmap.js (can be located in js folder)

Every Code is properly commented for Editing Ease.

Support


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 any queries, please feel free to contact us at Support Center.

Email Us at: layerdrops@gmail.com