Anftiz Documentation

Getting Started

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

  • Five Home Pages (More is comming soon)
  • Total 35+ HTML Files
  • Fully responsive
  • Clear & Neat design
  • Bootstrap Based
  • Responsive font size
  • Icofont Icon
  • Nice explore and Blog
  • Smooth animation
  • Browser compatibility (IE10+, Chrome, Safari, Firefox, Opera)
  • Well documented

Folder Arrange

Unzip the archive and find out the folder "buyer-file". There are all the template files in this folder. You can open the following files for your customization.

  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. assets/sass — folder with SASS/SCSS files.

  6. index.html — Home Pages.
  7. explore.html — Explore Pages.
  8. author.html — Author Page.
  9. blog.html — Blog Pages.
  10. blog-single.html — Blog Single Pages.
  11. auction.html — Auction Page.

  12. and Some other HTML Files
    13. .

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
  • That's all !

02. All HTML Pages

  • index.html for Home Page 1
  • index-2.html for Home Page 2
  • index-3.html for Home Page 3
  • index-4.html for Home Page 4
  • index-5.html for Home Page 5
  • explore.html for explore nft page
  • explore-2.html for explore nft page
  • create-nft.html for Mint or create a NFT
  • create-variation.html for NFT Creating variation (Single or Multiple)
  • collection-single.html for NFT Collection Page
  • all-author.html for authors Page
  • all-author-2.html for authors style 2
  • author.html for author single Page
  • activity.html for activity Page
  • item-details.html for nft item details Page
  • wallet.html for Wallet connect pages
  • blog.html for Blog Page
  • blog-2.html for Blog style 2 Page
  • blog-3.html for Blog style 3 Page
  • blog-single.html for Blog Details Page
  • blog-single-2.html for Blog Details style-2 Page
  • help.html for Help center page
  • help-single.html for Help center details page
  • signin.html for Sign In Page
  • signup.html for Sign Un Page
  • policy.html for Privacy & Policy Page
  • terms.html for Terms & Condition Page
  • signup.html for Sign Un Page
  • forgot-pass.html for Forgot password Page
  • auction.html for Auction Page
  • contact.html for Contact Us
  • contact-2.html for Contact Style 2
  • coming-soon.html for Coming Soon Page
  • maintainance.html for Maintainance mode page
  • error-page.html for Error Page

03. Fonts

Go to Google Fonts and select your favorite fonts and then just replace the code in assets/sass/sub-stylesheet/base/fonts.scss file

      <!--Google Fonts-->
      
      @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

05. Source File (CSS)

All required css files have been linked like below-

    <!-- ====== All css file ========= -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css//icofont.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="assets/css/style.css">

06. Source File (SASS)

Here is the SCSS folder structure example-


        *style.scss
              ----sub-stylesheet
                  ----abstracts
                      _mixins.scss
                      _variables.scss

                  ----base
                      _animation.scss
                      _extend.scss
                      _fonts.scss
                      _typography.scss
                      _utilities.scss

                  ----components
                      _banner.scss
                      _blog.scss
                      _coming-soon.scss
                      _contact.scss
                      _creat-nft.scss
                      _error-page.scss
                      _footer.scss
                      _global.scss
                      _header.scss
                      _home.scss
                      _help.scss
                      _item-details.scss
                      _preloader.scss
                      _profile.scss
                      _rank.scss
                      _registration.scss
                      _widget.scss

                  ----vendors
                      _normalize.scss
                      _rfs.scss

06. Source File (JS)

All required css files have been linked like below. if you need any customization in JAVASCRIPT you have to edit the function.js file. 

      <!-- All Scripts -->
      <script src="assets/js/jquery-3.6.0.min.js"></script>
      <script src="assets/js/bootstrap.bundle.min.js"></script>
      <script src="assets/js/waypoints.min.js"></script>
      <script src="assets/js/swiper-bundle.min.js"></script>
      <script src="assets/js/countdown.min.js"></script>
      <script src="assets/js/jquery.counterup.min.js"></script>
      <script src="assets/js/wow.min.js"></script>
      <script src="assets/js/isotope.pkgd.min.js"></script>
      <script src="assets/js/functions.js"></script>

This is site Menu code Pattern, if you wanna change your menu just replace the name of the menu

