Version: 1.0 | Dated: 20th June 2019

construction

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

  1. Open the Konstrust/HTML 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 your required file.
  3. Make sure you upload the required files/folders listed below in HTML:
    • HTML/assets/css - Stylesheets Folder
    • HTML/assets/fonts - Required Font Awesome Icon Folder
    • HTML/assets/images - Images Folder
    • HTML/assets/js - Javacripts Folder
    • HTML/mail - Required PHP Functions Folder
    • HTML/assets/plugin/rs-plugin - Required Revolution Slider
    • HTML/index.html - Index File/Default Homepage
    The other files can be used according to your needs.
  4. You are done now go..! Start adding your Content and showcase your Brand New Elegant Webpages.

HTML Structure

Konstrust Construction follows a simple coding structure. bellow the sample code:

                    <!DOCTYPE html>
                    <html class="no-js" lang="en-US">
                        <head>

                            <!-- Your Stylesheets, Scripts & Title here -->
                            ...

                        </head>
                        <body class="header-layout-2 v2" >

                            <!-- Header menu -->
                            <header class="site-header sticky-menu-header" >

                                ...

                            </header>


                                <!-- start revolution slider -->
                                <section class="container">

                                    ...

                                </section>

                                <!-- start our service -->
                                <section class="container">

                                ...

                                </section>



                                <!-- Footer -->
                                <footer class="site-footer layout1" >

                                        <div class="container">

                                                ...

                                        </div>
                                </footer>


                                <!-- Copyrights -->
                                <div class="f-bottom">
                                        <div class="container">

                                        ...

                                        </div>

                                </div>


                        </body>
                    </html>
                    

Logo Settings

The Logo Container can be found in the Header Container - header

<div class="site-logo">
    <a href="index.html" class="dib">
        <img src="assets/images/logo.png" alt="logo">                     <!-- Normal Logo -->
    </a>

...
                

Color Schemes

You can change your Website's Color Scheme in an instant. You simply need to change the HEX Color Code in the css/color.css file & you are done to go. Follow quick steps what you change:

  1. Make sure you add the assts/css/color.css stylesheet in your head after the all stylesheets.

  2. Now simply change the HEX Codes according to your requirements.
<head>

	...
        ...
        ...


	<!-- Here goes your color.css (NB: here @import main style.css) -->
	<link rel="stylesheet" href="assts/css/skin/color.css" type="text/css" />
	

</head>

The best way changing color:

location file: assets/css/skin/color.css

Pre defined 5 color: color-red, color-orange, color-yellow, color-light-green & green green default use: css style name color.css

if you use predefined color: Just rename: color-red.css to color.css NB:default color.css first delete

if you use custom color: Just open color.css any editor: find the hex color code #45bf55 (green) then replace your own hex color code

Changing Fonts

Change your Fonts. we have included style.css file to manage the custom fonts you include with ease. By default, Konstrust Construciton use 1 Fonts normally: Roboto from the Google Fonts Library. You just @import the font the style.css file

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,600,700,800,900);

In order to change the Fonts, You will needs to remove the @import link. If you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

