# Installation

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

1. Open the `Package/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/css` - Stylesheets folder
   - `HTML/fonts` – Icon fonts folder
   - `HTML/images` - Images folder
   - `HTML/js` - Javacripts folder
   - `HTML/video` – Video files
   - `HTML/php` – Contact form PHP files
4. You should upload all or specific HTML files as per your need.
5. You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.

# HTML Structure

Canopus follows a simple and easy to customize coding structure. Here is the sample for your reference:

    <!doctype html>
    <html class="no-js" lang="en">
        <head>
            <!-- title -->
            <meta name="description" content="">
            <meta name="keywords" content="">
            <meta charset="utf-8">
            <meta name="author" content="">
            <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
            <!-- favicon -->
            <!-- style -->
        </head>
        <body>

            <!-- navigation -->
            <nav class="navbar navbar-default navbar-fixed navbar-transparent white bootsnav on no-full">
                ...
            </nav>
            <!-- end navigation -->
            <!-- slider -->
            <section class="home-slider">
                <div class="default-slider slick">
                    <!-- slider item -->
                    ...
                    <!-- end slider item -->
                </div>
            </section>
            <!-- end slider -->
            <!-- content section -->
            <section class="white-bg">
                <div class="container">
                    ...
                </div>
            </section>
            <!-- end content section -->
            <!-- footer -->
            <footer class="footer dark-block">
                <div class="footer-main">
                    <div class="container">
                        ...
                    </div>
                </div>
                <div class="footer-copyright">
                    <div class="container">
                        ...
                    </div>
                </div>
            </footer>
            <!-- end footer -->
            <!-- scroll to top -->
            <a href="javascript:;" id="return-to-top"><i class="icofont icofont-arrow-up"></i></a>
            <!-- end scroll to top -->
            <!-- javascript plugins -->
        </body>
    </html>

# Logo Settings

The Logo Container can be found in the Nav Container - `.navbar`

    <!--== Start Header Navigation ==-->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu"> <i class="tr-icon ion-android-menu"></i> </button>
        <div class="logo"> <a href="index.html"> <img class="logo logo-display" src="assets/images/logo-white.png" alt=""> <img class="logo logo-scrolled" src="assets/images/logo-black.png" alt=""> </a> </div>
      </div>
    <!--== End Header Navigation ==-->

Note The Logo Image's maximum height can be 60px.

# Image & Favicon Settings

## Image Settings

Canopus download package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like `images/yourimage.jpg`

    <img src="http://placehold.it/350x150">

NoteYour image size should be the same as per placeholder image url.

## Favicon Settings

To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

    <!-- favicon -->
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

# Changing Fonts

Canopus uses 3 fonts: Raleway, Montserrat, Open Sans from the Google Fonts Library. You can change the fonts from /css/master.css file in below lines. If you want to use self hosted fonts other than Google fonts then here is an example of self hosted fonts. In this case you need to remove below lines and change font names in /css/master.css file as per your fonts used.

    /* ==== Google font ==== */
    @import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i|Roboto:100,300,400,700,900');

# Optimization Tips

Now a days fast & optimized website is must, so we would like to represent some optimization tips below which can affect your overall website speed:

## gZip Compression & Browser Caching

This is probably one of the mostly used techniques you should definitely implement in order to increase your website's loading speed. gZip Compression is used to compress the Files that are delivered when loading a website. It includes HTML, CSS, Javascript & Font files along with other miscellaneous text files. This is used to save 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 and hence further pages loads 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/ to enable these modules on your server.

## Image Compression & Optimization

We normally use lots of images on our websites to make it look beautiful as well as easily understandable but it can make the website slow if we do not take care of image size. It is important to resize, optimize & compress your images before using it on your website. Here are some tips which can be helpful:

- 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. 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 is 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 a best practice to combine & minify all your CSS files to a single CSS file & all Javascript files to a single JS file as it reduces the size of the file and combining the files helps in reducing the number of HTTP requests made to the server. There are several tools available online to Minify your CSS & JS files.

We recommend to use CSS Minifier for CSS and use Javascript Minifier for JS.

## Customize Header Expiry/Caching

By using a customized Expiry header, your web components like images, static files, CSS, Javascript skipped unnecessary HTTP request when the same user reload the page for the second time. It reduces the bandwidth needed and definitely help in serving the page faster.

## Disable ETags

Compared to the potential hassles that can be encountered when implementing the rule above, the application of this rule is very easy. You just need to add the following to your .htaccess file: `FileETags none`
Note that this rule applies to sites that are in a server farm. If you’re using a shared host, you could skip this step, but we recommend that you do it regardless.

