Digiwize User Guide

On behalf of DesignerByte team, we would like to thank you for purchasing this item. Your support encourages us to build better items and continuously bring value to our products. This documentation file covers all the information needed to install and use this Template. You'll find everything you need to know to create a stunning and beautiful website in minutes.

Digiwize Introduction

This documentation will give you an understanding of how Digiwize template is structured and guide you in performing common functions.

If you want to customize, please contact us here: [email protected]

Author: PBM Infotech

Installation

Follow the steps below to get started with your Site Template:

  1. Open the ... /Template Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below:
    • html/css - Stylesheets Folder
    • html/fonts - Fonts Folder
    • html/images - Images Folder
    • html/js - Javacripts Folder
    • html/index.html - (and All HTML files)
    The other files can be used according to your preferences.
  4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

Basic template Structure

The template has a responsive layout and is based on the Bootstrap V4 Framework . Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Click Here to know more about Bootstrap.


HTML Structure

The general HTML structure is the same throughout the template. Here is thegeneral HTML structure of the template:

<!DOCTYPE html>

<html lang="en">

<head>

[Page meta, page css, page title etc...]

</head>

<body>

<!-- page wrapper -->

<div class="page-wrapper">

<!--header -->

<header id="site-header" class="header">

<div id="header-wrap">

[MENU CONTENT]

</div>

</header>

<!--header -->

<!-- page content -->

<div class="page-content">

<!--Section 1 -->

<section>

[SECTION 1 CONTENT]

</section>

<!--Section 1 -->

<!--Section 2 -->

<section>

[SECTION 2 CONTENT]

</section>

<!--Section 2 -->

</div>

<!-- page content -->

<!--footer -->

<footer class="footer">

[FOOTER_CONTENT]

</footer>

<!--footer -->

</div>

<!-- page wrapper -->

[PAGE JAVASCRIPTS HERE]

</body>

</html>


CSS Structure

The general CSS structure is the same throughout the template. Here is the general CSS structure of the template: 


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Fontawesome -->
<link rel="stylesheet" href="css/fontawesome.css">
<!-- Flaticon -->
<link rel="stylesheet" href="css/flaticon_digiwize.css">
<!-- Base Icons -->
<link rel="stylesheet" href="css/pbminfotech-base-icons.css">
<!-- Themify Icons -->
<link rel="stylesheet" href="css/themify-icons.css">
<!-- Slick -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Magnific -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- AOS -->
<link rel="stylesheet" href="css/aos.css">
<!-- Shortcode CSS -->
<link rel="stylesheet" href="css/shortcode.css">
<!-- Base CSS -->
<link rel="stylesheet" href="css/base.css">
<!-- Index CSS -->
<link rel="stylesheet" href="css/index.css">
<!-- Style CSS -->
<link rel="stylesheet" href="css/style.css">
<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.css">
<!-- REVOLUTION STYLE SHEETS -->
<link rel="stylesheet" type="text/css" href="revolution/rs6.css">


Javascript Structure

The general Javascript structure is the same throughout the template. Here is the general Javascript structure of the template: 


<!-- jQuery JS -->
<script src="js/jquery.min.js"></script>

<!-- Popper JS -->
<script src="js/popper.min.js"></script>

<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>

<!-- jquery Waypoints JS -->
<script src="js/jquery.waypoints.min.js"></script>

<!-- jquery Appear JS -->
<script src="js/jquery.appear.js"></script>

<!-- Numinate JS -->
<script src="js/numinate.min.js"></script>

<!-- Slick JS -->
<script src="js/swiper.min.js"></script>

<!-- Magnific JS -->
<script src="js/jquery.magnific-popup.min.js"></script>

<!-- Circle Progress JS -->
<script src="js/circle-progress.js"></script> 

<!-- countdown JS -->
<script src="js/jquery.countdown.min.js"></script> 

<!-- AOS -->
<script src="js/aos.js"></script>

<!-- Circle Progres -->
<script src='js/circle-progress.min.js'></script>

<!-- GSAP -->
<script src='js/gsap.js'></script>

<!-- Scroll Trigger -->
<script src='js/ScrollTrigger.js'></script>

<!-- Split Text -->
<script src='js/SplitText.js'></script>

<!-- Cursor -->
<script src='js/cursor.js'></script>

<!-- Magnetic -->
<script src='js/magnetic.js'></script> 

<!-- GSAP Animation -->
<script src='js/gsap-animation.js'></script>

<!-- Scripts JS -->
<script src="js/scripts.js"></script>

<!-- Revolution JS -->
<script src="revolution/rslider.js"></script>
<script src="revolution/rbtools.min.js"></script>
<script src="revolution/rs6.min.js"></script>

Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list.

You can add a Favicon to your Website using the following code: 


<link rel="shortcut icon" href="images/favicon.ico"/>

Logo Settings

The Logo Container can be found in the Header Container - Replace "logo-white.png" with your own logo image URL. 

<a href="index.html"><img src="images/logo-dark.png" alt="logo"></a>

Note Default height of logo is 60px. you can set height according to your logo type and your requirement.

Changing Fonts style

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font link in css folder base.css file. See example below: 

<!-- 'Hanken Grotesk' -->
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk: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');

<!-- 'Schibsted Grotesk' -->
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet');

In order to change the fonts, you will need to edit the above links with your custom font, You can easily use Google Web Font Services if you plan to use a Google Font or remove it completely. If you plan to use a self hosted font, here is an Example of using Self Hosted Fonts

Helper Classes

We have created some really useful helper classes for you. These classes help you to quick position elements without writing new CSS rules. These classes are generic helper classes predefined in the CSS pages, here is quick view what they can do

Section title

You can use this code for your page section title to maintain title style. 

<div class="pbmit-heading-subheading">
   <h4 class="pbmit-subtitle">Subheading</h4>
   <h2 class="pbmit-title">Your Title</h2>
</div>

Background color

You can use color in the background. simply add .pbmit-bg-color-global (or any color you want) class where you want to use. See example below: 

<div class="pbmit-bg-color-global">  

[YOUR CONTENT]

</div>

