logoDocumentation

Created:23.11.2016
By: Theme Canyon
Email: canyontheme@gmail.com

Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please feel free to write us an email or contact us via our themeforest user page.

Themeforest Profile Email

HTML Structure

Basic Structure

<!--header-->
<header id="sp-header">
    <div class="container">
        <div class="row">
            <div id="sp-menu" class="col-sm-12 col-md-12">
                <div class="sp-column ">
                    <div class='sp-megamenu-wrapper'>
                        <a id="offcanvas-toggler" href="#"><i class="fa fa-bars"></i></a>
                        <ul class="sp-megamenu-parent menu-fade-up hidden-xs">
                            <li class="sp-menu-item current-item active"><a href="index.html">Home</a></li>
                            <li class="sp-menu-item sp-has-child"><a href="services.html">services</a>
                                <div class="sp-dropdown sp-dropdown-main sp-menu-right">
                                    <div class="sp-dropdown-inner">
                                        <ul class="sp-dropdown-items">
                                            <li class="sp-menu-item"><a href="single-services.html">wooden work</a></li>
                                            <li class="sp-menu-item"><a href="single-services.html">metal roofing</a></li>
                                            <li class="sp-menu-item"><a href="single-services.html">architechture &amp; design</a></li>
                                            <li class="sp-menu-item"><a href="single-services.html">general construction</a></li>
                                            <li class="sp-menu-item"><a href="single-services.html">hardwood flooring</a></li>
                                            <li class="sp-menu-item"><a href="single-services.html">house remodeling</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="sp-menu-item"><a href="about.html">about</a></li>
                            <li class="sp-menu-item"><a href="projects.html">projects</a></li>
                            <li class="sp-menu-item"><a href="blog.html">news</a></li>
                            <li class="sp-menu-item"><a href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<!--Navigation end-->


<!-- START SECTIONS -->
<section id="section-id" class="section">
    {{ CONTENT }}
</section>

.........


<section id="section-id" class="section">
    {{ CONTENT }}
</section>
<!-- END SECTIONS -->


<!-- START FOOTER -->
<footer>
    {{ FOOTER CONTENT }}
</footer><!-- END FOOTER -->


                        

Section Headline with description and top sub title

<div class="col-sm-12 no-padding main-heading">
    <h2 class="animate-in left-out">{{Title}}</h2>
    <p class="animate-in left-out">{{Sub Ttile}}</p>
</div>



                    

Bootstrap 12 Column Grid System

We are using the grid system from Bootstrap. For the detailed documentation, Go to their official website. Below is the basic example.

    
<!-- START SECTION -->
<section id="section-id" class="section">
    <!-- START CONTAINER -->
    <div class="container">
        <!-- START ROW -->
        <div class="row">
            <div class="col-md-6">
                {{ 6/12 COLUMN PAGE CONTENT }}
            </div>
            <div class="col-md-6">
                {{ 6/12 COLUMN PAGE CONTENT }}
            </div>
        </div>
        <!-- END ROW -->

        <!-- START ROW -->
        <div class="row">
            <div class="col-md-4">
                {{ 4/12 COLUMN PAGE CONTENT }}
            </div>
            <div class="col-md-4">
                {{ 4/12 COLUMN PAGE CONTENT }}
            </div>

            <div class="col-md-4">
                {{ 4/12 COLUMN PAGE CONTENT }}
            </div>
        </div>
        <!-- END ROW -->

    </div>
    <!-- END CONTAINER -->
</section>
<!-- END SECTION -->    
    
    

Stylesheets

Files

All CSS are located in the "css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:

1. bootstrap.css - Bootstrap 12 Column Grid System
2 font-awesome.min.css - Font Awesome CSS
3. iconfont.css iconfont CSS
4. owl.carousel.css - OWL Carousel Core
5. owl.theme.css - OWL Carousel Theme
6. owl.transitions.css - OWL Carousel Transitions
7. spsimpleportfolio.css -Portfolio Css
8. featherlight.min.css featherlight Css
8. flexslider.css flexslider Css
8. dynamic-captions.css dynamic-captions Css
8. static-captions.css static-captions Css
8. animate.min.css animate.min Css
9. sp-flickr-gallery.css sp-flickr-gallery Css
10. style.css -Style CSS

Style.css includes:

1.Fonts
2. Common css
   a)button style
   b)Main heading
   c)Form style
   d)center
   e)Overlay
   f)Socials
   g)Pagination
 3. Top Info
 4. Header
 5. Breadcrumb
 6. Actions
 7. Services
 8. Portfolios
 9. About
 10.Team
 11.Counter
 12.Blog
 13.Testimonials
 14.Footer
 15.Contact Us
 16.Aside
 17.Responsive

