Version: 1.0 | Dated: 15th March 2018

- Get Support
- Themes
- Contact

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

1. Open the `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.
3. Make sure you upload the required files/folders listed below:
   - `HTML/assets/stylesheets` - Extra Stylesheets Folder
   - `HTML/assets/images` - Images Folder
   - `HTML/assets/scripts` - Javacripts Folder
   - `HTML/assets/stylesheets/main.css` - Main Stylesheet File
   - `HTML/index.html` - Index File/Homepage
   The other files can be used according to your preferences.
4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

# HTML Structure

Consider follows a simple coding structure. here is the sample:

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

    	<!-- Styles -->
    	...

    </head>
    <body itemscope>

    	<!-- Page Layout -->
    	<main">

    		<!-- Header -->
    		<header Class="stck styl1 aftr-sec">

    			...

    		</header>

    		<section>

    			<div class="gp">

    				<div class="container">

    					...

    				</div>

    			</div>

    		</section>

    		<!-- Footer -->
    		<footer>

    			<div class="gp ls-spc drk-bg2">

    				<div class="container">

    					...

    				</div>

    			</div>

    		</footer>

    		<!-- Copyrights -->
    		<div class="btm-br drk-bg3 text-center">

    			<div class="container">

    				...

    			</div>

    		</div>

    	</main>

    </body>
    </html>

### Layout Settings

This Theme Supports both Boxed & Wide Layouts. Adding the class `.bxd` to the `<main>` will turn your website into a boxed Layout:

    <main class="bxd">

# Logo Settings

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

    <div class="lgo drk-blu-bg">
    	<h1 itemprop="headline"><a href="index.html" title="" itemprop="url" ><img src="assets/images/lgo1-lgt.png" alt="lgo1-lgt.png" itemprop="image"></a></h1>
    </div>

Note The Logo Image's maximum height can be 40px. Also make sure you also add the Dark Logo which provides even more intuitiveness when you switch between Light/Dark Scheme. However, it is optional.

# Color Schemes

You can change your Website's Color Scheme in an instant. You simply need to change the HEX Color Code in the `assets/stylesheets/blue-color.css` file & you are good to go. Follow these quick steps to get going:

1. Make sure you add the `assets/stylesheets/blue-color.css` stylesheet in your head before the responsive stylesheets.

       <head>

       	...

       	<link rel="stylesheet" href="assets/stylesheets/responsive.css">
       	<link rel="stylesheet" href="assets/stylesheets/red-color.css">
       	<link rel="stylesheet" href="assets/stylesheets/yellow-color.css">
       	<link rel="stylesheet" href="assets/stylesheets/blue-color.css">

       	...

       </head>

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

# Changing Fonts

Change your Fonts on the Fly as we have included a `assets/stylesheets/main.css` file to manage the custom fonts you include with ease. By default, consider uses 3 Fonts namely: `Roboto Condensed`, `Playfair Display`, `Patrick Hand`, `Gloria Hallelujah`, `Roboto`, `Oswald`, `Open Sans`, `Poppins` & `Montserrat` from the Google Fonts Library. You can find the Linking to the Font Files in the `main.css` file.

    @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
    @import url(https://fonts.googleapis.com/css?family=Playfair+Display);
    @import url(https://fonts.googleapis.com/css?family=Patrick+Hand);
    @import url(https://fonts.googleapis.com/css?family=Gloria+Hallelujah);
    @import url(https://fonts.googleapis.com/css?family=Roboto:300,400);
    @import url(https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700);
    @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i);
    @import url(https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i);
    @import url(https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i);

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete 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 Fonts in the `assets/stylesheets/main.css` File.

# 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 Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

- #### 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. 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 fast.

  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.

- #### 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. The size/resolution of the Image matters since it is not recommended to use an Image size of `1200px` x `800px` in a Content Size of `300px` x `200px` as this unnecessary. Resize it to `300px` x `200px`
  - Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
  - 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 Factor 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 needs.

- #### 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 Header Element will activate the Header Type. The list of Header Type Classes & its descriptions are provided below for your reference:

Type Class | Code Example
--- | ---
`Style 1` |
    <header class="stck styl1">
    	...
    </header>
`Style 2` |
    <header class="stck styl2 abs-ps">
    	...
    </header>
`Style 3` |
    <header class="stck styl4">
    	...
    </header>
`Style 4` |
    <header class="stck styl5 abs-ps">
    	...
    </header>
`Style 5` |
    <header class="stck styl6 abs-ps">
    	...
    </header>
`Style 6` |
    <header class="stck styl8 abs-ps">
    	...
    </header>
`Style 7` |
    <header class="stck styl9 abs-ps">
    	...
    </header>

# Mega Menu

You can start using the Mega Menu in 2,3 & 4 Columns. Try using the Following code:

    <nav>
    	<ul>
    		<li><a href="index.html"><div>Home</div></a></li>
    		<li class="menu-item-has-children"><a href="link.html"><div>Mega Menu</div></a>
    			<div class="mgamnu rd6">
    				<div class="row">
    					<div class="col-md-4 col-sm-6 col-lg-4">
    						<div class="mega-lnks">
    							...
    						</div>
    					</div>
    					<div class="col-md-4 col-sm-6 col-lg-4">
    						<div class="mega-lnks">
    							...
    						</div>
    					</div>
    					<div class="col-md-4 col-sm-6 col-lg-4">
    						<div class="mega-lnks">
    							...
    						</div>
    					</div>
    				</div>
    			</div>
    		</li>
    	</ul>
    </nav>

# Page Titles

Class | Description | Example
--- | --- | ---
`Default` | Default Page Title style & Breadcrumbs with Text aligned Center. |
    <section>
                    <div class="gp blk-lyr opc6">
                        <div class="fxd-bg" style="background-image: url(assets/images/pg-tp-bg.jpg);"></div>
                        <div class="container">
                                <div class="pg-tp text-center">
                                    <ol class="breadcrumb">
                                        <li><a href="index.html" title="" itemprop="url">Home</a></li>
                                        <li class="active">Page Title</li>
                                    </ol>
                                    <h1 itemprop="headline">Page Title</h1>
                                </div>
                            </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:

- `.gp` - Padding of 100px on the top & bottom sides.
- `.ls-spc` - Padding of 70px on the top & bottom sides.
- `.pdlr80` - Padding of 80px on the left & right sides.
- `.padlr40` - Padding of 40px on the left & right sides.
- `.tp-spc40` - Padding of 40px on the top side.
- `.btm-spc40` - Padding of 40px on the bottom side.
- `.tp-spc80` - Padding of 80px on the top side.
- `.btm-spc80` - Padding of 80px on the bottom side.
- `.tp-spc90` - Padding of 90px on the top side.
- `.btm-spc90` - Padding of 90px on the bottom side.
- `.tp-spc130` - Padding of 130px on the top side.
- `.btm-spc130` - Padding of 130px on the bottom side.
- `.tp-spc140` - Padding of 140px on the top side.
- `.btm-spc140` - Padding of 140px on the bottom side.
- `.tp-spc170` - Padding of 170px on the top side.
- `.btm-spc170` - Padding of 170px on the bottom side.
- `.tp-spc175` - Padding of 175px on the top side.
- `.btm-spc175` - Padding of 175px on the bottom side.
- `.tp-spc210` - Padding of 210px on the top side.
- `.btm-spc210` - Padding of 210px on the bottom side.
- `.tp-spc230` - Padding of 230px on the top side.
- `.btm-spc230` - Padding of 230px on the bottom side.
- `.tp-spc260` - Padding of 260px on the top side.
- `.btm-spc260` - Padding of 260px on the bottom side.
- `.tp-spc300` - Padding of 300px on the top side.
- `.btm-spc300` - Padding of 300px on the bottom side.
- `.no-gp` - No Padding on all sides.
- `.no-tpgp` - No Padding on the top side.
- `.no-btmgp` - No Padding on the bottom side.
- `.gry-bg` - Add Gray background of this code #fbfbfb.
- `.gry-bg2` - Add Gray background of this code #f5f5f5.
- `.gry-bg3` - Add Gray background of this code #efefef.
- `.gry-bg4` - Add Gray background of this code #f2f2f2.
- `.gry-bg5` - Add Gray background of this code #f8f8f8.
- `.drk-bg` - Add Dark background of this code #2d2d2d.
- `.drk-bg2` - Add Dark background of this code #191919.
- `.drk-bg3` - Add Dark background of this code #0f0f0f.
- `.drk-bg4` - Add Dark background of this code #222428.
- `.drk-bg5` - Add Dark background of this code #1f1f1f.
- `.drk-bg6` - Add Dark background of this code #1e1e1e.
- `.drk-blu-bg` - Add Dark Blue background of this code #153951.
- `.drk-blu-bg2` - Add Dark Blue background of this code #002243.
- `.rmv-ext` - Margin of -20px on the bottom side.
- `.rmv-ext2` - Margin of -25px on the bottom side.
- `.rmv-ext3` - Margin of -30px on the bottom side.
- `.rmv-ext4` - Margin of -35px on the bottom side.
- `.rmv-ext5` - Margin of -40px on the bottom side.
- `.rmv-ext6` - Margin of -45px on the bottom side.
- `.rmv-ext7` - Margin of -50px on the bottom side.
- `.rmv-ext8` - Margin of -55px on the bottom side.
- `.rmv-ext9` - Margin of -60px on the bottom side.
- `.rmv-ext10` - Margin of -65px on the bottom side.
- `.rmv-ext11` - Margin of -70px on the bottom side.
- `.rmv-ext12` - Margin of -75px on the bottom side.
- `.rmv-ext13` - Margin of -80px on the bottom side.
- `.mrg` - Margin 0px on all sides & inner div Padding 0px on all sides.
- `.mrg5` - Margin -2.5px on the left & right sides & inner div Padding 2.5px on the left & right sides.
- `.mrg7` - Margin -3.5px on the left & right sides & inner div Padding 3.5px on the left & right sides.
- `.mrg10` - Margin -5px on the left & Right sides & inner div Padding 5px on the left & right sides.
- `.mrg14` - Margin -7px on the left & right sides & inner div Padding 7px on the left & right sides.
- `.mrg20` - Margin -10px on the left & right sides & inner div Padding 10px on the left & right sides.
- `.mrg40` - Margin -20px on the left & right sides & inner div Padding 20px on the left & right sides.
- `.mrg65` - Margin -32.5px on the left & right sides & inner div Padding 32.5px on the left & right sides.
- `.ovrlp-40` - Margin on -40px on the top side.
- `.ovrlp-60` - Margin on -60px on the top side.
- `.ovrlp-110` - Margin on -110px on the top side.
- `.ovrlp-165` - Margin on -165px on the top side.
- `.btmovrlp-135` - Margin on -135px on the bottom side.
- `.rd0` - Border Radius of 0px on all sides.
- `.rd2` - Border Radius of 2px on all sides.
- `.rd3` - Border Radius of 3px on all sides.
- `.rd4` - Border Radius of 4px on all sides.
- `.rd5` - Border Radius of 5px on all sides.
- `.rd6` - Border Radius of 6px on all sides.
- `.rd8` - Border Radius of 8px on all sides.
- `.rd10` - Border Radius of 10px on all sides.
- `.rd12` - Border Radius of 12px on all sides.
- `.rd18` - Border Radius of 18px on all sides.
- `.rd30` - Border Radius of 30px on all sides.
- `.rd40` - Border Radius of 40px on all sides.
- `.rd50` - Border Radius of 50% on all sides.

# Slider Types & their Options

consider includes 2 Unique Sliders for you to be used on any Page with 100s of Options. The List of all the Sliders included are mentioned as follows:

- Revolution Slider
- Owl Carousel

## Revolution Slider

You can find the Revolution Slider related Documentation here.
Read Revolution Slider Docs

## Owl Carousel

You can find the Owl Carousel related Documentation here.
Read Owl Carousel Docs

# Post Types

You can use a 5 different types of Post Types:

- Image
- Embedded Video
- Blockquotes
- Link
- Embedded Audio
- Carousel

# jQuery

- Revolution Slider
- Owl Carousel 2
- Google Map
- Wow
- Chosen
- Down Count
- Counter Up
- Bootstrap
- Isotope
- High Charts
- Fancybox Popup

# CSS & Fonts

- Bootstrap
- Animation
- Font-Awesome (Font Icons)
- Google Fonts
- Roboto Condensed Font
- Playfair Display Font
- Patrick Hand Font
- Gloria Hallelujah Font
- Roboto Font
- Oswald Font
- Open Sans Font
- Poppines Font
- Montserrat Font

# Initial Release V1.0

Released on 16th March, 2018