Note We include 4 background color helper class in our template pbmit-bg-color-global, pbmit-bg-color-secondary, pbmit-bg-color-light and pbmit-bg-color-blackish You can add unlimited background color class according to your needs

Background Image

You can use an image in the background simply add InlineStyle in div tag and by use of this you can create your own bg. See example below: 

<div style="background:url(Path); ">    

[YOUR CONTENT]

</div>

Sliders

  • Swiper Slider

Swiper Slider

This excellent carousel slider can be controlled using HTML5 data attributes.

Find the full online Swiper Slider documentation .

Shortcode

  • Accordion
  • Buttons
  • Blog Post
  • Counter
  • Icon Box
  • Service Box
  • Progress Bar
  • Team
  • Testimonials

Accordion

Use the below code to display accordion: 

<div class="accordion" id="accordionExample1">
    <div class="accordion-item active">
        <h2 class="accordion-header" id="heading1">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" 
            data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
            What Is The Standard Size Of Business Cards?
            </button>
        </h2>
        <div id="collapse1" class="accordion-collapse collapse show" 
        aria-labelledby="heading1" data-bs-parent="#accordionExample1">
            <div class="accordion-body">
                Quam nulla porttitor massa id neque aliquam Id leo in vitae turpis massa sed diam vel quam elementum. Volutpat maece, quis nostrud exercitation.
            </div>
        </div>
    </div>
</div>

Button

Use the below to display Default Buttons:

Class Code Description Result
.pbmit-btn 
<a href="#" class="pbmit-btn">
    <span class="pbmit-header-button2-text">See all expertise</span>			
</a>
 Button Learn More
.pbmit-btn-outline 
<a href="#" class="pbmit-outline-btn">
    <span class="button-content-wrapper">
       <span class="pbmit-button-hover"></span>Have a Project In Your Mind?
    </span>
</a>
 Outline Button Have a Project In Your Mind?

Counter

Use the below code to display Counter style:

Counter Style 1
<div class="pbminfotech-ele-fid-style-1">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap">
            <div class="pbmit-sbox-icon-wrapper">
                <div class="pbmit-icon-wrapper pbmit-icon-type-icon">
                    <i class="pbmit-digiwize-icon pbmit-digiwize-icon-suitcase"></i>
                </div>
            </div>
            <div class="pbmit-fid-title">Risus commodo viverra maecenas accumsan lacus </div>
            <h4 class="pbmit-fid-inner">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="17" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">17</span>
                <span class="pbmit-fid"></span>
            </h4>
        </div>
    </div>
</div>
Counter Style 2
<div class="pbminfotech-ele-fid-style-2">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap">
            <h4 class="pbmit-fid-inner">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="150" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">150</span>
                <span class="pbmit-fid"></span>
            </h4>
            <h3 class="pbmit-fid-title">Expert <br> Staff</h3>
        </div>
    </div>
</div>
Counter Style 3
<div class="pbminfotech-ele-fid-style-3">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap d-flex align-items-center">
            <h4 class="pbmit-fid-inner d-flex align-items-center">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="25" data-interval="1" data-before="" data-before-style="" data-after="" data-after-style="">25</span>
                <span class="pbmit-fid"><span>k+</span></span>
            </h4>
            <div class="pbmit-fid-title">Projects completed<br> successfully</div>
        </div>
    </div>
</div>
Counter Style 4
<div class="pbminfotech-ele-fid-style-4">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap">
            <h4 class="pbmit-fid-inner d-flex">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="25" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">25</span>
                <span class="pbmit-fid"><sup>+</sup></span>
            </h4>
            <h3 class="pbmit-fid-title">Year of <br> experience</h3>
        </div>
    </div>
</div>
Counter Style 5
<div class="pbminfotech-ele-fid-style-5">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap">
            <h4 class="pbmit-fid-inner">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="25" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">25</span>
                <span class="pbmit-fid"></span>
            </h4>
            <h3 class="pbmit-fid-title">Year of experience</h3>
        </div>
    </div>
</div>
Counter Style 6
<div class="pbminfotech-ele-fid-style-6">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap">
            <h4 class="pbmit-fid-inner">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="450" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">450</span>
                <span class="pbmit-fid"></span>
            </h4>
            <h3 class="pbmit-fid-title">Satisfied Customers</h3>
        </div>
    </div>
</div>
Counter Style 7
<div class="pbminfotech-ele-fid-style-7">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap">
            <h4 class="pbmit-fid-inner">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="150" data-interval="10" data-before="" data-before-style="" data-after="" data-after-style="">150</span>
                <span class="pbmit-fid"><sup>+</sup></span>
            </h4>
            <h3 class="pbmit-fid-title">Most trusted compnies globally</h3>
        </div>
    </div>
</div>
Counter Style 8
<div class="pbminfotech-ele-fid-style-8">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap">
            <div class="pbmit-sbox-icon-wrapper">
                <div class="pbmit-icon-wrapper pbmit-icon-type-icon">
                    <i class="pbmit-digiwize-icon pbmit-digiwize-icon-suitcase"></i>
                </div>
            </div>
            <h3 class="pbmit-fid-title">Years of Oparation</h3>
            <h4 class="pbmit-fid-inner">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="12" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">12</span>
                <span class="pbmit-fid"><span>+</span></span>
            </h4>
        </div>
    </div>
</div>
Counter Style 9
<div class="pbminfotech-ele-fid-style-9">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap">
            <div class="pbmit-sbox-icon-wrapper">
                <div class="pbmit-icon-wrapper pbmit-icon-type-icon">
                <i class="pbmit-digiwize-icon pbmit-digiwize-icon-team"></i>
                </div>
            </div>
            <h3 class="pbmit-fid-title">Skilled Professional</h3>
            <h4 class="pbmit-fid-inner">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="189" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">189</span>
                <span class="pbmit-fid"></span>
            </h4>
        </div>
    </div>
</div>
Counter Style 10
<div class="pbminfotech-ele-fid-style-10">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap">
            <h4 class="pbmit-fid-inner">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="572" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">572</span>
                <span class="pbmit-fid"><sup>+</sup></span>
            </h4>
            <h3 class="pbmit-fid-title">Projects Completed <br> in last 5 Years</h3>
        </div>
    </div>
