<

Exodos

Church HTML Template


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.

assets/images/image_1.png

 

 

01 - Homepage - (File: index.html)




02 - Blog page - (File: blog.html)




02 - Single post page - (File: single.html)

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

Keep in mind that the folder structure and file/folder names are important for the correct theme work
  • How to change the SKIN COLOR
  • 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">
                       HTML 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">@exodostheme</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">@exodostheme</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">@exodostheme</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:

    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
    All JS functions related to the theme content management are placed in custom.js or inline in the HTML files if required. The custom.js file is responsible for every custom script running on the template.

     

     

     

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


    Once again, thank you so much for purchasing this template. As we said at the beginning, We'd be glad to help you if you have any questions relating to this template.