Welcome


Thank you for purchasing our Chap template. If you have any questions that are beyond the scope of this help file, please feel free to contact us here at info@spireburst.com.

Chap is a HTML5 & CSS3 responsive template created for Business & Corporates but also can be used for generalised website. It’s fully responsive design and clean, was tested on all major handheld devices & browsers. It is a fully responsive, feature rich and beautifully designed to host a website or create online identity. It supports bootstrap framework and intergrated font awesome icon set so easy to customise and develop your own styles. Chap is a retina ready so it works nicely on smartphones, tablet PCs and desktops. Easily customisable, 24/7 support time.

General Information


The following scheme displays the theme files structure.

  • Documentation - Contains documentation on template cusotmization and support
  • dist - Contains the main files of the template. which will be uploaded on server.
    • CSS - Contains all Stylesheets used for UI.
    • Fonts - Contains Font awesome files.
    • Images - Contains all the images.
    • Js - Contains all javascript library or plugin files.
    • contact-form.php - Contains PHP coe for send mail.
    • index.html - Contains all UI code.
    • + More.html - Contains all UI code.
  • Screenshot - Contains screenshot of template.
  • readme.txt - Contains the information about theme

File Structure


HTML Structure

This template has a responsive layout. It has a block structure, one block on grey background and the other on an image (pattern) background.


CSS Structure

If any styles need to be changed just replace it with the wanted styles in the respective block with your style in styles.css.


JS Structure

This template has dynamic animations, which have been implemented in JavaScript. The JS file is core.js

Reference File


In this theme we have used google font "Lato, sans-serif". You can learn more on using Google Web Fonts by checking the tutorial on how to work with Google web Fonts.

JQuery Plugin

In this theme jQuery libraries and plugins have been used for dynamic animation.

  • jQUery
  • Bootstrap
  • Malihu Custom Scrollbar Plugin
  • Scrolling Nav
  • jQuery Easing
  • Owl Carousel

Stylesheet (CSS) Reference File

  • Animate
  • Bootstrap
  • Owl Carousel
  • Owl Carousel theme
  • Font Awesome
  • Scrolling Nav

Font awesome Icon

Font Awesome icons have been used in this theme. Learn more about font awesome icon from font awesome website. In a single collection, Font Awesome is a pictographic language of web-related actions. Easily style icon color, size, shadow, and anything that's possible with CSS. Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.

Pages Nomenclature


We have designed 7 pages for Chap template. You can easily use it and customize it as you want. We have used bootstrap layout structure. See below for their file nomenclature.

  1. Template V1 - index1.html
  2. Template V2 - index2.html
  3. Template V3 - index3.html
  4. Template V4 - index4.html
  5. Template Coming Soon - coming-soon.html
  6. Template 404 V1 - 404-v1.html
  7. Template 404 V2 - 404-v2.html

Customization


It is HTML5, CSS3 and Js based template so you can edit it yourself.

This template use bootstrap grid to make it very easy for anybody to understand the grid system and we have created other grid for layout. See below for more info

Header Section


        <section class="homeSlider" id="home">
          <div class="container">
            <div class="row homeSliderContent">
              <div class="col-lg-6 col-sm-12 col-xs-12">
                <h2 class="homeSliderHeading">Design . Innovate</h2>
                <h2 class="homeSliderHeadingQuote">Transform</h2>
                <p class="">Website Contents</p>
                <a href="javascript:void(0)" class="btn btn-white">Get Started</a>
              </div>
              <div class="col-lg-6 col-sm-12 col-xs-12"></div>
            </div>
          </div>
        </section>
        

