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

Solioz Introduction

This documentation will give you an understanding of how Solioz 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 V5 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">

<!-- Solioz Icon -->
<link rel="stylesheet" href="fonts/pbmit-solioz-icon/pbmit_solioz.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">

<!-- Style CSS -->
<link rel="stylesheet" href="css/style.css">

<!-- Responsive CSS -->
<link rel="stylesheet" href="css/responsive.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> 

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

<!-- Scripts JS -->
<script src="js/scripts.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.icon"/>

Logo Settings

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

<img class="logo-img" src="images/logo.svg" alt="Solioz">

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

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: 

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

<!-- "Funnel Display", sans-serif; -->
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:[email protected]&display=swap" rel="stylesheet');

<!-- "Arimo", sans-serif; -->
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet');

<!-- "Onest", sans-serif; -->
@import url('https://fonts.googleapis.com/css2?family=Onest:[email protected]&display=swap" rel="stylesheet');

<!-- "Plus Jakarta Sans", sans-serif; -->
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&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-headingg">
   <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="accordionExample">
    <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Accordion Item #1
            </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes
            </div>
        </div>
    </div>
</div>

Button

Use the below to display Default Buttons:

Class Code Description Result
.pbmit-btn 
<a class="pbmit-btn" href="#">
    <span class="pbmit-button-content-wrapper">
        <span class="pbmit-button-text-wrap">
            <span class="pbmit-button-text" data-text="Button">
                <span>Button</span>
            </span>
        </span>
        <svg xmlns="http://www.w3.org/2000/svg" width="30" height="84.64" viewBox="0 0 30 84.64">
            <path class="a" d="M30,84.64h-.11a15,15,0,0,0-29.78,0H0v-57H.19a15,15,0,0,0,29.62,0H30Z"></path>
            <path class="a" d="M30,57h-.11A15,15,0,0,0,.11,57H0V0H.19A15,15,0,0,0,15,12.59,15,15,0,0,0,29.81,0H30Z"></path>
        </svg>
        <span class="pbmit-button-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                <g transform="translate(1 2)">
                    <path d="m7.99609 12 6.00391-6-6.00195-6-.707031.705078 4.79492 4.79492h-12.0859v1h12.0859l-4.79688 4.79688z"></path>
                </g>
            </svg>
        </span>
    </span>
</a>
Button Button

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-contents-wraper">
            <div class="pbmit-fid-counter-wrapper">
                <h4 class="pbmit-fid-counter">
                    <span class="pbmit-fid-before"></span>
                    <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="1245" data-interval="3" data-before="" data-before-style="" data-after="" data-after-style="">1245</span>
                    <span class="pbmit-fid"><span>+</span></span>
                </h4>
                <span class="pbmit-fid-subtitle">Last 5 Years</span>
            </div>
            <h3 class="pbmit-fid-title">Wind turbine <br> Installed</h3>
            <div class="pbmit-fid-image">
                <img src="images/demo-1/chart-img.png" alt="">
            </div>
        </div>
    </div>		
</div>
Counter Style 2
<div class="pbminfotech-ele-fid-style-2">
    <div class="pbmit-fld-contents">
        <div class="pbmit-contents-box">
            <h4 class="pbmit-fid-counter">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="80" data-interval="3" data-before="" data-before-style="" data-after="" data-after-style="">80</span>
                <span class="pbmit-fid"><span>%</span></span>
            </h4>
            <h3 class="pbmit-fid-title"><span class="pbmit-global-color">Average savings on energy bills </span>services with customer trusted worldwide.</h3>
        </div>
    </div>		
</div>
Counter Style 5
<div class="pbminfotech-ele-fid-style-5">
    <div class="pbmit-fld-contents">
        <div class="pbmit-contents-box">
            <h4 class="pbmit-fid-counter">
                <span class="pbmit-fid-before"></span>
                <span class="pbmit-number-rotate numinate" data-appear-animation="animateDigits" data-from="0" data-to="10" data-interval="3" data-before="" data-before-style="" data-after="" data-after-style="">10</span>
                <span class="pbmit-fid"><span>MW</span></span>
            </h4>
            <h3 class="pbmit-fid-title">Average savings on energy bills services with customer satisfaction trusted worldwide.</h3>
        </div>
    </div>		
</div>

Icon box

Use the below code to display Icon box style:

Icon box Style 1
<div class="pbmit-ihbox-style-1">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-image">
                <img src="images/image-icon.png" alt="ISO, LEED, Energy Star <br>Certficate">
            </div>
        </div>
        <h2 class="pbmit-element-title">ISO, LEED, Energy Star <br>Certficate</h2>
    </div>