</div>
Counter Style 11
<div class="pbminfotech-ele-fid-style-11">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap">
            <h4 class="pbmit-fid-inner">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="10" data-interval="2" data-before="" data-before-style="" data-after="" data-after-style="">10</span>
                <span class="pbmit-fid"><span>M</span></span>
            </h4>
            <h3 class="pbmit-fid-title">Happy Customers <br>Who Trusted us</h3>
        </div>
    </div>
</div>
Counter Style 12
<div class="pbminfotech-ele-fid-style-12">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap">
            <h4 class="pbmit-fid-inner">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="85" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">85</span>
                <span class="pbmit-fid"></span>
            </h4>
            <h3 class="pbmit-fid-title">Daily New Clients</h3>
        </div>
        <svg xmlns="https://www.w3.org/2000/svg" id="Layer_1" height="512" viewBox="0 0 128 128" width="512">
            <path d="m110.557 56.553c-1.604-1.4-3.263-2.849-3.59-4.068-.351-1.317.379-3.468 1.083-5.547 1.035-3.042 2.103-6.189.628-8.74-1.496-2.586-4.787-3.234-7.97-3.86-2.13-.418-4.331-.851-5.265-1.783-.932-.933-1.364-3.134-1.783-5.264-.625-3.182-1.271-6.473-3.86-7.969-2.555-1.477-5.696-.404-8.737.628-2.08.705-4.227 1.429-5.545 1.086-1.222-.327-2.67-1.988-4.069-3.593-2.158-2.472-4.39-5.029-7.448-5.029-3.057 0-5.289 2.557-7.446 5.029-1.4 1.605-2.849 3.266-4.072 3.593-1.312.345-3.466-.381-5.542-1.086-3.044-1.036-6.191-2.105-8.741-.628-2.586 1.497-3.233 4.787-3.859 7.969-.418 2.129-.851 4.331-1.784 5.264-.931.931-3.132 1.363-5.26 1.782-3.182.626-6.474 1.274-7.97 3.86-1.479 2.551-.409 5.698.624 8.743.704 2.08 1.435 4.229 1.084 5.545-.326 1.219-1.986 2.668-3.589 4.068-2.472 2.157-5.029 4.39-5.029 7.446 0 3.058 2.558 5.29 5.029 7.448 1.603 1.398 3.263 2.849 3.589 4.068.351 1.315-.38 3.467-1.084 5.547-1.033 3.041-2.103 6.188-.628 8.737 1.498 2.586 4.788 3.234 7.97 3.859 2.131.42 4.332.852 5.264 1.784.934.934 1.366 3.134 1.784 5.265.626 3.183 1.273 6.474 3.859 7.969 2.558 1.479 5.698.405 8.741-.629 2.076-.706 4.219-1.44 5.543-1.086 1.223.327 2.671 1.988 4.071 3.595 2.157 2.471 4.39 5.027 7.446 5.027 3.059 0 5.29-2.557 7.448-5.027 1.399-1.605 2.849-3.268 4.071-3.595 1.31-.353 3.463.38 5.543 1.086 3.041 1.034 6.188 2.103 8.737.629 2.589-1.495 3.235-4.786 3.86-7.969.419-2.131.854-4.331 1.783-5.265.933-.932 3.134-1.362 5.262-1.781 3.182-.626 6.475-1.271 7.97-3.86 1.478-2.55.408-5.698-.626-8.745-.707-2.076-1.436-4.228-1.085-5.541.326-1.223 1.984-2.67 3.591-4.068 2.473-2.158 5.03-4.389 5.03-7.448 0-3.056-2.558-5.289-5.028-7.446z"></path>
        </svg>
    </div>
</div>
Counter Style 13
<div class="pbminfotech-ele-fid-style-13">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap">
            <h4 class="pbmit-fid-inner">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="150" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">150</span>
                <span class="pbmit-fid"><sup>+</sup></span>
            </h4>
            <h3 class="pbmit-fid-title">Most trusted<br> Companies globally</h3>
        </div>
    </div>
</div>
Counter Style 14
<div class="pbminfotech-ele-fid-style-14">
    <div class="pbmit-fld-contents">
        <div class="pbmit-fld-wrap d-flex align-items-center">
            <h4 class="pbmit-fid-inner d-flex align-items-center">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate" data-appear-animation="animateDigits" data-from="0" data-to="25" data-interval="1" data-before="" data-before-style="" data-after="" data-after-style="">0</span>
                <span class="pbmit-fid"><span>k+</span></span>
            </h4>
            <h3 class="pbmit-fid-title">Projects completed<br> successfully</h3>
        </div>
    </div>
</div>

Icon box

Use the below code to display Icon box style:

Icon box Style 1
<div class="pbmit-ihbox pbmit-ihbox-style-1">
    <div class="pbmit-ihbox-headingicon d-flex">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-icon">
                <div class="pbmit-icon-wrapper pbmit-icon-type-icon">
                    <i class="pbmit-digiwize-icon pbmit-digiwize-icon-online-marketing"></i>
                </div>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Reasonable Pricing</h2>
            <div class="pbmit-heading-desc">sed do eiusmod tempor labore dolore magna aliqua enim.</div>
        </div>
    </div>
</div>
Icon box Style 2
<div class="pbmit-ihbox pbmit-ihbox-style-2">
    <div class="pbmit-ihbox-headingicon">
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Comprehensive Brand</h2>
            <div class="pbmit-heading-desc">User Interface, User Experience, Product Design, Branding<br> & Illustration, Motion Design</div>
        </div>
    </div>
</div>
Icon box Style 3
<div class="pbmit-ihbox pbmit-ihbox-style-3">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-headingicon d-flex align-items-center">
            <div class="pbmit-number-wrap">
                <div class="pbmit-ihbox-box-number">2021</div>
            </div>
            <div class="pbmit-hover-effect">
                <div class="pbmit-ihbox-icon">
                    <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-image">
                        <img src="images/development-agency/award/icon-2.png" alt="Lemon City" />
                    </div>
                </div>
                <div class="pbmit-ihbox-hover-image">
                    <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-image">
                        <img src="images/development-agency/award/icon-12.png" alt="Lemon City" />
                    </div>
                </div>
            </div>
            <div class="pbmit-content-wrap">
                <h2 class="pbmit-element-title">Lemon City</h2>
            </div>
            <div class="pbmit-desc-wrap">
                <div class="pbmit-heading-desc">Creative Distruptors</div>
            </div>
        </div>
    </div>