Header Slider Section


          <section class="mainSlider" id="home">
            <div class="container-fluid">
              <div class="row">
                <div id="headerSlider" class="owl-carousel owl-theme">
                  <div class="item">
                    <img src="assets/images/slide_1.jpg" alt="Slider Chap Spireburst" class="img-fluid">
                    <p class="sliderText">Clean & Creative</p>
                  </div>
                  <div class="item">
                    <img src="assets/images/slide_2.jpg" alt="Slider Chap Spireburst" class="img-fluid">
                    <p class="sliderText">Simple & Powerful</p>
                  </div>
                  <div class="item">
                    <img src="assets/images/slide_3.jpg" alt="Slider Chap Spireburst" class="img-fluid">
                    <p class="sliderText">Parallax Layers</p>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

About Slider Section


          <div id="aboutSlider" class="owl-carousel owl-theme">
            <div class="item">
              <img src="assets/images/about-gal.jpg" alt="About Chap Spireburst" class="img-fluid">
            </div>
            <div class="item">
              <img src="assets/images/about-gal2.jpg" alt="About Chap Spireburst" class="img-fluid">
            </div>
          </div>
        

Parallax Image Background with Content Section


          <section class="weCraftThemes">
            <div class="container">
              <div class="row">
                <div class="col-lg-6 col-sm-12 col-xs-12 weBg">
                  <h2 class="">We Craft Themes</h2>
                  <p class="headingBorderLineSmall"></p>
                  <p class="text-justify">Website Contents</p>
                  <a href="javascript:void(0)" class="btn btn-white">Read More</a>
                </div>
                <div class="col-lg-6"></div>
              </div>
            </div>
          </section>
        

Our Works Section


          <section class="ourWorks" id="works">
            <div class="container">
              <div class="row">
                <div class="col-lg-9">
                  <h1 class="sectionHeading">Our Works</h1>
                  <p class="headingSlogan">Proudly Displaying Projects</p>
                  <p class="headingBorderLine"></p>
                  <p class="">Website Contents</p>  
                </div>
                <div class="col-lg-3"></div>
              </div>   
              <div class="row mb-5">
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-5">
                  <div class="worksHoverEffect">
                    <img src="assets/images/ourWorks1.jpg" alt="Works Chap Spireburst" class="img-fluid">
                    <div class="worksOverlay">
                      <h2 class="">Praesent Dapibus</h2>
                      <p class="">
                        <a href="javascript:void(0)">Know More</a>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-5">
                  <div class="worksHoverEffect">
                    <img src="assets/images/ourWorks2.jpg" alt="Works Chap Spireburst" class="img-fluid">
                    <div class="worksOverlay">
                      <h2 class="">Donec Odio</h2>
                      <p class="">
                        <a href="javascript:void(0)">Know More</a>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-5">
                  <div class="worksHoverEffect">
                    <img src="assets/images/ourWorks3.jpg" alt="Works Chap Spireburst" class="img-fluid">
                    <div class="worksOverlay">
                      <h2 class="">Lorem Ipsum</h2>
                      <p class="">
                        <a href="javascript:void(0)">Know More</a>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-5">
                  <div class="worksHoverEffect">
                    <img src="assets/images/ourWorks4.jpg" alt="Works Chap Spireburst" class="img-fluid">
                    <div class="worksOverlay">
                      <h2 class="">Donec Nec</h2>
                      <p class="">
                        <a href="javascript:void(0)">Know More</a>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-5">
                  <div class="worksHoverEffect">
                    <img src="assets/images/ourWorks5.jpg" alt="Works Chap Spireburst" class="img-fluid">
                    <div class="worksOverlay">
                      <h2 class="">Aenean Dignissim</h2>
                      <p class="">
                        <a href="javascript:void(0)">Know More</a>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 mb-5">
                  <div class="worksHoverEffect">
                    <img src="assets/images/ourWorks6.jpg" alt="Works Chap Spireburst" class="img-fluid">
                    <div class="worksOverlay">
                      <h2 class="">Quisque Lectus</h2>
                      <p class="">
                        <a href="javascript:void(0)">Know More</a>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-lg-12 text-center">
                  <a href="javascript:void(0)" class="btn btn-grey">Load More</a>
                </div>
              </div>
            </div>
          </section>
        

