MastCard 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 23 HTML Files
  • Fully responsive
  • Clear & Neat design
  • Bootstrap Based
  • Font 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. dashboard.html — Dashboard.
  7. and Some other HTML Files

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">
      <div class="header-bottom-area">
        <div class="container">
          <div class="header-menu-content">
            <nav class="navbar navbar-expand-lg p-0">
              <a class="site-logo site-title" href="index.html"><img
                src="assets/images/logo/logo.png"
                alt="site-logo"></a>
                <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
                <span class="fas fa-bars"></span>
                </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav main-menu ms-auto me-5">
                <li><a href="index.html" class="active">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="buy-cards.html">Buy Cards</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="#0">Pages <i class="fas fa-angle-down ms-1"></i></a>
              <ul class="sub-menu">
                <li><a href="app.html">Download App</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="blog-details.html">Blog Details</a></li>
                <li><a href="faq.html">Faq</a></li>
                <li><a href="privacy.html">Privacy Policy</a></li>
                <li><a href="login.html">Login</a></li>
                <li><a href="register.html">Register</a></li>
                <li><a href="404.html">404 Page</a></li>
            </ul>
          </li>
          <li><a href="dashboard.html">Dashboard</a></li>
       </ul>
        <div class="header-action">
          <a href="app.html" class="btn--base">Download App</a>
        </div>
     </div>
     </nav>
    </div>
    </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="col-lg-3 col-md-3 col-12">
    <div class="tab-col-1 rounded-3 pb-2">
      <h3 class="fs-5 fw-bold px-3 pt-4 pb-2">All Details</h3>
      <div class="">
        <div
          class="nav flex-column nav-pills me-3"
        id="v-pills-tab"
        role="tablist"
        aria-orientation="vertical"
      >
        <button
          class="nav-link active fw-bold fs-6 my-1 text-start ms-3"
          id="v-pills-menu-tab"
          data-bs-toggle="pill"
          data-bs-target="#v-pills-menu"
          type="button"
          role="tab"
          aria-controls="v-pills-menu"
          aria-selected="true"
        >
          Tab 1
        </button>
        <button
          class="nav-link fw-bold fs-6 my-1 text-start ms-3"
          id="v-pills-best-product"
          data-bs-toggle="pill"
          data-bs-target="#v-pills-messages"
          type="button"
          role="tab"
          aria-controls="v-pills-messages"
          aria-selected="false"
        >
         Tab 2
        </button>
        <button
          class="nav-link fw-bold fs-6 my-1 text-start ms-3"
          id="v-pills-reviews-tab"
          data-bs-toggle="pill"
          data-bs-target="#v-pills-reviews"
          type="button"
          role="tab"
          aria-controls="v-pills-reviews"
          aria-selected="false"
        >
          Tab3
        </button>
        </div>
      </div>
    </div>
  </div>


    <div class="tab-content" id="v-pills-tabContent">
    <div
      class="tab-pane fade show active"
      id="v-pills-menu"
      role="tabpanel"
      aria-labelledby="v-pills-menu-tab"
      tabindex="0"
    >
      <h3 class="fs-5 fw-bold pt-4 pb-4">Tab Items 1</h3>
      <div>------------</div>
    </div>
    <div
      class="tab-pane fade pb-5"
      id="v-pills-reviews"
      role="tabpanel"
      aria-labelledby="v-pills-reviews-tab"
      tabindex="0"
    >
      <h3 class="fs-5 fw-bold pt-4 pb-4">Tab Items 2</h3>
      <div>------------</div>
    </div>

    <div
      class="tab-pane fade"
      id="v-pills-messages"
      role="tabpanel"
      aria-labelledby="v-pills-best-product"
      tabindex="0"
    >
      <h3 class="fs-5 fw-bold pt-4 pb-4">Tab Items 3</h3>
      <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 pt-80">
   <div class="container mx-auto">
     <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.



MastCard 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 fadeIn to this element and set data attribute like this:

  <div data-aos="fade-in" >
    ...
  </div>
        

The full list of appear animation effects you can find here - https://github.com/michalsnik/aos


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
  • buy-cards.html for Buy Cards
  • contact.html for Contact
  • app Download.html for App Download
  • blog.html for Blog
  • blog-details.html for Blog Details
  • faq.html for Faq
  • privacy.html for Privacy
  • login.html for Login
  • register.html for Register
  • 404.html for Error Page
  • dashboard.html for Full Dashboard

03. Fonts

<!--Google Fonts-->
https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap"

        

05. Source File (CSS)

 <link rel="stylesheet" href="assets/css/bootstrap.min.css">
 <link rel="stylesheet" href="assets/css/fontawesome.css">
 <link rel="stylesheet" href="assets/css/chosen.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/chosen.jquery.js">
<script src="assets/js/swiper.min.js">
<script src="assets/js/main.js">
        

<div class="footer-bottom">
  <div class="container">
  <p>
    Copyright ©2022 <a href="https://mastcard.net/">Mastcard</a>
    All Rights
    reserved
  </p>
  </div>
</div>