## 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 many CDN hosting providers available in the market but we would recommend MaxCDN or CloudFlare.
Note CDN setup requires extra monthly recurring fees to setup.

# Home Page Demos

Canopus is One Page and Multipurpose HTML Template retina ready. It is amazing, professional and easy to use Template. You can use it for, business, Photo Studio, Startup, Portfolio Template, Personal, Creative Agency, Corporate, Parallax, Mobile application etc.

### Parallax

### Parallax Dark

### Parallax Text Rotate

### Revolution Slider

### Revolution Slider Dark

### HTML5 Video

### HTML5 Video Dark

### Creative Agency

### Creative Agency Dark

### Blog

# Columns & Grid

Basic grid layouts to get you familiar with building within the Bootstrap grid system.

## Three equal columns

Get three equal-width columns starting at desktops and scaling to large desktops. On mobile devices, tablets and below, the columns will automatically stack.

`.col-md-4`
`.col-md-4`
`.col-md-4`

## Three unequal columns

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

`.col-md-3`
`.col-md-6`
`.col-md-3`

## Two columns

Get two columns starting at desktops and scaling to large desktops.

`.col-md-8`
`.col-md-4`

## Full width, single column

`.col-md-12`

## Two columns with two nested columns

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

`.col-md-8`
`.col-md-6`
`.col-md-6`
`.col-md-4`

## Mixed: mobile and desktop

The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

`.col-xs-12` `.col-md-8`
`.col-xs-6` `.col-md-4`
`.col-xs-6` `.col-md-4`
`.col-xs-6` `.col-md-4`
`.col-xs-6` `.col-md-4`
`.col-xs-6`
`.col-xs-6`

## Mixed: mobile, tablet, and desktop

`.col-xs-12` `.col-sm-6` `.col-lg-8`
`.col-xs-6` `.col-lg-4`
`.col-xs-6` `.col-sm-4`
`.col-xs-6` `.col-sm-4`
`.col-xs-6` `.col-sm-4`

## Column clearing

Clear floats at specific breakpoints to prevent awkward wrapping with uneven content.

`.col-xs-6` `.col-sm-3`
`.col-xs-6` `.col-sm-3`
`.col-xs-6` `.col-sm-3`
`.col-xs-6` `.col-sm-3`

## Offset, push, and pull resets

Reset offsets, pushes, and pulls at specific breakpoints.

`.col-sm-5` `.col-md-6`
`.col-sm-5` `.col-sm-offset-2` `.col-md-6` `.col-md-offset-0`
`.col-sm-6` `.col-md-5` `.col-lg-6`
`.col-sm-6` `.col-md-5` `.col-md-offset-2` `.col-lg-6` `.col-lg-offset-0`

## Grid Structure