Company Slider Section


          <div class="logoSlider">
            <div class="container">
              <div id="logoBrnadSlider" class="owl-carousel owl-theme">
                <div class="item">
                  <img src="assets/images/logo-1.png" alt="Logo Chap Spireburst" class="">
                </div>
                <div class="item">
                  <img src="assets/images/logo-2.png" alt="Logo Chap Spireburst" class="">
                </div>
                <div class="item">
                  <img src="assets/images/logo-3.png" alt="Logo Chap Spireburst" class="">
                </div>
                <div class="item">
                  <img src="assets/images/logo-4.png" alt="Logo Chap Spireburst" class="">
                </div>
                <div class="item">
                  <img src="assets/images/logo-5.png" alt="Logo Chap Spireburst" class="">
                </div>
                <div class="item">
                  <img src="assets/images/logo-6.png" alt="Logo Chap Spireburst" class="">
                </div>
              </div>  
            </div>
          </div>
        

Our Team Section


          <section class="ourTeam">
            <div class="container">
              <div class="row">
                <div class="col-lg-12">
                  <h1 class="sectionHeading">Our Team</h1>
                  <p class="headingSlogan">Proudly Displaying Projects</p>
                  <p class="headingBorderLine"></p>
                  <p class="">Website Contents</p>  
                </div>  
              </div>

              <div id="ourTeamSlider" class="owl-carousel owl-theme">
                <div class="item">
                  <div class="teamHoverEffect">
                    <img src="assets/images/team-1.jpg" alt="Team Chap Spireburst" class="img-fluid">
                    <div class="teamOverlay">
                      <h2 class="">Ariel Lustre <br><span class="teamPosition">Designer</span></h2>
                      <p class="teamIconLinks">
                        <a href="javascript:void(0)">
                          <span class="fa fa-twitter"></span>
                        </a>
                        <a href="javascript:void(0)">
                          <span class="fa fa-facebook"></span>
                        </a>
                        <a href="javascript:void(0)">
                          <span class="fa fa-instagram"></span>
                        </a>
                      </p>
                    </div>
                  </div>
                </div>
                <div class="item">
                  <div class="teamHoverEffect">
                   <img src="assets/images/team-2.jpg" alt="Team Chap Spireburst" class="img-fluid">
                   <div class="teamOverlay">
                    <h2 class="">Clem Onojeghuo <br><span class="teamPosition">Web Developer</span></h2>
                      <p class="teamIconLinks">
                        <a href="javascript:void(0)">
                          <span class="fa fa-twitter"></span>
                        </a>
                        <a href="javascript:void(0)">
                          <span class="fa fa-facebook"></span>
                        </a>
                        <a href="javascript:void(0)">
                          <span class="fa fa-instagram"></span>
                        </a>
                      </p>
                    </div>
                  </div>
                </div>
              <div class="item">
                <div class="teamHoverEffect">
                  <img src="assets/images/team-3.jpg" alt="Team Chap Spireburst" class="img-fluid">
                  <div class="teamOverlay">
                  <h2 class="">Jimmy Bay <br><span class="teamPosition">UI/UX Designer</span></h2>
                    <p class="teamIconLinks">
                      <a href="javascript:void(0)">
                        <span class="fa fa-twitter"></span>
                      </a>
                      <a href="javascript:void(0)">
                        <span class="fa fa-facebook"></span>
                      </a>
                      <a href="javascript:void(0)">
                        <span class="fa fa-instagram"></span>
                      </a>
                    </p>
                  </div>
                </div>
              </div>
            <div class="item">
              <div class="teamHoverEffect">
                <img src="assets/images/team-4.jpg" alt="Team Chap Spireburst" class="img-fluid">
                <div class="teamOverlay">
                <h2 class="">Aidan Meyer <br><span class="teamPosition">CEO</span></h2>
                  <p class="teamIconLinks">
                    <a href="javascript:void(0)">
                      <span class="fa fa-twitter"></span>
                    </a>
                    <a href="javascript:void(0)">
                      <span class="fa fa-facebook"></span>
                    </a>
                    <a href="javascript:void(0)">
                      <span class="fa fa-instagram"></span>
                    </a>
                  </p>
               </div>
              </div>
            </div>
            </div>
            </div>
          </section>
        

