Solaar Introduction
This documentation will give you an understanding of how Solaar template is structured and guide you in performing common functions.
If you want to customize, please contact us here: [email protected]
Author: PBM InfotechInstallation
Follow the steps below to get started with your Site Template:
- Open the ... /Template Folder to find all the Templates Files
- You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
- 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)
- 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"> <!-- Doctery 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.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 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:
<!-- "DM Sans", sans-serif; --> @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&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');
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:
Counter
Use the below code to display Counter style:
Counter Style 2
<div class="pbminfotech-ele-fid-style-2"> <div class="pbmit-fld-contents"> <div class="pbmit-fld-wrap"> <div class="pbmit-fid-icon-title"> <span class="pbmit-fid-title">Years experience<br>working</span> </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="85" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">85</span> <span class="pbmit-fid"><span>+</span></span> </h4> </div> </div> </div>
Counter Style 5
<div class="pbminfotech-ele-fid-style-5"> <div class="pbmit-fld-contents"> <div class="pbmit-fld-wrap"> <div class="pbmit-fld-wrap-inner d-flex"> <div class="pbmit-sbox-icon-wrapper pbmit-icon-type-icon"> <i class="pbmit-solaar-icon pbmit-solaar-icon-nuclear-plant"></i> </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="2386" data-interval="5" data-before="" data-before-style="" data-after="" data-after-style="">2386</span> <span class="pbmit-fid"><span>+</span></span> </h4> </div> <span class="pbmit-fid-title">Trusted customers around the world</span> </div> </div> </div>
Icon box
Use the below code to display Icon box style:
Icon box Style 3
<div class="pbmit-ihbox-style-3"> <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 60 60" width="512" xmlns="http://www.w3.org/2000/svg"> <g id="Page-1" fill="none" fill-rule="evenodd"> <g fill="rgb(0,0,0)" fill-rule="nonzero" transform="translate(0 -1)"> <path d="m31.2383 34.99c-2.2415644-.0103981-4.4685165-.3615784-6.6045-1.0415-3.4128423-1.1417755-5.9477395-4.0310188-6.6358-7.5634-.7529-3.6265.6192-7.461 3.7637-10.52.3374-.3286.688-.6433667 1.0518-.9443 3.2196288-2.6954608 7.5602996-3.6321929 11.605-2.5044 3.9157536 1.2498134 6.6214551 4.8283567 6.7568 8.9365.1466146 2.3647451-.6241352 4.6949748-2.1519 6.5059-1.1783023 1.4842706-3.0874488 2.185355-4.9463 1.8164-.7602176-.1577458-1.4234762-.6181385-1.8371-1.2752-.3711287-.6382278-.4663065-1.4000836-.2636-2.11.8745-3.3056 1.7636-8.3291 1.7724-8.38.0621106-.3519066.3072431-.6439461.6430585-.76611s.7112953-.0558927.985.17385c.2737048.2297427.4040521.5880534.3419415.93996-.0371.209-.9126 5.1572-1.8086 8.5435-.063952.1876506-.0478957.3933459.0444.5688.1382799.191343.3469169.3199065.58.3574 1.1379287.1899234 2.2873612-.2665919 2.9849-1.1855 1.1864016-1.4193487 1.780845-3.2409596 1.66-5.0869-.0977844-3.2700176-2.242135-6.124934-5.3554-7.13-3.3983056-.9347035-7.0389503-.1361935-9.7341 2.135-.3213.2667-.6338.5459-.9336.8379-1.5546 1.5122-4.0371 4.65-3.2006 8.68.5620337 2.8154834 2.5728764 5.1228675 5.2851 6.0645 4.69 1.4961 11.4292 1.6762 14.98-2.7388.3488575-.4201425.9702584-.4827231 1.3958849-.1405779s.4980618.9624746.1627151 1.3934779c-2.6257 3.2653-6.6213 4.4335-10.5412 4.4335z"></path> <path d="m27.8149 29.8052c-1.0570282.0181646-2.0880311-.3284577-2.9194-.9815-1.9194-1.5361-1.9722-4.2046-1.4341-6.0219.1812165-.6052113.4245444-1.1900564.7261-1.7452.7503224-1.5138869 1.9500705-2.7589691 3.4351-3.5649 1.8493462-.9596056 4.1088442-.5957076 5.5634.896.7216241.7908253 1.2651883 1.727263 1.594 2.7461.1741403.5170195-.0982507 1.0782018-.6121886 1.2612366-.513938.1830348-1.0797365-.0796331-1.2716114-.5903366-.2370831-.7527039-.6311586-1.4465454-1.1562-2.0357-.8480317-.8672392-2.1694059-1.0645586-3.2338-.4829-1.1136951.6280705-2.0087091 1.5816703-2.565 2.7329-.2337738.431336-.4225991.8855555-.5635 1.3555-.3886 1.3145-.3032 3.03.7691 3.8887 1.1723.9414 3.15.5434 4.2627-.4165.829232-.746533 1.5417334-1.6132856 2.1137-2.5713.1852213-.3103564.5234962-.4966162.8847981-.4871844.3613019.0094317.6893982.213087.8581746.5326844.1687764.3195975.1519648.7053954-.0439727 1.0091-.6774817 1.1288507-1.5209182 2.1493684-2.502 3.0273-1.0934765.9226171-2.4746572 1.4346934-3.9053 1.4479z"></path> <path d="m57 61h-54c-1.65610033-.0018187-2.99818129-1.3438997-3-3v-37c.00001572-.3877788.22421679-.7405895.57528314-.9052857s.76569921-.1115825 1.06391686.1362857l24.5371 20.3925c2.2201734 1.8335597 5.4293979 1.8329723 7.6489-.0014l24.5348-20.3911c.2981965-.248376.7131706-.3017925 1.0645472-.1370311.3513766.1647613.5756955.5179438.5754528.9060311v37c-.0018187 1.6561003-1.3438997 2.9981813-3 3zm-55-37.8687v34.8687c.00071619.5519878.44801218.9992838 1 1h54c.5520791-.0004962.9995038-.4479209 1-1v-34.8687l-22.8979 19.03c-2.9606327 2.446724-7.241348 2.4473534-10.2027.0015z"></path> <path d="m1.001 22c-.4355701.0003953-.82129491-.2811908-.95363398-.6961701-.13233908-.4149794.01915201-.8678864.37453398-1.1197299l9-6.38c.45059523-.3122969 1.0686272-.2035665 1.3855809.2437653s.2146394 1.0664583-.2293809 1.3880347l-9 6.38c-.16852428.1199208-.37026338.1842773-.5771.1841z"></path> <path d="m58.999 22c-.2068366.0001773-.4085757-.0641792-.5771-.1841l-9-6.38c-.4440203-.3215764-.5463346-.9407029-.2293809-1.3880347s.9349857-.5560622 1.3855809-.2437653l9 6.38c.355382.2518435.5068731.7047505.374534 1.1197299-.1323391.4149793-.5180639.6965654-.953634.6961701z"></path> <path d="m39.2393 8c-.2070115.00010935-.4089216-.06423486-.5777-.1841l-4.78-3.39c-2.2188862-1.87501472-5.4612857-1.89454674-7.7026-.0464l-4.84 3.4365c-.291493.20671388-.6711242.24221572-.9958901.09313231-.324766-.1490834-.5453271-.46010273-.5786-.81590001-.033273-.35579728.1257971-.70231843.4172901-.9090323l4.78-3.39c2.9536144-2.41503467 7.2051289-2.39582552 10.1368.0458l4.72 3.3438c.3556854.25178052.5073677.70490665.3749428 1.12008029s-.5184618.69678741-.9542428.69611971z"></path> <path d="m1.65 60.46c-.42143186.0003675-.79786247-.263514-.94122905-.6598105-.14336657-.3962966-.02289448-.8399405.30122905-1.1092895l22.82-18.96c.2742111-.2331685.6525759-.3009793.9906961-.1775532.3381203.1234261.5838207.4190432.643333.7740327.0595122.3549896-.0763472.7145733-.3557291.9415205l-22.82 18.96c-.17916597.149357-.40504487.2311377-.6383.2311z"></path> <path d="m58.3486 60.46c-.2330738.0001375-.4587858-.0816243-.6377-.231l-22.82-18.96c-.2793819-.2269472-.4152413-.5865309-.3557291-.9415205.0595123-.3549895.3052127-.6506066.643333-.7740327.3381202-.1234261.716485-.0556153.9906961.1775532l22.8194 18.96c.3241235.269349.4445956.7129929.301229 1.1092895-.1433665.3962965-.5197971.660178-.941229.6598105z"></path> <path d="m50 29.48c-.5522847 0-1-.4477153-1-1v-20.4722c-.0029.021-.043-.0073-.11-.0078h-37.78c-.0442022-.00271479-.0875817.01282953-.12.043l.01 20.437c0 .5522847-.4477153 1-1 1-.55228475 0-1-.4477153-1-1v-20.48c.03226085-1.13410356.97579439-2.02844815 2.11-2h37.78c1.134163-.02833724 2.0776307.86594492 2.11 2v20.48c0 .5522847-.4477153 1-1 1z"></path> </g> </g> </svg> </div> </div> <div class="pbmit-ihbox-contents"> <h2 class="pbmit-element-title">Mail Us 24/7</h2> <div class="pbmit-heading-desc">[email protected] [email protected] </div> </div> </div> </div>
Icon box Style 7
<div class="pbmit-ihbox-style-7"> <div class="pbmit-ihbox-box"> <div class="pbmit-icon-wrapper d-flex"> <div class="pbmit-ihbox-icon"> <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"> <g> <g id="right_x5F_quote_x5F_alt"> <g> <polygon points="0,4 0,28 12,16 12,4"></polygon> <polygon points="20,4 20,28 32,16 32,4"></polygon> </g> </g> </g> </svg> </div> </div> <div class="pbmit-title-wrap"> <h2 class="pbmit-element-title">“Soon, solar energy will be so cheap that it will out-compete all other forms of electricity production, except perhaps.</h2> <div class="pbmit-heading-desc">Satisfied client</div> </div> </div> </div> </div>
Icon box Style 10
<div class="pbmit-ihbox-style-10"> <div class="pbmit-ihbox-box"> <div class="pbmit-ihbox-contents"> <h2 class="pbmit-element-title">Don’t throw your future away</h2> <div class="pbmit-btn-wrap"> <div class="pbmit-ihbox-btn"> <a class="pbmit-button-inner" href="#"> <span class="pbmit-button-icon">What you can do?</span> </a> </div> </div> </div> <div class="pbmit-ihbox-icon"> <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-image"> <img src="images/homepage-1/ihbox/image-01.png" alt="Don’t throw your future away"> </div> </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-ihbox-icon-type-image"> <img src="images/homepage-1/ihbox/Group-img.png" alt="Icon"> </div> </div> <div class="pbmit-ihbox-contents"> <div class="pbmit-heading-desc"><strong>4.9 </strong>(3,2K customer reviews)</div> </div> </div> </div>
Icon box Style 12
<div class="pbmit-ihbox-style-12"> <div class="pbmit-ihbox-box d-flex"> <div class="pbmit-ihbox-icon"> <div class="pbmit-ihbox-icon-wrapper pbmit-icon-type-icon"> <svg id="Layer_10" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <g> <g> <g> <g> <g> <path d="m227.4 441.9c-2.7 0-4.9-2.2-4.9-4.9v-26.8c0-33.3-11.6-65.7-32.7-91.3l-58.4-70.8c-3.2-3.1-7.6-4.5-11.7-3.9h-.3c-.3 0-.8.1-1 .2-.1 0-.2.1-.4.1-1.5.4-3 1-4.1 1.8-6.2 4.3-8 12.5-4.1 18.8l47.2 76.2c1.4 2.3.7 5.3-1.6 6.7s-5.3.7-6.7-1.6l-47.2-76.2c-6.6-10.7-3.7-24.7 6.7-31.9 2.1-1.5 4.6-2.7 7.3-3.3.9-.3 1.8-.4 2.5-.5h.2c7.1-1.1 14.7 1.4 20.1 6.7.1.1.2.3.4.4l58.5 71c22.5 27.4 34.9 62 34.9 97.5v26.9c.2 2.7-2 4.9-4.7 4.9z"></path> </g> </g> <g> <g> <path d="m238.5 471h-114.6c-4.4 0-7.9-3.6-7.9-7.9v-17.8c0-7.4 6-13.4 13.4-13.4h103.6c7.4 0 13.4 6 13.4 13.4v17.8c0 4.3-3.5 7.9-7.9 7.9zm-112.8-9.8h110.9v-15.9c0-2-1.6-3.6-3.6-3.6h-103.7c-2 0-3.6 1.6-3.6 3.6z"></path> </g> </g> <g> <path d="m134.9 441.8c-2.7 0-4.9-2.2-4.9-4.9 0-18.3-6.6-36.2-18.5-50.2l-53.2-62.5c-.1-.1-.1-.2-.2-.3-12.7-17.1-17.6-38.8-13.6-59.5l29.2-150.3c1.3-6.8 5.3-12.7 11.1-16.6 5.9-3.9 12.8-5.3 19.7-3.9 9.6 2 17.1 9.1 19.7 18.6.7 2 1 4.4 1 7.1v.1l-3.5 120.6c-.1 2.7-2.4 4.8-5 4.7-2.7-.1-4.8-2.3-4.7-5l3.6-120.4c0-1.6-.2-3-.5-4.1 0-.1-.1-.2-.1-.3-1.6-6-6.3-10.5-12.3-11.7-4.2-.9-8.6 0-12.3 2.4s-6.1 6.1-7 10.3l-29.2 150.4c-3.5 18 .8 36.8 11.7 51.6l53.1 62.4c13.4 15.8 20.8 35.9 20.8 56.5 0 2.8-2.2 5-4.9 5z"></path> </g> </g> <g> <g> <g> <path d="m284.6 441.8c-2.7 0-4.9-2.2-4.9-4.9v-26.7c0-35.5 12.4-70.2 34.9-97.5l58.5-71c.1-.1.2-.2.3-.3 5.4-5.4 12.9-7.9 20.2-6.7l.4.1c.6.1 1.3.2 2.1.4 2.6.6 5.1 1.8 7.4 3.3 10.4 7 13.4 21 6.8 31.9l-47.3 76.2c-1.4 2.3-4.4 3-6.7 1.6s-3-4.4-1.6-6.7l47.3-76.1c3.9-6.3 2.1-14.6-4-18.7-1.4-1-2.8-1.6-4.3-1.9-.1 0-.1 0-.2-.1-.2-.1-.7-.1-1.1-.2l-.5-.1c-4.1-.6-8.5.8-11.6 3.9l-58.4 70.9c-21.1 25.6-32.7 58-32.7 91.3v26.7c.3 2.4-1.9 4.6-4.6 4.6z"></path> </g> </g> <g> <g> <path d="m388 471h-114.4c-4.4 0-7.9-3.6-7.9-7.9v-17.8c0-7.4 6-13.4 13.4-13.4h103.7c7.4 0 13.4 6 13.4 13.4v17.8.6c-.6 4.1-4.1 7.3-8.2 7.3zm-112.6-9.8h110.9v-15.9c0-2-1.6-3.6-3.6-3.6h-103.6c-2 0-3.6 1.6-3.6 3.6v15.9z"></path> </g> </g> <g> <path d="m377 441.8c-2.7 0-4.9-2.2-4.9-4.9 0-20.7 7.4-40.7 20.8-56.5l53.1-62.4c11-14.8 15.2-33.7 11.7-51.6l-29.3-150.4c-.8-4.2-3.3-7.9-6.9-10.3-3.7-2.4-8-3.3-12.3-2.4-5.9 1.2-10.7 5.7-12.3 11.7-.4 1.4-.6 3-.6 4.3l3.6 120.4c.1 2.7-2 4.9-4.7 5s-5-2-5-4.7l-3.6-120.5v-.1c0-2.3.3-4.7 1-7 2.6-9.5 10.2-16.7 19.7-18.7 6.9-1.4 13.9 0 19.7 3.9s9.8 9.8 11.1 16.6l29.3 150.3c4 20.7-.9 42.4-13.6 59.5-.1.1-.1.2-.2.3l-53.2 62.5c-11.9 14-18.5 31.9-18.5 50.2 0 2.6-2.2 4.8-4.9 4.8z"></path> </g> </g> </g> <g> <path d="m256.4 273.4c-64.1 0-116.2-52.1-116.2-116.2s52.1-116.2 116.2-116.2 116.2 52.1 116.2 116.2-52.1 116.2-116.2 116.2zm0-222.6c-58.7 0-106.4 47.7-106.4 106.4s47.7 106.4 106.4 106.4 106.4-47.7 106.4-106.4-47.7-106.4-106.4-106.4z"></path> </g> <g> <g> <path d="m238.5 213.6h-6.4c-30.4 0-55.2-24.8-55.2-55.2v-6.4c0-2.7 2.2-4.9 4.9-4.9h6.4c30.4 0 55.2 24.8 55.2 55.2v6.4c0 2.7-2.2 4.9-4.9 4.9zm-51.8-56.7v1.5c0 25.1 20.4 45.4 45.4 45.4h1.5v-1.5c0-25.1-20.4-45.4-45.4-45.4z"></path> </g> <g> <path d="m256.5 152.9c-1.7 0-3.3-.6-4.6-1.9l-2.7-2.7c-9-8.9-13.9-20.8-13.9-33.4s4.9-24.5 13.9-33.4l2.7-2.7c2.6-2.6 6.7-2.6 9.3 0l2.7 2.7c8.9 8.9 13.8 20.8 13.8 33.4s-4.9 24.5-13.8 33.4l-2.7 2.7c-1.4 1.3-3 1.9-4.7 1.9zm0-65-.5.5c-7.1 7.1-11 16.5-11 26.5s3.9 19.4 11 26.5l.5.5.5-.5c7.1-7.1 11-16.5 11-26.5s-3.9-19.4-11-26.5z"></path> </g> <g> <path d="m256.4 231.6c-1.3 0-2.5-.5-3.5-1.4l-46.2-46.3c-1.9-1.9-1.9-5 0-6.9s5-1.9 6.9 0l46.2 46.3c1.9 1.9 1.9 5 0 6.9-.9.9-2.2 1.4-3.4 1.4z"></path> </g> <g> <g> <path d="m280.7 213.6h-6.4c-2.7 0-4.9-2.2-4.9-4.9v-6.4c0-30.4 24.8-55.2 55.2-55.2h6.4c2.7 0 4.9 2.2 4.9 4.9v6.4c0 30.4-24.7 55.2-55.2 55.2zm-1.4-9.8h1.5c25.1 0 45.4-20.4 45.4-45.4v-1.5h-1.5c-25.1 0-45.4 20.4-45.4 45.4z"></path> </g> <g> <path d="m256.5 231.6c-1.2 0-2.5-.5-3.5-1.4-1.9-1.9-1.9-5 0-6.9l46.2-46.3c1.9-1.9 5-1.9 6.9 0s1.9 5 0 6.9l-46.2 46.3c-.9.9-2.2 1.4-3.4 1.4z"></path> </g> </g> <g> <path d="m256.4 273.3c-2.7 0-4.9-2.2-4.9-4.9v-153.5c0-2.7 2.2-4.9 4.9-4.9s4.9 2.2 4.9 4.9v153.5c0 2.7-2.2 4.9-4.9 4.9z"></path> </g> </g> </g> </svg> </div> </div> <div class="pbmit-ihbox-contents"> <h2 class="pbmit-element-title">Commercial Solutions</h2> <div class="pbmit-heading-desc">Our Climate change mitigation focus on sustainable practices such as rainwater harvesting, wastewater recycling.</div> </div> </div> </div>
Icon box Style 13
<div class="pbmit-ihbox-style-13"> <div class="pbmit-ihbox-box" style="background-image: url('images/homepage-1/ihbox/image-02.png');"> <a class="pbmit-icon-link pbmin-lightbox-video" href="https://www.youtube.com/watch?v=SZEflIVnhH8"> <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-play" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"> <path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path> </svg> </div> </div> </a> <div class="pbmit-ihbox-contents"> <h2 class="pbmit-element-title">Watch video <br>introduction.</h2> </div> </div> </div>
Icon box Style 14
<article class="pbmit-miconheading-style-14"> <div class="pbmit-ihbox-style-14"> <div class="pbmit-ihbox-box"> <div class="pbmit-ihbox-icon"> <div class="pbmit-ihbox-icon-wrapper pbmit-ihbox-icon-type-image"> <img src="images/homepage-2/ihbox/image-01.jpg" alt="System Design"> </div> </div> <div class="pbmit-ihbox-box-number-wrapper"> <div class="pbmit-ihbox-box-number">01</div> </div> <h2 class="pbmit-element-title"> System Design </h2> <div class="pbmit-heading-desc">Tailoring efficient and sustainable solar energy systems to meet your specific needs.</div> </div> </div> </article>
Icon box Style 15
<div class="pbmit-ihbox-style-15"> <div class="pbmit-ihbox-box d-flex"> <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-far-question-circle" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"></path> </svg> </div> </div> <div class="pbmit-ihbox-contents"> <div class="pbmit-heading-desc">Answers to 100+ Questions.</div> <h2 class="pbmit-element-title"> <a class="pbmit-button-inner" href="#"> <span class="pbmit-button-icon">Explore Faq’s</span> </a> </h2> </div> </div> </div>
Icon box Style 16
<div class="pbmit-ihbox-style-16"> <div class="pbmit-ihbox-box"> <div class="pbmit-ihbox-box-number-wrapper"> <div class="pbmit-ihbox-box-number">01</div> </div> <h2 class="pbmit-element-title">System Design</h2> <div class="pbmit-heading-desc">Tailoring efficient and sustainable solar energy systems to meet your specific needs.</div> </div> </div>
Service Box
Use the below code to display Service Box style:
Service Box Style 3
<article class="pbmit-service-style-3"> <div class="pbminfotech-post-item"> <div class="pbmit-box-content-wrap"> <div class="pbmit-service-image-wrapper"> <div class="pbmit-featured-img-wrapper"> <div class="pbmit-featured-wrapper"> <img src="images/homepage-1/service/service-img-01.jpg" class="img-fluid" alt=""> </div> </div> <div class="pbmit-service-icon"> <svg id="Layer_12" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <g> <g> <g> <path d="m362.7 325.6c-2 0-4-1.3-4.6-3.4l-90.8-274.7c-.8-2.6.5-5.3 3.1-6.2 2.6-.8 5.3.5 6.2 3.1l90.8 274.7c.8 2.6-.5 5.3-3.1 6.2-.6.2-1.1.3-1.6.3z"></path> </g> <g> <path d="m290.1 325.8c-2.1 0-4-1.3-4.6-3.4l-90.8-274.9c-.8-2.6.5-5.3 3.1-6.2 2.6-.8 5.3.5 6.2 3.1l90.8 274.9c.8 2.6-.5 5.3-3.1 6.2-.6.2-1.1.3-1.6.3z"></path> </g> <g> <path d="m217.5 326c-2.1 0-4-1.3-4.6-3.4l-90.9-275.1c-.8-2.6.5-5.3 3.1-6.2 2.6-.8 5.3.5 6.2 3.1l90.9 275.1c.8 2.6-.5 5.3-3.1 6.2-.6.2-1.1.3-1.6.3z"></path> </g> <g> <g> <path d="m374.3 142.6h-217.4c-2.7 0-4.9-2.2-4.9-4.9s2.2-4.9 4.9-4.9h217.4c2.7 0 4.9 2.2 4.9 4.9s-2.2 4.9-4.9 4.9z"></path> </g> <g> <path d="m404 234.4h-216.8c-2.7 0-4.9-2.2-4.9-4.9s2.2-4.9 4.9-4.9h216.8c2.7 0 4.9 2.2 4.9 4.9-.1 2.7-2.2 4.9-4.9 4.9z"></path> </g> </g> <g> <path d="m188.8 326c-5.3 0-10.1-3.4-11.9-8.6v-.1l-82.9-259.5c-1.3-3.9-.7-8.1 1.7-11.4 2.4-3.4 6.4-5.4 10.5-5.4h232.4c5.7 0 10.7 3.7 12.3 9l83.7 258.4c1.3 3.9.7 8.1-1.7 11.5s-6.4 5.4-10.5 5.4l-233 .7c-.2 0-.4 0-.6 0zm-2.6-11.9c.4 1 1.3 2.1 2.8 2.1h.3l233.2-.7c1.1 0 2-.5 2.6-1.3.3-.5.8-1.4.4-2.7l-83.8-258.5v-.1c-.4-1.2-1.6-2.1-2.9-2.1h-232.5c-1.1 0-2 .5-2.6 1.3-.3.5-.8 1.4-.4 2.7z"></path> </g> <g> <path d="m161.9 439.2c-2.7 0-4.9-2.2-4.9-4.9v-180.1c0-2.7 2.2-4.9 4.9-4.9s4.9 2.2 4.9 4.9v180.1c0 2.8-2.2 4.9-4.9 4.9z"></path> </g> <g> <path d="m123.8 439.2c-2.7 0-4.9-2.2-4.9-4.9v-299.4c0-2.7 2.2-4.9 4.9-4.9s4.9 2.2 4.9 4.9v299.4c0 2.8-2.2 4.9-4.9 4.9z"></path> </g> <g> <path d="m200.4 471h-114.9c-4.8 0-8.9-4.1-8.9-8.9v-8.3c0-13.3 10.8-24.1 24.1-24.1h84.3c13.3 0 24.1 10.8 24.1 24.1v8.3c0 4.7-3.8 8.7-8.5 8.9-.1 0-.1 0-.2 0zm-114.1-9.8h113v-7.4c0-7.9-6.4-14.4-14.4-14.4h-84.2c-7.9 0-14.4 6.4-14.4 14.4z"></path> </g> </g> <g> <path d="m426.6 471h-116c-4.9 0-8.8-3.9-8.8-8.8v-76c0-4.9 3.9-8.8 8.8-8.8h116c4.9 0 8.8 3.9 8.8 8.8v76c0 4.9-3.9 8.8-8.8 8.8zm-115-9.8h114v-74.1h-114z"></path> </g> <g> <path d="m368.7 451.9c-.7 0-1.4-.2-2.1-.5-2.4-1.2-3.5-4.1-2.3-6.5l7-14.5h-13c-1.7 0-3.3-.9-4.2-2.4s-.9-3.3-.1-4.8l13.4-24.2c1.3-2.4 4.3-3.2 6.6-1.9 2.4 1.3 3.2 4.3 1.9 6.6l-9.4 17h12.5c1.7 0 3.2.9 4.1 2.3s1 3.2.3 4.7l-10.4 21.5c-.8 1.7-2.5 2.7-4.3 2.7z"></path> </g> <g> <g> <path d="m347 387.2c-2.7 0-4.9-2.2-4.9-4.9v-14.1h-14.5v14.1c0 2.7-2.2 4.9-4.9 4.9s-4.9-2.2-4.9-4.9v-16.7c0-3.9 3.2-7.1 7.1-7.1h19.7c3.9 0 7.1 3.2 7.1 7.1v16.7c.2 2.7-2 4.9-4.7 4.9z"></path> </g> <g> <path d="m414.6 387.2c-2.7 0-4.9-2.2-4.9-4.9v-14.1h-14.5v14.1c0 2.7-2.2 4.9-4.9 4.9s-4.9-2.2-4.9-4.9v-16.7c0-3.9 3.2-7.1 7.1-7.1h19.7c3.9 0 7.1 3.2 7.1 7.1v16.7c.2 2.7-2 4.9-4.7 4.9z"></path> </g> </g> <g> <path d="m306.8 429.2h-58c-7.9 0-14.4-6.4-14.4-14.4v-28.7c0-2.5-2.1-4.6-4.6-4.6h-68c-2.7 0-4.9-2.2-4.9-4.9s2.2-4.9 4.9-4.9h68c7.9 0 14.4 6.4 14.4 14.4v28.7c0 2.5 2.1 4.6 4.6 4.6h58c2.7 0 4.9 2.2 4.9 4.9s-2.2 4.9-4.9 4.9z"></path> </g> </g> </svg> </div> </div> <div class="pbmit-content-box d-flex"> <div class="pbminfotech-box-number">1</div> <h3 class="pbmit-service-title"> <a href="#">Commercial Solutions</a> </h3> </div> </div> </div> </article>
Service Box Style 4
<article class="pbmit-service-style-4"> <div class="pbminfotech-post-item"> <div class="pbmit-box-content-wrap"> <div class="pbmit-content-box"> <div class="pbminfotech-box-number">01</div> <div class="pbmit-service-icon"> <svg id="Layer_12" enable-background="new 0 0 512 512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> <g> <g> <g> <path d="m362.7 325.6c-2 0-4-1.3-4.6-3.4l-90.8-274.7c-.8-2.6.5-5.3 3.1-6.2 2.6-.8 5.3.5 6.2 3.1l90.8 274.7c.8 2.6-.5 5.3-3.1 6.2-.6.2-1.1.3-1.6.3z"></path> </g> <g> <path d="m290.1 325.8c-2.1 0-4-1.3-4.6-3.4l-90.8-274.9c-.8-2.6.5-5.3 3.1-6.2 2.6-.8 5.3.5 6.2 3.1l90.8 274.9c.8 2.6-.5 5.3-3.1 6.2-.6.2-1.1.3-1.6.3z"></path> </g> <g> <path d="m217.5 326c-2.1 0-4-1.3-4.6-3.4l-90.9-275.1c-.8-2.6.5-5.3 3.1-6.2 2.6-.8 5.3.5 6.2 3.1l90.9 275.1c.8 2.6-.5 5.3-3.1 6.2-.6.2-1.1.3-1.6.3z"></path> </g> <g> <g> <path d="m374.3 142.6h-217.4c-2.7 0-4.9-2.2-4.9-4.9s2.2-4.9 4.9-4.9h217.4c2.7 0 4.9 2.2 4.9 4.9s-2.2 4.9-4.9 4.9z"></path> </g> <g> <path d="m404 234.4h-216.8c-2.7 0-4.9-2.2-4.9-4.9s2.2-4.9 4.9-4.9h216.8c2.7 0 4.9 2.2 4.9 4.9-.1 2.7-2.2 4.9-4.9 4.9z"></path> </g> </g> <g> <path d="m188.8 326c-5.3 0-10.1-3.4-11.9-8.6v-.1l-82.9-259.5c-1.3-3.9-.7-8.1 1.7-11.4 2.4-3.4 6.4-5.4 10.5-5.4h232.4c5.7 0 10.7 3.7 12.3 9l83.7 258.4c1.3 3.9.7 8.1-1.7 11.5s-6.4 5.4-10.5 5.4l-233 .7c-.2 0-.4 0-.6 0zm-2.6-11.9c.4 1 1.3 2.1 2.8 2.1h.3l233.2-.7c1.1 0 2-.5 2.6-1.3.3-.5.8-1.4.4-2.7l-83.8-258.5v-.1c-.4-1.2-1.6-2.1-2.9-2.1h-232.5c-1.1 0-2 .5-2.6 1.3-.3.5-.8 1.4-.4 2.7z"></path> </g> <g> <path d="m161.9 439.2c-2.7 0-4.9-2.2-4.9-4.9v-180.1c0-2.7 2.2-4.9 4.9-4.9s4.9 2.2 4.9 4.9v180.1c0 2.8-2.2 4.9-4.9 4.9z"></path> </g> <g> <path d="m123.8 439.2c-2.7 0-4.9-2.2-4.9-4.9v-299.4c0-2.7 2.2-4.9 4.9-4.9s4.9 2.2 4.9 4.9v299.4c0 2.8-2.2 4.9-4.9 4.9z"></path> </g> <g> <path d="m200.4 471h-114.9c-4.8 0-8.9-4.1-8.9-8.9v-8.3c0-13.3 10.8-24.1 24.1-24.1h84.3c13.3 0 24.1 10.8 24.1 24.1v8.3c0 4.7-3.8 8.7-8.5 8.9-.1 0-.1 0-.2 0zm-114.1-9.8h113v-7.4c0-7.9-6.4-14.4-14.4-14.4h-84.2c-7.9 0-14.4 6.4-14.4 14.4z"></path> </g> </g> <g> <path d="m426.6 471h-116c-4.9 0-8.8-3.9-8.8-8.8v-76c0-4.9 3.9-8.8 8.8-8.8h116c4.9 0 8.8 3.9 8.8 8.8v76c0 4.9-3.9 8.8-8.8 8.8zm-115-9.8h114v-74.1h-114z"></path> </g> <g> <path d="m368.7 451.9c-.7 0-1.4-.2-2.1-.5-2.4-1.2-3.5-4.1-2.3-6.5l7-14.5h-13c-1.7 0-3.3-.9-4.2-2.4s-.9-3.3-.1-4.8l13.4-24.2c1.3-2.4 4.3-3.2 6.6-1.9 2.4 1.3 3.2 4.3 1.9 6.6l-9.4 17h12.5c1.7 0 3.2.9 4.1 2.3s1 3.2.3 4.7l-10.4 21.5c-.8 1.7-2.5 2.7-4.3 2.7z"></path> </g> <g> <g> <path d="m347 387.2c-2.7 0-4.9-2.2-4.9-4.9v-14.1h-14.5v14.1c0 2.7-2.2 4.9-4.9 4.9s-4.9-2.2-4.9-4.9v-16.7c0-3.9 3.2-7.1 7.1-7.1h19.7c3.9 0 7.1 3.2 7.1 7.1v16.7c.2 2.7-2 4.9-4.7 4.9z"></path> </g> <g> <path d="m414.6 387.2c-2.7 0-4.9-2.2-4.9-4.9v-14.1h-14.5v14.1c0 2.7-2.2 4.9-4.9 4.9s-4.9-2.2-4.9-4.9v-16.7c0-3.9 3.2-7.1 7.1-7.1h19.7c3.9 0 7.1 3.2 7.1 7.1v16.7c.2 2.7-2 4.9-4.7 4.9z"></path> </g> </g> <g> <path d="m306.8 429.2h-58c-7.9 0-14.4-6.4-14.4-14.4v-28.7c0-2.5-2.1-4.6-4.6-4.6h-68c-2.7 0-4.9-2.2-4.9-4.9s2.2-4.9 4.9-4.9h68c7.9 0 14.4 6.4 14.4 14.4v28.7c0 2.5 2.1 4.6 4.6 4.6h58c2.7 0 4.9 2.2 4.9 4.9s-2.2 4.9-4.9 4.9z"></path> </g> </g> </svg> </div> <h3 class="pbmit-service-title"> <a href="#">Commercial Solutions</a> </h3> </div> <div class="pbmit-service-image-wrapper"> <div class="pbmit-featured-img-wrapper"> <div class="pbmit-featured-wrapper"> <img src="images/homepage-2/service/service-img-01.jpg" class="" alt=""> </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 3
<article class="pbmit-team-style-3"> <div class="pbminfotech-post-item"> <div class="pbmit-featured-wrap"> <div class="pbmit-featured-inner"> <div class="pbmit-featured-img-wrapper"> <div class="pbmit-featured-wrapper"> <img src="images/homepage-1/team/team-img-01.jpg" class="img-fluid" alt=""> </div> </div> <a class="pbmit-link" href="#" title="Go to Andrea Luies"></a> </div> </div> <div class="pbminfotech-box-content"> <div class="pbminfotech-box-content-inner"> <div class="pbminfotech-box-team-position">Cheif Officer</div> <h3 class="pbmit-team-title"> <a href="#">Andrea Luies</a> </h3> </div> <div class="pbmit-team-btn"> <a class="pbmit-team-text" href="#" title="Go to Andrea Luies"> <i class="pbmit-base-icon-share"></i> </a> <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-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-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> </article>
Team Style 4
<article class="pbmit-team-style-4"> <div class="pbminfotech-post-item"> <div class="pbminfotech-box-content"> <div class="pbminfotech-box-content-inner"> <div class="pbmit-featured-wrapper pbmit-hover-img"> <div class="pbmit-featured-img-wrapper"> <div class="pbmit-featured-wrapper"> <img src="images/homepage-2/team/team-img-01.jpg" class="img-fluid" alt=""> </div> </div> </div> <h3 class="pbmit-team-title"> <a href="#">Andrea Luies</a> </h3> <div class="pbminfotech-box-team-position">Cheif Officer</div> </div> </div> </div> </article>
Testimonial
Use the below code to display Testimonial:
Testimonial Style 2
<article class="pbmit-testimonial-style-2"> <div class="pbminfotech-post-item"> <div class="pbmit-box-content-wrap"> <div class="pbminfotech-star-ratings-text">Highly Professional.</div> <div class="pbminfotech-box-desc"> <div class="pbminfotech-box-star-ratings"> <i class="pbmit-base-icon-star-1 pbmit-active"></i> <i class="pbmit-base-icon-star-1 pbmit-active"></i> <i class="pbmit-base-icon-star-1 pbmit-active"></i> <i class="pbmit-base-icon-star-1 pbmit-active"></i> <i class="pbmit-base-icon-star-1 pbmit-active"></i> </div> <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-wrapper d-flex align-items-center"> <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/homepage-1/testimonial/testimonial-01.jpg" class="img-fluid" alt=""> </div> </div> </div> <div class="pbmit-auther-content"> <h3 class="pbminfotech-box-title">Ariana Green</h3> <div class="pbminfotech-testimonial-detail">Managing Director</div> </div> </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
- Get SMTP from your hosting service provider
- 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
- Jquery
- Popper
- Jquery appear
- Jquery Waypoints
- Jquery Numinate
- Magnific Popup
- Swiper Js
- Jquery Circle Progress
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.