Yankee

Insurance & Consulting HTML Template

• by: ModelTheme
• Support via email: [email protected]
• Support via ThemeForest: Take me there
• Support via Ticketing System: Take me there
• 
  

  Yankee - Insurance & Consulting HTML Template is a great design idea for Investments and Consulting Websites/Blogs.

  Yankee is a Insurance & Consulting HTML Template for any type of Consulting business. In line with modern design, color fresh and dynamic. Creative Layout and Smart. Super Clear and Clean Layout! This is a great choice!

Thank you for purchasing our template!

Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the HTML folder.

1. css - containing all CSS files for the theme
2. fonts - containing all font files for the theme
3. images - contaning all images for the theme design
4. js - containing all scripts for the theme
5. php - containing php files for contact form
6. index.html - Homepage - One Page HTML main theme page
7. blog.html - Blog page - where all blog posts are listed
8. single.html - Blog post page
9. features.html - Theme features listed for future use.

This is an HTML theme and doesn't require instalation in the traditional meaning of the word. You only need to place the content (HTML files and the four folders) in your prefered web directory

Element name: Flickr images

Output

Code

<div class="widget widget_flickr">
    <h3 class="widget-title">Flickr widget</h3>
    <div class="flickr_badge_image relative">
        <a href="#">
            <img width="70" height="70" title="" alt="A photo on Flickr" src="images/flickr_1.png">
            <div class="thumbnail-overlay absolute">
                <i class="fa fa-plus absolute"></i>
            </div>
        </a>
    </div>
    <div class="flickr_badge_image relative">
        <a href="#">
            <img width="70" height="70" title="" alt="A photo on Flickr" src="images/flickr_2.png">
            <div class="thumbnail-overlay absolute">
                <i class="fa fa-plus absolute"></i>
            </div>
        </a>
    </div>
    <div class="flickr_badge_image relative">
        <a href="#">
            <img width="70" height="70" title="" alt="A photo on Flickr" src="images/flickr_3.png">
            <div class="thumbnail-overlay absolute">
                <i class="fa fa-plus absolute"></i>
            </div>
        </a>
    </div>
    <div class="flickr_badge_image relative">
        <a href="">
            <img width="70" height="70" title="" alt="A photo on Flickr" src="images/flickr_4.png">
            <div class="thumbnail-overlay absolute">
                <i class="fa fa-plus absolute"></i>
            </div>
        </a>
    </div>
    <div class="flickr_badge_image relative">
        <a href="#">
            <img width="70" height="70" title="" alt="A photo on Flickr" src="images/flickr_5.png">
            <div class="thumbnail-overlay absolute">
                <i class="fa fa-plus absolute"></i>
            </div>
        </a>
    </div>
    <div class="flickr_badge_image relative">
        <a href="#">
            <img width="70" height="70" title="" alt="A photo on Flickr" src="images/flickr_6.png">
            <div class="thumbnail-overlay absolute">
                <i class="fa fa-plus absolute"></i>
            </div>
        </a>
    </div>
</div>

Element name: Popular - Recent Posts tabs

Output

Code

<div class="widget widget_popular_recent_tabs">
    <h3 class="widget-title">Tab Widget</h3>
    <div class="widget_body">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#popular-posts">Popular Post</a></li>
            <li><a data-toggle="tab" href="#recent-posts">Recent Post</a></li>
        </ul>
        <div class="tab-content">
            <div id="popular-posts" class="tab-pane fade in active">
                <div class="popular-post">
                    <a href="single.html">
                        <img src="images/widget_tabs.jpg" alt="">
                    </a>
                    <div class="post-title">Your Post Title Demo</div>
                    <div class="post-date">November 15, 2013</div>
                    <div class="post-description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames...</div>
                </div>
                <div class="popular-post">
                    <a href="single.html">
                        <img src="images/widget_tabs2.jpg" alt="">
                    </a>
                    <div class="post-title">Your Post Title Demo</div>
                    <div class="post-date">November 15, 2013</div>
                    <div class="post-description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames...</div>
                </div>
            </div>
            <div id="recent-posts" class="tab-pane fade">
                <div class="recent-post">
                    <a href="single.html">
                        <img src="images/widget_tabs2.jpg" alt="">
                    </a>
                    <div class="post-title">Your Post Title Demo</div>
                    <div class="post-date">November 15, 2013</div>
                    <div class="post-description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames...</div>
                </div>
                <div class="recent-post">
                    <a href="single.html">
                        <img src="images/widget_tabs.jpg" alt="">
                    </a>
                    <div class="post-title">Your Post Title Demo</div>
                    <div class="post-date">November 15, 2013</div>
                    <div class="post-description">Pellentesque habitant morbi tristique senectus et netus et malesuada fames...</div>
                </div>
            </div>
        </div>
    </div>