Pricing Table Section


          <section class="ourPricing">
            <div class="container">
              <div class="row">
                <div class="col-lg-9">
                  <h1 class="sectionHeading">Our Pricing</h1>
                  <p class="headingBorderLine"></p>
                  <p class="headingSlogan">Aliquam tincidunt mauris eu risus.</p>
                </div>
                <div class="offset-lg-3"></div>

                <div class="col-lg-4 col-sm-12">
                  <div class="pricingTable">
                    <h3 class="pricingTableTitle">Starter</h3>
                    <h2 class="pricingTableCost">
                      <span>$</span>19<span>/month</span>
                    </h2>
                    <div class="pricingTableFeatures">
                      <ul class="list-inline">
                        <li class="">Free Updates</li>
                        <li class="">Live Support</li>
                        <li class="">10 Domain User</li>
                        <li class="">Customizaiton</li>
                        <li class="">Unlimited Features</li>
                      </ul>
                    </div>
                    <a href="javascript:void(0)" class="btn btn-grey-fullWidth">Get Started</a>
                  </div>
                </div>
                <div class="col-lg-4 col-sm-12">
                  <div class="pricingTable">
                    <h3 class="pricingTableTitle">Premium</h3>
                    <h2 class="pricingTableCost premium">
                      <span>$</span>59<span>/month</span>
                    </h2>
                    <div class="pricingTableFeatures">
                      <ul class="list-inline">
                        <li class="">Free Updates</li>
                        <li class="">Live Support</li>
                        <li class="">10 Domain User</li>
                        <li class="">Customizaiton</li>
                        <li class="">Unlimited Features</li>
                      </ul>
                    </div>
                    <a href="javascript:void(0)" class="btn btn-grey-fullWidth">Get Started</a>
                  </div>
                </div>
                <div class="col-lg-4 col-sm-12">
                  <div class="pricingTable">
                    <h3 class="pricingTableTitle">Extended</h3>
                    <h2 class="pricingTableCost">
                      <span>$</span>240<span>/month</span>
                    </h2>
                    <div class="pricingTableFeatures">
                      <ul class="list-inline">
                        <li class="">Free Updates</li>
                        <li class="">Live Support</li>
                        <li class="">10 Domain User</li>
                        <li class="">Customizaiton</li>
                        <li class="">Unlimited Features</li>
                      </ul>
                    </div>
                    <a href="javascript:void(0)" class="btn btn-grey-fullWidth">Get Started</a>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