</div>
Icon box Style 4
<div class="pbmit-ihbox pbmit-ihbox-style-4">
    <div class="pbmit-ihbox-headingicon d-flex">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-image">
                <img src="images/marketing-solution/demo3-img.png" alt="We Work to Give Customers<br> <span> Uniqe </span> Experience" />
            </div>
        </div>
        <div class="pbmit-ihbox-contents">We Work to Give Customers<br> <span> Uniqe </span> Experience</div>
    </div>
</div>
Icon box Style 5
<div class="pbmit-ihbox pbmit-ihbox-style-5">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper">
                <div class="pbmit-icon-wrapper pbmit-icon-type-icon">
                <i class="pbmit-digiwize-icon pbmit-digiwize-icon-location"></i>
                </div>
            </div>
        </div>
        <h2 class="pbmit-element-title">our location</h2>
        <div class="pbmit-heading-desc">1234 East 27th Street, <br> Fifthin Floor,<br> New York, NY 101010</div>
    </div>
</div>
Icon box Style 6
<div class="pbmit-ihbox pbmit-ihbox-style-6">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-headingicon d-flex justify-content-between">
            <div class="pbmit-ihbox-box-number">02</div>
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper">
                    <div class="pbmit-icon-wrapper pbmit-icon-type-icon">
                        <i class="pbmit-digiwize-icon pbmit-digiwize-icon-analytics"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Design</h2>
            <div class="pbmit-heading-desc">sed do eiusmod tempor  labore dolore magna aliqua enim minim veniam quis nostrud exercitation ullamco.</div>
        </div>
    </div>
</div>
Icon box Style 7
<div class="pbmit-ihbox pbmit-ihbox-style-7">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper">
                <div class="pbmit-icon-wrapper pbmit-icon-type-icon">
                <i class="pbmit-digiwize-icon pbmit-digiwize-icon-location"></i>
                </div>
            </div>
        </div>
        <h2 class="pbmit-element-title">our location</h2>
        <div class="pbmit-heading-desc">1234 East 27th Street, <br> New York,</div>
    </div>
</div>
Icon box Style 8
<div class="pbmit-ihbox pbmit-ihbox-style-8">
    <div class="pbmit-ihbox-headingicon d-flex justify-content-between">
        <div class="pbmit-ihbox-box-number">01</div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Planning and <br>sketching</h2>
            <div class="pbmit-heading-desc">User Interface, User Experience, Product Design, Branding .</div>
        </div>
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-icon">
                <div class="pbmit-icon-wrapper pbmit-icon-type-icon">
                <i class="pbmit-digiwize-icon pbmit-digiwize-icon-medicine-ball"></i>
                </div>
            </div>
        </div>
    </div>
</div>
Icon box Style 9
<div class="pbmit-ihbox pbmit-ihbox-style-9">
    <div class="pbmit-ihbox-headingicon d-sm-flex justify-content-between align-items-center">
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">We would love to hear more about your project?</h2>
        </div>
        <div class="pbmit-ihbox-btn">
            <a href="#"><span class="pbmit-button-wrapper"><span class="pbmit-button-text">purchase <br> theme</span></span></a>
        </div>
    </div>
</div>
Icon box Style 10
<div class="pbmit-ihbox pbmit-ihbox-style-10">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-headingicon d-sm-flex">
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper">
                <div class="pbmit-icon-wrapper pbmit-icon-type-icon">
                    <i class="pbmit-digiwize-icon pbmit-digiwize-icon-quote"></i>
                </div>
                </div>
            </div>
            <div class="pbmit-ihbox-contents">
                <h2 class="pbmit-element-title">“Because a restaurant’s story is never complete, there is always story is never complete”</h2>
                <div class="pbmit-auther-detail d-flex align-items-center">
                <h4 class="pbmit-element-heading">Simon pierro</h4>
                <div class="pbmit-heading-desc">@CEO Indesign Inc.</div>
                </div>
            </div>
        </div>
    </div>
</div>
Icon box Style 11
<div class="pbmit-ihbox pbmit-ihbox-style-11">
    <div class="pbmit-ihbox-headingicon">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-text">2022</div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">University of London</h2>
            <div class="pbmit-heading-desc">Lorem ipsum dolor since 1986 <br> consectetur adipisicing elit sed do </div>
        </div>
    </div>
</div>
Icon box Style 12
<div class="pbmit-ihbox-style-12">
    <div class="pbmit-ihbox-headingicon d-flex">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper">
                <div class="pbmit-icon-wrapper pbmit-icon-type-icon">
                    <i class="pbmit-digiwize-icon pbmit-digiwize-icon-irregular"></i>
                </div>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Management  System Services</h2>
            <div class="pbmit-heading-desc">Sed ut perspiciatis unde is natus error tomagna enim ad minim veniam, quis nostrud exercitation</div>
        </div>
    </div>
</div>
Icon box Style 13
<div class="pbmit-ihbox-style-13">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-headingicon d-flex justify-content-between">
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-text">01</div>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Mission</h2>
            <div class="pbmit-heading-desc">User Interface, User Experience, Product Design, Branding & Illustration, Motion Design</div>
        </div>
    </div>
</div>
Icon box Style 14
<div class="pbmit-ihbox pbmit-ihbox-style-14">
    <div class="pbmit-ihbox-headingicon d-sm-flex justify-content-between align-items-center">
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">We provide creative<br> <span class="pbmit-globalcolor">solutions </span> for your<br> creative ideas.</h2>
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper">
                <div class="pbmit-icon-wrapper pbmit-icon-type-icon">
                    <i class="pbmit-digiwize-icon pbmit-digiwize-icon-up-right"></i>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