<div class="header__menu ms-auto">
      <ul class="header__nav mb-0">
          <li class="header__nav-item">
              <a class="header__nav-link active home-2" href="#" role="button" data-bs-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false" data-bs-offset="0,10">Home</a>

              <ul class="dropdown-menu header__nav-menu">
                  <li><a class="drop-down-item active home-2" href="index.html">Home 1</a></li>
                  <li><a class="drop-down-item" href="index-2.html">Home 2</a></li>
                  <li><a class="drop-down-item" href="index-3.html">Home 3</a></li>
              </ul>
          </li>
          <li class="header__nav-item">
              <a class="header__nav-link" href="#" role="button" data-bs-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false" data-bs-offset="0,10">NFTs</a>

              <ul class="dropdown-menu header__nav-menu">
                  <li><a class="drop-down-item" href="create-variant.html">Create Variation</a></li>
                  <li><a class="drop-down-item" href="create-nft.html">Create NFT</a></li>
                  <li><a class="drop-down-item" href="item-details.html"> NFT Details</a></li>
                  <li><a class="drop-down-item" href="explore.html">Explore 1</a></li>
                  <li><a class="drop-down-item" href="explore-2.html">Explore 2</a></li>
                  <li><a class="drop-down-item" href="auction.html">Auction Page</a></li>
                  <li><a class="drop-down-item" href="collection-single.html"> NFT Collection</a></li>
                  <li><a class="drop-down-item" href="wallet.html"> Wallet</a></li>

              </ul>
          </li>
          <li class="header__nav-item">
              <a class="header__nav-link" href="#" role="button" data-bs-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false" data-bs-offset="0,10">Author</a>

              <ul class="dropdown-menu header__nav-menu">
                  <li><a class="drop-down-item" href="all-authors.html">All Author</a></li>
                  <li><a class="drop-down-item" href="all-authors-2.html">All Author 2</a></li>
                  <li><a class="drop-down-item" href="author.html">Author Single</a></li>
                  <li><a class="drop-down-item" href="rank.html">Author Rank </a></li>
              </ul>
          </li>
          <li class="header__nav-item">
              <a class="header__nav-link" href="#" role="button" data-bs-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false" data-bs-offset="0,10">Blog</a>

              <ul class="dropdown-menu header__nav-menu">
                  <li><a class="drop-down-item" href="blog.html">Blog 1</a></li>
                  <li><a class="drop-down-item" href="blog-2.html">Blog 2</a></li>
                  <li><a class="drop-down-item" href="blog-3.html">Blog 3</a></li>
                  <li><a class="drop-down-item" href="blog-single.html">Blog Single </a></li>
                  <li><a class="drop-down-item" href="blog-single-2.html">Blog Single 2</a></li>
              </ul>
          </li>
          <li class="header__nav-item">
              <a class="header__nav-link" href="#" role="button" data-bs-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false" data-bs-offset="0,10">Pages</a>

              <ul class="dropdown-menu header__nav-menu" data-popper-placement="top-start">
                  <li><a class="drop-down-item" href="activity.html">Activity</a></li>
                  <li><a class="drop-down-item" href="help.html">Help Center</a></li>
                  <li><a class="drop-down-item" href="help-single.html">Help Center Single</a></li>
                  <li><a class="drop-down-item" href="policy.html">Privacy & Policy</a></li>
                  <li><a class="drop-down-item" href="terms.html">Terms & Condition</a></li>
                  <li><a class="drop-down-item" href="404.html">404</a></li>
                  <li><a class="drop-down-item" href="coming-soon.html">Coming Soon</a></li>
                  <li><a class="drop-down-item" href="maintainance.html">Maintainance Mode</a></li>
                  <li><a class="drop-down-item" href="signin.html">Sign In</a></li>
                  <li><a class="drop-down-item" href="signup.html">Sign Up</a></li>
                  <li><a class="drop-down-item" href="forgot-pass.html">Forgot Password</a></li>
              </ul>
          </li>
          <li class="header__nav-item">
              <a class="header__nav-link" href="#" role="button" data-bs-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false" data-bs-offset="0,10"><svg
                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                      <path
                          d="M12,10a2,2,0,1,0,2,2A2,2,0,0,0,12,10ZM5,10a2,2,0,1,0,2,2A2,2,0,0,0,5,10Zm14,0a2,2,0,1,0,2,2A2,2,0,0,0,19,10Z" />
                  </svg></a>

              <ul class="dropdown-menu header__nav-menu">
                  <li><a class="drop-down-item" href="contact.html">Contact </a></li>
                  <li><a class="drop-down-item" href="contact-2.html">Contact 2 </a></li>
                  <li><a class="drop-down-item" href="coming-soon.html">Coming soon</a></li>
              </ul>
          </li>
      </ul>
  </div>