Javascript

Plugins

All JavaScript / jQuery plugins are located in the "js" folder of the template. You dont have to change these files.

1. jQuery.js - jQuery Js
2. bootstrap.js - Bootstrap JS
3. jquery.flexslider-min.js - jquery.flexslider-min
4. appear.js - Appear JS
5. owl.carousel.js - Owl Carousel
6. sp-flickr-gallery.js - sp-flickr-gallery Plugin
7. jquery.parallax-1.1.3.js - jquery.parallax-1.1.3 plugin
10. spsimpleportfolio.js - Portfolio Plugin
11. smooth-scrol.js - smooth-scrol plugin
12. jquery.shuffle.modernizr.min.js - Shuffle Js
13. jquery.themepunch.tools.min.js Revolution slilder tool
14. jquery.themepunch.revolution.min.js Revolution slilder plugin
15. featherlight.min.js - featherlight.min

Template Javascript

There are two Themeplate javascript files. The first one contains miscellaneous settings for your template. Second one contains settings for your Google Map.

1. main.js - Template Javascript

main.js includes:

 
 1.Parrallax
 2.Header
 3.Count Function
 4.Testimonoials
 5.Tooltip
 6.Services Slider
    

ELEMENTS

Buttons

Html

<a href="#" class="sppb-btn">{{ BUTTON TEXT }}</a> 
        

CSS - Style.css

        

/*
===========================================
button style
===========================================
*/

.sppb-btn {
    border-radius: 3px;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 700;
    margin-top: 10px;
    padding: 8px 35px;
    text-transform: lowercase;
}

.sppb-btn.sppb-btn-default {
    background-color: #023669 !important;
    border: 2px solid #023669;
    color: #fff;
    text-shadow: 0 1px rgba(0, 0, 0, 0.15);
}

.sppb-btn.sppb-btn-primary:hover {
    background-color: transparent;
    border-color: #f5dd25 !important;
    color: #f5dd25;
}

.sppb-btn.sppb-btn-default:hover {
    background-color: transparent !important;
    border-color: #023669 !important;
    color: #023669;
}

.sppb-btn.sppb-btn-primary {
    background-color: #f5dd25;
    border-color: #f5dd25;
    border-width: 2px;
    color: #023669;
}

.simple {
    color: #023669;
    font-family: Poppins;
    font-weight: 600;
    padding: 0;
    text-transform: lowercase;
}

.simple i {
    margin-left: 5px;
    transition: all 0.2s ease-in-out 0s;
}

.btn-primary,
.sppb-btn-primary {
    background-color: #023669;
    border-color: #01274b;
}

.sppb-btn.sppb-btn-success {
    background-color: transparent;
    border: 3px solid #023669;
    color: #023669;
}

.sppb-btn.sppb-btn-lg {
    font-size: 16px;
    font-weight: 600;
    padding: 17px 40px;
}

.sppb-btn.sppb-btn-success:hover {
    background-color: #023669;
    color: #f5dd25;
}





        

Add Portfolio / Gallery

Html

  <!--Portfolio-->