You can now be able to change the Font Names in the style.css File, under the body{font-family:'Roboto', serif;}

Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several fact Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with Konstrust Construction:

  • gZip Compression & Browser Caching

    This is probably one of the Most Important Techniques you should definitely implement in order to bump up your Website's Loading Speed. gZip Compression is used to compress the Files that are delivered when loading a Website. The reason gzip works so well in a web environment is because CSS files and HTML files use a lot of repeated text and have loads of whitespace. Since gzip compresses common strings, this can reduce the size of pages and style sheets by up to 70%! . It covers HTML, CSS, Javascript & Font Files along with other miscellaneous text files. Where as Browser Caching also covers Images & Videos apart from including the above files. This is used to saves the Static Data in your Browser itself so that when you open the Next Pages on the Same Website, the content does not gets Downloaded again, loading the Website faster.

    gZip Compression & Browser Caching can be enabled using the .htaccess File on an Apache Web Server. You can use the Codes from here: https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess to enable these modules on your server. already use .htaccess file the root folder

  • Image Compression & Optimization

    We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:

    • Resize your Images: Resize your Images before using it on your Website. Do not just Download an Image & place it as it is in your Website's <img> Tag without resizing it. for the affect your images quality is same but size lower for the reason your websites fast loading
    • Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG
    • Compressing Images: Images Compression is important as it considerably reduces the size without losing the quality. There are several FREE Image Optimization Tools available to Download.
      For MAC use ImageOptim
      For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.
  • CSS & jQuery Minifications

    It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Fact in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
    For CSS use CSS Minifier and For Javascript use Javascript Minifier.

  • Content Delivery Network

    You can use a CDN to further speed up your website. You can use the CDn to deliver static files of your website like CSS, JS, Images & Font Files. There are several CDN Hosting Providers available on the Internet but we would recommend MaxCDN or CloudFlare. Note: CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your Require.

  • Fast Web Hosting Servers

    A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can check out some recommended Hosting Services here: http://themeforest.net/get_hosting.

Header Types

You can choose between 8 Types of headers while creating your Pages. Simply adding the Header Type CSS class to the Body Element will activate the Header Type variation. The list of Header Type Classes & its descriptions are provided below for your reference:

Type Class Features Code Example
.header-layout-2 v2 header-layout-2 v2 Header with a White Background & Without Search and Shopping Cart Button.
<body Class="header-layout-2 v2">
    <header>
        ....
        ....
    </header>
</body>
.header-layout-2 header-layout-2 Header with a White Background and Search and Shopping Cart Button.
<body Class="header-layout-2">
    <header>
        ....
        ....
    </header>
</body>
.header-layout-3 header-layout-3 Header with a White Background and Social Icons With a Dark Topbar.
<body Class="header-layout-3">
    <header>
        ....
        ....
    </header>
</body>
.header-layout-6 v2 header-layout-6 v2 Header with a Center Logo and Both Side Menu With a angle Shape Effect.
<body Class="header-layout-6 v2">
    <header>
        ....
        ....
    </header>
</body>
.header-layout-2 width_1760p header-layout-2 width_1760p Header with a Boxed Layout.
<body Class="header-layout-2 width_1760p">
    <header>
        ....
        ....
    </header>
</body>
.header-layout-2 width_1760p header-layout-2 width_1760p Header with a Boxed Layout but this version without Topbar.
<body Class="header-layout-2 width_1760p">
    <header>
        ....
        ....
    </header>
</body>
header-layout-2 header-transparency v3 header-layout-2 header-transparency v3 Header with Full Width Layout With Transparent.
<body Class="header-layout-2 header-transparency v3">
    <header>
        ....
        ....
    </header>
</body>
header-layout-2 v3 width_1760p header-layout-2 v3 width_1760p Header with Box Layout With None Transparent.
<body Class="header-layout-2 v3 width_1760p">
    <header>
        ....
        ....
    </header>
</body>

Note All Mega menu sticky available just remove the class .piko-layout-header-fixed the <body> Tag. Now the menu is normal

Mega Menu

Mega menu style with code sample

                    <ul>
                        <li>
                            <ul>
                                <li>
                                    <ul>
                                        <li>mega menu</li>   <!-- Mega menu Column 1  -->
                                        <li></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li>mega menu </li>   <!-- Mega menu Column 2  -->
                                        <li> </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li>mega menu</li>   <!-- Mega menu Column 3  -->
                                        <li></li>
                                    </ul>
                                </li>
                                <li>
                                    <ul>
                                        <li>mega menu</li>  <!-- Mega menu Column 4  -->
                                        <li></li>
                                    </ul>
                               </li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li>Dropdwon</li>                <!-- Drop Down  -->
                                <li></li>
                                <li>
                                    <ul>
                                        <li>Dropdwon submenu</li>  <!-- Drop Down sub menu  -->
                                        <li></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li>Dropdwon</li>               <!-- Drop Down  -->
                           </ul>
                        </li>
                    </ul>
                    