</div>

Element name: Post tags

Output

Code

<div class="widget widget_tag_cloud">
    <h3 class="widget-title">Tags</h3>
    <div class="tagcloud">
        <a href="#" title="1 topic">awesome</a>
        <a href="#" title="1 topic">photography</a>
        <a href="#" title="1 topic">web design</a>
        <a href="#" title="1 topic">infographic</a>
        <a href="#" title="1 topic">guitar</a>
        <a href="#" title="1 topic">theme</a>
        <a href="#" title="1 topic">website</a>
        <a href="#" title="1 topic">artist design</a>
        <a href="#" title="1 topic">themeforest</a>
        <a href="#" title="1 topic">music</a>
    </div>
</div>

Element name: Post thumbnails slider

Output

Code

<div class="widget widget_post_thumbnails_slider">
    <h3 class="widget-title">Slider Widget</h3>
    <div class="slider_holder relative">
        <div class="slider_navigation absolute">
            <a class="btn prev pull-left"><i class="fa fa-angle-left"></i></a>
            <a class="btn next pull-right"><i class="fa fa-angle-right"></i></a>
        </div>
        <div class="post_thumbnails_slider owl-carousel owl-theme">
            <div class="item">
                <a href="single.html">
                    <img src="images/slider_1.jpg" alt="">
                </a>
            </div>
            <div class="item">
                <a href="single.html">
                    <img src="images/slider_2.jpg" alt="">
                </a>
            </div>
            <div class="item">
                <a href="single.html">
                    <img src="images/slider_3.jpg" alt="">
                </a>
            </div>
        </div>
    </div>
</div>

Element name: Social media icons

Output

Code

<div class="widget widget_social_icons">
    <h3 class="widget-title">Social Widget</h3>
    <ul>
        <li><a href="#"><i class="fa fa-facebook"></i></a></li>
        <li><a href="#"><i class="fa fa-twitter"></i></a></li>
        <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
        <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
        <li><a href="#"><i class="fa fa-tumblr"></i></a></li>
        <li><a href="#"><i class="fa fa-instagram"></i></a></li>
        <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
        <li><a href="#"><i class="fa fa-vine"></i></a></li>
        <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
        <li><a href="#"><i class="fa fa-rss"></i></a></li>
    </ul>
</div>

Element name: Testimonials slider

Output

Code

<div class="widget widget_testimonials_slider">
    <h3 class="widget-title">Testimonials Widget</h3>
    <div class="testimonials_slider owl-carousel owl-theme">
        <div class="item">
            <div class="testimonial-content relative">
                <span>Aliquam commodo leo in quam venenatis vehicula nec eu erat. Quisque ipsum elit, interdum eu dui eget, euismod pretium ipsum.</span>
                <div class="testimonial-client-details">
                    <div class="testimonial-name">Alessia Doe</div>
                    <div class="testimonial-job">Digital Marketing</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="testimonial-content relative">
                <span>Aliquam commodo leo in quam venenatis vehicula nec eu erat. Quisque ipsum elit, interdum eu dui eget, euismod pretium ipsum.</span>
                <div class="testimonial-client-details">
                    <div class="testimonial-name">Jeremy Doe</div>
                    <div class="testimonial-job">Digital Marketing</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="testimonial-content relative">
                <span>Aliquam commodo leo in quam venenatis vehicula nec eu erat. Quisque ipsum elit, interdum eu dui eget, euismod pretium ipsum.</span>
                <div class="testimonial-client-details">
                    <div class="testimonial-name">Naren Doe</div>
                    <div class="testimonial-job">Digital Marketing</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="testimonial-content relative">
                <span>Aliquam commodo leo in quam venenatis vehicula nec eu erat. Quisque ipsum elit, interdum eu dui eget, euismod pretium ipsum.</span>
                <div class="testimonial-client-details">
                    <div class="testimonial-name">Jacob Doe</div>
                    <div class="testimonial-job">Digital Marketing</div>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="testimonial-content relative">
                <span>Aliquam commodo leo in quam venenatis vehicula nec eu erat. Quisque ipsum elit, interdum eu dui eget, euismod pretium ipsum.</span>
                <div class="testimonial-client-details">
                    <div class="testimonial-name">Rodrigo Doe</div>
                    <div class="testimonial-job">Digital Marketing</div>
                </div>
            </div>
        </div>
    </div>
</div>

Element name: Recent posts

Output

Code