<section id="portfolio" class="space bg-color">
    <div class="container">
        <!--Main Heading-->
        <div class="col-sm-12 no-padding main-heading text-center">
            <h2>featured projects</h2>
        </div>
        <div class="row">
            <div id="mod-sp-simpleportfolio" class="sp-simpleportfolio sp-simpleportfolio-view-items layout-gallery-space ">
                <div class="sp-simpleportfolio-filter">
                    <ul>
                        <li class="active" data-group="all"><a href="#">Show All</a></li>
                        <li data-group="renovation"><a href="#">Renovation</a></li>
                        <li data-group="interior"><a href="#">Interior design</a></li>
                        <li data-group="architechture"><a href="#">Architechture</a></li>
                    </ul>
                </div>
                <div class="sp-simpleportfolio-items sp-simpleportfolio-columns-4">
                    <div class="sp-simpleportfolio-item" data-groups='["renovation","architechture"]'>
                        <div class="sp-simpleportfolio-overlay-wrapper clearfix">
                            <img class="sp-simpleportfolio-img" src="images/portfolio-6-1140x760_600x400.jpg" alt="adipisicing elit">
                            <div class="sp-simpleportfolio-overlay">
                                <div class="sp-vertical-middle">
                                    <div>
                                        <div class="sp-simpleportfolio-btns">
                                            <a class="btn-zoom" href="./images/portfolio-6-1140x760_600x400.jpg" data-featherlight="image">Zoom</a>
                                            <a class="btn-view" href="single-portfolio.html">View</a>
                                        </div>
                                        <h3 class="sp-simpleportfolio-title">
                                            <a href="single-portfolio.html">
                                                adipisicing elit                                    </a>
                                        </h3>
                                        <div class="sp-simpleportfolio-tags">
                                            Renovation, Architechture </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sp-simpleportfolio-item" data-groups='["interior"]'>
                        <div class="sp-simpleportfolio-overlay-wrapper clearfix">
                            <img class="sp-simpleportfolio-img" src="images/portfolio-7-1140x760_600x400.jpg" alt="Mirum est notare">
                            <div class="sp-simpleportfolio-overlay">
                                <div class="sp-vertical-middle">
                                    <div>
                                        <div class="sp-simpleportfolio-btns">
                                            <a class="btn-zoom" href="./images/portfolio-7-1140x760_600x400.jpg" data-featherlight="image">Zoom</a>
                                            <a class="btn-view" href="single-portfolio.html">View</a>
                                        </div>
                                        <h3 class="sp-simpleportfolio-title">
                                            <a href="single-portfolio.html">
                                                Mirum est notare                                    </a>
                                        </h3>
                                        <div class="sp-simpleportfolio-tags">
                                            Interior design </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sp-simpleportfolio-item" data-groups='["renovation","interior"]'>
                        <div class="sp-simpleportfolio-overlay-wrapper clearfix">
                            <img class="sp-simpleportfolio-img" src="images/shutterstock_12727267_600x400.jpg" alt="Nihil imperdiet doming">
                            <div class="sp-simpleportfolio-overlay">
                                <div class="sp-vertical-middle">
                                    <div>
                                        <div class="sp-simpleportfolio-btns">
                                            <a class="btn-zoom" href="./images/shutterstock_12727267_600x400.jpg" data-featherlight="image">Zoom</a>
                                            <a class="btn-view" href="single-portfolio.html">View</a>
                                        </div>
                                        <h3 class="sp-simpleportfolio-title">
                                            <a href="single-portfolio.html">
                                                Nihil imperdiet doming                                  </a>
                                        </h3>
                                        <div class="sp-simpleportfolio-tags">
                                            Renovation, Interior design </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="sp-simpleportfolio-item" data-groups='["renovation"]'>
                        <div class="sp-simpleportfolio-overlay-wrapper clearfix">
                            <img class="sp-simpleportfolio-img" src="images/shutterstock_20049397_600x400.jpg" alt="Feugiat nulla facilisis ">
                            <div class="sp-simpleportfolio-overlay">
                                <div class="sp-vertical-middle">
                                    <div>
                                        <div class="sp-simpleportfolio-btns">
                                            <a class="btn-zoom" href="./images/shutterstock_20049397_600x400.jpg" data-featherlight="image">Zoom</a>
                                            <a class="btn-view" href="single-portfolio.html">View</a>
                                        </div>
                                        <h3 class="sp-simpleportfolio-title">
                                            <a href="single-portfolio.html">
                                                Feugiat nulla facilisis                                     </a>
                                        </h3>
                                        <div class="sp-simpleportfolio-tags">
                                            Renovation </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

        

CSS - style.css


/*
===========================================
Portfolios
===========================================
*/

#portfolio.bg-color {
    background-color: #F2F2F2;
}

.inner #portfolio.space {
    padding: 100px 0;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li {
    border-right: 1px solid #ddd;
    line-height: 15px;
    padding-left: 5px;
    padding-right: 15px;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li.active > a,
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a:hover {
    background-color: transparent !important;
    color: #023669;
    text-decoration: underline;
}

.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a,
.sp-simpleportfolio .sp-simpleportfolio-filter > ul > li > a {
    background-color: transparent;
    color: #777;
    font-weight: 600;
}

.sp-simpleportfolio-btns a {
    background: #fff none repeat scroll 0 0 !important;
    border-radius: 3px !important;
    color: #023669 !important;
    font-weight: normal;
}

.sp-simpleportfolio-overlay-wrapper {
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.sp-simpleportfolio-created h4,
.sp-simpleportfolio-tags > h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px;
}

.sp-content.meta div:not(:last-child) {
    border-bottom: 1px solid #eee;
    margin-bottom: 15px;
    padding-bottom: 15px;
}

#single-project .sp-block img {
    margin-bottom: 20px;
}

.sp-content h2 {
    margin-top: 0;
}



......
......
        

