Ferado - Multi-Purpose Parallax HTML5 Template

Copyright 2015 Ferado by WooRockets.com. Powered by HTML5 & CSS3

• Created: 1/22/2015
• latest Update: 1/22/2015
• Version: v1.0
• By: WooRockets
• Forum support: http://support.woorockets.com/

Thank you very much for purchasing our site template. If you have any questions that are beyond the scope of this help file, please feel free to email us via our user page contact form.

Header

<header id="wr-header">
    <div class="wr-top-header">
        {WELCOME MESSAGE} {TOP TOOLBAR}
    </div><!-- end top header -->
    
    <div class="wr-bot-header">
        <div class="container">
            <div class="wr-logo">
                {LOGO}
            </div><!-- end logo -->
            
            <div class="wr-searchbox">
                {SEARCH BOX}
            </div><!-- end searchbox -->
            
            <div class="wr-main-menu">
                {MAIN MENU}               
            </div><!-- end wr main menu -->
            
            <div class="wr-mobile-menu">
                {MOBILE MENU}
            </div><!-- end mobile menu -->
        </div><!-- end inner -->
    </div><!-- end bot header -->
</header><!-- end header -->

My Account Modal

<div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
    <div class="cd-user-modal-container"> <!-- this is the container wrapper -->
        <ul class="cd-switcher">
            {TAB TITLE}
        </ul>

        <div id="cd-login"> <!-- log in form -->
            {LOGIN FORM}
        </div> <!-- cd-login -->

        <div id="cd-signup"> <!-- sign up form -->
            {SIGNUP FORM}
        </div> <!-- cd-signup -->

        <div id="cd-reset-password"> <!-- reset password form -->
            {RESET PASSWORD FORM}
        </div> <!-- cd-reset-password -->
        <a href="#0" class="cd-close-form">Close</a>
    </div> <!-- cd-user-modal-container -->
</div> <!-- cd-user-modal -->

Slideshow

<section class="wr-slider">
    <ul>
        <li>
            {SLIDER IMAGE}
            <div class="info">
                {SLIDER DESCRIPTION}
            </div>
        </li>
        <li>
            {SLIDER IMAGE}
            <div class="info">
                {SLIDER DESCRIPTION}
            </div>
        </li>
    </ul>
</section><!-- end slider -->

4 Columns With Parallax Effect

<section class="wr-our-brand">
    <div class="container">                    
        <h2>{TITLE}</h2>
        
        <div class="row">
            <div class="col-md-3 col-sm-3 col-xs-6 brand parallax-element intop">
                {PARALLAX ELEMENT}
            </div>
            
            <div class="col-md-3 col-sm-3 col-xs-6 brand parallax-element inbottom">
                {PARALLAX ELEMENT}
            </div>
            
            <div class="col-md-3 col-sm-3 col-xs-6 brand parallax-element intop">
                {PARALLAX ELEMENT}
            </div>
            
            <div class="col-md-3 col-sm-3 col-xs-6 brand parallax-element inbottom">
                {PARALLAX ELEMENT}
            </div>
        </div><!-- end brand -->
        
    </div><!-- end container -->
</section><!-- end our brand -->

Testimonial

<section class="wr-testimonial">
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-3">
                <div class="avatar">
                    {IMAGE}
                </div>
            </div>
            <div class="col-md-9 col-sm-9">
                {SOME CONTENT}
            </div>
        </div>
    </div>
</section><!-- end testimonial -->

3 Columns With Parallax Effect

<section class="wr-hight-light">
    <div class="container">
        <div class="hight-light-title">
            {TITLE}
        </div><!-- end hight-light-title -->
        
        <div class="row">
            <div class="col-md-4 col-sm-4 hight-light-item parallax-element inleft">
                {PARALLAX IMAGE}
            </div>
            
            <div class="col-md-4 col-sm-4 hight-light-item parallax-element inbottom">
                {PARALLAX IMAGE}
            </div>
            
            <div class="col-md-4 col-sm-4 hight-light-item parallax-element inright">
                {PARALLAX IMAGE}
            </div>
        </div>
    </div><!-- end container -->
</section><!-- end hight-light -->

Section With Tab