<div class="widget widget_recent_entries">
    <h3 class="widget-title">Recent posts</h3>
    <ul>
        <li class="row">
            <div class="col-md-3 post-thumbnail relative">
                <a href="single.html">
                    <img alt="blog post" src="images/flickr_5.png">
                    <div class="thumbnail-overlay absolute">
                        <i class="fa fa-plus absolute"></i>
                    </div>
                </a>
            </div>
            <div class="col-md-9 post-details">
                <a href="single.html">Fusce gravida tortor felis, ac dictum risus sagittis</a>
                <span class="post-date">January 6, 2015</span>
            </div>
        </li>
        <li class="row">
            <div class="col-md-3 post-thumbnail relative">
                <a href="single.html">
                    <img alt="blog post" src="images/flickr_4.png">
                    <div class="thumbnail-overlay absolute">
                        <i class="fa fa-plus absolute"></i>
                    </div>
                </a>
            </div>
            <div class="col-md-9 post-details">
                <a href="single.html">Fusce gravida tortor felis, ac dictum risus sagittis</a>
                <span class="post-date">January 6, 2015</span>
            </div>
        </li>
        <li class="row">
            <div class="col-md-3 post-thumbnail relative">
                <a href="single.html">
                    <img alt="blog post" src="images/flickr_6.png">
                    <div class="thumbnail-overlay absolute">
                        <i class="fa fa-plus absolute"></i>
                    </div>
                </a>
            </div>
            <div class="col-md-9 post-details">
                <a href="single.html">Fusce gravida tortor felis, ac dictum risus sagittis</a>
                <span class="post-date">January 6, 2015</span>
            </div>
        </li>
        <li class="row">
            <div class="col-md-3 post-thumbnail relative">
                <a href="single.html">
                    <img alt="blog post" src="images/flickr_2.png">
                    <div class="thumbnail-overlay absolute">
                        <i class="fa fa-plus absolute"></i>
                    </div>
                </a>
            </div>
            <div class="col-md-9 post-details">
                <a href="single.html">Fusce gravida tortor felis, ac dictum risus sagittis</a>
                <span class="post-date">January 6, 2015</span>
            </div>
        </li>
        <li class="row">
            <div class="col-md-3 post-thumbnail relative">
                <a href="single.html">
                    <img alt="blog post" src="images/flickr_1.png">
                    <div class="thumbnail-overlay absolute">
                        <i class="fa fa-plus absolute"></i>
                    </div>
                </a>
            </div>
            <div class="col-md-9 post-details">
                <a href="single.html">Fusce gravida tortor felis, ac dictum risus sagittis</a>
                <span class="post-date">January 6, 2015</span>
            </div>
        </li>
    </ul>
</div>

Element name: Accordion - F.A.Q's

Output

Code

<div class="widget widget_toggles">
    <h3 class="widget-title">What We Do?</h3>
    <div id="accordion" class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                   <a href="#collapse2" data-parent="#accordion" data-toggle="collapse" class="collapsed">
                   Wordpress Theme
                   </a>
                </h4>
            </div>
            <div class="panel-collapse collapse" id="collapse2">
                <div class="panel-body">
                    Aliquam commodo leo in quam venenatis vehicula nec eu erat. Quisque ipsum elit, interdum eu dui eget, euismod pretium ipsum. 
                </div>
            </div>
        </div>   

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                   <a href="#collapse1" data-parent="#accordion" data-toggle="collapse" class="">
                   Web Design
                   </a>
                </h4>
            </div>
            <div class="panel-collapse collapse in" id="collapse1">
                <div class="panel-body">
                    Aliquam commodo leo in quam venenatis vehicula nec eu erat. Quisque ipsum elit, interdum eu dui eget, euismod pretium ipsum. 
                </div>
            </div>
        </div>
                             
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                   <a href="#collapse3" data-parent="#accordion" data-toggle="collapse" class="collapsed">
                   HTML
                   </a>
                </h4>
            </div>
            <div class="panel-collapse collapse" id="collapse3">
                <div class="panel-body">
                    Aliquam commodo leo in quam venenatis vehicula nec eu erat. Quisque ipsum elit, interdum eu dui eget, euismod pretium ipsum. 
                </div>
            </div>
        </div>  

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                   <a href="#collapse4" data-parent="#accordion" data-toggle="collapse" class="collapsed">
                   Javascript
                   </a>
                </h4>
            </div>
            <div class="panel-collapse collapse" id="collapse4">
                <div class="panel-body">
                    Aliquam commodo leo in quam venenatis vehicula nec eu erat. Quisque ipsum elit, interdum eu dui eget, euismod pretium ipsum. 
                </div>
            </div>
        </div>
    </div>