</div>
Icon box Style 2
<div class="pbmit-ihbox-style-2">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-ion-wrapper">
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                    <svg id="Icons" height="512" viewBox="0 0 60 60" width="512" xmlns="http://www.w3.org/2000/svg">
                        <path d="m54.349 25.521 2.284-4.163-4.3-2.047a1 1 0 0 1 -.556-1.09l.88-4.667-4.724-.618a1 1 0 0 1 -.867-.867l-.6-4.711-4.686.866a1 1 0 0 1 -1.09-.556l-2.025-4.294-4.186 2.277a1 1 0 0 1 -1.208-.19l-3.259-3.455-3.283 3.455a1 1 0 0 1 -1.208.19l-4.163-2.284-2.047 4.3a1 1 0 0 1 -1.09.556l-4.667-.88-.618 4.724a1 1 0 0 1 -.867.867l-4.711.6.866 4.686a1 1 0 0 1 -.556 1.09l-4.294 2.025 2.277 4.186a1 1 0 0 1 -.19 1.208l-3.455 3.259 3.455 3.283a1 1 0 0 1 .19 1.208l-2.284 4.163 4.3 2.047a1 1 0 0 1 .556 1.09l-.88 4.667 4.724.618a1 1 0 0 1 .867.867l.6 4.711 4.686-.866a1 1 0 0 1 1.09.556l2.025 4.294 4.186-2.277a1 1 0 0 1 1.208.19l3.259 3.455 3.283-3.455a1 1 0 0 1 1.208-.19l4.163 2.284 2.047-4.3a1 1 0 0 1 1.09-.556l4.667.88.618-4.724a1 1 0 0 1 .867-.867l4.711-.6-.866-4.686a1 1 0 0 1 .556-1.09l4.294-2.025-2.277-4.186a1 1 0 0 1 .19-1.208l3.455-3.259a.014.014 0 0 0 .006-.012l-3.461-3.271a1 1 0 0 1 -.19-1.208zm-24.349 27.479a23 23 0 1 1 23-23 23.025 23.025 0 0 1 -23 23z"></path>
                        <path d="m30 9a21 21 0 1 0 21 21 21.024 21.024 0 0 0 -21-21zm10.585 21.416-11.624 15.658a2.186 2.186 0 0 1 -1.777.93 2.289 2.289 0 0 1 -2.209-2.846l2.749-11.158h-6.613a2.1 2.1 0 0 1 -1.873-1.158 2.158 2.158 0 0 1 .177-2.258l11.624-15.658a2.182 2.182 0 0 1 2.734-.715 2.272 2.272 0 0 1 1.252 2.631l-2.749 11.158h6.613a2.1 2.1 0 0 1 1.873 1.158 2.158 2.158 0 0 1 -.177 2.258z"></path>
                        <path d="m38.889 29h-7.889a1 1 0 0 1 -.971-1.239l3.054-12.395a.284.284 0 0 0 -.259-.366.217.217 0 0 0 -.174.111l-11.624 15.657a.156.156 0 0 0 0 .167c.033.065.072.065.09.065h7.884a1 1 0 0 1 .971 1.239l-3.054 12.4a.268.268 0 0 0 .15.34.2.2 0 0 0 .283-.084l11.624-15.663a.156.156 0 0 0 .005-.167c-.033-.065-.072-.065-.09-.065z"></path>
                    </svg>
                </div>
            </div>
            <h2 class="pbmit-element-title">
                Our Mission
            </h2>
        </div>
        <div class="pbmit-ihbox-contents">
            <div class="pbmit-heading-desc">Our mission is to deliver exceptional value through innovation, integrity, and a deep commitment to the people we serve.</div>
        </div>
    </div>
</div>
Icon box Style 3
<article class="pbmit-miconheading-style-3">
    <div class="pbmit-ihbox pbmit-ihbox-style-3">
        <div class="pbmit-ihbox-box ">
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper">
                    <div class="pbmit-ihbox-icon-type-text">01</div>
                </div>
            </div>
            <div class="pbmit-ihbox-contents">
                <h2 class="pbmit-element-title">
                    Site Assessment & <br>Planning
                </h2>
                <div class="pbmit-heading-desc">solar products and services  to meet your energy needs.</div>
            </div>
        </div>
    </div>
</article>
Icon box Style 4
<div class="pbmit-ihbox-style-4">
    <div class="pbmit-ihbox-box pbmit-ihbox-icon-type-image-wrapper">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-image">
                <img src="images/demo-1/person-near-alternative-energy-plant-2.png" alt="“Power your future with clean, renewable energy. Let the sun work for you every day”">
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">“Power your future with clean, renewable energy. Let the sun work for you every day”</h2>
        </div>
    </div>