Add Blog Article

Html

 <article class="col-sm-12 no-padding blog-block">
        <img src="images/sdrt_medium.jpg" alt="blog">
        <div class="blog-content">
            <div class="icon pull-left">
                <i class="fa fa-thumb-tack"></i>
            </div>
            <div class="blog-info">
                <ul class="meta">
                    <li data-toggle="tooltip" data-placement="top" title="" data-original-title="Written by">
                        <i class="fa fa-user"></i>Super User
                    </li>
                    <li>
                        <a data-toggle="tooltip" data-placement="top" title="" href="#" data-original-title="Article Category">
                            <i class="fa fa-folder-open-o"></i>Capital</a>
                    </li>
                    <li data-toggle="tooltip" data-placement="top" title="" data-original-title="Published date">
                        <i class="fa fa-calendar-o"></i>02 February 2016
                    </li>
                </ul>
                <h2><a href="single-blog.html">Experience and Resources By Your Side. </a> </h2>
            </div>
            <p>Lorem ipsum dolor sit amet, nec in adipiscing purus luctus, urna pellentesque fringilla vel, non sed arcu integer, mauris ullamcorper ante ut non torquent. Justo praesent, vivamus eleifend torquent, suspendisse etiam lorem vestibulum, vestibulum in lorem nec vel, sit curabitur dui ligula vehicula quam.</p>
            <a href="#" class="btn btn-default readmore">Read more...</a>
        </div>
 </article>
             

        

CSS - style.css

       
/*
===========================================
Blog
===========================================
*/

.recent-news article .article-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 40px;
}

.recent-news article .article-title a {
    color: #023669;
}

article .meta i {
    color: #999;
    font-size: 13px;
    padding-left: 0;
    padding-right: 5px;
}

article .meta > li {
    display: inline-block;
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
    color: #888;
    font-style: italic;
}

article .meta > li:not(:last-child) {
    border-right: 1px solid #999;
    padding-right: 14px;
}

article .meta > li:not(:first-child) {
    padding-left: 14px;
}

.recent-news .blog-list article h3 {
    font-size: 18px;
    margin-bottom: 0;
    margin-top: 0;
}

.recent-news .blog-list article p {
    -moz-box-orient: vertical;
    display: -webkit-box;
    font-size: 14px;
    max-height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-news .blog-list .article-thumb {
    margin-right: 15px;
}

.blog-list .article-thumb img {
    border-radius: 4px;
}

.blog-list article .meta > li {
    line-height: 16px;
}

.recent-news .blog-list article:not(:last-child) {
    margin-bottom: 30px;
}

.inner #blog .icon {
    border: 1px solid #023669;
    border-radius: 3px;
    color: #023669;
    display: block;
    font-size: 24px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    top: 0;
    width: 48px;
}

.inner #blog .blog-content {
    background-color: #fff;
    padding: 40px;
}

.inner #blog {
    background-color: #fafafa;
}

.inner #blog article.blog-block {
    box-shadow: 1px 2px 7.28px 0.72px rgba(0, 0, 0, 0.08);
    margin-bottom: 50px;
}

.inner #blog .blog-info {
    margin-bottom: 30px;
    margin-left: 68px;
}

.inner #blog .blog-info .meta li {
    border-right: 1px solid #ddd;
    color: #666;
    display: inline-block;
    font-size: 12px;
    font-style: normal;
    line-height: 12px;
    margin: 0;
    padding: 0 8px;
    text-transform: uppercase;
    position: static;
}

.inner article .meta i {
    color: #666;
}

.inner #blog .blog-info h2 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    margin: 8px 0 0;
    text-transform: capitalize;
}

.inner #blog .blog-info h2 a {
    color: #000;
}

.inner .blog-block .meta {
    margin-bottom: 15px;
}

.inner .blog-block a.readmore {
    background: transparent none repeat scroll 0 0;
    border-color: #023669;
    border-radius: 30px;
    border-width: 2px;
    color: #023669;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    margin: 40px 0 10px;
    padding: 8px 35px;
}

.inner .blog-block a.readmore:hover {
    background: #023669 none repeat scroll 0 0;
    color: #fff;
}

.embed-responsive {
    padding-bottom: 56.25%;
}

blockquote {
    border-color: #023669;
    font-style: italic;
}

#blog.single-blog p {
    margin-bottom: 10px;
}

#blog.single-blog article {
    background-color: #fff;
    padding: 30px;
}

#blog.single-blog .blog-content {
    padding: 40px 0 0;
}


......
......
......

        

PHP Contact Form