Our Blog Section


          <section class="blog" id="blog">
            <div class="container">
              <div class="row">
                <div class="col-lg-9">
                  <h1 class="sectionHeading">Our Blog</h1>
                  <p class="headingSlogan">Donec consectetuer ligula vulputate</p>
                  <p class="headingBorderLine"></p>
                  <p class="">Website Contents</p>
                </div>
                <div class="offset-lg-3"></div>

                <div class="col-lg-4 col-sm-12">
                  <div class="blogCard">
                    <img src="assets/images/blog-1.jpg" alt="Blog Chap Spireburst" class="img-fluid">
                    <div class="d-flex justify-content-between blogDetail">
                      <div class="blogCategory">
                        <ul class="list-inline">
                          <li class="list-inline-item"><a href="javascript:void(0)">Photography</a></li>
                          <li class="list-inline-item"><a href="javascript:void(0)">Lifestyle</a></li>
                        </ul>
                      </div>
                      <div class="blogDate">March 22,2018</div>
                    </div>
                    <h2 class="">Phasellus ultrices nulla quis</h2>
                    <p class="headingBorderLineSmall"></p>
                    <p class="text-justify">Website Contents</p>
                    <p class="text-right">
                      <a href="javascript:void(0)" class="btn btn-grey">Continue Reading</a>
                    </p>
                  </div>
                </div>
                <div class="col-lg-4 col-sm-12">
                  <div class="blogCard">
                    <img src="assets/images/blog-2.jpg" alt="Blog Chap Spireburst" class="img-fluid">
                    <div class="d-flex justify-content-between blogDetail">
                      <div class="blogCategory">
                        <ul class="list-inline">
                          <li class="list-inline-item"><a href="javascript:void(0)">Lifestyle</a></li>
                        </ul>
                      </div>
                      <div class="blogDate">March 22,2018</div>
                    </div>
                    <h2 class="">Pellentesque fermentum</h2>
                    <p class="headingBorderLineSmall"></p>
                    <p class="text-justify">Website Contents</p>
                    <p class="text-right">
                      <a href="javascript:void(0)" class="btn btn-grey">Continue Reading</a>
                    </p>
                  </div>
                </div>
                <div class="col-lg-4 col-sm-12">
                  <div class="blogCard">
                    <img src="assets/images/blog-3.jpg" alt="Blog Chap Spireburst" class="img-fluid">
                    <div class="d-flex justify-content-between blogDetail">
                      <div class="blogCategory">
                        <ul class="list-inline">
                          <li class="list-inline-item"><a href="javascript:void(0)">Travel</a></li>
                          <li class="list-inline-item"><a href="javascript:void(0)">Lifestyle</a></li>
                        </ul>
                      </div>
                      <div class="blogDate">March 22,2018</div>
                    </div>
                    <h2 class="">Sed adipiscing ornare risus</h2>
                    <p class="headingBorderLineSmall"></p>
                    <p class="text-justify">Website Contents</p>
                    <p class="text-right">
                      <a href="javascript:void(0)" class="btn btn-grey">Continue Reading</a>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

Testimonial Section


          <section class="testimonial">
            <div class="container">
              <div class="row testimonialContent">
                <div class="col-lg-8 col-sm-12 col-xs-12 mx-auto">
                  <div id="testimonialSlider" class="owl-carousel owl-theme">
                    <div class="item">
                      <img src="assets/images/avatar-1.jpg" alt="Testimonial Chap Spireburst" class="img-fluid rounded-circle">
                      <p>Website Contents</p>
                    </div>
                    <div class="item">
                      <img src="assets/images/avatar-2.jpg" alt="Testimonial Chap Spireburst" class="img-fluid rounded-circle">
                      <p>Website Contents</p>
                    </div>
                    <div class="item">
                      <img src="assets/images/avatar-3.jpg" alt="Testimonial Chap Spireburst" class="img-fluid rounded-circle">
                      <p>Website Contents</p>
                    </div>
                    <div class="item">
                      <img src="assets/images/avatar-4.jpg" alt="Testimonial Chap Spireburst" class="img-fluid rounded-circle">
                      <p>Website Contents</p>
                    </div>
                    <div class="item">
                      <img src="assets/images/avatar-5.jpg" alt="Testimonial Chap Spireburst" class="img-fluid rounded-circle">
                      <p>Website Contents</p>
                    </div>
                    <div class="item">
                      <img src="assets/images/avatar-6.jpg" alt="Testimonial Chap Spireburst" class="img-fluid rounded-circle">
                      <p>Website Contents</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        

Upload Files


Unzip package in an empty directory and you will see dist folder. In dist folder change content according to yours then upload this folder on server root directory.

Help & Support


24/7 Support, Just mail us any issue we will be happpy to help.

For any issue send us mail info@spireburst.com

Thank you for purchasing Chap template . If you have any question that is beyond the scope of this documentation, Please feel free to send an email to info@spireburst.com.