</div>
Icon box Style 5
<div class="pbmit-ihbox-style-5">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg enable-background="new 0 0 512.044 512.044" height="512" viewBox="0 0 512.044 512.044" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <g id="Page-1_16_">
                            <g id="_x30_17---Solar-Field">
                                <g id="Oval_4_">
                                    <circle cx="123.586" cy="123.608" r="61.793"></circle>
                                </g>
                                <g id="Path_232_">
                                    <path d="m123.586 35.332c-4.875 0-8.828-3.952-8.828-8.828v-17.654c0-4.875 3.952-8.828 8.828-8.828 4.875 0 8.828 3.952 8.828 8.828v17.655c0 4.875-3.952 8.827-8.828 8.827z"></path>
                                </g>
                                <g id="Path_231_">
                                    <path d="m123.586 247.194c-4.875 0-8.828-3.952-8.828-8.828v-17.655c0-4.875 3.952-8.828 8.828-8.828 4.875 0 8.828 3.952 8.828 8.828v17.655c0 4.876-3.952 8.828-8.828 8.828z"></path>
                                </g>
                                <g id="Path_230_">
                                    <path d="m238.345 132.436h-17.655c-4.875 0-8.828-3.952-8.828-8.828s3.952-8.828 8.828-8.828h17.655c4.875 0 8.828 3.952 8.828 8.828s-3.953 8.828-8.828 8.828z"></path>
                                </g>
                                <g id="Path_229_">
                                    <path d="m26.483 132.436h-17.655c-4.875 0-8.828-3.952-8.828-8.828s3.952-8.828 8.828-8.828h17.655c4.875 0 8.828 3.952 8.828 8.828s-3.953 8.828-8.828 8.828z"></path>
                                </g>
                                <g id="Path_228_">
                                    <path d="m24.205 189.815c-3.995 0-7.492-2.684-8.526-6.543s.653-7.932 4.113-9.929l15.298-8.828c2.733-1.602 6.114-1.617 8.861-.039s4.438 4.506 4.431 7.674-1.711 6.089-4.464 7.655l-15.298 8.828c-1.342.777-2.865 1.185-4.415 1.182z"></path>
                                </g>
                                <g id="Path_227_">
                                    <path d="m207.687 83.884c-3.995 0-7.492-2.684-8.526-6.543s.653-7.932 4.113-9.929l15.298-8.828c2.733-1.602 6.114-1.617 8.861-.039s4.438 4.506 4.431 7.674-1.711 6.089-4.464 7.655l-15.3 8.827c-1.34.778-2.863 1.186-4.413 1.183z"></path>
                                </g>
                                <g id="Path_226_">
                                    <path d="m75.034 48.344c-3.157.003-6.075-1.68-7.654-4.414l-8.828-15.289c-1.602-2.733-1.617-6.114-.039-8.861s4.506-4.438 7.674-4.431 6.089 1.711 7.655 4.464l8.828 15.289c1.576 2.73 1.577 6.093.002 8.824-1.574 2.731-4.485 4.415-7.638 4.418z"></path>
                                </g>
                                <g id="Path_225_">
                                    <path d="m180.966 231.817c-3.157.003-6.075-1.68-7.654-4.414l-8.828-15.289c-2.398-4.218-.942-9.582 3.26-12.008s9.575-1.006 12.029 3.18l8.828 15.289c1.576 2.73 1.577 6.093.002 8.824s-4.485 4.415-7.637 4.418z"></path>
                                </g>
                                <g id="Path_224_">
                                    <path d="m222.967 189.815c-1.55.003-3.073-.405-4.414-1.183l-15.298-8.828c-4.186-2.454-5.607-7.827-3.18-12.029 2.426-4.202 7.79-5.658 12.008-3.26l15.298 8.828c3.46 1.998 5.147 6.07 4.113 9.929s-4.532 6.543-8.527 6.543z"></path>
                                </g>
                                <g id="Path_223_">
                                    <path d="m39.486 83.884c-1.55.003-3.073-.405-4.414-1.183l-15.298-8.828c-2.754-1.566-4.458-4.487-4.464-7.655-.007-3.168 1.684-6.096 4.431-7.674s6.129-1.563 8.861.039l15.298 8.829c3.46 1.998 5.147 6.07 4.113 9.929-1.035 3.859-4.532 6.543-8.527 6.543z"></path>
                                </g>
                                <g id="Path_222_">
                                    <path d="m172.138 48.344c-3.152-.003-6.063-1.687-7.638-4.418s-1.574-6.094.002-8.824l8.828-15.289c1.566-2.754 4.487-4.458 7.655-4.464 3.168-.007 6.096 1.684 7.674 4.431s1.563 6.129-.039 8.861l-8.828 15.289c-1.579 2.734-4.497 4.417-7.654 4.414z"></path>
                                </g>
                                <g id="Path_221_">
                                    <path d="m66.207 231.817c-3.152-.003-6.063-1.687-7.638-4.418s-1.574-6.094.002-8.824l8.828-15.289c2.454-4.186 7.827-5.607 12.029-3.18 4.202 2.426 5.658 7.79 3.26 12.008l-8.828 15.289c-1.578 2.734-4.496 4.417-7.653 4.414z"></path>
                                </g>
                                <g id="Path_220_">
                                    <path d="m364.032 397.219-11.043-13.188 147.932-122.35 11.123 13.276z"></path>
                                </g>
                                <g id="Path_219_">
                                    <path d="m450.207 348.932v74.814h-17.655v-60.23z"></path>
                                </g>
                                <g id="Path_218_">
                                    <path d="m406.069 459.057c0-9.751 7.904-17.655 17.655-17.655h35.31c9.751 0 17.655 7.905 17.655 17.655v8.828h-70.621v-8.828z"></path>
                                </g>
                                <g id="Path_217_">
                                    <path d="m214.034 397.219-11.044-13.188 147.933-122.35 11.123 13.276z"></path>
                                </g>
                                <g id="Path_216_">
                                    <path d="m300.209 348.932v74.814h-17.656v-60.23z"></path>
                                </g>
                                <g id="Path_215_">
                                    <path d="m256.071 459.057c0-9.751 7.905-17.655 17.655-17.655h35.31c9.751 0 17.655 7.905 17.655 17.655v8.828h-70.621v-8.828z"></path>
                                </g>
                                <g id="Path_214_">
                                    <path d="m63.965 397.219-11.044-13.188 147.933-122.35 11.123 13.276z"></path>
                                </g>
                                <g id="Path_213_">
                                    <path d="m150.14 348.932v74.814h-17.656v-60.23z"></path>
                                </g>
                                <g id="Path_212_">
                                    <path d="m106.002 459.057c0-9.751 7.904-17.655 17.655-17.655h35.31c9.751 0 17.655 7.905 17.655 17.655v8.828h-70.621v-8.828z"></path>
                                </g>
                                <g id="Path_211_">
                                    <path d="m503.172 512.022h-476.689c-4.875 0-8.828-3.952-8.828-8.828v-8.828c0-4.875 3.952-8.828 8.828-8.828h476.69c4.875 0 8.828 3.952 8.828 8.828v8.828c-.001 4.876-3.953 8.828-8.829 8.828z"></path>
                                </g>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <div class="pbmit-ihbox-title-top">
                <h2 class="pbmit-element-title">Advanced<br> Technology
                </h2>
                <div class="pbmit-heading-desc">Solar products and services  to meet your energy needs.</div>
            </div>
            <div class="pbmit-ihbox-title-bottom">
                <h2 class="pbmit-element-title">Advanced<br> Technology
                </h2>
            </div>
        </div>
    </div>