<section class="wr-feature-product">
    <div class="container">
        <div class="home-tabs products-tabs">
            {TAB TITLE}
        </div>
        
        <div id="featured" class="home-tabs-content">
            <ul class="products">
                <li class="product-item">
                    <div class="product-inner">
                        {ITEM IMAGE}
                        <div class="product-title">
                            {ITEM TITLE}
                        </div>
                                                 
                        <div class="product-info">
                            {ITEM DESCRIPTION}
                        </div><!-- end product info -->
                    </div><!-- end product inner -->
                </li>
                
                <li class="product-item">
                    <div class="product-inner">
                        {ITEM IMAGE}
                        <div class="product-title">
                            {ITEM TITLE}
                        </div>
                                                 
                        <div class="product-info">
                            {ITEM DESCRIPTION}
                        </div><!-- end product info -->
                    </div><!-- end product inner -->
                </li>
                
                <li class="product-item">
                    <div class="product-inner">
                        {ITEM IMAGE}
                        <div class="product-title">
                            {ITEM TITLE}
                        </div>
                                                 
                        <div class="product-info">
                            {ITEM DESCRIPTION}
                        </div><!-- end product info -->
                    </div><!-- end product inner -->
                </li>
                
                <li class="product-item">
                    <div class="product-inner">
                        {ITEM IMAGE}
                        <div class="product-title">
                            {ITEM TITLE}
                        </div>
                                                 
                        <div class="product-info">
                            {ITEM DESCRIPTION}
                        </div><!-- end product info -->
                    </div><!-- end product inner -->
                </li>
            </ul><!-- end products -->
            <div class="clear"></div>
        </div>
        
        <div id="all" class="home-tabs-content">
            <ul class="products">
                {SECOND TAB CONTENT}
            </ul><!-- end products -->
            <div class="clear"></div>
        </div>
        
    </div><!-- end container -->
</section><!-- end feature product -->

Section With Slider

<section class="wr-bestseller">
    <h2>{TITLE}</h2>
    <div class="slider">
        <ul class="products">
            <li class="product-item">
                <div class="product-inner">
                    {ITEM IMAGE}
                    <div class="product-title">
                        {ITEM TITLE}
                    </div>
                                             
                    <div class="product-info">
                        {ITEM DESCRIPTION}
                    </div><!-- end product info -->
                </div><!-- end product inner -->
            </li>
            
            <li class="product-item">
                <div class="product-inner">
                    {ITEM IMAGE}
                    <div class="product-title">
                        {ITEM TITLE}
                    </div>
                                             
                    <div class="product-info">
                        {ITEM DESCRIPTION}
                    </div><!-- end product info -->
                </div><!-- end product inner -->
            </li>
            
            <li class="product-item">
                <div class="product-inner">
                    {ITEM IMAGE}
                    <div class="product-title">
                        {ITEM TITLE}
                    </div>
                                             
                    <div class="product-info">
                        {ITEM DESCRIPTION}
                    </div><!-- end product info -->
                </div><!-- end product inner -->
            </li>
            
            <li class="product-item">
                <div class="product-inner">
                    {ITEM IMAGE}
                    <div class="product-title">
                        {ITEM TITLE}
                    </div>
                                             
                    <div class="product-info">
                        {ITEM DESCRIPTION}
                    </div><!-- end product info -->
                </div><!-- end product inner -->
            </li>
            
            <li class="product-item">
                <div class="product-inner">
                    {ITEM IMAGE}
                    <div class="product-title">
                        {ITEM TITLE}
                    </div>
                                             
                    <div class="product-info">
                        {ITEM DESCRIPTION}
                    </div><!-- end product info -->
                </div><!-- end product inner -->
            </li>
        </ul>
    </div><!-- end slider -->
</section>

Blog Layout

<section class="wr-latest-blog">
    <div class="container">
        <h2>{TITLE}</h2>
        
        <div class="row">
            <div class="col-md-4 parallax-element inright">
                <div class="blog-item">
                    {FEATURED IMAGE}
                    <div class="blog-item-desc">
                        {SOME CONTENT}
                    </div><!-- end blog item desc -->
                </div><!-- end blog item -->
            </div>
            
            <div class="col-md-4 parallax-element intop">
                <div class="blog-item">
                    {FEATURED IMAGE}
                    <div class="blog-item-desc">
                        {SOME CONTENT}
                    </div><!-- end blog item desc -->
                </div><!-- end blog item -->
            </div>
            
            <div class="col-md-4 parallax-element inleft">
                <div class="blog-item">
                    {FEATURED IMAGE}
                    <div class="blog-item-desc">
                        {SOME CONTENT}
                    </div><!-- end blog item desc -->
                </div><!-- end blog item -->
            </div>
        </div><!-- end row -->
    </div><!-- end container -->
