Xfund Documentation

Welcome

Thanks for purchasing our template :)

It is our great pleasure that you purchased our template. And we want to tell you that you don't need to write any codes for this template. Just follow some instructions for customizing the template.

Features

  • One Home Page
  • Total 13 HTML Files
  • Fully responsive
  • Clear & Neat design
  • Bootstrap Based
  • Font Awesome Icon
  • Line Awesome Icon
  • Nice portfolio and Blog
  • Lightcase
  • Nice Select
  • Smooth animation
  • Browser compatibility (IE10+, Chrome, Safari, Firefox, Opera)
  • Well documented

Folder Arrange

Unzip the archive and find out the folder "demo-file". There are all the template files in this folder. You can open the following files for viewing in browser.

  1. assets/css — folder with css files.
  2. assets/fonts — folder with icon fonts.
  3. assets/images — folder with image files.
  4. assets/js — folder with Javascript files.

  5. index.html — Home Page One.
  6. about.html — About us Page.

  7. and Some other HTML Files
    8. .

Logo Type

To change logotype in the navigation panel, find image images/logo.png and replace it with your logo.

Note: Keep your logo inside the imaegs folder. The logo size should be minimum 170x50 pixel.


This is logo and navigation codes.

  <header class="header-section">
    <div class="header-bottom">
      <div class="container">
        <div class="header-area">
          <div class="logo">
            <a href="index.html">
              <img src="assets/images/logo.png"/>
            <a/>
          </div>
          <ul class="main-menu">
            <li>
              <a href="#0">Home<a/>
            </li>
                <li>
                  <a href="about.html">About Us<a/>
                </li>
                <li>
                  <a href="#0">Campaign<a/>
                  <ul class="submenu">
                    <li>
                      <a href="campaign.html">Campaign<a/>
                    </li>
                    <li>
                      <a href="campaign-details.html">Campaign Details<a/>
                    </li>
                  </ul>
                </li>
                <li>
                  <a href="#0">Pages<a/>
                  <ul class="submenu">
                    <li>
                      <a href="gallery.html">Gallery<a/>
                    </li>
                    <li>
                      <a href="faq.html">Faq<a/>
                    </li>
                    <li>
                      <a href="privacy.html">Privacy<a/>
                    </li>
                    <li>
                      <a href="app.html">Download App<a/>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li>
              </ul>
            </li>
            <li>
              <a href="#0">Event<a/>
              <ul class="submenu">
              <li>
                <a href="blog.html">Event<a/>
              </li>
              <li>
                <a href="blog-details.html">Event Details<a/>
              </li>
              </ul>
            </li>
            <li>
              <a href="contact.html">Contact<a/>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </header>

Here is your main logo code. To add your logo, replace logo.png from images/logo/ directory with your logo in PNG format.

<img class="site-logo" src="assets/images/logo.png" alt="logo">

Tab Customization

This is your default slider structure.

  <div class="tab">
    <ul class="tab-menu">
      <li class="active">Tab1</li>
      <li>Tab2</li>
      <li>Tab3</li>
      <li>Tab4</li>
      <li>Tab5</li>
    </ul>
      <div class="tab-area">
        <div class="tab-item active">
          --------
        <div/>
        <div class="tab-item">
          --------
        <div/>
        <div class="tab-item">
          --------
        <div/>
        <div class="tab-item">
          --------
        <div/>
        <div class="tab-item">
          --------
        <div/>
      </div>
    </div>
  </div>

To change the tab heading you will need to edit in the tag <li>Here is your heading</li> and add your text in the middle of the tag.

To change the tab tagline you will need to edit in the tag <p>Here is your tagline</p> and add your text in the middle of the tag.



Section Styles

Here is your section structure.

  <section class="section-class ptb-120">
    <div class="container">
      <div class="row">					
        <div class="section-header">
          <h2 class="section-title">Your section heading</h2>
        </div>
      </div>
      <div class="row">
      ...
      </div>
    </div>
  </section>

In the class="section-class" you can replace with your desired class.

the class pt and pb is the space between each sections.

And in the section-header div you can add your heading of sections and tagline of sections.

You can add your content on the 2nd row div.



Section With Background

  <section class="section-class ptb-120 bg-img">
    <div class="container">
      ...
    </div>
  </section>

you can select background color between white and cloud color. To add cloud color, just simply add the class bg-img in the section class.



Xfund Utility

You can use next modification classes to set block margins and paddings:


margin-top

mt-10 mt-20 ... mt-50

margin-bottom

mb-10 mb-20 ... mb-50

padding-top

pt-10 pt-20 ... pt-50

padding-bottom

pb-10 pb-20 ... pb-50



Data-filter attribute is the name of the category of the works, on the basis of which the dynamic filtering is made.


Lightbox Project Item

The lightbox with photo project item structure looks like this:

    <div class="gallery-area">
      <div class="gallery-item">
      </div>
      <div class="gallery-item">
      </div>
      <div class="gallery-item">
      </div>
      <div class="gallery-item">
      </div>
      <div class="gallery-item">
      </div>
      <div class="gallery-item">
      </div>
    </div>


Contact Us Customization

Edit contact information in assets/contact.html — folder.



Custom Appear Animation

If you want to use appear animation for some element, you need to add class wow fadeIn to this element and set data attribute like this:

  <div class="wow fadeIn" data-wow-delay="0.1s" data-wow-duration="2s">
  ...
  </div>

The full list of appear animation effects you can find here - http://daneden.github.io/animate.css/



Installation

01. FTP Upload

  • Open Your FTP manager and connect to your hosting
  • Browse to required directory(Normally public_html)
  • Upload the files inside buyer-file folder

02. Pages

  • index.html for Home Page One
  • about.html for About
  • campaign.html for Campaign
  • campaign-details.html for Campaign Details
  • app.html for Download App
  • gallery.html for Gallery
  • privacy.html for Privacy
  • faq.html for Faq
  • event.html for Event
  • event-details.html for Event Details
  • register.html for Sign Up
  • login.html for Sign In
  • contact.html for Contact

03. Fonts

      <!--Google Fonts-->
      https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&family=Paytone+One&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet

05. Source File (CSS)

      <link rel="stylesheet" href="assets/css/bootstrap.min.css">
      <link rel="stylesheet" href="assets/css/animate.css">
      <link rel="stylesheet" href="assets/css/fontawesome.css">
      <link rel="stylesheet" href="assets/css/lineawesome.css">
      <link rel="stylesheet" href="assets/css/swiper.min.css">
      <link rel="stylesheet" href="assets/css/nice-select.css">
      <link rel="stylesheet" href="assets/css/main.css">

06. Source File (JS)

      <script src="assets/js/jquery-3.6.0.min.js">
      <script src="assets/js/bootstrap.min.js">
      <script src="assets/js/lightcase.js">
      <script src="assets/js/swiper.min.js">
      <script src="assets/js/wow.min.js">
      <script src="assets/js/nice-select.js">
      <script src="assets/js/main.js">
    

      <div class="footer-bottom">
          <div class="container">
            <p>
              Copyright ©2020 <a href="#0">Xfund</a>
              All Rights
              reserved
            </p>
        </div>
      </div>