</div>
Icon box Style 6
<div class="pbmit-ihbox-style-6">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg height="512" viewBox="0 0 32 32" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 3">
                    <path d="m29.393 23.36c-.874-.733-6-3.979-6.852-3.83-.4.071-.706.412-1.525 1.389a11.687 11.687 0 0 1 -1.244 1.347 10.757 10.757 0 0 1 -2.374-.88 14.7 14.7 0 0 1 -6.784-6.786 10.757 10.757 0 0 1 -.88-2.374 11.687 11.687 0 0 1 1.347-1.244c.976-.819 1.318-1.123 1.389-1.525.149-.854-3.1-5.978-3.83-6.852-.306-.362-.584-.605-.94-.605-1.032 0-5.7 5.772-5.7 6.52 0 .061.1 6.07 7.689 13.791 7.721 7.589 13.73 7.689 13.791 7.689.748 0 6.52-4.668 6.52-5.7 0-.356-.243-.634-.607-.94z"></path>
                    <path d="m23 15h2a8.009 8.009 0 0 0 -8-8v2a6.006 6.006 0 0 1 6 6z"></path>
                    <path d="m28 15h2a13.015 13.015 0 0 0 -13-13v2a11.013 11.013 0 0 1 11 11z"></path>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">+1 0123456789</h2>
            <a class="pbmit-link" href="tel:+10123456789" title="pbmit-button-link"></a>
        </div>
    </div>
</div>
Icon box Style 8
<div class="pbmit-ihbox-style-8">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-heading-wrap">
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                    <svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg">
                        <g>
                            <g id="Page-1_2_">
                                <g id="_x30_03---Solar-Energy">
                                    <g id="Path_46_">
                                        <path d="m218.014 438.857h-117.852c-25.247 0-45.714-20.467-45.714-45.714v-45.714h18.286v45.714c.045 15.13 12.299 27.383 27.429 27.429h109.989c2.186 6.272 4.814 12.382 7.862 18.285z"></path>
                                    </g>
                                    <g id="Path_45_">
                                        <path d="m420.793 82.286-12.471-45.687h-55.387l5.486 45.687z"></path>
                                    </g>
                                    <g id="Path_44_">
                                        <path d="m461.872 232.741-13.623-49.883h-77.76l2.24 18.661c32.14 1.405 63.15 12.267 89.143 31.222z"></path>
                                    </g>
                                    <g id="Path_43_">
                                        <path d="m264.734 235.739c25.795-20.043 57.003-31.899 89.6-34.039l-2.258-18.843h-87.342z"></path>
                                    </g>
                                    <g id="Path_42_">
                                        <path d="m264.734 36.59v45.696h75.273l-5.486-45.687z"></path>
                                    </g>
                                    <g id="Path_41_">
                                        <path d="m36.162 310.857c0 10.099 8.187 18.286 18.286 18.286h18.286c10.099 0 18.286-8.187 18.286-18.286v-9.143h-54.858z"></path>
                                    </g>
                                    <g id="Path_40_">
                                        <path d="m235.33 265.143h-189.842c-5.696.014-11.074-2.628-14.544-7.146-3.47-4.517-4.637-10.394-3.156-15.894l57.426-210.286c2.144-7.963 9.353-13.506 17.6-13.531h305.554c8.239.022 15.446 5.552 17.6 13.504l57.417 210.286c.807 3.063.823 6.282.046 9.353 8.871 9.2 16.648 19.395 23.177 30.382 3.428-2.018 5.018-6.129 3.84-9.929l-72.32-265.144c-1.085-3.979-4.699-6.739-8.823-6.738h-347.428c-4.125-.006-7.743 2.751-8.832 6.729l-72.311 265.143c-.753 2.751-.179 5.695 1.551 7.962s4.42 3.596 7.271 3.595h213.44c3.704-6.361 7.824-12.47 12.334-18.286z"></path>
                                    </g>
                                    <g id="Path_39_">
                                        <path d="m264.734 164.571h85.147l-7.68-64h-77.467z"></path>
                                    </g>
                                    <g id="Path_38_">
                                        <path d="m150.567 100.571h-65.216l-17.454 64h74.99z"></path>
                                    </g>
                                    <g id="Path_37_">
                                        <path d="m443.257 164.571-17.472-64h-65.17l7.68 64z"></path>
                                    </g>
                                    <g id="Path_36_">
                                        <path d="m246.448 36.59-69.787-.009-5.486 45.705h75.273z"></path>
                                    </g>
                                    <g id="Path_35_">
                                        <path d="m380.555 371.794c-1.731-1.956-2.549-4.555-2.249-7.15l11.31-95.735-77.623 87.662h31.223c2.613-.002 5.101 1.113 6.838 3.065s2.556 4.553 2.25 7.148l-11.31 95.735 77.623-87.662h-31.223c-2.612.003-5.101-1.112-6.839-3.063z"></path>
                                    </g>
                                    <g id="Shape_5_">
                                        <path d="m365.305 219.429c-80.791 0-146.286 65.494-146.286 146.286s65.495 146.285 146.286 146.285 146.286-65.494 146.286-146.286c-.096-80.751-65.534-146.19-146.286-146.285zm68.837 165.485-83.319 94.089c-3.045 3.518-7.462 5.548-12.114 5.568-2.309-.006-4.589-.502-6.693-1.454-6.77-3.066-10.743-10.193-9.792-17.563l10.706-90.697h-24.247c-6.504.001-12.39-3.855-14.985-9.819-2.8-6.172-1.727-13.411 2.743-18.505l83.319-94.107c4.642-5.423 12.318-7.11 18.807-4.133 6.77 3.066 10.743 10.193 9.792 17.563l-10.679 90.715h24.247c6.504-.001 12.39 3.855 14.985 9.819 2.8 6.183 1.716 13.432-2.77 18.524z"></path>
                                    </g>
                                    <g id="Path_34_">
                                        <path d="m246.448 100.571h-77.467l-7.68 64h85.147z"></path>
                                    </g>
                                    <g id="Path_33_">
                                        <path d="m45.442 246.885 87.571-.01 7.68-64.018h-77.788z"></path>
                                    </g>
                                    <g id="Path_32_">
                                        <path d="m158.247 36.581-55.433-.01-12.471 45.715h62.418z"></path>
                                    </g>
                                    <g id="Path_31_">
                                        <path d="m246.448 182.857h-87.342l-7.68 64.018 95.022-.018z"></path>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </div>
            </div>
            <div class="pbmit-ihbox-contents">
                <h2 class="pbmit-element-title">Inverter Integration</h2>
                <div class="pbmit-heading-desc">Our Climate change mitigation focus on sustainable practices such as.</div>
            </div>
        </div>
    </div>