PHP - contact.php

To send emails via the contact form, just replace the value "$to_email" with your email adress in the "contact.php" file.

#Your e-mail address
    define("__TO__", "support@themecanyon.com");
        

Change Address

To change the Address, Change the following HTML:

 <!--Contact Us-->
<section id="contact" class="space">
    <div class="container">
        <div class="row">
            <div class="col-sm-4 contact-block">
                <div class="col-sm-12 main-heading">
                    <h3>Contact us</h3>
                </div>
                <ul class="address">
                    <li><i class="fa fa-map-marker"></i> 14 Tottenham Road, NewYork, USA</li>
                    <li><a href="tel:+0883462543"><i class="fa fa-phone"></i>+(088) 3462 543</a> </li>
                    <li><a href="mailto:Info@probiz.com "><i class="fa fa-envelope"></i>Info@probiz.com </a> </li>
                    <li><i class="fa fa-fax"></i>+(088) 3462 543</li>
                    <li><i class="fa fa-clock-o"></i>Mon - Sat: 7:00 - 17:00</li>
                </ul>
                <ul class="sppb-person-social">
                    <li><a target="_parent" href="#"><i class="fa fa-facebook"></i></a></li>
                    <li><a target="_parent" href="#"><i class="fa fa-twitter"></i></a></li>
                    <li><a target="_parent" href="#"><i class="fa fa-google-plus"></i></a></li>
                    <li><a target="_parent" href="#"><i class="fa fa-linkedin"></i></a></li>
                    <li><a target="_parent" href="#"><i class="fa fa-behance"></i></a></li>
                </ul>
            </div>
            <div class="col-sm-8 contact-block">
                <div class="col-sm-12 main-heading">
                    <h3>Contact us</h3>
                </div>
                <form id="contact-form">
                    <div class="form-group col-sm-6 padding-right">
                        <input type="text" class="form-control" name="name" id="name" required placeholder="Name">
                    </div>
                    <div class="form-group col-sm-6 padding-left">
                        <input type="email" class="form-control" name="mail" id="mail" required placeholder="Email">
                    </div>
                    <div class="form-group col-sm-12 no-padding">
                        <input type="text" class="form-control" name="website" id="website" placeholder="Subject">
                    </div>
                    <div class="form-group col-sm-12 no-padding">
                        <textarea class="form-control" name="comment" id="comment" placeholder="Message"></textarea>
                    </div>
                    <div class="col-sm-12 button no-padding">
                        <input type="submit" id="submit_contact" class="sppb-btn sppb-btn-default" value="Send Message">
                        <div id="msg" class="message"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
        

Google Map

Html

You only need this HTML. Do all settings at the bottom of contact page".

        
   <div class="sppb-addon-gmap-canvas" data-lat="40.712784" data-lng=" -74.055941" data-maptype="ROADMAP" data-mapzoom="15" data-mousescroll="false"></div>
        
        

CSS - custom.js

<script type="text/javascript">
  <script type="text/javascript">
    //============================================
    //map
    //=============================================
    google.maps.event.addDomListener(window, 'load', function() {

        $('.sppb-addon-gmap-canvas').each(function(index) {
            var mapId = 'sppb-addon-gmap' + (index + 1);
            var self = this;

            $(this).attr('id', mapId);

            var zoom = $(self).data('mapzoom');
            var mousescroll = $(self).data('mousescroll');

            var latlng = new google.maps.LatLng($(self).data('lat'), $(self).data('lng'));
            var mapOptions = {
                zoom: zoom,
                center: latlng,
                scrollwheel: mousescroll
            };
            var map = new google.maps.Map(document.getElementById(mapId), mapOptions);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
            map.setMapTypeId(google.maps.MapTypeId[$(self).data('maptype')]);

        });

    });
    </script>

Credits and Sources

Javascript / jQuery Plugins

Jquery
Modernizr
Bootstrap
jquery.easypiechart
JQuery countTo
isotope
Owl Carousel
Portfolio Plugin

CSS Plugins

12 COLUMN : RESPONSIVE GRID SYSTEM - http://www.getbootstrap.com
Font Awesome 4.0.3 by @davegandy - http://fontawesome.io

Images

unsplash
flickr
designerspics
pixabay
pixels
imcreator
picjumbo
stocksnap
graphicburger
Took a Pic

Icons

graphicburger
icofonts
flaticon
fontawesome

Video

Youtube Video

As we said at the beginning, we are glad to help you if you have any questions relating to this template. No guarantees, but we do our best to assist.
Brickpress

EMail Themeforest Profile