Icon box Style 15
<div class="pbmit-ihbox pbmit-ihbox-style-15">
    <div class="pbmit-ihbox-headingicon">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-text">2018</div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">02x Developer Award</h2>
            <div class="pbmit-heading-desc">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore fugiat nulla pariatur. </div>
        </div>
        <div class="pbmit-subtitle-contents">
            <h4 class="pbmit-element-subtitle">Envato <span>Usa</span></h4>
        </div>
    </div>
</div>
Icon box Style 16
<div class="pbmit-ihbox pbmit-ihbox-style-16">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-title-image" style="background-image:url('images/digital-studio/ihmaskimg1.png')">
            <h2 class="pbmit-element-title">P</h2>
        </div>
        <h2 class="pbmit-element-title">Prototyping</h2>
        <div class="pbmit-heading-desc">
            <ul>
                <li>User Experience</li>
                <li>Mobile App</li>
                <li>Web App</li>
                <li>Animation</li>
            </ul>
        </div>
    </div>
</div>
Icon box Style 17
<div class="pbmit-ihbox pbmit-ihbox-style-17">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-text">02</div>
        </div>
        <h2 class="pbmit-element-title">Finding inspiration</h2>
        <div class="pbmit-heading-desc">Phasellus urna felis, vehicula a ultricie vulp utate ut ultricies.</div>
    </div>
</div>
Icon box Style 18
<div class="pbmit-ihbox-style-18">
    <div class="pbmit-ihbox-headingicon d-flex">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-image">
                <img src="images/digital-marketing/icon-img-01.png" alt="" />
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">We Work to Give Customers<br> <span> Unique </span> Experience</h2>
        </div>
    </div>
</div>
Icon box Style 19
<div class="pbmit-ihbox pbmit-ihbox-style-19">
    <div class="pbmit-ihbox-headingicon d-flex">
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Phone:</h2>
            <div class="pbmit-heading-desc">+(2) 870 174 302</div>
        </div>
    </div>
</div>

Service Box

Use the below code to display Service Box style:

Service Box Style 1
<article class="pbmit-service-style-1">
    <div class="pbminfotech-post-item">
        <div class="pbmit-service-image-wrapper">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/personal-port-2/service/service-01.jpg" class="img-fluid" alt="" />
                </div>
            </div>
        </div>
        <div class="pbminfotech-box-content">
            <div class="pbmit-box-content-inner">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="pbmit-service-icon-wrapper">
                        <i class="pbmit-digiwize-icon pbmit-digiwize-icon-analytics"></i>				
                    </div>
                    <div class="pbminfotech-box-number">01</div>
                </div>
                <div class="pbmit-heading-box">
                    <h3 class="pbmit-service-title"><a href="service-details.html">Developers</a></h3>
                </div>
                <div class="pbmit-contant-box">
                    <h3 class="pbmit-service-title"><a href="service-details.html">Developers</a></h3>
                <div class="pbmit-portfolio-description">
                    <ul>
                        <li>User Experience</li>
                        <li>Mobile App</li>
                        <li>Web App</li>
                        <li>Animation</li>
                    </ul>
                </div>
                </div>
            </div>
        </div>
    </div>
</article>
Service Box Style 2
<article class="pbmit-service-style-2">
    <div class="pbminfotech-post-item">
        <div class="pbminfotech-box-content d-flex align-items-center">
            <div class="pbmit-titlebox d-flex">
                <div class="pbminfotech-box-number">01</div>
                <h3 class="pbmit-service-title">
                    <a href="service-details.html">Digital Strategy</a>
                </h3>
            </div>
            <div class="pbmit-service-image-wrapper">
                <div class="pbmit-featured-img-wrapper">
                    <div class="pbmit-featured-wrapper">
                        <img src="images/digital-agency/service/service-01.jpg" class="img-fluid" alt="">
                    </div>
                </div>
            </div>
            <div class="pbmit-contentbox d-flex align-items-center">
                <div class="pbmit-service-content">
                    <p>User Interface, User Experience, Product Design, Branding & Illustration, Motion Design</p>
                </div>
                <div class="pbmit-service-btn">			
                    <i class="pbmit-base-icon-bottom-right"></i>
                </div>
            </div>
        </div>
    </div>
</article>
Service Box Style 3
<article class="pbmit-service-style-3">
    <div class="pbminfotech-post-item">
        <div class="pbmit-service-image-wrapper">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/marketing-solution/service/service-01.jpg" class="img-fluid" alt="" />
                </div>
            </div>
        </div>
        <div class="pbmit-service-wrapper">
            <div class="pbmit-box-content-inner">
                <i class="pbmit-digiwize-icon pbmit-digiwize-icon-analytics"></i>			
                <h3 class="pbmit-service-title"><a href="service-details.html">UX/UI Design</a></h3>
                <div class="pbmit-content-inner">
                    <div class="pbmit-portfolio-description">
                        <ul>
                            <li>User Experience</li>
                            <li>Mobile App</li>
                            <li>Web App</li>
                            <li>Animation</li>
                        </ul>
                    </div>
                    <div class="pbmit-service-btn"> 
                        <a href="service-details.html"><span>Learn More</span>
                            <i class="demo-icon pbmit-base-icon-chevron-right-solid"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="pbmit-service-icon-wrapper">
                <i class="pbmit-digiwize-icon pbmit-digiwize-icon-analytics"></i>		
            </div>
        </div>
        <a class="pbmit-link" title="UX/UI Design" href="service-details.html"></a>
    </div>
</article>
Service Box Style 4
<article class="pbmit-service-style-4">
    <div class="pbminfotech-post-item">
        <div class="pbmit-service-image-wrapper" style="background-image:url('images/web-design-solution/service/service-01.jpg')">
            <h3 class="pbmit-service-title">D</h3>
        </div>
        <div class="pbmit-service-wrapper">
            <div class="pbmit-service-icon-wrapper">
                <i class="pbmit-digiwize-icon pbmit-digiwize-icon-analytics"></i>		
            </div>
            <div class="pbmit-box-content-inner">
                <h3 class="pbmit-service-title"><a href="service-details.html">Developers</a></h3>
                <div class="pbmit-content-inner">
                <div class="pbmit-service-content">
                    <p>User Interface, User Experience, Product Design, Branding & Illustration, Motion Design</p>
                </div>
                <div class="pbmit-portfolio-description">
                    <ul>
                        <li>User Experience</li>
                        <li>Mobile App</li>
                        <li>Web App</li>
                        <li>Animation</li>
                    </ul>
                </div>
                </div>
            </div>
        </div>
    </div>