</div>
Icon box Style 9
<div class="pbmit-ihbox-style-9">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                    <g fill="rgb(0,0,0)">
                        <path d="m5.29289 1.29291 1.41422 1.41421-3.70711 3.70711v.58578h4v6.99999h-6v-8.4142z"></path>
                        <path d="m15 7.00001h-4v-.58578l3.7071-3.70711-1.4142-1.41421-4.2929 4.29289v8.4142h6z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Soon, solar energy will become so affordable and efficient that it will surpass nearly all other forms of electricity generation, with the possible exception of hydroelectric power.</h2>
            <div class="pbmit-heading-desc">Monika Valdom</div>
        </div>
    </div>
</div>
Icon box Style 10
<div class="pbmit-ihbox-style-10">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg aria-hidden="true" class="e-font-icon-svg e-fas-bell" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z"></path>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Get exclusive news & offers through our Solioz newsletter</h2>
        </div>
    </div>
</div>
Icon box Style 11
<div class="pbmit-ihbox-style-11">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg aria-hidden="true" class="e-font-icon-svg e-fab-apple" viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg">
                    <path d="M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z"></path>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <div class="pbmit-heading-desc">download on </div>
            <h2 class="pbmit-element-title">App Store</h2>
        </div>
    </div>
</div>
Icon box Style 12
<article class="pbmit-miconheading-style-12">
    <div class="pbmit-ihbox-style-12">
        <div class="pbmit-ihbox-box">
            <div class="pbmit-text-content">
                <span class="pbmit-ihbox-icon-type-text">1</span>        
                <div class="pbmit-text-content-wrapper">
                    <span class="pbmit-element-title">Training was completed</span>        
                    <span class="pbmit-heading-desc">with a rigorous focus on solar energy systems, building a strong foundation in photovoltaic design, installation, and sustainable power solutions.</span>        
                </div>
            </div>
        </div>
    </div>
