Maintenance
its so elegant page build you piko construction flow the code maintenance.html
pages
Follow the few steps below to get started with your Site Template:
Konstrust/HTML
Folder to find all the Templates FilesHTML/assets/css
- Stylesheets FolderHTML/assets/fonts
- Required Font Awesome Icon FolderHTML/assets/images
- Images FolderHTML/assets/js
- Javacripts FolderHTML/mail
- Required PHP Functions FolderHTML/assets/plugin/rs-plugin
- Required Revolution SliderHTML/index.html
- Index File/Default HomepageKonstrust 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>
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>
...
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:
Make sure you add the assts/css/color.css
stylesheet in your head after the all stylesheets.
<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>
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
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;}
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:
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
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:
<img>
Tag without resizing it. for the affect your images quality is same but size lower for the reason your websites fast loading 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.
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.
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.
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
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> |
We have created some really useful helper classes for you. Here are a few of them:
.m0a
Margin 0 Auto.mt0
Margin Top 0 pixel.mt5
Margin Top 5 pixel.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.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.ml15, .ml20, .ml25, .ml30, .ml35, .ml45, .ml50, .ml70, .ml90, .ml00, .ml125
pixel the left margin.mlr5
Margin 15 pixel left side and right side.mlr10, .mlr15
pixel the left and right side margin.mlr5-md, .mlr10-md, .mlr15-md
pixel the left and right side margin for medium devices..pt5, .pt10
Padding top 5 & 10 pixel.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.pb15, .pb20, .pb25, .pb30, .pb35, .pb40, .pb45, .pb50, .pb55, .pb60, .pb65, .pb70, .pb75, .pb80, .pb85, .pb90, .pb95, .pb100
Pixel from Bottom Padding.f_s12
Font size 12 px 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.<div>
.text_left
text-align Left.text_center
text-align Center.text_right
text-align RightHelper 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> |
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:
You can find the Revolution Slider related Documentation here.
Revolution Slider Docs
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>
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> ... ...
You can use different types of Single Post:
You can use a 4 different types of Comments System on Post Single Pages:
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 |
Konstrust Construction provides a very elegant way to showcase your work. Setting up Portfolio is simple. Blow the sample code:
<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>
<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>
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.
Konstrust Construction build for you Slick slider, to Control bellow the sample code :
Helper Class | Description |
---|---|
Default |
<div> < 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> |
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> |
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> |
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> |
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> |
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 |
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
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 |
its so elegant page build you piko construction flow the code maintenance.html
pages
There are two 404 pages added the piko construction flow the code 404.html, 404-2.html
pages
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>
Info: Most widgets are easy to use & understand you can easily setup sidebar page, while some are explained below.
More info visit Flickr widgets
<a href="images/body/blog03.jpg"> <img src="images/body/blog03.jpg" alt="construciton" height="60" width="75"> </a>
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
.
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
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";
Konstrust construction take help this resources
Icon & pattern also include custom patternOur 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.
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!
Version 1.0 -2019/06/20
- Initial Release