To change the menu name you will need to edit in the tag <li><a href="#">menu name </a> </li> and add your text in the middle of the tag.



2. Logo Change

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

  <div class="header__logo">
    <a href="index.html">
      <img src="assets/images/logo/logo.png" alt="logo">
    </a>
  </div>
Note: Keep your logo inside the ./assets/images/logo folder. The logo size should be maximum 142x23 pixel.


Components customization


01. Section structure

Here is your section structure.

<section class="xyz-section padding-top padding-bottom">
    <div class="container">
        <div class="section-header">
          ....
        </div>
        <div class="section-wrapper">
            <div class="row">
              ....
            </div>
        </div>
    </div>
</section>

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

padding-top is used for the space top of the sections.

padding-bottom is used for the space bottom of the 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 .section-wrapper div.


2.NFT item coding structure

There is a common markup for the nft-item. You can get different item styles by adding style class to the item or some markup changing. For example, if you want to use the item for auction, it will deal with the list of countdowns, and if you want to see it without auction, it will be commented.

Also, if you add style (for example style-2,style-3,blog-style) utility classes to the nft-item for different styles, you will be able to see different styles (in that case you have to pay attention to the markup).

You can see the example below to be clearer -


Item for auction
  <div class="nft-item">
    <div class="nft-inner">
    <!-- nft top part -->
    <div class="nft-item-top d-flex justify-content-between align-items-center">
      <div class="author-part">
        <ul class="author-list d-flex">
          <li class="single-author">
          <a href="author.html"><img src="assets/images/seller/01.png"
          alt="author-img"></a>
          </li>
          <li class="single-author d-flex align-items-center">
          <a href="#" class="veryfied"><img src="assets/images/seller/01.gif"
          alt="author-img"></a>
            <h6><a href="author.html">Jhon Doe</a></h6>
          </li>
        </ul>
      </div>
      <div class="more-part">
        <div class=" dropstart">
          <a class=" dropdown-toggle" href="#" role="button"
          data-bs-toggle="dropdown" aria-expanded="false"
          data-bs-offset="25,0">
          <i class="icofont-flikr"></i>
          </a>

          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"><span>
            <i class="icofont-warning"></i>
            </span> Report </a>
            </li>
            <li><a class="dropdown-item" href="#"><span><i
            class="icofont-reply"></i></span> Share</a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- nft-bottom part -->
    <div class="nft-item-bottom">
    <div class="nft-thumb">
    <img src="assets/images/nft-item/03.gif" alt="nft-img">

      <!-- nft countdwon -->
      <ul class="nft-countdown count-down"
      data-date="July 05, 2022 21:14:01">
        <li>
          <span class="days">34</span><span class="count-txt">D</span>
        </li>
        <li>
          <span class="hours">09</span><span class="count-txt">H</span>
        </li>
        <li>
          <span class="minutes">32</span><span class="count-txt">M</span>
        </li>
        <li>
          <span class="seconds">32</span><span class="count-txt">S</span>
        </li>
      </ul>
    </div>

    <div class="nft-content">
      <h4><a href="item-details.html">Walking On
      Air</a> </h4>
      <div class="price-like d-flex justify-content-between align-items-center">
        <p class="nft-price">Price: <span class="yellow-color">0.34 ETH</span>
        </p>
        <a href="#" class="nft-like theme-color" data-blast="color"><i
        class="icofont-heart"></i>
        230</a>
      </div>
    </div>
    </div>
  </div>
</div>