</article>
Icon box Style 13
<div class="pbmit-ihbox-style-13">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg clip-rule="evenodd" fill-rule="evenodd" height="512" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg">
                    <g id="Icon">
                        <path d="m12 1.25c-3.723 0-6.75 3.054-6.75 6.821 0 1.276.562 2.859 1.38 4.438 1.801 3.477 4.801 6.979 4.801 6.979.142.166.35.262.569.262s.427-.096.569-.262c0 0 3-3.502 4.801-6.979.818-1.579 1.38-3.162 1.38-4.438 0-3.767-3.027-6.821-6.75-6.821zm0 4c-1.518 0-2.75 1.232-2.75 2.75s1.232 2.75 2.75 2.75 2.75-1.232 2.75-2.75-1.232-2.75-2.75-2.75z"></path>
                        <path d="m16.784 17.377c.813.244 1.483.546 1.946.9.3.228.52.451.52.723 0 .16-.091.305-.219.45-.212.239-.527.454-.917.654-1.378.705-3.606 1.146-6.114 1.146s-4.736-.441-6.114-1.146c-.39-.2-.705-.415-.917-.654-.128-.145-.219-.29-.219-.45 0-.272.22-.495.52-.723.463-.354 1.133-.656 1.946-.9.396-.119.621-.538.502-.934-.119-.397-.538-.622-.934-.503-1.238.373-2.2.884-2.778 1.449-.508.495-.756 1.049-.756 1.611 0 .702.397 1.402 1.204 1.986 1.416 1.024 4.26 1.764 7.546 1.764s6.13-.74 7.546-1.764c.807-.584 1.204-1.284 1.204-1.986 0-.562-.248-1.116-.756-1.611-.578-.565-1.54-1.076-2.778-1.449-.396-.119-.815.106-.934.503-.119.396.106.815.502.934z"></path>
                    </g>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h4 class="pbmit-element-subtitle">
                Office Address
            </h4>
            <div class="pbmit-heading-desc">1010 Rue Sainte-Catherine Ste 200, Montréal, QC H3B 5L1, Canada</div>
            <h2 class="pbmit-element-title">
                <a href="#">
                    <span class="pbmit-btn-wrapper"><span class="pbmit-button-render" data-text="Get Direction"><span>Get Direction</span></span></span>
                    <svg width="30" height="57" viewBox="0 0 30 57" xmlns="http://www.w3.org/2000/svg">
                        <path d="M30 57H29.8936C29.0087 49.5596 22.6785 43.79 15 43.79C7.3215 43.79 0.991261 49.5596 0.106445 57H0V0H0.193359C1.3444 7.14072 7.53455 12.5947 15 12.5947C22.4655 12.5947 28.6556 7.14071 29.8066 0H30V57Z"></path>
                    </svg>
                    <span class="pbmit-button-icon"><i class="pbmit-base-icon-arrow-right-1"></i></span>
                </a>
            </h2>
        </div>
        <a class="pbmit-link" href="#" title="Go to Get Direction"></a>
    </div>
</div>
Icon box Style 14
<div class="pbmit-ihbox-style-14">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-icon-box-wrapper">
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                    <svg height="16" viewBox="0 0 16 16" width="16" xmlns="http://www.w3.org/2000/svg">
                        <g fill="rgb(0,0,0)">
                            <path d="m5.29289 1.29291 1.41422 1.41421-3.70711 3.70711v.58578h4v6.99999h-6v-8.4142z"></path>
                            <path d="m15 7.00001h-4v-.58578l3.7071-3.70711-1.4142-1.41421-4.2929 4.29289v8.4142h6z"></path>
                        </g>
                    </svg>
                </div>
            </div>
            <div class="pbmit-heading-desc">“I used to dread opening my electricity bill now I look forward to seeing how much I’ve saved! Switching to solar has been a gamechanger for my home and my wallet”</div>
        </div>
        <h2 class="pbmit-element-title">Ronald Benson</h2>
        <div class="pbmit-ihbox-contents">
            <div class="pbmit-contents-wrap">
            </div>
        </div>
    </div>
</div>
Icon box Style 15
<article class="pbmit-miconheading-style-15">
    <div class="pbmit-ihbox-style-15">
        <div class="pbmit-ihbox-box">
            <h2 class="pbmit-element-title">
                2022 : The service or tenure award
            </h2>
            <div class="pbmit-heading-desc">Awarded for impactful community solar programs and renewable energy initiatives across rural areas. Celebrated for bringing clean and affordable solar power to over 3,000 underserved households.</div>
        </div>
    </div>
</article>
Icon box Style 17
<article class="pbmit-miconheading-style-17">
    <div class="pbmit-ihbox-style-17">
        <div class="pbmit-ihbox-box">
            <div class="pbmit-ihbox-icon">
                <div class="pbmit-ihbox-icon-wrapper">
                    <div class="pbmit-ihbox-icon-type-text">01</div>
                </div>
            </div>
            <div class="pbmit-ihbox-contents">
                <h2 class="pbmit-element-title">
                    Site Assessment & Planning
                </h2>
                <div class="pbmit-heading-desc">solar products and services  to meet your energy needs.</div>
            </div>
        </div>
    </div>