</article>
Service Box Style 5
<article class="pbmit-service-style-5">
    <div class="pbminfotech-post-item">
        <div class="pbmit-service-image-wrapper">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/web-development/service/service-01.jpg" class="img-fluid" alt="" />
                </div>
            </div>
        </div>
        <div class="pbminfotech-box-content">
            <div class="pbmit-box-content-inner d-flex">
                <div class="pbmit-service-icon-wrapper">
                    <i class="pbmit-digiwize-icon pbmit-digiwize-icon-analytics"></i>			
                </div>
                <div class="pbmit-text-content">
                    <div class="pbmit-contant-box">
                        <h3 class="pbmit-service-title"><a href="service-details.html">Developers</a></h3>
                        <div class="pbmit-portfolio-description">
                            <div class="pbmit-service-content">
                                <p>User Interface, User Experience, Product Design, Branding & Illustration, Motion Design</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>
Service Box Style 6
<article class="pbmit-service-style-6">
    <div class="pbminfotech-post-item">
        <div class="pbmit-featured-img-wrapper">
            <div class="pbmit-featured-wrapper">
                <img src="images/creative-studio/service/service-01.jpg" class="img-fluid" alt="" />
            </div>
        </div>
        <div class="pbminfotech-box-content">
            <div class="pbmit-service-icon-wrapper">
                <i class="pbmit-digiwize-icon pbmit-digiwize-icon-customer-behavior"></i>		
            </div>
            <div class="pbmit-contant-box">
                <h3 class="pbmit-service-title"><a href="service-details.html">Content Writing</a></h3>
                <div class="pbmit-service-content">
                <p>User Interface, User Experience, Product Design, Branding & Illustration, Motion Design</p>
                </div>
            </div>
        </div>
    </div>
</article>
Service Box Style 7
<article class="pbmit-service-style-7">
    <div class="pbminfotech-post-item">
        <div class="pbminfotech-box-content d-flex align-items-center">
            <div class="pbmit-titlebox d-flex">
                <div class="pbminfotech-box-number">01</div>
                <h3 class="pbmit-service-title"><a href="service-details.html">Web+app develop</a></h3>
            </div>
            <div class="pbmit-contentbox d-flex align-items-center">
                <div class="pbmit-service-content">
                    <p>Owing to tremendous advancements in machine learning and other technology chatbots have the year.</p>
                </div>
            </div>
            <div class="pbmit-service-image-wrapper">
                <div class="pbmit-featured-img-wrapper">
                    <div class="pbmit-featured-wrapper">
                        <img src="images/personal-port-1/service/service-01.jpg" class="img-fluid" alt="" />
                    </div>
                </div>
            </div>
            <div class="pbmit-service-description">
                <ul>
                    <li>User Experience</li>
                    <li>Mobile App</li>
                    <li>Web App</li>
                </ul>
            </div>
        </div>
    </div>
</article>
Service Box Style 8
<article class="pbmit-service-style-8">
    <div class="pbminfotech-post-item">
        <div class="pbminfotech-box-content">
            <div class="pbmit-titlebox">
                <div class="pbmit-service-icon-wrapper">
                    <i class="pbmit-digiwize-icon pbmit-digiwize-icon-analytics"></i>			
                </div>
                <h3 class="pbmit-service-title"><a href="service-details.html">Ux/Ui and product design</a></h3>
            </div>
            <div class="pbmit-service-description">
                <ul>
                    <li>User Experience</li>
                    <li>Mobile App</li>
                    <li>Web App</li>
                    <li>Animation</li>
                </ul>
            </div>
            <div class="pbmit-contentbox">
                <div class="pbmit-service-content">
                    <p>User Interface, User Experience, Product Design, Branding & Illustration, Motion Design</p>
                </div>
            </div>
        </div>
        <div class="pbminfotech-box-number">01</div>
    </div>
</article>
Service Box Style 9
<article class="pbmit-service-style-9">
    <div class="pbminfotech-post-item">
        <div class="pbmit-titlebox">
            <div class="pbminfotech-box-number">01.</div>
            <h3 class="pbmit-service-title" data-text="Web+app develop">
                <a href="service-details.html">Web+app develop</a>
            </h3>
        </div>
        <div class="pbmit-hover-img">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/digital-studio/service/service-01.jpg" class="img-fluid" alt="" />
                </div>
            </div>
        </div>
    </div>
</article>

Progress Bar

Use the below code to display Progress Bar style: 

<div class="progressbar">
    <span class="progress-label">Digital Marketing</span>
    <div class="progress progress-lg progress-percent-bg">
       <div class="progress-bar aos aos-init aos-animate" data-aos="slide-right"
          data-aos-delay="200" data-aos-duration="1000" data-aos-easing="ease-in-out"
          role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
          style="width:75%">
          <span class="progress-percent">75%</span>
       </div>
    </div>
</div>

Team

Use the below code to display Team:.

Team Style 1
<article class="pbmit-team-style-1">
    <div class="pbminfotech-post-item">
        <div class="pbmit-featured-wrap">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/web-design-solution/team/team-02.jpg" class="img-fluid" alt="" />
                </div>
            </div>
            <div class="pbminfotech-social-box">
                <div class="pbminfotech-box-social-links">
                    <ul class="pbmit-social-links pbmit-team-social-links">
                        <li class="pbmit-social-li pbmit-social-facebook">
                            <a href="#" title="Facebook" target="_blank"><span><i class="pbmit-base-icon-facebook-f"></i></span></a>
                        </li>
                        <li class="pbmit-social-li pbmit-social-twitter">
                            <a href="#" title="Twitter" target="_blank"><span><i class="pbmit-base-icon-twitter"></i></span></a>
                        </li>
                        <li class="pbmit-social-li pbmit-social-linkedin">
                            <a href="#" title="LinkedIn" target="_blank"><span><i class="pbmit-base-icon-linkedin-in"></i></span></a>
                        </li>
                        <li class="pbmit-social-li pbmit-social-instagram">
                            <a href="#" title="Instagram" target="_blank"><span><i class="pbmit-base-icon-instagram"></i></span></a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="pbminfotech-box-content">
            <div class="pbminfotech-box-content-inner">
                <h3 class="pbmit-team-title"><a href="team-single-detail.html">Bryan Knight</a></h3>
                <div class="pbminfotech-team-position">
                    <div class="pbminfotech-box-team-position">Creative Director</div>
                </div>
            </div>
        </div>
    </div>