</div>

Element name: Search form

Output

Code

<aside class="widget widget_search">
    <h3 class="widget-title">Search for posts</h3>
    <form class="search-form" method="get" role="search">
        <label>
            <input type="search" title="Search for:" name="s" value="" placeholder="Search …" class="search-field">
        </label>
    </form>
</aside>

Element name: FontAwesome icons

Output

Code

<i class="fa fa-adjust"></i> 
<i class="fa fa-anchor"></i> 
<i class="fa fa-archive"></i>
<i class="fa fa-arrows"></i> 
<i class="fa fa-arrows-h"></i>
<i class="fa fa-arrows-v"></i>
<i class="fa fa-asterisk"></i>
<i class="fa fa-automobile"></i>
<i class="fa fa-ban"></i>
<i class="fa fa-bank"></i>
<i class="fa fa-bar-chart-o"></i> 
<i class="fa fa-barcode"></i>
(...)
<i class="fa fa-info"></i>
<i class="fa fa-info-circle"></i>
<i class="fa fa-institution"></i>
<i class="fa fa-key"></i>
<i class="fa fa-keyboard-o"></i> 
<i class="fa fa-language"></i>
<i class="fa fa-user"></i>
<i class="fa fa-users"></i>
<i class="fa fa-video-camera"></i>
<i class="fa fa-volume-down"></i>
<p>Entire list of icons can be found here: http://fortawesome.github.io/Font-Awesome/icons/</p>

Element name: Tweets feed

Output

Code

<div class="widget widget_tweets">
    <h3 class="widget-title">Latest tweets</h3>
    <div class="tweets">
        <div class="tweet">
            <div class="tweet-title">
                <div class="rotate45 col-md-2">
                    <i class="fa fa-twitter rotate45_back"></i>
                </div>
                <div class="col-md-10 tweeter-profile">@yankeetheme</div>
            </div>
            <div class="clearfix"></div>
            <div class="tweet-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut blandit sapien.<a href="#">http://t.co/fg43jj</a></div>
            <div class="tweet-date">2 day ago.</div>
        </div>
        <div class="tweet">
            <div class="tweet-title">
                <div class="rotate45 col-md-2">
                    <i class="fa fa-twitter rotate45_back"></i>
                </div>
                <div class="col-md-10 tweeter-profile">@yankeetheme</div>
            </div>
            <div class="clearfix"></div>
            <div class="tweet-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut blandit sapien.<a href="#">http://t.co/fg43jj</a></div>
            <div class="tweet-date">2 day ago.</div>
        </div>
        <div class="tweet">
            <div class="tweet-title">
                <div class="rotate45 col-md-2">
                    <i class="fa fa-twitter rotate45_back"></i>
                </div>
                <div class="col-md-10 tweeter-profile">@yankeetheme</div>
            </div>
            <div class="clearfix"></div>
            <div class="tweet-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut blandit sapien.<a href="#">http://t.co/fg43jj</a></div>
            <div class="tweet-date">2 day ago.</div>
        </div>
    </div>
    <div class="tweets-profile-url">
        <a href="#">See all tweets</a>
    </div>
</div>

Element name: Ordered lists

Output

Code

<ol>
    <li>The amount of whitespace that appears after each paragraph</li>
    <li>Padding, margins, and other units of whitespace </li>
    <li>Headline line-heights in a given width</li>
    <li>Any and all spatial properties that you wish to relate mathematically</li>
</ol>

Element name: Unordered lists

Output

Code

<ul>
    <li>The amount of whitespace that appears after each paragraph</li>
    <li>Padding, margins, and other units of whitespace </li>
    <li>Headline line-heights in a given width</li>
    <li>Any and all spatial properties that you wish to relate mathematically</li>
</ul>

Element name: Image align - RIGHT

Output

Code

Add class .float-left to alight an image to right

<p><img src="img/new/480x320/poza-4.jpg" width="276" height="300" alt="" class="float-right" /> Lectus elit molestie urna, id tristique risus  ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi.<br /><br /> Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi.</p>

Element name: Image align - LEFT

Output

Code

Add class .float-right to alight an image to right

<p><img src="img/article-image-1.jpg" width="276" height="300" alt="" class="float-left" /> Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas. <br /><br />Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas.</p>

Element name: Blockquotes

Output

Code

<blockquote>Morbi aliquam fringilla nisl. Pellentesque eleifend condimentum tellus, vel vulputate tortor malesuada sit amet. Aliquam vel vestibulum metus. Aenean ut mi auctor, bibendum urna vitae, semper leo. In dolor sem, adipiscing id rhoncus ut, tempus id purus. </blockquote>