`.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-5`
`.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:

Font Size

- `.font-12px`
- `.font-14px`
- `.font-16px`
- `.font-18px`
- `.font-18px`
- `.font-20px`
- `.font-26px`
- `.font-30px`
- `.font-35px`
- `.font-40px`
- `.font-50px`
- `.font-60px`
- `.font-70px`
- `.font-80px`
- `.font-90px`
- `.font-100px`
- `.font-110px`
- `.font-120px`
- `.font-130px`

Font Color

- `.white-color` - For white color text
- `.dark-Color` - For dark color text
- `.default-color` - For red color text
- `.secondary-color` - For deep purple color text
- `.yellow-color` - For yellow color text
- `.grey-color` - For grey color text

Font Family

- `.montserrat-font` - Montserrat
- `.play-font` - Playfair
- `.roboto-font` - Roboto
- `.kaushan-font` - Kaushan
- `.herr-font` - Herr Von Muellerhoff

Text Align

- `.text-left` - For text align left
- `.text-right` - For text align right
- `.text-center` - For text align center
- `.text-justify` - For text align justify

Text Transform

- `.text-lowercase` - For text to lowercase
- `.text-uppercase` - For text to uppercase

Letter Spacing

- `.letter-spacing-0` - For letter spacing of none
- `.letter-spacing-1` - For letter spacing of 1 pixel
- `.letter-spacing-2` - For letter spacing of 2 pixel
- `.letter-spacing-3` - For letter spacing of 3 pixel
- `.letter-spacing-4` - For letter spacing of 4 pixel
- `.letter-spacing-5` - For letter spacing of 5 pixel
- `.letter-spacing-6` - For letter spacing of 6 pixel
- `.letter-spacing-7` - For letter spacing of 7 pixel
- `.letter-spacing-8` - For letter spacing of 8 pixel
- `.letter-spacing-9` - For letter spacing of 9 pixel
- `.letter-spacing-10` - For letter spacing of 10 pixel

Font Weight

- `.font-100` - For font weight of 100
- `.font-300` - For font weight of 300
- `.font-400` - For font weight of 400
- `.font-600` - For font weight of 600
- `.font-700` - For font weight of 700
- `.font-800` - For font weight of 800

Line Heights

- `.line-height-15` - For line height of 15
- `.line-height-20` - For line height of 20
- `.line-height-22` - For line height of 22
- `.line-height-24` - For line height of 24
- `.line-height-25` - For line height of 25
- `.line-height-26` - For line height of 26
- `.line-height-30` - For line height of 30
- `.line-height-35` - For line height of 35
- `.line-height-40` - For line height of 40
- `.line-height-45` - For line height of 45
- `.line-height-50` - For line height of 50
- `.line-height-60` - For line height of 60
- `.line-height-70` - For line height of 70
- `.line-height-80` - For line height of 80
- `.line-height-90` - For line height of 90
- `.line-height-100` - For line height of 100
- `.line-height-110` - For line height of 110
- `.line-height-120` - For line height of 120

Background Color

- `.white-bg` - For background color of white
- `.transparent-bg` - For background color of white transparent
- `.bordered-bg` - For background color of bordered
- `.dark-bg` - For background color of dark
- `.dark-grey-bg` - For background color of dark grey
- `.lighten-grey-bg` - For background color of smoke
- `.yellow-bg` - For background color of yellow
- `.bordered-bg.white-bg` - For background color of white border
- `.pattern-bg-dark` - For background pattern of dark
- `.pattern-bg-light` - For background pattern of light
- `.pattern-bg-colored` - For background pattern of memphis
- `.default-bg` - For background color of red
- `.secondary-bg` - For background color of purple

Background Image

- `.fixed-bg` - For background image attachment fixed

Overlay

- `.parallax-overlay` - For parallax overlay of dark
- `.parallax-overlay-white` - For parallax overlay of light
- `.color-overlay-bg` - For parallax overlay of red
- `.secondary-color-overlay-bg` - For parallax overlay of purple

Box Shadows

- `.box-shadow` - For Box Shadow
- `.box-shadow-hover` - For Box Shadow on hover

All Margins

- `.remove-margin` - Margin 0px of each side
- `.all-margin-10` - Margin 10px of each side
- `.all-margin-20` - Margin 20px of each side
- `.all-margin-30` - Margin 30px of each side
- `.all-margin-40` - Margin 40px of each side
- `.all-margin-50` - Margin 50px of each side
- `.all-margin-60` - Margin 60px of each side
- `.all-margin-70` - Margin 70px of each side
- `.all-margin-80` - Margin 80px of each side
- `.all-margin-90` - Margin 90px of each side
- `.all-margin-100` - Margin 100px of each side
- `.all-margin-110` - Margin 110px of each side
- `.all-margin-120` - Margin 120px of each side

Margins Auto

- `.margin-left-auto` - Margin Left Auto
- `.margin-right-auto` - Margin Right Auto

Margin Left

- `.ml-0` - Margin Left 0px of Left
- `.ml-10` - Margin Left 10px of Left
- `.ml-20` - Margin Left 20px of Left
- `.ml-30` - Margin Left 30px of Left
- `.ml-40` - Margin Left 40px of Left
- `.ml-50` - Margin Left 50px of Left
- `.ml-60` - Margin Left 60px of Left
- `.ml-70` - Margin Left 70px of Left
- `.ml-80` - Margin Left 80px of Left
- `.ml-90` - Margin Left 90px of Left
- `.ml-100` - Margin Left 100px of Left
- `.ml-110` - Margin Left 110px of Left
- `.ml-120` - Margin Left 120px of Left

Margin Top

- `.mt-0` - Margin Top 0px of Top
- `.mt-10` - Margin Top 10px of Top
- `.mt-20` - Margin Top 20px of Top
- `.mt-30` - Margin Top 30px of Top
- `.mt-40` - Margin Top 40px of Top
- `.mt-50` - Margin Top 50px of Top
- `.mt-60` - Margin Top 60px of Top
- `.mt-70` - Margin Top 70px of Top
- `.mt-80` - Margin Top 80px of Top
- `.mt-90` - Margin Top 90px of Top
- `.mt-100` - Margin Top 100px of Top
- `.mt-110` - Margin Top 110px of Top
- `.mt-120` - Margin Top 120px of Top

Margin Right

- `.mr-0` - Margin Top 0px of Right
- `.mr-10` - Margin Top 10px of Right
- `.mr-20` - Margin Top 20px of Right
- `.mr-30` - Margin Top 30px of Right
- `.mr-40` - Margin Top 40px of Right
- `.mr-50` - Margin Top 50px of Right
- `.mr-60` - Margin Top 60px of Right
- `.mr-70` - Margin Top 70px of Right
- `.mr-80` - Margin Top 80px of Right
- `.mr-90` - Margin Top 90px of Right
- `.mr-100` - Margin Top 100px of Right
- `.mr-110` - Margin Top 110px of Right
- `.mr-120` - Margin Top 120px of Right

Margin Bottom

- `.mb-0` - Margin Top 0px of Bottom
- `.mb-10` - Margin Top 10px of Bottom
- `.mb-20` - Margin Top 20px of Bottom
- `.mb-30` - Margin Top 30px of Bottom
- `.mb-40` - Margin Top 40px of Bottom
- `.mb-50` - Margin Top 50px of Bottom
- `.mb-60` - Margin Top 60px of Bottom
- `.mb-70` - Margin Top 70px of Bottom
- `.mb-80` - Margin Top 80px of Bottom
- `.mb-90` - Margin Top 90px of Bottom
- `.mb-100` - Margin Top 100px of Bottom
- `.mb-110` - Margin Top 110px of Bottom
- `.mb-120` - Margin Top 120px of Bottom

All Padding

- `.remove-padding` - Padding 0px of each side
- `.all-padding-10` - Padding 10px of each side
- `.all-padding-20` - Padding 20px of each side
- `.all-padding-30` - Padding 30px of each side
- `.all-padding-40` - Padding 40px of each side
- `.all-padding-50` - Padding 50px of each side
- `.all-padding-60` - Padding 60px of each side
- `.all-padding-70` - Padding 70px of each side
- `.all-padding-80` - Padding 80px of each side
- `.all-padding-90` - Padding 90px of each side
- `.all-padding-100` - Padding 100px of each side
- `.all-padding-110` - Padding 110px of each side
- `.all-padding-120` - Padding 120px of each side

Padding Left

- `.pl-0` - Padding Left 0px of Left
- `.pl-10` - Padding Left 10px of Left
- `.pl-20` - Padding Left 20px of Left
- `.pl-30` - Padding Left 30px of Left
- `.pl-40` - Padding Left 40px of Left
- `.pl-50` - Padding Left 50px of Left
- `.pl-60` - Padding Left 60px of Left
- `.pl-70` - Padding Left 70px of Left
- `.pl-80` - Padding Left 80px of Left
- `.pl-90` - Padding Left 90px of Left
- `.pl-100` - Padding Left 100px of Left
- `.pl-110` - Padding Left 110px of Left
- `.pl-120` - Padding Left 120px of Left

Padding Top

- `.pt-0` - Padding Top 0px of Top
- `.pt-10` - Padding Top 10px of Top
- `.pt-20` - Padding Top 20px of Top
- `.pt-30` - Padding Top 30px of Top
- `.pt-40` - Padding Top 40px of Top
- `.pt-50` - Padding Top 50px of Top
- `.pt-60` - Padding Top 60px of Top
- `.pt-70` - Padding Top 70px of Top
- `.pt-80` - Padding Top 80px of Top
- `.pt-90` - Padding Top 90px of Top
- `.pt-100` - Padding Top 100px of Top
- `.pt-110` - Padding Top 110px of Top
- `.pt-120` - Padding Top 120px of Top

Padding Right

- `.pr-0` - Padding Right 0px of Right
- `.pr-10` - Padding Right 10px of Right
- `.pr-20` - Padding Right 20px of Right
- `.pr-30` - Padding Right 30px of Right
- `.pr-40` - Padding Right 40px of Right
- `.pr-50` - Padding Right 50px of Right
- `.pr-60` - Padding Right 60px of Right
- `.pr-70` - Padding Right 70px of Right
- `.pr-80` - Padding Right 80px of Right
- `.pr-90` - Padding Right 90px of Right
- `.pr-100` - Padding Right 100px of Right
- `.pr-110` - Padding Right 110px of Right
- `.pr-120` - Padding Right 120px of Right

Padding Bottom

- `.pb-0` - Padding Bottom 0px of Bottom
- `.pb-10` - Padding Bottom 10px of Bottom
- `.pb-20` - Padding Bottom 20px of Bottom
- `.pb-30` - Padding Bottom 30px of Bottom
- `.pb-40` - Padding Bottom 40px of Bottom
- `.pb-50` - Padding Bottom 50px of Bottom
- `.pb-60` - Padding Bottom 60px of Bottom
- `.pb-70` - Padding Bottom 70px of Bottom
- `.pb-80` - Padding Bottom 80px of Bottom
- `.pb-90` - Padding Bottom 90px of Bottom
- `.pb-100` - Padding Bottom 100px of Bottom
- `.pb-110` - Padding Bottom 110px of Bottom
- `.pb-120` - Padding Bottom 120px of Bottom

Float

- `.pull-left` - Float DIV to left
- `.pull-right` - Float DIV to right

Display

- `.display-block` - For display block
- `.display-inline-block` - For display inline-block
- `.display-inline` - For display inline
- `.display-table` - For display table
- `.display-table-cell` - For display table-cell
- `.display-none` - For display none

Position

- `.relative` - For element position relative
- `.absolute` - For element position absolute
- `.fixed` - For element position fixed
- `.static` - For element position static

Position Top

- `.top-0` For element position top 0 from the top of the parent element/div
- `.top-1` For element position 1px down from the top of the parent element/div
- `.top-2` For element position 2px down from the top of the parent element/div
- `.top-3` For element position 3px down from the top of the parent element/div
- `.top-4` For element position 4px down from the top of the parent element/div
- `.top-5` For element position 5px down from the top of the parent element/div
- `.top-6` For element position 6px down from the top of the parent element/div
- `.top-7` For element position 7px down from the top of the parent element/div
- `.top-8` For element position 8px down from the top of the parent element/div
- `.top-9` For element position 9px down from the top of the parent element/div
- `.top-10` For element position 10px down from the top of the parent element/div

Position Right

- `.right-0` For element position right 0 from the right of the parent element/div
- `.right-1` For element position 1px right from the right of the parent element/div
- `.right-2` For element position 2px right from the right of the parent element/div
- `.right-3` For element position 3px right from the right of the parent element/div
- `.right-4` For element position 4px right from the right of the parent element/div
- `.right-5` For element position 5px right from the right of the parent element/div
- `.right-6` For element position 6px right from the right of the parent element/div
- `.right-7` For element position 7px right from the right of the parent element/div
- `.right-8` For element position 8px right from the right of the parent element/div
- `.right-9` For element position 9px right from the right of the parent element/div
- `.right-10` For element position 10px right from the right of the parent element/div

Position Bottom

- `.bottom-0` For element position bottom 0 from the bottom of the parent element/div
- `.bottom-1` For element position 1px up from the bottom of the parent element/div
- `.bottom-2` For element position 2px up from the bottom of the parent element/div
- `.bottom-3` For element position 3px up from the bottom of the parent element/div
- `.bottom-4` For element position 4px up from the bottom of the parent element/div
- `.bottom-5` For element position 5px up from the bottom of the parent element/div
- `.bottom-6` For element position 6px up from the bottom of the parent element/div
- `.bottom-7` For element position 7px up from the bottom of the parent element/div
- `.bottom-8` For element position 8px up from the bottom of the parent element/div
- `.bottom-9` For element position 9px up from the bottom of the parent element/div
- `.bottom-10` For element position 10px up from the bottom of the parent element/div

Position Left

- `.left-0` For element position left 0 from the left of the parent element/div
- `.left-1` For element position 1px left from the left of the parent element/div
- `.left-2` For element position 2px left from the left of the parent element/div
- `.left-3` For element position 3px left from the left of the parent element/div
- `.left-4` For element position 4px left from the left of the parent element/div
- `.left-5` For element position 5px left from the left of the parent element/div
- `.left-6` For element position 6px left from the left of the parent element/div
- `.left-7` For element position 7px left from the left of the parent element/div
- `.left-8` For element position 8px left from the left of the parent element/div
- `.left-9` For element position 9px left from the left of the parent element/div
- `.left-10` For element position 10px left from the left of the parent element/div

- `.top-minus-1` For element position 1px up from the top of the parent element/div
- `.top-minus-2` For element position 2px up from the top of the parent element/div
- `.top-minus-3` For element position 3px up from the top of the parent element/div
- `.top-minus-4` For element position 4px up from the top of the parent element/div
- `.top-minus-5` For element position 5px up from the top of the parent element/div
- `.top-minus-6` For element position 6px up from the top of the parent element/div
- `.top-minus-7` For element position 7px up from the top of the parent element/div
- `.top-minus-8` For element position 8px up from the top of the parent element/div
- `.top-minus-9` For element position 9px up from the top of the parent element/div
- `.top-minus-10` For element position 10px up from the top of the parent element/div

Width

- `.width-10-percent` - For width of 10% on DIV/Text
- `.width-20-percent` - For width of 20% on DIV/Text
- `.width-30-percent` - For width of 30% on DIV/Text
- `.width-40-percent` - For width of 40% on DIV/Text
- `.width-50-percent` - For width of 50% on DIV/Text
- `.width-60-percent` - For width of 60% on DIV/Text
- `.width-70-percent` - For width of 70% on DIV/Text
- `.width-80-percent` - For width of 80% on DIV/Text
- `.width-90-percent` - For width of 90% on DIV/Text
- `.width-100-percent` - For width of 100% on DIV/Text
- `.width-auto` - For width of auto on DIV/Text
- `.max-width` - For max width of width on DIV/Text

Height

- `.height-10-percent` - For height of 10% on DIV/Text
- `.height-20-percent` - For height of 20% on DIV/Text
- `.height-30-percent` - For height of 30% on DIV/Text
- `.height-40-percent` - For height of 40% on DIV/Text
- `.height-50-percent` - For height of 50% on DIV/Text
- `.height-60-percent` - For height of 60% on DIV/Text
- `.height-70-percent` - For height of 70% on DIV/Text
- `.height-80-percent` - For height of 80% on DIV/Text
- `.height-90-percent` - For height of 90% on DIV/Text
- `.height-100-percent` - For height of 100% on DIV/Text
- `.height-auto` - For height of auto on DIV/Text
- `.max-height` - For max height of height on DIV/Text

# Useful Tips

You can add link/button which direct you to other section of the same page with smooth scroll effect like it is one page website. You just need to add class: `page-scroll` and href should be the ID of the section as per the example shown below:

    <a href="#home" class="page-scroll">Home</a>

NotePlease note that destination section should have valid ID.

# Slider Types & Options

There are two types of sliders as mentioned below:

- Slick Slider
- Revolution Slider

## Slick Slider - Full Screen

    <!--  Hero Slider Start  -->
    <section class="parallax-bg fixed-bg xxl-screen pt-0 pb-0" data-parallax-bg-image="assets/images/slides/home-bg-19.jpg" data-parallax-speed="0.5" data-parallax-direction="up" id="home">
          <div class="hero-text-wrap xxl-screen">
            <div class="hero-text">
              <div class="text-content-slider slick">
                <div class="container">
                  <div class="row">
                    <div class="col-md-8 centerize-col">
                      <div class="all-padding-50 text-center white-color">
                          <h2 class="font-100 raleway-font">Creative</h2>
                          <h1>CanopusAgency</h1>
                          <h2 class="font-100 raleway-font">One Page Template</h2>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="container">
                  <div class="row">
                    <div class="col-md-8 centerize-col">
                      <div class="all-padding-50 text-center white-color">
    					  <h2 class="font-100 raleway-font">The Perfect</h2>
                          <h1>HTML5 Bootstrap</h1>
                          <h2 class="font-100 raleway-font">One Page Parallax</h2>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="container">
                  <div class="row">
                    <div class="col-md-8 centerize-col">
                      <div class="all-padding-50 text-center white-color">
                          <h2 class="font-100 raleway-font">Creative</h2>
                          <h1>CanopusAgency</h1>
                          <h2 class="font-100 raleway-font">One Page Template</h2>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
      </section>
    <!--  Hero Slider End  -->

### Javascript

    <script>
          function mainSlider(){
          $(".default-slider").slick({
                dots: true,
                infinite: true,
                centerMode: true,
                autoplay: true,
                autoplaySpeed: 7000,
                slidesToShow: 1,
                slidesToScroll: 1,
                centerPadding: '0',
                responsive: [
                  {
                  breakpoint: 480,
                  settings: {
                  arrows: false,
                  }
                }
              ]
              });
          }
    </script>

Note You can find Slick Slider - Thumb Image code in home-design-lab.html page and above is the code for your reference.

You can find the slick slider related documentation here.
Read Slick Slider Document

## Revolution Slider

    <!--  Home Slider Start  -->
    <section class="remove-padding transition-none" id="home">
    <div id="rev_slider_1078_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="classic4export" data-source="gallery" style="margin:0px auto;background-color:#000000;padding:0px;margin-top:0px;margin-bottom:0px;">
    <!-- START REVOLUTION SLIDER 5.4.1 fullwidth mode -->
    <div id="rev_slider_1078_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.4.1">
    <ul>	<!-- SLIDE  -->
    <li data-index="rs-3045" data-transition="slidingoverlayhorizontal" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="default"  data-rotate="0"  data-saveperformance="off"  data-title="" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
      <!-- MAIN IMAGE -->
      <img src="assets/images/slides/home-bg-1.jpg"  alt=""  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="10" class="rev-slidebg" data-no-retina>
      <!-- LAYERS -->

      <!-- LAYER NR. 1 -->
      <div class="hero-text-wrap">
      <div class="tp-caption NotGeneric-Title   tp-resizeme"
         id="slide-3045-layer-1"
         data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
         data-y="['middle','middle','middle','middle']" data-voffset="['-90','-90','-90','-90']"
              data-fontsize="['40','40','40','25']"
        data-lineheight="['40','40','40','25']"
        data-width="none"
        data-height="none"
        data-whitespace="nowrap"

        data-type="text"
        data-responsive_offset="on"

        data-frames='[{"delay":0,"speed":1500,"frame":"0","from":"y:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
        data-textAlign="['left','left','left','left']"
        data-paddingtop="[10,10,10,10]"
        data-paddingright="[0,0,0,0]"
        data-paddingbottom="[10,10,10,10]"
        data-paddingleft="[0,0,0,0]"

        style="z-index: 201; white-space: nowrap;text-transform:left;"><h1 class="white-color font-100 raleway-font">Creative</h1></div>

      <!-- LAYER NR. 2 -->
      <div class="tp-caption NotGeneric-Title   tp-resizeme"
         id="slide-3045-layer-2"
         data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
         data-y="['middle','middle','middle','middle']" data-voffset="['-10','-10','-10','-10']"
              data-fontsize="['70','70','70','45']"
        data-lineheight="['70','70','70','50']"
        data-width="none"
        data-height="none"
        data-whitespace="nowrap"

        data-type="text"
        data-responsive_offset="on"

        data-frames='[{"delay":0,"speed":1500,"frame":"0","from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
        data-textAlign="['left','left','left','left']"
        data-paddingtop="[10,10,10,10]"
        data-paddingright="[0,0,0,0]"
        data-paddingbottom="[10,10,10,10]"
        data-paddingleft="[0,0,0,0]"

        style="z-index: 5; white-space: nowrap;text-transform:left;font-family: 'Montserrat', sans-serif;">Canopus Agency</div>

      <!-- LAYER NR. 3 -->
      <div class="tp-caption NotGeneric-SubTitle   tp-resizeme"
         id="slide-3045-layer-3"
         data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
         data-y="['middle','middle','middle','middle']" data-voffset="['50','50','50','50']"
              data-width="none"
        data-height="none"
        data-whitespace="nowrap"

        data-type="text"
        data-responsive_offset="on"

        data-frames='[{"delay":0,"speed":1500,"frame":"0","from":"x:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;","mask":"x:0px;y:0px;s:inherit;e:inherit;","to":"o:1;","ease":"Power3.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
        data-textAlign="['left','left','left','left']"
        data-paddingtop="[0,0,0,0]"
        data-paddingright="[0,0,0,0]"
        data-paddingbottom="[0,0,0,0]"
        data-paddingleft="[0,0,0,0]"

        style="z-index: 6; white-space: nowrap;text-transform:left;letter-spacing: 0px;font-size:18px;"><h1 class="white-color font-100 raleway-font">One Page Template</h1></div>

        <!-- LAYER NR. 4 -->
        <div class="tp-caption NotGeneric-SubTitle   tp-resizeme"
           id="slide-3045-layer-4"
           data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
           data-y="['middle','middle','middle','middle']" data-voffset="['150','150','150','150']"
                data-width="none"
          data-height="none"
          data-whitespace="nowrap"

          data-type="text"
          data-responsive_offset="on"

          data-frames='[{"delay":0,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
          data-textAlign="['left','left','left','left']"
          data-paddingtop="[0,0,0,0]"
          data-paddingright="[0,0,0,0]"
          data-paddingbottom="[0,0,0,0]"
          data-paddingleft="[0,0,0,0]"

          style="z-index: 6; white-space: nowrap;text-transform:left;letter-spacing: 0px;"><a class="btn btn-lg btn-gradient-primary btn-square">Purchase Now</a></div>

        </div>

    </li>
    <!-- SLIDE  -->
    </ul>
    <div class="tp-bannertimer" style="height: 3px; background-color: rgba(255, 255, 255, 0.25);"></div>	</div>
    </div>
    </section>
    	<!-- SLIDE  -->

    </ul>
    <div class="tp-bannertimer" style="height: 3px; background-color: rgba(255, 255, 255, 0.25);"></div>	</div>
    </div>
      </section>
    <!--  Home Slider End  -->

### Javascript

        <script>
        if(tpj("#rev_slider_1078_1").revolution == undefined){
                revslider_showDoubleJqueryError("#rev_slider_1078_1");
              }else{
                $("#rev_slider_1078_1").show().revolution({
                  sliderType:"standard",
                  jsFileLocation:"revolution/js/",
                  sliderLayout:"fullscreen",
                  dottedOverlay:"none",
                  delay:9000,
                  navigation: {
                    keyboardNavigation:"off",
                    keyboard_direction: "horizontal",
                    mouseScrollNavigation:"off",
                    mouseScrollReverse:"default",
                    onHoverStop:"off",
                    touch:{
                      touchenabled:"on",
                      swipe_threshold: 75,
                      swipe_min_touches: 1,
                      swipe_direction: "horizontal",
                      drag_block_vertical: false
                    }
                    ,
                    arrows: {
                      style:"zeus",
                      enable:true,
                      hide_onmobile:true,
                      hide_under:600,
                      hide_onleave:true,
                      hide_delay:200,
                      hide_delay_mobile:1200,
                      tmp:'  	 ',
                      left: {
                        h_align:"left",
                        v_align:"center",
                        h_offset:30,
                        v_offset:0
                      },
                      right: {
                        h_align:"right",
                        v_align:"center",
                        h_offset:30,
                        v_offset:0
                      }
                    }
                    ,
                    bullets: {
                      enable:false,
                      hide_onmobile:false,
                      hide_under:600,
                      style:"metis",
                      hide_onleave:true,
                      hide_delay:200,
                      hide_delay_mobile:1200,
                      direction:"horizontal",
                      h_align:"center",
                      v_align:"bottom",
                      h_offset:0,
                      v_offset:30,
                      space:5,
                      tmp:'  '
                    }
                  },
                  viewPort: {
                    enable:false,
                    outof:"pause",
                    visible_area:"80%",
                    presize:false
                  },
                  responsiveLevels:[1240,1024,778,480],
                  visibilityLevels:[1240,1024,778,480],
                  gridwidth:[1240,1024,778,480],
                  gridheight:[600,600,500,400],
                  lazyType:"none",
                  parallax: {
                    type:"mouse",
                    origo:"slidercenter",
                    speed:2000,
                    levels:[2,3,4,5,6,7,12,16,10,50,47,48,49,50,51,55],
                    type:"mouse",
                  },
                  shadow:0,
                  spinner:"off",
                  stopLoop:"off",
                  stopAfterLoops:-1,
                  stopAtSlide:-1,
                  shuffle:"off",
                  autoHeight:"off",
                  hideThumbsOnMobile:"off",
                  hideSliderAtLimit:0,
                  hideCaptionAtLimit:0,
                  hideAllCaptionAtLilmit:0,
                  debugMode:false,
                  fallbacks: {
                    simplifyAll:"off",
                    nextSlideOnWindowFocus:"off",
                    disableFocusListener:false,
                  }
                });
              }
        });
        </script>

Note You can find revolution slider - full screen code in home-company.html page and above is the code for your reference.
Read Revolution Slider Document

# Form Settings

Canopuscontains different types of ready to use forms in overall template files as mentioned below:

# Contact Us

Contact us form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.

Open Folderphp/contact.php and change your from email address (Receiver Email Address) at the top with info@yourdomain.com to your real email address, same way you can change subject line with replace of text "Contact us form details". Also replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo-mail.png).

Please feel free to contact us in case if your email feature does not work because some server settings do not allow normal PHP email function.

NoteYou will get contact us form code from home-main.html page. Follow above same steps for other templates, you will have other email template files under folder /php.

# Credits

We would really love to take this opportunity to appreciate guys whose items were helpful to us to make Canopusa really beautiful theme for our awesome users:

## Images and Videos

- ShutterStock
- Unsplash
- NothingToChance
- Behance
- Coverr

## jQuery Libraries

- jQuery
- Modernizr
- jQuery Easing
- Skrollr
- Smooth Scroll
- Page Scroll
- jQuery Bootsnav
- Slick Slick
- jQuery CountTo
- jQuery Skills Bar
- Easy Pie Chart
- Parallax
- Magnific Popup

## CSS & Fonts

- Bootstrap
- Animation
- Ion Icon (Font Icons)
- ET-LineFont (Font Icons)
- Ico-Font (Font Icons)
- Google Fonts

# Version 1.0 - Initial Release

Released on 7 March 2025