Item for Explore NFT's
  <div class="nft-item">
    <div class="nft-inner">
    <!-- nft top part -->
    <div class="nft-item-top d-flex justify-content-between align-items-center">
      <div class="author-part">
        <ul class="author-list d-flex">
          <li class="single-author">
          <a href="author.html"><img src="assets/images/seller/01.png"
          alt="author-img"></a>
          </li>
          <li class="single-author d-flex align-items-center">
          <a href="#" class="veryfied"><img src="assets/images/seller/01.gif"
          alt="author-img"></a>
            <h6><a href="author.html">Jhon Doe</a></h6>
          </li>
        </ul>
      </div>
      <div class="more-part">
        <div class=" dropstart">
          <a class=" dropdown-toggle" href="#" role="button"
          data-bs-toggle="dropdown" aria-expanded="false"
          data-bs-offset="25,0">
          <i class="icofont-flikr"></i>
          </a>

          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#"><span>
            <i class="icofont-warning"></i>
            </span> Report </a>
            </li>
            <li><a class="dropdown-item" href="#"><span><i
            class="icofont-reply"></i></span> Share</a></li>
          </ul>
        </div>
      </div>
    </div>

    <!-- nft-bottom part -->
    <div class="nft-item-bottom">
    <div class="nft-thumb">
    <img src="assets/images/nft-item/03.gif" alt="nft-img">

    <!-- ===========This part is commented -->

      <!-- nft countdwon -->
      <ul class="nft-countdown count-down"
      data-date="July 05, 2022 21:14:01">
        <li>
          <span class="days">34</span><span class="count-txt">D</span>
        </li>
        <li>
          <span class="hours">09</span><span class="count-txt">H</span>
        </li>
        <li>
          <span class="minutes">32</span><span class="count-txt">M</span>
        </li>
        <li>
          <span class="seconds">32</span><span class="count-txt">S</span>
        </li>
      </ul>

      <!-- ==========Comment end========= -->
    </div>

    <div class="nft-content">
      <h4><a href="item-details.html">Walking On
      Air</a> </h4>
      <div class="price-like d-flex justify-content-between align-items-center">
        <p class="nft-price">Price: <span class="yellow-color">0.34 ETH</span>
        </p>
        <a href="#" class="nft-like theme-color" data-blast="color"><i
        class="icofont-heart"></i>
        230</a>
      </div>
    </div>
    </div>
  </div>
</div>

Item style-2
<div class="nft-item style-2">
  <div class="nft-inner">
    <div class="nft-thumb">
      <img src="assets/images/nft-item/style-2/01.jpg" alt="nft-img">
    </div>

    <div class="nft-content">
      <div class="author-thumb">
        <a href="author.html" class="veryfied"><img
      src="assets/images/seller/04.png" alt="author-img"></a>
      </div>
      <div class="author-details">
        <h5><a href="author.html">Gihan Fernindo</a> </h5>
        <p class="nft-price yellow-color">$23,002.98</p>
      </div>
    </div>
  </div>
</div>

Item style-3
  <div class="nft-item style-3">
    <div class="nft-inner text-center">
      <div class="nft-thumb">
        <img src="assets/images/nft-item/style-3/01.png" alt="nft-img">
      </div>
      <div class="nft-content">
        <div class="author-details">
          <h4>Set Up Your Wallet</h4>
          <p>Click Create & set up your colecton
          Add social links and a description profile
          banner images and set</p>
        </div>
      </div>
    </div>
  </div>

Item Blog Style
<div class="nft-item blog-item">
  <div class="nft-inner">
    <div class="nft-thumb">
      <img src="assets/images/nft-item/blog/02.jpg" alt="blog-img">
    </div>

    <div class="nft-content">
      <div class="author-details">
        <h4><a href="blog-single.html">The Rise of the Non Fungible Tokens
        (NFTs)</a> </h4>
        <div class="meta-info">
          <p><span><i class="icofont-ui-calendar"
          data-blast="color"></i></span>July 20 2022
          </p>
          <p><span><i class="icofont-user" data-blast="color"></i></span>Jhon
          doe
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

3.Button Style