</article>
Icon box Style 18
<div class="pbmit-ihbox-style-18">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon">
                <svg id="Layer_1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1">
                    <path d="m191.42 460.15 16.78-137.91h-48.29c-1.81 0-3.48-.97-4.36-2.54-.89-1.58-.86-3.5.07-5.05l106.13-175.44c1.22-2.01 3.68-2.91 5.92-2.13 2.23.77 3.62 2.99 3.33 5.33l-16.78 137.91h48.3c1.8 0 3.47.97 4.36 2.55.88 1.57.85 3.5-.08 5.04l-106.13 175.44c-.93 1.53-2.57 2.41-4.28 2.41-.55 0-1.1-.09-1.64-.27-2.22-.77-3.61-2.99-3.33-5.34zm-154.53-265.51c1.86-.14 3.48-1.29 4.22-3 4.31-9.96 18.61-34.23 41.89-54.84 22.16-19.61 45.92-30.66 70.87-32.99-35.01 21.87-55.31 47.77-66.52 66.78-14.08 23.86-17.29 42.07-17.42 42.83-.24 1.45.16 2.93 1.1 4.05.95 1.13 2.34 1.78 3.81 1.79.51 0 1.01.01 1.52.01 84.37-.01 114.52-42.51 141.13-80.04 25.59-36.1 47.72-67.27 111.01-63.98 2.25.12 4.28-1.26 5-3.38s-.05-4.46-1.89-5.73c-53.51-36.97-106.12-54.53-156.36-52.18-41.56 1.93-80.45 18.31-109.53 46.11-19.97 19.09-34.42 42.8-40.68 66.75-6.43 24.53-3.86 47.79 7.23 65.49.99 1.57 2.76 2.47 4.62 2.33zm190.763 290.61c-112.304 0-203.669-91.366-203.669-203.669 0-27.203 5.262-53.533 15.635-78.342-.849 1.225-2.205 2.026-3.729 2.141-1.86.14-3.63-.76-4.62-2.33-1.883-3.006-3.5-6.184-4.89-9.489-12.19 27.794-18.384 57.398-18.384 88.02 0 58.674 22.849 113.834 64.336 155.322s96.647 64.335 155.321 64.335c41.328 0 81.598-11.54 116.456-33.371 33.308-20.86 60.398-50.235 78.499-85.018h-18.185c-36.309 63.424-103.12 102.402-176.77 102.402zm239.118-353.254c0-7.667-6.25-13.904-13.933-13.904s-13.904 6.238-13.904 13.904v58.833h27.837zm-71.916 214.323v22.398c0 2.236 1.889 4.125 4.125 4.125h34.072c2.236 0 4.125-1.889 4.125-4.125v-22.398c-6.68 2.124-13.787 3.279-21.161 3.279s-14.481-1.155-21.161-3.279zm-1.757-214.323c0-7.667-6.237-13.904-13.904-13.904s-13.933 6.238-13.933 13.904v58.833h27.837zm-36.043 110.849c-.337 0-.672-.013-1.006-.026v36.805c0 33.066 26.901 59.967 59.967 59.967s59.967-26.901 59.967-59.967v-36.805c-.334.013-.668.026-1.006.026zm-16.001-42.009v16.001c0 8.823 7.178 16.002 16.001 16.002h117.922c8.839 0 16.03-7.179 16.03-16.002v-16.001z"></path>
                </svg>
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Fights insomnia</h2>
            <div class="pbmit-heading-desc">Integer sagittis nisi nec tortor fermentum aliquet.</div>
        </div>
    </div>
</div>
Icon box Style 19
<div class="pbmit-ihbox-style-19">
    <div class="pbmit-ihbox-box">
        <div class="pbmit-ihbox-icon">
            <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-image">
                <img src="images/demo-2/10-masking.png" alt="Years of Experience">
            </div>
        </div>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Years of Experience</h2>
        </div>
    </div>