</section><!-- end latest blog -->

Section With Parallax Background

<section class="wr-adv parallax-bg">
    <div class="parallax">
        <div class="container">
            {SOME CONTENT}
        </div><!-- end container -->
    </div>
</section><!-- end adv -->

6 Columns With Hover Effect

<section class="wr-client">
    <div class="container">
        <div class="row">
            <div class="col-md-2 col-sm-4 col-xs-6 client-item">
                {SOME CONTENT}
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 client-item">
                {SOME CONTENT}
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 client-item">
                {SOME CONTENT}
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 client-item">
                {SOME CONTENT}
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 client-item">
                {SOME CONTENT}
            </div>
            <div class="col-md-2 col-sm-4 col-xs-6 client-item">
                {SOME CONTENT}
            </div>
        </div>
    </div>
</section><!-- end client -->

Section With Social Blocks

<section class="wr-social-counter">
    <div class="container">
        <div class="row">
            <div class="col-md-3 col-sm-6 col-xs-12 social-counter">
                {BLOCK ICON}
                <div class="info">
                    {SOME CONTENT}
                </div>
            </div>
            
            <div class="col-md-3 col-sm-6 col-xs-12 social-counter">
                {BLOCK ICON}
                <div class="info">
                    {SOME CONTENT}
                </div>
            </div>
            
            <div class="col-md-3 col-sm-6 col-xs-12 social-counter">
                {BLOCK ICON}
                <div class="info">
                    {SOME CONTENT}
                </div>
            </div>
            
            <div class="col-md-3 col-sm-6 col-xs-12 social-counter">
                {BLOCK ICON}
                <div class="info">
                    {SOME CONTENT}
                </div>
            </div>
        </div><!-- end row -->
    </div><!-- end container -->
</section><!-- end social counter -->

BREADCRUMBS

<section class="wr-breadcrumb">
    <div class="container">
        <ul class="crumb">
            {BREADCRUMB}
        </ul>
        
        <ul class="social-bar">
            {SOCIAL ICONS}
        </ul>
    </div>
</section><!-- end breadcrumd -->

Footer

<footer id="wr-footer">
    <div class="wr-top-footer">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-sm-6 footer-item">                            
                    {SOME CONTENT}
                </div><!-- end footer item -->
                
                <div class="col-md-3 col-sm-6 footer-item">                            
                    {SOME CONTENT}
                </div><!-- end footer item -->
                
                <div class="col-md-3 col-sm-6 footer-item">                            
                    {SOME CONTENT}
                </div><!-- end footer item -->
                
                <div class="col-md-3 col-sm-6 footer-item">                            
                    {SOME CONTENT}
                </div><!-- end footer item -->
                
            </div><!-- end row -->
        </div><!-- end container -->
    </div><!-- end wr-top-footer -->
    
    <div class="wr-bot-footer">
        <div class="container">
            {SOME CONTENT}
        </div>
    </div><!-- end bot footer -->
</footer>

This theme uses style.css file as main CSS file and other additional css files located at css folder.

style.css

Main CSS files in this theme is style.css that contains all of specific stylings for the theme.The file is separated into sections using labels as follows:

		
/*==========================================================
	1. IMPORT FILES
==========================================================*/

{SOME CODES}

/*==========================================================
	2. MAIN
==========================================================*/

{SOME CODES}

/*==========================================================
	 3. HEADER
==========================================================*/

{SOME CODES}

/*==========================================================
	4. FOOTER
==========================================================*/

{SOME CODES}

/*==========================================================
	6. SLIDESHOW STYLES
==========================================================*/

{SOME CODES}

/*==========================================================
	7. SHOP STYLES
==========================================================*/

{SOME CODES}

/*==========================================================
	8. PORTFOLIO STYLES
==========================================================*/

{SOME CODES}

/*==========================================================
	9. BLOG / PAGE STYLES
==========================================================*/

{SOME CODES}

/*==========================================================
	10. SERVICES STYLES
==========================================================*/

{SOME CODES}

/*==========================================================
	11. BUTTONS STYLES
==========================================================*/

{SOME CODES}

/*==========================================================
	12. ELEMENTS
==========================================================*/

{SOME CODES}

/*==========================================================
	13. PAGE STYLE
==========================================================*/

{SOME CODES}

/*==========================================================
	14. GALLERY STYLE  
==========================================================*/

