Spark Construction A Html template for Construction Companies

Introduction


Spark Construction is clean coded HTML construction template.It is a highly customizable, elegant, modern, minimal, royal, multi-purpose and a very-easy to use HTML template for construction-companies, architectures and builders who wish to own a site to expand their business.Most importantly, this template is SEO-friendly and well-optimized for load time.

The layout looks beautiful at any size, be it a laptop screen, iPad, iPhone, Android Mobile or tablets.It has purpose oriented design, responsive layout and special features like contact forms, and other pages. Spark construction is build on the top of bootstrap 3.3.7. You can get started to develop this template as it is build using modern tools like Gulp, SASS & Bootstrap. Please check below for detailed features and other various informations.

The below documentation guide a beginner to develop their website.

Whats inside the folder you created?


Before you start to edit on the file first you should know about the folder components

image

Below the image, folders are maintained as per the content of the site. Here there are different html pages for the site plus, different folders naming css, fonts, images, js.

The folders like fonts, images and js are the folder where you keep your required fonts, images for the site and .js files needed to your project. For now we have kept all the needed fonts and js file for the site. And for images you can have the images as per your need. Remember the image size shall be according the given size.

How to use Gulp & SASS


Gulp :


CASE 1 : We believe that you already have little knowledge of gulp. Gulp.js file is include in the main package file. Check the gulp.js file you will come to know that plugins are needed to be installed. Let me guide little with the process.


  1. 1.Downlaod and install Node.js https://nodejs.org/en/download/

  2. 2.After that you need to install Node. After installing node its time to install gulp globally.

  3. 3.You can check this guide from Gulp js get started documenation https://gulpjs.org/getting-started

  4. We hope you already learn to use Gulp if still you have confusion. Here is video tutorial for you https://www.youtube.com/watch?v=CxM1RYnCYwM

  5. We believe that you have learn Gulp completely. Now you can start bundelling js files.

  6. In case if you haven't lean gulp yet DO NOT fred, you can use this template still without gulp. Follow CASE 2 below.




CASE 2 : We belive you are reading this case because you couldn't use gulp. We will now help you to understand the folder structure and link the required assets file in you HTML files.


  1. First understand the folder strtucture. Dist folder contains distubution files. All the minified js files, minified compiled css, compress images & icons fonts.

  2. Same way, SRC contains source files. All source js files, Source SASS files, Source compressed images etc.

  3. If you DO NOT wish to continue with the GULP then simply ignore the js bundle files that are used in the HTML files. Now you can link the js files which are incide the SRC folder.

  4. Hope you understood what we were trying to say. If still have confusion please let us know at our support email.

SASS :


if you have knowledge of SASS go ahead and start using Source SASS files which are incide SRC folder. You can use KOALA compiler to compile the SASS to CSS.

If you do not have knowledge of SASS then you can simply create a style file inside DIST / CSS folder, name it as you want. Link that to the HTML files & start writing your own CSS. Make sure you link that below our CSS file in HTML file.

How to use Our HTML Template?


For the html integration you can simply edit on .html file. Like for example index.html, you can re-order the sections up and down, and you have a flexibility on re-ordering the sections.

img

Sections


Section : Slider/Banner

You can put the images according to the required size, have caption on it and a read-more button as per your requirement.

image

About Us Section : Who We Are

Here you can change section title, section description, tab title and tab description of about us section. Check the screenshot below to learn more.

image

Our Services Section : What Do We Do?

Here you can change our services's section title, section description, service image, service title and service description of our services section. Check the screenshot below to learn more.

image

Section : Recent Projects

This section can used to describe about your education firm.

Here you can change recent projects/works section title, section description, categories title, project image and project title of this section. Check the screenshot below to learn more.

image

Section: Our Team

You can change Section Title, Section Description, Team Member Image, Name, Designation and social links. Check the screenshot below to learn how to edit this section.

image

Our Blog Section : Our Blog

Here in this section you can change Section Title, Blog Title, Categories Title, Post Date, Feature Image and View More Button Text & Link. Check the screenshot below to learn how to edti this section.

image

Section : Testimonials Section

You can change Section Title, Section Description, testimonial message, image, name, position & rate. Check the screenshot below to learn how to edit this section.

image

Section : Our Pricing

You can change Section Title, Section Description, pricing title, amount, features & Button text and url. Check the screenshot below to learn how to edit this section.

image

Section : Get A Quote

You can change Section Title, Section Description, Button text and url. Check the screenshot below to learn how to edit this section.

image

Section : Our Partners

You can change Section Title, Section Description, brand logo Check the screenshot below to learn how to edit this section.

image