</article>
Team Style 3
<article class="pbmit-team-style-3">
    <div class="pbminfotech-post-item">
        <div class="pbmit-featured-img-wrapper">
            <div class="pbmit-featured-wrapper">
                <img src="images/creative-studio/team/team-white-02.jpg" class="img-fluid" alt="" />
            </div>
        </div>
        <div class="pbminfotech-box-content">
            <div class="pbminfotech-box-team-position">Creative Director</div>
            <h3 class="pbmit-team-title"><a href="team-single-detail.html">Bryan Knight</a></h3>
        </div>
        <a href="team-single-detail.html" class="pbmit-link"></a>
    </div>
</article>
Team Style 4
<article class="pbmit-team-style-4">
    <div class="pbminfotech-post-item">
        <div class="pbminfotech-team-image-box">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/digital-studio/team/team-01.jpg" class="img-fluid" alt="" />
                </div>
            </div>
            <div class="pbminfotech-box-social-links">
                <ul class="pbmit-social-links pbmit-team-social-links">
                    <li class="pbmit-social-li pbmit-social-facebook">
                        <a href="#" title="Facebook" target="_blank"><span><i class="pbmit-base-icon-facebook-f"></i></span></a>
                    </li>
                    <li class="pbmit-social-li pbmit-social-twitter">
                        <a href="#" title="Twitter" target="_blank"><span><i class="pbmit-base-icon-twitter"></i></span></a>
                    </li>
                    <li class="pbmit-social-li pbmit-social-linkedin">
                        <a href="#" title="LinkedIn" target="_blank"><span><i class="pbmit-base-icon-linkedin-in"></i></span></a>
                    </li>
                    <li class="pbmit-social-li pbmit-social-instagram">
                        <a href="#" title="Instagram" target="_blank"><span><i class="pbmit-base-icon-instagram"></i></span></a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="pbminfotech-box-content">
            <h3 class="pbmit-team-title"><a href="team-single-detail.html">Machel Daniel</a></h3>
            <div class="pbminfotech-box-team-position">Founder & CEO</div>
        </div>
        <a href="team-single-detail.html" class="pbmit-link"></a>
    </div>
</article>
Team Style 5
<article class="pbmit-team-style-5">
    <div class="pbminfotech-post-item">
        <div class="pbminfotech-box-content">
            <div class="pbmit-team-title-wapper">
                <h3 class="pbmit-team-title"><a href="#">Judy Nguyen</a></h3>
                <h3 class="pbmit-team-title-repeat"><a href="#">Judy Nguyen</a></h3>
            </div>
            <div class="pbminfotech-team-wrapper">
                <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/modern-agency/team/team-03.jpg" class="img-fluid" alt="" />
                </div>
                </div>
            </div>
            <div class="pbminfotech-box-team-position">Office Head Dep</div>
        </div>
    </div>
</article>

Testimonial

Use the below code to display Testimonial:.

Testimonial Style 1
<article class="pbmit-testimonial-style-1 swiper-slide">
    <div class="pbminfotech-post-item">
        <div class="pbminfotech-star-ratings-text">Great Work!</div>
        <div class="pbminfotech-box-star-ratings">
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star"></i>
            <i class="pbmit-base-icon-pointed-star"></i>
            <i class="pbmit-base-icon-pointed-star"></i>
        </div>
        <div class="pbminfotech-box-desc">
            <blockquote class="pbminfotech-testimonial-text">
                <p>“I would like to express my thanks & appreciation to you for understanding the subject matter and for your excellent writing Good job and well done”</p>
            </blockquote>
        </div>
        <div class="pbminfotech-box-author d-flex align-items-center">
            <div class="pbminfotech-box-img">
                <div class="pbmit-featured-img-wrapper">
                    <div class="pbmit-featured-wrapper">
                        <img src="images/testimonial/testimonial-01.jpg" class="img-fluid" alt="" />
                    </div>
                </div>
            </div>
            <div class="pbmit-auther-content">
                <h3 class="pbminfotech-box-title">Gordon Ramsay</h3>
                <div class="pbminfotech-testimonial-detail">Architech</div>
            </div>
        </div>
    </div>
</article>
Testimonial Style 3
<article class="pbmit-testimonial-style-3">
    <div class="pbminfotech-post-item">
        <div class="pbmit-text-content">
            <div class="pbminfotech-star-ratings-text">Great Work!</div>
            <div class="pbminfotech-box-star-ratings">
                <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                <i class="pbmit-base-icon-pointed-star"></i>
                <i class="pbmit-base-icon-pointed-star"></i>
            </div>
        </div>
        <div class="pbminfotech-box-desc">
            <blockquote class="pbminfotech-testimonial-text">
                <p>“I would like to express my thanks & appreciation to you for understanding the subject matter and for your excellent writing Good job and well done”</p>
            </blockquote>
        </div>
        <div class="pbminfotech-box-author d-flex align-items-center">
            <div class="pbminfotech-box-img">
                <div class="pbmit-featured-img-wrapper">
                    <div class="pbmit-featured-wrapper">
                        <img src="images/testimonial/testimonial-03.jpg" class="img-fluid" alt="" />
                    </div>
                </div>
            </div>
            <div class="pbmit-auther-content">
                <h3 class="pbminfotech-box-title">Jordan Peele</h3>
                <div class="pbminfotech-testimonial-detail">Architech</div>
            </div>
        </div>
    </div>