</div>
Icon box Style 20
<div class="pbmit-ihbox-style-20">
    <div class="pbmit-ihbox-box">
        <a class="pbmit-link-button" href="#" title="pbmit-button-link"></a>
        <div class="pbmit-ihbox-contents">
            <h2 class="pbmit-element-title">Request A <br>Quote</h2>
            <i class="demo-icon pbmit-base-icon-arrow-right-1"></i>
        </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-box-content-wrap">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/demo-1/service/service-01.jpg" class="img-fluid" alt="">
                </div>
            </div>
            <div class="pbmit-content-box">
                <svg xmlns="http://www.w3.org/2000/svg" width="30" height="138.05" viewBox="0 0 30 138.05">
                    <defs>
                        <style>.a{fill:#fff;}</style>
                    </defs>
                    <path class="a" d="M30,138.05h-.11a15,15,0,0,0-29.78,0H0v-57H.19a15,15,0,0,0,29.62,0H30Z"></path>
                    <path class="a" d="M30,110.41h-.11a15,15,0,0,0-29.78,0H0v-57H.19a15,15,0,0,0,29.62,0H30Z"></path>
                    <path class="a" d="M30,84.64h-.11a15,15,0,0,0-29.78,0H0v-57H.19a15,15,0,0,0,29.62,0H30Z"></path>
                    <path class="a" d="M30,57h-.11A15,15,0,0,0,.11,57H0V0H.19A15,15,0,0,0,15,12.59,15,15,0,0,0,29.81,0H30Z"></path>
                </svg>
                <h3 class="pbmit-service-title">
                    <a href="#">Commercial Solutions</a>
                </h3>
                <div class="pbmit-service-description">
                    <p>Our innovative solar technologies empower communities and business to thrive sustainably.</p>
                </div>
                <div class="pbmit-btn-wrapper">
                    <a class="pbmit-button" href="#">
                        <span class="pbmit-btn-wrapper">
                            <span class="pbmit-button-text" data-text="Read More">
                                <span class="pbmit-demo-icon-wrapp">
                                    <i class="pbmit-demo-icon-first pbmit-base-icon-arrow-right-1"></i> 
                                    <i class="demo-icon pbmit-base-icon-arrow-right-1"></i>
                                </span> 
                                <span class="pbmit-text-button">Read More</span>
                            </span>
                        </span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</article>
Service Box Style 2
<article class="pbmit-service-style-2">
    <div class="pbminfotech-post-item">
        <div class="pbmit-box-content-wrap">
            <a class="pbmit-link" href="#" title="Go to Commercial Solutions"></a>
            <div class="pbmit-content-box">
                <a class="pbmit-link-arrow" href="#">
                    <span class="pbmit-demo-icon-wrapp">
                        <i class="pbmit-demo-icon-first pbmit-base-icon-arrow-right-1"></i>
                    </span>
                </a>
                <div class="pbmit-featured-img-wrapper">
                    <div class="pbmit-featured-wrapper">
                        <img src="images/demo-2/service/service-01.jpg" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="pbmit-content-wrap">
                    <div class="pbmit-content-box-wrap">
                        <h3 class="pbmit-service-title"><a href="#">Commercial Solutions</a></h3>
                        <div class="pbmit-service-description">
                            <p>Our innovative solar technologies empower communities and business to thrive sustainably.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

Progress Bar

Use the below code to display Progress Bar style:

<div class="progressbar">
   <span class="progress-label">Biotechnology</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="80" aria-valuemin="0" aria-valuemax="100">
         <span class="progress-percent">80%</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-inner">
            <div class="pbmit-featured-img-wrapper">
                <div class="pbmit-featured-wrapper">
                    <img src="images/team/team-image-01.jpg" class="img-fluid" alt="">
                </div>
            </div>
            <a class="pbmit-link" href="#" title="Go to Andrea Luies"></a>
        </div>
        <div class="pbminfotech-box-content">
            <div class="pbmit-box-title-wrap">
                <h3 class="pbmit-team-title"><a href="#">Andrea Luies</a></h3>
                <div class="pbminfotech-box-team-position">Cheif Officer</div>
            </div>
            <div class="pbmit-short-description">
                Here’s a situation that comes up for many people when they move later in life: deciding whether installing solar is still worth it.            
            </div>
            <div class="pbmit-team-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-logo"></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-2"></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-logo"></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>
</article>

Testimonial

Use the below code to display Testimonial:

Testimonial Style 1
<article class="pbmit-testimonial-style-1">
    <div class="pbminfotech-post-item" style="background-image:url('');" >
        <div class="pbmit-featured-img-wrapper">
            <div class="pbmit-featured-wrapper">
                <img src="images/demo-1/testimonial/testimonial-01.jpg" class="img-fluid" alt="">
            </div>
        </div>
        <div class="pbminfotech-box-desc">
            <blockquote class="pbminfotech-testimonial-text">
                <p>“Were a growth equity firm empower new generation of extraordinary visionaries. Bolstering brands and tech-enabled solutions that make our lives healthier, happier and more convenient”</p>
            </blockquote>
        </div>
        <div class="pbminfotech-box-author">
            <div class="pbmit-auther-title-wrapper">
                <h3 class="pbminfotech-box-title">Ariana Green</h3>
            </div>
            <div class="pbminfotech-testimonial-detail">Managing Director</div>
        </div>
    </div>
</article>
Testimonial Style 3
<article class="pbmit-testimonial-style-3">
    <div class="pbminfotech-post-item">
        <div class="pbminfotech-testimonial-ratings-wrapp">
            <div class="pbminfotech-testimonial-ratings-wrapp-inner d-flex">
                <div class="pbminfotech-box-star-ratings_count">
                    <h4 class="pbmit-rating-number">5/5</h4>
                </div>
                <div class="pbminfotech-box-star-ratings">
                    <i class="pbmit-base-icon-star pbmit-active"></i>
                    <i class="pbmit-base-icon-star pbmit-active"></i>
                    <i class="pbmit-base-icon-star pbmit-active"></i>
                    <i class="pbmit-base-icon-star pbmit-active"></i>
                    <i class="pbmit-base-icon-star pbmit-active"></i>
                </div>
            </div>
            <div class="pbminfotech-star-ratings-text">30000+ People Trusting us!</div>
        </div>
        <div class="pbmit-featured-img-wrapper">
            <div class="pbmit-featured-wrapper">
                <img src="" class="img-fluid" alt="">
            </div>
        </div>
        <div class="pbminfotech-box-desc">
            <blockquote class="pbminfotech-testimonial-text">
                <p>“Were a growth equity firm empower new generation of extraordinary visionaries. Bolstering brands and tech-enabled solutions that make our lives healthier, happier and more convenient”</p>
            </blockquote>
        </div>
        <div class="pbminfotech-box-author">
            <div class="pbmit-auther-title-wrapper-inner">
                <div class="pbmit-auther-title-wrapper">
                    <h3 class="pbminfotech-box-title">Ariana Green</h3>
                </div>
                <div class="pbminfotech-testimonial-detail">Managing Director</div>
            </div>
        </div>
    </div>
</article>

Contact Form Setup

You can make the contact form working easily. You should know some basics for PHP coding and SMTP basic knowledge. Follow the steps given below to send email from the PHP script:

Prerequisites

You need SMTP details to set the script. There are two ways to get SMTP

  1. Get SMTP from your hosting service provider
  2. Get SMTP from your Gmail account

1. Get SMTP from your hosting service provider

If you have server with email server and want to use your domain email address then you can get SMTP login details from your hosting directly. Please contact your hosting service provider and they will send you SMTP login details.


2. Get SMTP from your Gmail account

There are some settings need to be done in your Gmail account to get SMTP details and make it working. Please follow steps given on this page

netcorecloud.com/tutorials/send-an-email-via-gmail-smtp-server-using-php


Setting SMTP details in send.php script file

Open send.php file and edit as described below:

  • Set SMTP details in the file in the SMTP Email Settings section (line number 7 to 18).
  • If you added more fields in the Contact form, then you need to edit Form fields you want to receive in email section (line number 25 to 50).

That's all you need to setup. This will send email with all form data.

If you have any quesiton or confusion, then please create a ticket on our support site so our team will guide you properly on this.

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.