Page Titles

Class Description Example
Default Default Page Title style with Text aligned Center.
    <section  class="page-header text_center">
	<div class="container">
            <h1>Blog</h1>
            <div class="breadcrumb">
		<a href="#"> home </a>
		<span class="current">About Us</span>
            </div>		
	</div>
    </section>
                                    

Columns & Grid

Bootstrap Grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.col-md-6
.col-md-1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7

Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

Margin and Padding

  • .m0a Margin 0 Auto
  • .mt0 Margin Top 0 pixel
  • .mt5 Margin Top 5 pixel
  • Then .mt10, .mt15, .mt20, .mt25, .mt30, .mt35, .mt40, .mt45, .mt50, .mt55, .mt60, .mt65, .mt70, .mt75, .mt80, .mt85, .mt90, .mt95, .mt100, .mt105, .mt110, .mt115, .mt120, .mt125, .mt130, .mt135, .mt140, .mt145, .mt190, pixel the top margin
  • .mb10 Margin Bottom 10 pixel
  • Then .mb15, .mb20, .mb25, .mb30, .mb35, .mb40, .mb45, .mb50, .mb55, .mb60, .mb65, .mb70, .mb75, .mb80, .mb85, .mb90, .mb95, .mb100, .mb120, .mb150 pixel the Bottom margin
  • .ml10 Margin Left 10 pixel
  • Then .ml15, .ml20, .ml25, .ml30, .ml35, .ml45, .ml50, .ml70, .ml90, .ml00, .ml125 pixel the left margin
  • .mlr5 Margin 15 pixel left side and right side
  • Then .mlr10, .mlr15 pixel the left and right side margin
  • Then .mlr5-md, .mlr10-md, .mlr15-md pixel the left and right side margin for medium devices.
  • .pt5, .pt10 Padding top 5 & 10 pixel
  • Then .pt15, .pt20, .pt25, .pt30, .pt35, .pt40, .pt45, .pt50, .pt55, .pt60, .pt65, .pt70, .pt75, .pt80, .pt85, .pt90, .pt95, .pt100, .pt105 .pt115 .pt120 .pt130 .pt135 .pt140 .pt170 .pt175 Pixel from Top Padding
  • .pb0, .pb5, .pb10 Padding bottom 0 & 5 & 10 pixel
  • Then .pb15, .pb20, .pb25, .pb30, .pb35, .pb40, .pb45, .pb50, .pb55, .pb60, .pb65, .pb70, .pb75, .pb80, .pb85, .pb90, .pb95, .pb100Pixel from Bottom Padding

Font size and Weight

  • .f_s12 Font size 12 px
  • Then 13, 14, 15, 16, 17, 18, 19, 20, 22, 25, 36 the class name same as .f_s put the value last
  • .font_w400 Font weight 400.
  • .font_w500 Font weight 500.
  • .font_w600 Font weight 600.
  • .font_w700 Font weight 700.

Align text and <div>

  • .text_left text-align Left
  • .text_center text-align Center
  • .text_right text-align Right

Bootstrap Grid padding changing

Helper Class Description
no-gutters its effect the column/grid spacing padding 0px
<div class="row no-gutter">
    <div class="col-sm-6 col-md-3">
    ...
    </div>
    <div class="col-sm-6 col-md-3">
    ...
    </div>
    <div class="col-sm-6 col-md-3">
    ...
    </div>
    <div class="col-sm-6 col-md-3">
    ...
    </div>

</div>
.gutters7 its effect the column .col-md-6 spacing padding left side 3.5px and right side 3.5px
<div class="row gutters7">
    <div class="col-md-6">
    ...
    </div>

</div>
.gutters10 its effect the column .col-md-6 spacing padding left side 5px and right side 5px
<div class="row gutters10">
    <div class="col-md-6">
    ...
    </div>