</article>
Testimonial Style 4
<article class="pbmit-testimonial-style-4 swiper-slide">
    <div class="pbminfotech-post-item">
        <div class="pbminfotech-box-img">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/testimonial/testimonial-03.jpg" class="img-fluid" alt="" />
                </div>    
            </div>
        </div>
        <div class="pbminfotech-box-star-ratings">
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star"></i>
            <i class="pbmit-base-icon-pointed-star"></i>
        </div>
        <div class="pbminfotech-box-desc">
            <blockquote class="pbminfotech-testimonial-text">
                <p>“I would like to express my thanks & appreciation to you for understanding the subject matter and for your excellent writing Good job and well done”</p>
            </blockquote>
        </div>
        <div class="pbmit-auther-content">
            <h3 class="pbminfotech-box-title">Gordon Ramsay</h3>
            <div class="pbminfotech-testimonial-detail">co-founder</div>
        </div>
    </div>
</article>
Testimonial Style 5
<article class="pbmit-testimonial-style-5">
    <div class="pbminfotech-post-item">
        <div class="pbminfotech-box-star-ratings">
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
        </div>
        <div class="pbminfotech-box-desc">
            <blockquote class="pbminfotech-testimonial-text">
                <p>“Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Duis aute irure dolor in voluptate velit esse cillum dolore eu fugiat nulla pariatur.”</p>
            </blockquote>
        </div>
        <div class="pbminfotech-box-author d-flex align-items-center">
            <div class="pbminfotech-box-img">
                <div class="pbmit-featured-img-wrapper">
                    <div class="pbmit-featured-wrapper">
                        <img src="images/testimonial/testimonial-01.jpg" class="img-fluid" alt="" />
                    </div>
                </div>
            </div>
            <div class="pbmit-auther-content">
                <h3 class="pbminfotech-box-title">Jordan Peele</h3>
                <div class="pbminfotech-testimonial-detail">Manager</div>
            </div>
        </div>
    </div>
</article>
Testimonial Style 6
<article class="pbmit-testimonial-style-6">
    <div class="pbminfotech-post-item">
        <div class="pbminfotech-box-star-ratings">
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star"></i>
        </div>
        <div class="pbminfotech-box-desc">
            <blockquote class="pbminfotech-testimonial-text">
                <p>“It was really great working with Mobi team and I am happy I was introd uced to this team! It’s not easy to work on a website some”</p>
            </blockquote>
        </div>
        <div class="pbminfotech-box-img">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/testimonial/testimonial-03.jpg" class="img-fluid" alt="" />
                </div>
            </div>
        </div>
        <div class="pbmit-auther-content">
            <h3 class="pbminfotech-box-title">Carla Hall</h3>
            <div class="pbminfotech-testimonial-detail">Designer</div>
        </div>
    </div>
</article>
Testimonial Style 7
<article class="pbmit-testimonial-style-7">
    <div class="pbminfotech-post-item">
        <div class="pbminfotech-box-star-ratings">
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
        </div>
        <div class="pbminfotech-box-desc">
            <blockquote class="pbminfotech-testimonial-text">
                <p>“I would like to express my thanks & appreciation to you for understanding the subject matter and for your excellent writing Good job and well done”</p>
            </blockquote>
        </div>
        <div class="pbminfotech-box-author d-flex align-items-center">
            <div class="pbminfotech-box-img">
                <div class="pbmit-featured-img-wrapper">
                    <div class="pbmit-featured-wrapper">
                        <img src="images/testimonial/testimonial-03.jpg" class="img-fluid" alt="" />
                    </div>
                </div>
            </div>
            <div class="pbmit-auther-content">
                <h3 class="pbminfotech-box-title">Gordon Ramsay</h3>
                <div class="pbminfotech-testimonial-detail">Architech</div>
            </div>
        </div>
    </div>
</article>
Testimonial Style 8
<article class="pbmit-testimonial-style-8">
    <div class="pbminfotech-post-item">
        <div class="pbmit-post-inner">
            <div class="pbmit-left-area col-md-2">
                <div class="pbminfotech-box-star-ratings">
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                    <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
                </div>
                <div class="pbminfotech-box-author">
                    <div class="pbminfotech-box-img">
                        <div class="pbmit-featured-img-wrapper">
                            <div class="pbmit-featured-wrapper">
                                <img src="images/testimonial/testimonial-01.jpg" class="img-fluid" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="pbmit-auther-content">
                        <h3 class="pbminfotech-box-title">Jordan Peele</h3>
                        <div class="pbminfotech-testimonial-detail">Manager</div>
                    </div>
                </div>
            </div>
            <div class="pbmit-right-area col-md-10">
                <div class="pbminfotech-box-desc">
                    <blockquote class="pbminfotech-testimonial-text">
                        <p>“I would like to express my thanks & appreciation to you for understanding the subject matter and for your excellent writing Good job and well done I look forward to working with you in our next project”</p>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>
</article>
Testimonial Style 9
<article class="pbmit-testimonial-style-9">
    <div class="pbminfotech-post-item">
        <div class="pbminfotech-box-star-ratings">
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star pbmit-active"></i>
            <i class="pbmit-base-icon-pointed-star"></i>
            <i class="pbmit-base-icon-pointed-star"></i>
        </div>
        <div class="pbminfotech-box-desc">
            <blockquote class="pbminfotech-testimonial-text">
                <p>“I would like to express my thanks & appreciation to you for understanding the subject matter and for your excellent writing Good job and well done i look forward to working with you in our next project”</p>
            </blockquote>
        </div>
        <div class="pbminfotech-box-author align-items-center">
            <div class="pbmit-auther-content">
                <h3 class="pbminfotech-box-title">Jamie Oliver</h3>
                <div class="pbminfotech-testimonial-detail">Architech</div>
            </div>
        </div>
    </div>
</article>

Browser Support

Hectolab supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 10 and above.

How to rate this item

If you like our theme and support, Please do not forget to rate it with 5 stars in your Downloads section and write a review in Comments as it will add more value to our services!

Kindly visit here: https://themeforest.net/downloads and find "Rate this item" below the download button and rate out the theme.

Advance Thanks in Anticipation!

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.


Images



Scripts



CSS & Fonts



Note For questions on basic HTML, Javascript or CSS editing - please give your question a quick Google or visit W3Schools as template issues get top priority. You will need some knowledge of HTML/CSS to edit the template.