There is a different types of button style and hover effect in this template. You can use any of these simple chaning the class name. All button has a default class name called default-btn, beside this class you have to use another class for different hover effect like- move-right, move-left, move-top or move bottom. You also can use different button style by adding style-2 class. 

    //======Button style one with differnt hover effect

    //--Hover moving top
    <a href="#" class="default-btn move-top">
      <span>I'm Button</span>
    </a>

    //--Hover moving bottom
    <a href="#" class="default-btn move-bottom">
    <span>I'm Button</span>
    </a>

    //--Hover moving left
    <a href="#" class="default-btn move-left">
    <span>I'm Button</span>
    </a>

    //--Hover moving right
    <a href="#" class="default-btn move-right">
    <span>I'm Button</span>
    </a>




    //======Button style two with differnt hover effect

    //--Hover moving top
    <a href="#" class="default-btn style-2 move-top">
    <span>I'm Button</span>
    </a>

    //--Hover moving bottom
    <a href="#" class="default-btn style-2 move-bottom">
    <span>I'm Button</span>
    </a>

    //--Hover moving left
    <a href="#" class="default-btn style-2 move-left">
    <span>I'm Button</span>
    </a>

    //--Hover moving right
    <a href="#" class="default-btn style-2 move-right">
    <span>I'm Button</span>
    </a>

Font size and Colors



You can Modify Font sizes and All colors of this template by channging the variable value in sass/sub-stylesheet/abstracts/variables.scss file 


$bootstrap-sass-asset-helper: false !default;

// Variables
// --------------------------------------------------


// Colors

$title-color: #030e35;
$desc-color:#6f7d95;
$theme-color:#822cff;
$primary-color: #ff5757;
$secondary-color:#1d1d1eed;
$body-color:#f4f6f9;
$royal-blue:rgba(83, 4, 119, 1);
$royal-yellow:#00edc5;
$shadow-color: rgba($royal-blue, $alpha:.2);
$white-color: #fff;
$ash-color: #f9fafb;
$black-color:#000000;
$border-color: #f5f5f5;

$gradient-orange: linear-gradient(90deg, rgb(245, 49, 127) 0%, rgb(255, 124, 110) 100%);
$gradient-blue: linear-gradient(90deg, rgb(18, 112, 227) 0%, rgb(89, 194, 255) 100%);





//default box shadow
$d-box-shadow: 0 0 10px $shadow-color;


// social-media color
$facebook: #3b5998;
$twitter: #55acee;
$linkedin: #007bb5;
$skype: #2fb7df;
$youtube: #cd201f;
$google: #dd4b39;
$camera: #e4405f;
$instagram: #e4405f;
$tumblr: #34465d;
$behance: #1769ff;
$pinterest:#c8232c;
$dribble:#ea4c89;
$vimeo:#86c9ef;
$star: #e9ba17;
$green: #0be881;
$green-h: #0fbcf9;
$red: #f53b57;
$yellow: #dec32b;
$nell: #212fb4;
$navy: #d8e0f3;
$plaseholder: #a0a6bc;

//== Typography

// font-family

$manrope:'Manrope',
sans-serif;

// font-size

$fs-base: 16px !default;
$fs-small:14px;

$fs-h1: 60px;
$fs-h2: 48px;
$fs-h3: 30px;
$fs-h4: 24px;
$fs-h5: 20px;
$fs-h6: 18px;


// heading line height

$lh-h1: 66px;
$lh-h2: 50px;
$lh-h3: 43px;
$lh-h4: 36px;
$lh-h5: 32px;
$lh-h6: 28px;

// Description line height
$lh-p: 24px;

// transition
$transition: all 0.3s ease;

Utility Classes

You can use all bootstrap's utility classes and besides this you also can you make your custom utility class in sass/sub-stylesheet/base/uitilities.scss file


//--------------------------------------------
//--This file contains all the utility classes
//---------------------------------------------
.theme-color {
color: $theme-color;
}

.yellow-color {
color: $royal-yellow;
}

.mb-30 {
@extend %mb-30;
}

.gap-10 {
gap: 10px;
}

.gap-15 {
gap: 15px;
}

.fs-36 {
@include font-size(36px);
}

.mb-70 {
margin-bottom: 70px;
}

You Can Change Your Copyright text by changing footer sections copyright part like below-

<div class="footer-bottom">
  <div class="container">
    <p class="text-center py-4 mb-0">All rights reserved &copy; Anftiz || Design By: <a
    href="#">LabArtisan</a>
    </p>
  </div>
</div>

Contact Form

You Can Change Your Email Adress of Contact form very simply.You have to just Replace the demo email name into your desire mail address in contact.php file 
    // Update this to your desired email address.
    $recipient = "yourmail@gmail.com";