XPay 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 9 HTML Files
  • Fully responsive
  • Clear & Neat design
  • Bootstrap Based
  • Font Awesome Icon
  • Line Awesome Icon
  • Nice product and Product Details
  • Smooth Scroll
  • Swiper Slide
  • 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 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="service.html">Services<a/>
                </li>
                <li>
                  <a href="faq.html">Faq<a/>
                </li>
                <li>
                  <a href="#0">Pages<a/>
                  <ul class="submenu">
                    <li>
                      <a href="app.html">Download App<a/>
                    </li>
                    <li>
                      <a href="privacy.html">Privacy Policy<a/>
                    </li>
                    <li>
                      <a href="register.html">Register<a/>
                    </li>
                    <li>
                      <a href="login.html">Login<a/>
                    </li>
                    <li>
                      <a href="404.html">Error page<a/>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <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.



XPay 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.


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
  • service.html for Services
  • faq.html for FAQ
  • app.html for Download App
  • privacy.html for Privacy Policy
  • register.html for Register
  • login.html for Login
  • 404.html for Error Page
  • contact.html for Contact

03. Fonts

      <!--Google Fonts-->
      hhttps://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&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/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/pace.js">
      <script src="assets/js/main.js">
    

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