</div>
.gutters15 its effect the column .col-md-6 spacing padding left side 7.5px and right side 7.5px
<div class="row gutters15">
    <div class="col-md-6">
    ...
    </div>

</div>
.gutters35 its effect the column .col-md-6 spacing padding left side 17.5px and right side 17.5px
<div class="row gutters35">
    <div class="col-md-6">
    ...
    </div>

</div>
.gutters50 its effect the column .col-md-6 spacing padding left side 25px and right side 25px
<div class="row gutters50">
    <div class="col-md-6">
    ...
    </div>

</div>
.gutters70 its effect the column .col-md-6 spacing padding left side 35px and right side 35px
<div class="row gutters70">
    <div class="col-md-6">
    ...
    </div>

</div>

Slider Types & their Documentation

Konstrust Construction includes 3 Unique Sliders for you to be used on any Page with lots of Options. The List of all the Sliders included:

  • Revolution Slider
  • Slick Slider

Revolution Slider

You can find the Revolution Slider related Documentation here.

Revolution Slider Docs

Slick Slider

You can find the Slick Slider related Documentation here.

Slick Slider Docs

Multiple item configure

< div class="piko-carousel" data-slick='{"slidesToShow":3, "slidesToScroll": 1,"arrows":false,"dots":true,"infinite":false,"autoplay":false,"responsive":[{"breakpoint": 1200,"settings":{"slidesToShow":3}},{"breakpoint": 992,"settings":{"slidesToShow":3}},{"breakpoint": 768,"settings":{"slidesToShow": 2,"slidesToScroll": 1}},{"breakpoint": 576,"settings":{"slidesToShow":  1, "slidesToScroll": 1}}]}'>
					  
    <img src="name.jpg" alt="title"/>
	<img src="name.jpg" alt="title"/>
    <img src="name.jpg" alt="title"/>
    <img src="name.jpg" alt="title"/>
    
    

</div>

Single item configure


< div class="piko-carousel" data-slick='{"slidesToShow":1, "slidesToScroll": 1,"arrows":false,"dots":true,"infinite":false,"autoplay":false}'>
					  
    <img src="name.jpg" alt="title"/>
	<img src="name.jpg" alt="title"/>
    <img src="name.jpg" alt="title"/>
    
    

</div>

Blog Setup

Single Posts Simple Markup below the code:

...
...
<article class="entry">
    <h3 class="entry-title">Leeds the join Konstrust Construction </h3>     <!-- post heading -->


        <footer class="entry-footer meta-wrap">          <!-- date, author, tag icon -->
            <span></span>
            <span></span>
            <span></span>
        </footer>


        <!-- post content -->
        <p>Lorem ipsum dolor sit amet, conse ctetur adipis cing elit. Donec posuere in odionec feugiat.Inte ger non vestibulum erat. Nulla volutpat justo in metus congue laoreet. </p>
        <p>Lorem ipsum dolor sit amet, conse ctetur adipis cing elit. Donec posuere in odionec feugiat.Inte ger non vestibulum erat. Nulla volutpat justo in metus congue laoreet. </p>

</article>
...
...
                    

Post Types

You can use different types of Single Post:

  • Image
  • Embedded Video
  • Slider Gallery

Comment Types

You can use a 4 different types of Comments System on Post Single Pages:

  • Default
  • Facebook
  • Twitter
  • Disqus
Name Description & code sample
Default You can use static flow the code blog single post
Facebook 1. Include the JavaScript SDK on your page once, ideally right after the opening <body>tag.

<div id="fb-root"></div>
<script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id))
        return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=140302716001981";       <!-- your-app-id like this [140302716001981] -->
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')); & lt; /script>
                                    

2. Place the code for your plugin wherever you want the plugin to appear on your page.


<div class="fb-comments" data-href="http://developers.facebook.com/docs/plugins/comments/" data-numposts="5"></div>
                                    

Read More Facebook
Twitter Place the code for your plugin wherever you want the plugin to appear on your page.