Element name: Text Align left/center/right

Output

Code

<!-- Text align: left  -->
<h2 class="text-left">Text align - left</h2>
<p class="text-left">Lectus elit molestie urna, id tristique risus ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis. Sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi quisque.</p>
<!-- Text align: center  -->
<h2 class="text-center">Text align - center</h2>
<p class="text-center">Lectus elit molestie urna, id tristique risus ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis. Sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi quisque.</p>
<!-- Text align: right  -->
<h2 class="text-right">Text align - right</h2>
<p class="text-right">Lectus elit molestie urna, id tristique risus ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis. Sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi quisque.</p>

Element name: Text highlight

Output

Code

<!-- Text highlight  -->
<p>Lectus elit molestie urna, id tristique risus ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis. <span class="highlight">Sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est.</span> Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi quisque.</p>

Element name: Columns

Output

Code

<!-- One half columns -->
<p class="col-md-6">Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est. Sed pretium metus sit amet erat blandit vitae pulvinar. </p> 
<p class="one_half">Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus ante at est. Sed pretium metus sit amet erat blandit vitae pulvinar. </p>
<!-- No columns -->
<p>Lectus elit molestie urna, id tristique risus  ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est. Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi quisque.</p>
<!-- One third columns -->
<p class="col-md-4">Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at.</p>    
<p class="col-md-4">Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at.</p>    
<p class="col-md-4">Quisque mollis, sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at.</p>
<!-- 2/3 and 1/3  -->
<p class="col-md-9">Cras consequat potitor tincidunt. Praesent eu tincidunt lacus. Ut ut neque vitae erat congue venenatis. Duis hendrerit lacinia leo in dignissim. Aliquam erat voat sed porttitor dnissim hendrerit nibh.</p>   
<p class="col-md-3">Quisque mollis, sem id laort pretium, lectus elit molestie urna, id tristique risus ante at.</p>
<!-- Text highlight  -->
<p>Lectus elit molestie urna, id tristique risus ante at est. Sed  at blandit vitae pulvinar lorem egestas. Quisque mollis. <span class="highlight">Sem id laoreet pretium, lectus elit molestie urna, id tristique risus  ante at est.</span> Sed at blandit vitae pulvinar lorem egestas.  Sed at blandit vitae pulvinar lorem egestas. Sed at blandit vitae demi quisque.</p>

Element name: Buttons

Output: Buttons V1

Code

......

STEP 1: Add main color hexa code in body as class (eg: skin_ffffff / where ffffff is the hexa code for White color)
NOTE: Get hexa color using this site: http://www.colorpicker.com/

STEP 2: Go to css/skin-colors/
Make a copy of skin-default.css and rename it with your color name (eg: skin-black.css if your choose color was black);

STEP 3: Open the new CSS file with the new skin color and replace all color and background color values with your new color.

The theme comes with several CSS (stylesheet) files grouped in the stylesheet folder:

1. styles.css - Main stylesheet of the template;
2. responsive.css - Responsive stylesheet rules of the theme;
3. component.css - Stylesheet with css3 effects;
4. component-form.css - Fancy Contact form css stylesheet;
5. component-gallery.css - Gallery stylesheet;
6. font-awesome.min.css - Font Awesome stylesheet;
7. YTPlayer.css - YTPlayer stylesheet;
8. Normalize.css - makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

To change the receiver email address of the site follow these steps:

• Go to your theme files php/contact_mail.php and replace [email protected] with your own email address.

This template is heavili loaded with both custom JS functions and free jQuery plugins. All JS files are placed in a separate folder called "js". The list of files is as follows:

1. jquery.min.js
2. classie.js
3. animate.js
4. custom.js
5. google-maps-v3.js
6. jquery.flatshadow.js
7. jquery.form.js
8. jquery.ketchup.all.min.js
9. jquery.mb.YTPlayer.min.js
10. jquery.parallax.js
11. jquery.sticky.js
12. jquery.validate.min.js
13. modernizr.custom.js
14. modernizr.viewport.js
15. owl.carousel.min.js
16. scrollIt.min.js
17. uisearch.js
18. jquery.countTo.js
19. jquery.appear.js

We've used the following images, icons or other files as listed.

• classie by desandro
• jquery.mb.YTPlayer by pupunzi
• modernizr by Modernizr
• OwlCarousel by OwlFonk
• jQuery Validation Plugin by jzaefferer
• jQuery flatshadow by peachananr
• Font Awesome icons by Font Awesome
• Roboto Font by Google Fonts