Features

• Semantically Correct / Valid HTML Code
• HTML5, CSS3, jQuery powered
• SASS Powered
• SEO Friendly
• Fully Responsive Layout
• Cross browser compatible
• Custom color scheme
• Mobile First
• Retina Ready
• Documentation
• YouTube, Vimeo Support, Dailymotion and custom video
• Filterable + Popup Preview Portfolio
• Isotope jQuery Plugin – $25 Value! ( http://isotope.metafizzy.co/ )
• Code Optimized
• Easy to Use and Customize
• Free Support
• Google Map
• Icon Fonts
• Error 404 Page
• Google Web Fonts

HTML Structure

Theme contains 19 html files

Pages

index.html

education.html

portfolio.html

testimonials.html

contact.html

typography.html

components.html

Blog Page:

category.html

Blog Post Pages:

single.html

single-image.html

single-slider.html

single-audio.html

single-video.html

single-vimeo.html

single-youtube.html

single-dailymotion.html

single-soundcloud.html

Search Page

search.html

Error Page

404.html

Theme Styles

All project styles are located in the well commented style.css file. To make chnges find appropriate section and edit it.

We also prowide scss styles, if you are familiar with it than you can change and customize theme styles in more comfortable way.

Theme Fonts

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">

<!-- Icon Fonts -->
<link href="fonts/icomoon/style.css">

Theme Color

For Certy we are using fully customizable color scheme.

To help you pick your website colours, here is a list of colour tools and resources.

• coolors.co
• paletton.com
• html color codes
• html color codes and picker
• html color codes and names

/**
 * Color Scheme
 */

/* Color Primary */
This section provides styles for the all primary (blue) colored elements.
If you want for example change all blue elements to red,
change all #c0e3e7 values in this section with the #d14b4a.

/* Color Darkest */
This section provides text color all over the site.
Change all #010101 values with the color you want to use.
For the our dark version use #ffffff.

/* Color Darker */
This section provides muted elements styles ( header navigation,
muted titles and texts, slider arrows, pagination ... )
Change all #bcbcbc colors with the color you want to use.
For the our dark version use #bcbcbc.

/* Color Dark */
This section styles are responsible for the borders & left background shape color.
To customize this elements color, change #e1e1e1 value with the color you want to use.
For the our dark version use #1f1f1f.

/* Color Light */
This section styles are responsible for the body & input elements background.
To customize this elements color, change #f3f3f3 value with the color you want to use.
For the our dark version use #2a2a2a.

/* Color Lighter */
This section styles are responsible for the papers background & other light colored elements.
To customize this elements color, change #fff value with the color you want to use.
For the our dark version use #373737.

/* Buttons */
This section styles are responsible for the light & dark buttons. Change colors as you needed.
For the our dark version use following styles:

.btn-default {
    color: #fff;
    background-color: #000;
}

.btn-light {
    color: #000;
    background-color: #fff;
}

// ColorScheme Light
$color-primary: #c0e3e7 !default; // Primary Colored Elements
$color-darkest: #010101 !default; // Main Text
$color-darker:  #757575 !default; // Muted Texts, Header Nav, Slider Arrows, Pagination etc.
$color-dark:    #e1e1e1 !default; // Borders, Background Shape
$color-light:   #f3f3f3 !default; // Body bg, Inputs bg
$color-lighter: #ffffff !default; // Papers Bg & Other White Elements

// Buttons
$btn-default-bg: #000 !default;
$btn-default-text: #fff !default;
$btn-light-bg: #fff !default;
$btn-light-text: #000 !default;

// ColorScheme Dark
$color-primary: #d14b4a !default; // Colored Elements
$color-darkest: #ffffff !default; // Main Text
$color-darker:  #bcbcbc !default; // Muted Text, Header Nav, Slider Arrows, Pagination etc.
$color-dark:    #1f1f1f !default; // Borders, Background Shape
$color-light:   #2a2a2a !default; // Body bg, Inputs bg
$color-lighter: #373737 !default; // Papers Bg & Other White Elements

// Buttons
$btn-default-bg: #fff !default;
$btn-default-text: #000 !default;
$btn-light-bg: #000 !default;
$btn-light-text: #fff !default

Theme Scipts

Libs:

1. jquery - is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit http://www.jquery.com
2. modernizer - respond to user’s browser features. For more information, please visit https://modernizr.com

Plugins:

1. highlight - syntax highlighting plugin. For more information please visit https://highlightjs.org/
2. isotope - plugin for intelligent and dynamic layouts that can't be achieved with CSS alone. For more information visit http://isotope.metafizzy.co/
3. customscroll - custom content scroller plugin. For more information visit http://manos.malihu.gr/jquery-custom-content-scroller/
4. progressbar - create responsive and stylish progress bars for the web. Form more information visit https://kimmobrunfeldt.github.io/progressbar.js/
5. slick - responsive slider plugin. For more information visit http://kenwheeler.github.io/slick/

Google Map:

google maps api- provide methods and tools that can be used for customize maps, and the information on maps. For more information visit https://developers.google.com/maps/

All custom js code is located in site.js.

All script parameters are located in the option.js, you can set parameters as you like.

Portfolio

Portfolio Html Structure

<div class="pf-wrap">
    <div class="pf-filter padd-box">
        <button data-filter="*">all</button>
        <button data-filter=".category1">category1</button>
        <button data-filter=".category2">category2</button>
        <button data-filter=".category3">category3</button>
    </div><!-- .pf-filter -->

    <div class="pf-grid">
        <div class="pf-grid-item category1">
            [portfolio item html]
        </div>

        <div class="pf-grid-item category2">
            [portfolio item html]
        </div>

        <div class="pf-grid-item category3">
            [portfolio item html]
        </div>

        <div class="pf-grid-item category1 category2">
            [portfolio item html]
        </div>
    </div><!-- .pf-grid -->
</div><!-- .pf-wrap -->

Portfolio Item Html

<div class="pf-grid-item photography">
    <a class="pf-project" href="#pf-popup-1">
        <figure class="pf-figure">
            <img src="image.jpg" alt="">
        </figure>

        <div class="pf-caption text-center">
            <div class="valign-table">
                <div class="valign-cell">
                    <h2 class="pf-title text-upper">Project Title</h2>

                    <div class="pf-text clear-mrg">
                        <p>Project Description</p>
                    </div>

                    <button class="pf-btn btn btn-primary">View More</button>
                </div>
            </div>
        </div>
    </a><!-- .pf-project -->

    <div id="pf-popup-1" class="pf-popup clearfix">
        [Portfolio Popup Html]
    </div><!-- .pf-popup -->
</div><!-- .pf-grid-item -->

404 page

A 404 page is what a user sees when they try to reach a non-existent page on your site (because they've clicked on a broken link, the page has been deleted, or they've mistyped a URL).

To set up 404.html page on your server add this to the .htaccess file:

ErrorDocument 404 http://www.domain.com/404page.html

Thats it !

For more detailed instructions please look following article.