<a class="twitter-timeline" href="https://twitter.com/themepiko"
 data-widget-id="655717323777511424">Tweets by @themepiko</a> <!-- your twitter id [655717323777511424] -->

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],
p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id))
{js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

                                    

Note you should be login the create the widget

Read More Twitter
Disqus Place the code for your plugin wherever you want the plugin to appear on your page.


	<!-- Disqus Comments -->
	<div id="disqus_thread"></div>
	<script type="text/javascript">
		/* ==== CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE ===== */
		var disqus_shortname = 'your-disqus-shortname'; // required: replace the  [you-disques-shortname] instant your disques name

		/* * * DON'T EDIT BELOW THIS LINE * * */
		(function() {
			var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
			dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
		})();
	</script>
	<!-- Disqus Comments end -->

                                    

Read More Disqus

Portfolio Setup

Konstrust Construction provides a very elegant way to showcase your work. Setting up Portfolio is simple. Blow the sample code:

Setting up Portfolio Filter:

<ul "item_filter piko-filter d_flex_md ul-no">

    <li><a class="active" href="#" data-filter="*"><i class="fa fa-filter"></i> ALL WORK</a></li>
    <li><a href="#" data-filter=".cat1">BUILDINGS</a></li>
    <li><a href="#" data-filter=".cat2">INTERIOR</a></li>
    <li><a href="#" data-filter=".cat3, .category4">OFFICE</a></li>
    <li><a href="#" data-filter=".cat4">HOUSE</a></li>

</ul>

                    

Setting up Portfolio Items:

<div class="item_content position_relative">
    <img src="assets/images/portfolio/portfolio-2/portfolio_bg1.jpg" alt="portfolio-image" />
    <div class="overlay pa_center text_center">
     <div class="overlay_shape_effect"></div>
      <div class="overlay_shape_effect_two"></div>
        <div class="overlay_content_inner">
        <div class="icon piko-lightbox-img"><a href="assets/images/portfolio/portfolio-2/portfolio_bg1.jpg"><i class="la la-plus"></i></a></div>
        <h3><a href="#" class="text_ellipsis text_nowrap">Sunshine Builders</a></h3>
      <h4><a href="#">Building</a></h4>
     </div>
    </div>
</div>
                    

Introduction

Konstrust Construction huge number of handy Shortcodes which are quite powerful, flexible, functional & easy to use. Setting up shortcodes is very easy & Self Explanatory. Here is the List of Shortcodes included with Konstrust Construction:

  • Carousel Elements
  • Toggles
  • Tab Elements
  • Tooltips & Popovers
  • Progress Bars
  • Counters
  • Buttons
  • Fonts Icons
  • Heading Title
  • Section Divider
  • Typography
  • Table Elements
  • Animations
  • Alert Elements
  • Charts
  • Image Frame
  • Pricing Tables
  • Under Construction
  • Error 404
  • Maps
  • Media Embeds
  • Modal Boxes
  • Paginations
  • Social Icons
  • Construction process
  • Testimonials
  • Team Members
  • Team Profile
  • Thumbnails
  • magnific-popup Lightboxs

Each of the above mentioned Shortcodes are easily extendable, flexible & easy to use. You can find the sample codes in their respective files. We are explaining a few of them for your Reference.

Accordion Toggle

Helper Class Description
Default There are 2 style available the Konstrust construction Pages More info, here the sample code


 <div class="piko-accordion">
    <h3 class="mb15">Accordion Main Title </h3>
    <div class="accordion_wrapper">
    <div class="accordion_header show">
        <h3>accordion title </h3>
    </div>
        <div class="accordion_content active">
            <p> -- </p>
        </div>
    </div>
</div>

                                    
.style2


    <div class="piko-accordion style2">
    <h3 class="mb15">Accordion Main Title </h3>
    <div class="accordion_wrapper">
    <div class="accordion_header show">
        <h3>accordion title </h3>
    </div>
        <div class="accordion_content active">
            <p> -- </p>
        </div>
    </div>
    </div>
                                        

Progress-Bars

Helper Class Description
Default There are 1 style available the Konstrust construction Pages More info, here the sample code

                                        <div class="prograss-layout mt15">
                                            <div class="progress-container sc-pl-1">
                                                <div class="progress">
                                                    <div class="progress-bar" data-width="96" style="width: 96%;">
                                                        <span class="progress-val">96%</span>
                                                    </div>
                                                </div>
                                                <h4 class="progress-title">Interior Renovation</h4>
                                            </div>
                                        </div>
                                    

Counters

There are four styles available in counter section on Konstrust construction Template.

Helper Class Description
bg_light_gray Use a class following the sample code then you get counter box icon with a gray background effect in the area.

                                        <section class="fun_factor_area bg_light_gray">
                                            <div class="container">
                                             <div class="row">
                                                <div class="col-lg-3">
                                                     <div class="icon-layout-2">
                                                         <div class="d_flex icon-block flex-column align-items-center text_center">
                                                                <div class="icon-wrap">
                                                                 <i class="icon-heart"></i>
                                                                 <i class="icon-heart"></i>
                                                                </div>
                                                                <div class="icon-content d_flex flex-column align-items-center text_center">
                                                                    <div class="icon_count">1325</div>
                                                                    <div class="count_title">Happy Customers</div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                         </section>
                                    
.style2 Use a class following the sample code then you get counter box icon with a background image effect.

                                            <section class="fun_factor_area style2">
                                                <div class="fun_factor_bg">
                                                    <img src="" alt="fun-factor-bg" />
                                                </div>
                                                <div class="container">
                                                 <div class="row">
                                                    <div class="col-lg-3">
                                                         <div class="icon-layout-2">
                                                             <div class="d_flex icon-block flex-column align-items-center text_center">
                                                                    <div class="icon-wrap">
                                                                     <i class="icon-heart"></i>
                                                                     <i class="icon-heart"></i>
                                                                    </div>
                                                                    <div class="icon-content d_flex flex-column align-items-center text_center">
                                                                        <div class="icon_count">1325</div>
                                                                        <div class="count_title">Happy Customers</div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                             </section>
                                        
.style3 Use a class following the sample code then you get counter box icon with two background image with angle shape effect.

                                        <section class="fun_factor_area position_relative style3 mt50 mt0-md mt0-sm pt65 pb65 pb60-md pt60-md pt50-sm pb50-sm">
                                            <div class="fun_factor_bg">
                                                <img src="" alt="fun-factor-bg" />
                                             </div>
                                            <div class="fun_factor_bg2">
                                                <img src="" alt="fun-factor-bg" />
                                            </div>
                                            <div class="container-fluid">
                                                <div class="row">
                                                   <div class="col-lg-4 offset-lg-1 d_flex align-items-center">
                                                        <h3>Title here...</h3>
                                                    </div>
                                                     <div class="col-lg-5 offset-lg-1">
                                                            <div class="row mt50-md mt50-sm">
                                                                <div class="col-sm-4">
                                                                    <div class="icon-layout-2 mb25-sm">
                                                                        <div class="d_flex icon-block flex-column align-items-center text_center">
                                                                            <div class="icon-content d_flex flex-column align-items-center text_center">
                                                                                <div class="icon_count_wrap d_flex align-items-center">
                                                                                    <div class="icon_count font_w500">250</div>
                                                                                    <span>+</span>
                                                                                </div>
                                                                            <div class="count_title">Completed Project</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    </div>
                                                </div>
                                            </section>
                                    
.style4 Use a class following the sample code then you get counter box icon with inline text and number

                                        <section class="fun_factor_area style4">
                                            <div class="container">
                                                <div class="row">
                                                    <div class="col-lg-3">
                                                        <div class="icon-layout mb25-sm mb40-md">
                                                            <div class="d_flex icon-block align-items-center justify-content-center">
                                                                <div class="icon_count c_secondary f_s50 font_w700 min-w125">1354</div>
                                                                <div class="count_title d_flex flex-column text_left text_uppercase font_w500 ml20">Partner <span>WorldWide</span></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                    

Buttons

There are lots of styles available in buttons on Konstrust construction Template.

Helper Class Description
default Use a class following the sample code then you get counter box icon with a gray background effect in the area.

                                                        <a href="#" class="button">...</a>
                                                
.effect1 Use a class following the sample code then you get counter box icon with a gray background effect in the area.

                                                        <a href="#" class="button effect1">...</a>
                                                
.effect2 Use a class following the sample code then you get counter box icon with a gray background effect in the area.

                                                        <a href="#" class="button effect2">...</a>
                                                
.effect3 Use a class following the sample code then you get counter box icon with a gray background effect in the area.

                                                        <a href="#" class="button effect3">...</a>
                                                
.effect4 Use a class following the sample code then you get counter box icon with a gray background effect in the area.

                                                        <a href="#" class="button effect3">...</a>
                                                
.effect5 Use a class following the sample code then you get counter box icon with a gray background effect in the area.

                                                        <a href="#" class="button effect3">...</a>
                                                

Heading Title

There are heading include the Konstrust construction

Helper Class Description
use this class you get title and line right side, bellow the sample code

            <h3 class="vc_custom_heading mb55 mb80-md fs36 text_center"> Our Portfolio </h3>
                                 

Typography

Here are some sample code typography

Helper Class Description
h1-h6 All tag the same effect but font size different flow the main style.css assets/css/style.css flow the title Typhography & font face
mark Use the mark change background color orange

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<mark>h1. Konstrust constructiong <mark>      <!-- get orange color bankground font color white -->
                                    
ul, li, ol, li Use the mark change background color orange

<ul class="circle">
    <li>Lorem ipsum dolor sit amet</li>
</ul>
                                    
style Available class .square, .disc, decimal, .lower-alpha, .roman

Table Element

You can find more option the table element Bootstrap Go bootstrap Table

Animations

Konstrust construction attach waypoint.js with custom animation. Both feature give elegant feature you website here is sample effect name

<div class="piko_anm"></div>

You can also use delays for your Animations:

<div class="piko_anm" piko-anm-name="anm_up" piko-anm-offset="90%" piko-anm-delay="100ms"></div>

Here is the list of the Animation Types you can use:

  • bounce
  • anm_up
  • anm_up_two
  • zoomIn
  • anm_left
  • anm_right
  • fadeInLeft
  • fadeInRight
  • fadeInDown
  • fadeInUp

Pricing Tables

There are two Pricing Tables include the Konstrust construction Template

Helper Class Description
.price_box Pricing box here is the sample code

                                <section class="price_and_plan_area pt105 pb120 pt50-sm pb50-sm">
                                    <div class="container">
                                            <div class="row price_box_wrap">
                                                <div class="col-lg-4">
                                                    <div class="price_box piko_anm mb30-sm mb30-md" piko-anm-name="anm_left" piko-anm-offset="90%" piko-anm-duration="1s">
                                                        <div class="price_head">
                                                            <div class="icon">
                                                                <img src="assets/images/home_3/price_icon1.png" alt="price-icon" />
                                                             </div>
                                                         <h3>Startup</h3>
                                                         </div>
                                                         <div class="price_body">
                                                         <ul class="ul-no">
                                                             <li></li>
                                                             <li></li>
                                                             <li class="no_select"></li>
                                                             <li class="no_select"></li>
                                                             <li class="no_select"></li>
                                                        </ul>
                                                        </div>
                                                        <div class="price_footer">
                                                        <div class="price_currency mb15"><span>$59/</span>Month</div>
                                                        <a href="#" class="button effect1">Purchase Now</a>
                                                        </div>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                    </section>

                                    
More box .style2

Maintenance

its so elegant page build you piko construction flow the code maintenance.html pages

Error 404 pages

There are two 404 pages added the piko construction flow the code 404.html, 404-2.html pages

Widgets Setup

Widgets are simple & easy to setup your site, Its completely flexible & can be used anywhere on a page. Here's a sample code:

                    <footer class="site-footer layout2" role="contentinfo">
                        <div class="f-inner">
                            <div class="f-sidebar">
                                <div class="container">
                                    <div class="row sub-footer cols_3 piko_anm" piko-anm-name="anm_up" piko-anm-offset="90%">
                                        <section class="widget">
                                            <h4 class="widget-title">Our Services</h4>
                                                <div class="row">
                                                    <div class="col-6">
                                                        <ul class="links">
                                                         <li><a href="#">Metal Roofing</a></li>
                                                         <li><a href="#">Construction</a></li>
                                                         <li><a href="#">Green Building</a></li>
                                                         <li><a href="#">Laminate Flooring </a></li>
                                                         <li><a href="#">House Renovation</a></li>
                                                         <li><a href="#">Green Building</a></li>
                                                         <li><a href="#">Printing and Cutting</a></li>
                                                        </ul>
                                                     </div>
                                                     <div class="col-6">
                                                       <ul class="links">
                                                         <li><a href="#">Packaging</a></li>
                                                         <li><a href="#">Blow Molding</a></li>
                                                         <li><a href="#">Microchip Production</a></li>
                                                         <li><a href="#">Manufacturing</a></li>
                                                         <li><a href="#">PVC Products</a></li>
                                                       </ul>
                                                     </div>
                                                 </div>
                                             </section>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </footer>
                

List of Included Widgets:

  • Links Widget
  • Raw Text/HTML Widget
  • Instagram Widget
  • Tags Widget
  • Posts List Widget
  • Tags Widget
  • Recent Project Widget
  • Categories Widget
  • Subscribers Widget

Info: Most widgets are easy to use & understand you can easily setup sidebar page, while some are explained below.

Flickr Widgets

More info visit Flickr widgets

<a href="images/body/blog03.jpg">
   <img src="images/body/blog03.jpg" alt="construciton"  height="60" width="75">
</a>
                    

Contact Forms & Subscriptions Ajax form Submission

You can setup Contact Forms & Subscriptions anywhere on your Website by simply Copy/Pasting the Sample Code present in the HTML Files contact1.html, contact2.html, contact3.html.

Contact Forms

Just change your Email Address in the mail/action-contact.php and mail/action-subs.php file to start receiving Form Responses.

$toemail = 'youremail@yourwebsite.com'; // Your Email Address
$toname = 'Your Name'; // Your Name

Not receiving Form Emails?

If you are not receiving Emails from your Forms then chances are that your Server Configuration doesn't support PHP mail() function. But you can use SMTP Authentication. Just find the following line of code:

$mail = new PHPMailer();

Add this after the above line:

$mail->IsSMTP();
$mail->Host = "mail.yourdomain.com";
$mail->SMTPDebug = 2;
$mail->SMTPAuth = true;
$mail->Host = "mail.yourdomain.com";
$mail->Port = 26;
$mail->Username = "yourname@yourdomain.com";
$mail->Password = "yourpassword";

Images

Collection stock photo here the some link. also include the custom image only on piko construction

Css, Font

Konstrust construction take help this resources

Icon & pattern also include custom pattern

PHP

Konstrust construction use the Php mailer for mail system

Themepiko Service:

  • Complete theme installation
  • Exact look feel as the live pikocon
  • Full suite of Bean WordPress Plugins

Themepiko Deliverables:

  • Domain name
  • FTP information
  • WordPress admin credentials
  • Theme files or purchase code

Details

Our in-house team of professional developers will install the theme, upload the pikocon XML file, and setup your website exactly like the live pikocon.

Complete your purchase of the Premium Installation service by clicking the button above and send us your deliverables.

Email: forhad.ferouz@gmail.com

Support & contact with us ❤

You can contact us in ways. It depends on what you exactly need.

Thank you very much for choosing our theme. We truly appreciate and really hope that you'll enjoy our theme!

Changelog

Version 1.0 -2019/06/20

- Initial Release