{SOME CODES}

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

responsive.css

responsive.css contains styling for media queries that allows us to tailor to different resolutions and devices without changing the content. The file is separated into sections as follows:

	
@media only screen and (min-width: 1024px) and (max-width: 1399px) {
	{SOME CODES}
	}
	
@media only screen and (min-width: 980px) and (max-width: 1023px) {
	{SOME CODES}
	}

@media only screen and (max-width: 980px) {
	{SOME CODES}
}

@media only screen and (min-width: 768px) and (max-width: 979px) {
	{SOME CODES}	
}

@media only screen and (max-width: 767px) {	
	{SOME CODES}
	}

@media only screen and (max-width: 639px) {
	{SOME CODES}
	}

@media only screen and (min-width: 640px) and (max-width: 767px) {
	{SOME CODES}
}

@media only screen and (min-width: 568px) and (max-width: 639px) {
	{SOME CODES}
}

@media only screen and (min-width: 480px) and (max-width: 567px) {
	{SOME CODES}
}

@media only screen and (min-width: 320px) and (max-width: 479px) {
	{SOME CODES}
}

@media only screen and (min-width: 240px) and (max-width: 319px) {
	{SOME CODES}	
}

If you would like to edit styling of the specific device width, simply find the appropriate label in the responsive.css file, and then scroll down until you find the appropriate style that needs to be edited.

Additional css files at css folder

1. bootstrap.min.css - Twitter Boostrap CSS framework
2. fancySelect.css - Fancy select style
3. font-awesome.css - Font Awesome
4. main-menu.css - Main menu
5. owl.carousel.css - Owl Graphic style
6. prettyPhoto.css - PrettyPhoto Plugin
7. responsive.css - Resopnsive CSS
8. rev-settings.css - Slider Revolution setting
9. flipclock.css - Flip Clock style
10. jquery.mmenu.all.css - jQuery mMenu style
11. login-signup.css - Login / Signup modal box style
12. versions.css - Home page style v1

This theme imports following Javascript files.

1. jquery-1.10.1.min.js - Javascript library
2. jquery-ui.js - jQuery Ui library
3. owl.carousel.js - Carousel & Gallery
4. jquery-counterup.js - Counter Up
5. jquery.themepunch.plugins.min.js - ThemePunch Tools
6. jquery.themepunch.revolution.min.js - Slider Revolution
7. waypoints.min.js - jQuery plugin for sticky
8. isotope.pkgd.min.js - An exquisite jQuery plugin for magical layouts
9. flipclock.js - Flip Clock
10. jquery.mmenu.min.all.js - Mobile menu
11. login-signup.js - Login / Signup modal
12. modernizr.js - Modernizr
13. jquery.bxslider.min.js - BxSlider
14. jquery.fancybox.pack.js - FancyBox
15. html5shiv.min.js - HTML5 Shiv
16. respond.min.js - Respond.js
17. script.js - Contain some custom script

Except script.js, all of the plugins are packed, so you don't need to manually edit anything in these files. The only necessary thing to know is how to call the method. You can refer to the website of the plugin author I listed in the "Sources and Credits" section to learn more about them.

script.js contains custom scripts and scripts to call method for above plugin. The file is separated in to sections with appropriate label.

	
/* ==============================================
Fancybox - lightbox 
=============================================== */

{SOME CODES}

/* ==============================================
Slider 
=============================================== */

{SOME CODES}

/* ==============================================
OWL CAROUSEL
=============================================== */

{SOME CODES}

/* ==============================================
Mobile Menu
=============================================== */

{SOME CODES}

/* ==============================================
HEADER STICKY MENU
=============================================== */

{SOME CODES}

/* ==============================================
ELEMENTS
=============================================== */

{SOME CODES}

/* ==============================================
slider range jquery UI
=============================================== */

{SOME CODES}

/* ==============================================
mansory layout
=============================================== */

{SOME CODES}

/* ==============================================
fullscreen slider
=============================================== */

{SOME CODES}

/* ==============================================
parallax
=============================================== */

{SOME CODES}

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

• jquery-1.10.2
• jquery UI
• Owl Carousel
• Counter Up
• Slider Revolution
• jQuery Waypoints
• Isotope
• Flip Clock - Dean Edwards
• jQuery mmenu
• Modernizr
• BxSlider
• FancyBox
• HTML5 Shiv
• Respond.js
• Google Map
• Fontawesome icon