Earthyellow

Installation

Follow the steps below to setup your site template:

  1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.
  2. Below is the folder structure and needs to be uploaded to your website root directory:
    • HTML/src/css - Stylesheet files
    • HTML/src/fonts – Icon font files
    • HTML/src/images - Image files
    • HTML/src/js - Javacript files
    • HTML/src/revolution – Revolution Slider files
  3. You should upload all or specific HTML files as per your need.
  4. You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.
  5. You should have to run code from Apache or IIS server, Otherwise you will get errors.
  6. If you want to make any changes on .scss file then you have to install and run npm on directory of this project and install gulp file because code is build in Bootstrap 4. For more details you can visit https://coursetro.com/posts/code/130/Learn-Bootstrap-4-Final-in-2018-with-our-Free-Crash-Course article.

HTML Structure

Earthyellow 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 charset="utf-8">
        <!-- description -->
        <meta name="description" content="">
        <!-- keywords -->
        <meta name="keywords" content="">
        <!-- favicon -->
        <!-- style -->
    </head>
    <body>
        <!-- start header -->
        <header>
            <!-- start navigation -->
            <nav class="navbar navbar-default bootsnav">
                ...
            </nav>
            <!-- end navigation -->
        </header>
        <!-- end header -->
        <!-- start sections -->
        <div class="main_section">
			<section>
				...
			</section>
		</div>
        <!-- end sections -->
        <!-- start footer --> 
        <footer>
            <div class="container">
                ...
            </div>
        </footer>
        <!-- end footer -->
        <!-- javascript libraries -->
    </body>
</html>

                                        

Logo Settings

The Logo Container can be found in the Header Container - .header_logo

LOGO setting
<!-- start logo -->
<div class="header_logo col_4 visible-lg d-none">
	<a href="index.html"> <img src="src/images/logo.png" class="img-fluid" alt="logo" /> </a>
</div>										
<!-- end logo -->
                                        

Image & Favicon Settings

Image Settings

Earthyellow 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 src/images/yourimage.jpg

<img src="image path" alt="image alt text">
                                        

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

Earthyellow uses only one font: Work Sans from the Google Fonts Library. You can change the fonts from src/css/style.scss 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 /src/css/style.scss file as per your fonts used.

<!-- Google font -->
@import url("https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700");
                                        

We are providing designing of the landing pages in three different categories.

  1. Bag
  2. Watch
  3. Shoes
  4. Furniture

Bag

Note To see the landing page of "Bag" Please click here.

Banner

bag
<!-- start Banner Section -->
<div class=" banner_slider_section bag_banner_slider_section position-relative">
                <div class="rev_slider_wrapper fullwidthbanner-container">
                    <!-- the ID here will be used in the JavaScript below to initialize the slider -->
                    <div id="rev_slider_3" class="rev_slider fullwidthabanner" data-version="5.4.5" style="display:none;">
                        <!-- BEGIN MAIN SLIDE LIST -->
                        <ul>
                            <!-- MINIMUM SLIDE STRUCTURE -->
                            <li data-transition="fade">
                             <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                                <img src="your image" alt="" class="rev-slidebg img-fluid">
                                <!-- LAYER NR. 1 --> 
                                <div class="container">
                                    <div class="tp-caption Restaurant-Display   tp-resizeme"
                                         id="slide-3010-layer-1"
                                         data-x="['left','left','left','left']" data-hoffset="['-78','0','0','0']"
                                         data-y="['top','middle','middle','middle']" data-voffset="['211','0','0','0']"
                                         data-type="text"
                                         data-responsive_offset="on"
                                         data-frames='[{"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;","speed":1500,"to":"o:1;","delay":500,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                                         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: 5;font-size:48px;line-height: 48px;color:#000;text-transform: uppercase;font-family: 'Dosis-Bold';"></div>
                                    <!-- LAYER NR. 2 -->  
                                    <div class="tp-caption Restaurant-Cursive   tp-resizeme"
                                         id="slide-3010-layer-2"
                                         data-x="['left','left','left','left']" data-hoffset="['-77','0','0','0']"
                                         data-y="['top','middle','middle','middle']" data-voffset="['275','0','0','0']"
                                         data-type="text"
                                         data-responsive_offset="on"
                                         data-frames='[{"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;","speed":1500,"to":"o:1;","delay":700,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                                         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;font-size:24px;line-height:36px;color:#000;letter-spacing: 0;font-family: 'Dosis-Regular';"></div>

                                    <!-- LAYER NR. 3 --> 
                                    <div class="tp-caption Restaurant-Cursive   tp-resizeme"
                                         id="slide-3010-layer-3"
                                         data-x="['left','left','left','left']" data-hoffset="['-75','0','0','0']"
                                         data-y="['top','middle','middle','middle']" data-voffset="['332','0','0','0']"
                                         data-type="text"
                                         data-responsive_offset="off"
                                         data-frames='[{"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;","speed":1500,"to":"o:1;","delay":700,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                                         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: 7;font-size:18px;line-height:18px;font-family: 'Dosis-Regular';">
                                        <a href="product_list_with_sidebar.html" class="background-btn text-uppercase"> <i class="flaticon-arrows-4"></i>  </a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <!-- END MAIN SLIDE LIST --> 
                    </div>
                </div>
            </div>
<!-- end Banner Section -->
                                            

Collection

bag
<!-- start Collection Section -->
<div class="home_collection_section bag_collection_section  wow fadeIn" >
                <div class="container">
                    <div class="row no-gutters">
                        <div class="col-sm-4 wow fadeInLeft" >
                            <div class="home_collection_content  position-relative">
                                <img src="your image" alt="" class="img-fluid">
                                <div class="bag_collection_content">
                                    ...
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-8 wow fadeInRight" >
                            <div class="home_collection_content position-relative">
                                <img src="your image" alt="" class="img-fluid">
                                <div class="bag_collection_content">
                                    ...
                                </div>
                            </div>
                        </div>                           
                    </div>
                </div>
            </div>
                                         <!-- end Collection Section -->   

Product

<!-- start Product Section -->
<section class=" padding-top-text-60 bag_product_slider_section bag_product_section featured_section">
                <div class="container">
                    <h3 class="text-center text-uppercase">Title</h3>
                    <div class="owl-carousel owl-theme" id="bag_product_slider">
                        <div class="item">
                            <div class="featured_content mb-0">
                                Product Grid
                            </div>
                        </div>                        
                    </div>
                </div>
            </section>  
<!-- end Product Section --> 

Best seller

<!-- start Best seller Section -->
<section class="bag_product_section padding-top-text-60 featured_section  wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
                <div class="container-md-fluid container">
                    <div class="row  flex-row-reverse">
                        <div class="col-md-5">
                            <div class="bag_best_collection position-relative">
                                <img src="your image" class="img-fluid" alt="">
                                <div class="bag_best_collection_content position-absolute">
                                    <h3 class="title_h3 text-uppercase text-white">Title</h3>
                                    <a href="product_list_with_sidebar.html" class="text-uppercase text-white">View more <i class="flaticon-arrows-4"></i></a>
                                </div>
                            </div>                            
                        </div>
                        <div class="col-md-7">
                            <div class="row">
                                <div class="col-lg-3 col-md-4 col-6 ">
                                    <div class="featured_content">
                                        Product Grid
                                    </div>
                                </div>                             
                            </div>
                        </div>                        
                    </div>
                </div>
            </section> 
<!-- end Best seller Section -->
                                            

Blog

<!-- start Blog Section -->
<section class="blog_section bag_blog_section padding-top-text-60 wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
                <div class="container-md-fluid container">
                    <div class="row">
                        <div class="col-md-5">
                            <div class="bag_best_collection position-relative">
                                <img src="your image" class="img-fluid" alt="">
                                <div class="bag_best_collection_content position-absolute">
                                    <h3 class="title_h3 text-uppercase text-white">Title</h3>
                                    <a href="grids_blog_list.html" class="text-uppercase text-white">View more <i class="flaticon-arrows-4"></i></a>
                                </div>
                            </div> 
                        </div>
                        <div class="col-md-7">
                            <div class="row">
                                <div class="col-md-4 col-sm-6">
                                    <div class="blog_content mt-0">
                                       Blog Content 
                                    </div>
                                </div>                                
                            </div>
                        </div>
                    </div>
                </div>
            </section>
<!-- end Blog Section -->
                                            

Brand

<!-- start Brand Section -->
<section class="padding-top-60 brand_logo_section bag_brand_logo_section wow fadeIn">
                <div class="container">                        
                    <div id="brand_slider" class="owl-carousel">          
                        <div class="item">
                            <div class="brand_logo_img text-center position-relative">
                                 <img src="your image" alt="" class="img-fluid vertical_middle"/>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
<!-- end Brand Section -->
                                            

Instagram

<!-- start Instagram Section -->
<section class="padding-top-60 padding-bottom-60 instagram_section bag_instagram_section   wow animated">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 wow fadeInLeft" data-wow-duration="1300ms">
                            <div class="instagram_title">
                                <img src="your image" alt=""/>
                                <h4 class="title_h4  text-uppercase"> Instagram Title </h4>
                                <p> ... <span>yellow text</span></p>
                            </div>
                        </div>
                        <div class="col-md-12 wow fadeInRight" data-wow-duration="1300ms" data-wow-delay="0.2s">
                            <div class="owl-carousel owl-theme instagram_slider" id="bag_instafeed"></div>
                        </div>
                    </div>
                </div>
            </section>
<!-- end Instagram Section -->
                                            

Watch

Note To see the landing page of "Bag" Please click here.

Banner

<!-- start Banner Section -->
<div class="banner_slider_section watch_banner_slider">
                <div class="rev_slider_wrapper fullwidthbanner-container">
                     <!-- the ID here will be used in the JavaScript below to initialize the slider --> 
                    <div id="rev_slider_2" class="rev_slider fullwidthabanner" data-version="5.4.5" style="display:none;">
                     <!-- BEGIN MAIN SLIDE LIST --> 
                        <ul>
                       <!-- MINIMUM SLIDE STRUCTURE --> 
                            <li data-transition="fade">
                          <!-- SLIDE'S MAIN BACKGROUND IMAGE --> 
                                <img src="your image" alt="" class="rev-slidebg">
                                 <!-- LAYER NR. 1 -->  
                                <div class="tp-caption Restaurant-Display   tp-resizeme"
                                    id="slide-3010-layer-1"
                                    data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                    data-y="['top','middle','middle','middle']" data-voffset="['320','0','0','0']"
                                    data-type="text"
                                    data-responsive_offset="on"
                                    data-frames='[{"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;","speed":1500,"to":"o:1;","delay":500,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                                    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: 5;font-size:48px;line-height: 48px;color:#e7b696;text-transform: uppercase;font-family: 'ProximaNova-Semibold';"> </div>
                                 <!-- LAYER NR. 2 --> 
                                <div class="tp-caption Restaurant-Cursive   tp-resizeme"
                                    id="slide-3010-layer-2"
                                    data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                    data-y="['top','middle','middle','middle']" data-voffset="['386','0','0','0']"
                                    data-type="text"
                                    data-responsive_offset="on"
                                    data-frames='[{"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;","speed":1500,"to":"o:1;","delay":700,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                                    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;font-size:24px;line-height: 24px;color:#e7b696;letter-spacing: 0;font-family: 'ProximaNova-Regular';"></div>
                                <!-- LAYER NR. 3 --> 
                                <div class="tp-caption  "
                                    id="slide-3010-layer-3"
                                    data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                    data-y="['top','middle','middle','middle']" data-voffset="['449','0','0','0']"
                                    data-type="button"
                                    data-basealign="slide"
                                    data-responsive_offset="off"
                                    data-responsive="on"
                                    data-frames='[{"from":"y:50px;opacity:0;","speed":1500,"to":"o:1;","delay":1500,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"y:50px;opacity:0;","ease":"nothing"}]'
                                    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: 7; font-size: 18px;line-height: 18px;">
                                    <a href="product_list_with_sidebar.html" class="border-btn text-uppercase"><i class="flaticon-arrows vertical_middle"></i>  </a>
                                </div>
                            </li>  
                            </ul>
                             <!-- END MAIN SLIDE LIST -->  
                    </div>
                </div>
            </div>
                                            <!-- end Banner Section -->

Collection

<!-- start Collection Section -->
<div class="home_collection_section watch_collection_section padding-top-60 wow fadeIn" >
                    <div class="container">
                        <div class="row no-gutters">
                            <div class="col-sm-4 wow fadeInLeft" >
                                <div class="home_collection_content  position-relative">
                                    <img src="your image" alt="" class="img-fluid">
                                    <div class="watch_collection_content">
                                    <h3 class="title_h3 text-capitalize"></h3>
                                    <a href="product_list_with_sidebar.html" class="border-btn text-uppercase"></a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 wow fadeInDown" >
                                <div class="home_collection_content position-relative">
                                    <img src="your image" alt="" class="img-fluid">
                                    <div class="watch_collection_content">
                                    <h3 class="title_h3 text-capitalize"></h3>
                                    <a href="product_list_with_sidebar.html" class="border-btn text-uppercase"></a>
                                    </div>
                                </div>                            
                                <div class="home_collection_content position-relative">
                                    <img src="your image" alt="" class="img-fluid">
                                    <div class="watch_collection_content">
                                    <h3 class="title_h3 text-capitalize"></h3>
                                    <a href="product_list_with_sidebar.html" class="border-btn text-uppercase">shop now</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 wow fadeInRight" >
                                <div class="home_collection_content position-relative">
                                    <img src="your image" alt="p" class="img-fluid">
                                    <div class="watch_collection_content">
                                     <h3 class="title_h3 text-capitalize"></h3>
                                    <a href="product_list_with_sidebar.html" class="border-btn text-uppercase"></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                                            <!-- end Collection Section -->

Product

<!-- start Product Section -->
<section class="padding-top-text-60 featured_section watch_featured_section wow fadeIn ">
                    <div class="container">
                        <h3 class="title_h3  text-uppercase home_title_h3 text-center">Title</h3>
                        <div class="row">
                            <div class="col-lg-3 col-md-4 col-6 wow fadeInLeft animated" data-wow-duration="1300ms">
                                <div class="featured_content">
                                   Product grid
                                </div>                            
                            </div>
                        </div>
                    </div>
                </section>
                                            <!-- end Product Section -->

Promotion

<!-- start Promotion Section -->
<section class="padding-top-60 wow fadeIn" >
                    <div class="container">
                        <div class="summer_collection_section watch_promo_collection_section  wow fadeInUp">
                            <div class="row">
                                <div class="col-6 offset-6">
                            <h2 class="title_h2 text-uppercase"></h2>
                            <a href="product_list_with_sidebar.html" class="border-btn text-uppercase">SHOP NOW
                                <i class="flaticon-arrows-4"></i>
                            </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                                            <!-- end Promotion Section -->

Blog

<!-- start Blog Section -->
<section class="blog_section watch_blog_section padding-top-text-60 wow fadeIn">
                    <div class="container">
                        <h3 class="title_h3  text-uppercase home_title_h3 text-center">Title</h3>
                        <div class="row">
                            <div class="col-sm-6 col-lg-4 wow fadeInLeft" data-wow-duration="1300ms">
                                <div class="blog_content">
                                      Blog Content
                                </div>
                            </div>                            
                        </div>
                    </div>
                </section>
                                            <!-- end Blog Section -->

Brand

<!-- start Brand Section -->
<section class="padding-top-60 brand_logo_section watch_brand_logo_section wow fadeIn">
                    <div class="container">
                        <h3 class="title_h3  text-uppercase home_title_h3 text-center wow fadeInDown">Our Brands</h3>
                        <div id="brand_slider" class="owl-carousel">          
                            <div class="item">
                                <div class="brand_logo_img text-center position-relative">
                                    <img src="your image" alt="" class="img-fluid vertical_middle"/>
                                </div>
                            </div>                            
                        </div>                        
                    </div>
                </section>
                                            <!-- end Brand Section -->

Instagram

<!-- start Instagram Section -->
 <section class="padding-top-60 instagram_section watch_instagram_section  wow animated">                    
                            <div class=" wow fadeInUp position-relative" data-wow-duration="1300ms" data-wow-delay="0.2s">
                                <div class="owl-carousel owl-theme instagram_slider" id="watch_instafeed"></div>
                                <div class="instagram_title text-center rounded-circle vertical_middle p-0 position-absolute">
                                    <i class="flaticon-instagram-logo"></i>
                                    <h4 class="title_h4  text-uppercase mb-0">Title</h4>
                                </div>
                            </div>                    
                </section>
                                            <!-- end Instagram Section -->

Shoes

Note To see the landing page of "Bag" Please click here.

Banner

<!-- start Product Section -->
<div class=" shoes_banner_slider_section position-relative">
                <div class="rev_slider_wrapper fullwidthbanner-container">
                    <!-- the ID here will be used in the JavaScript below to initialize the slider --> ;
                    <div id="rev_slider_2" class="rev_slider fullwidthabanner" data-version="5.4.5" style="display:none;">
                       <!-- BEGIN MAIN SLIDE LIST --> ;
                        <ul>
                           <!-- MINIMUM SLIDE STRUCTURE --> ;
                            <li data-transition="fade">
                             <!-- SLIDE'S MAIN BACKGROUND IMAGE --> ;
                                <img src="your image" alt="" class="rev-slidebg img-fluid">
                                <!-- LAYER NR. 1 --> ;
                                <div class="">
                                    <div class="tp-caption Restaurant-Display   tp-resizeme"
                                         id="slide-3010-layer-1"
                                         data-x="['left','left','left','left']" data-hoffset="['-78','0','0','0']"
                                         data-y="['top','middle','middle','middle']" data-voffset="['300','0','0','0']"
                                         data-type="text"
                                         data-responsive_offset="on"
                                         data-frames='[{"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;","speed":1500,"to":"o:1;","delay":500,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                                         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: 5;font-size:48px;line-height: 48px;color:#000;text-transform: uppercase;font-family: 'ProximaNova-Semibold';"></div>
                                    <!-- LAYER NR. 2 --> </span> ;
                                    <div class="tp-caption Restaurant-Cursive   tp-resizeme"
                                         id="slide-3010-layer-2"
                                         data-x="['left','left','left','left']" data-hoffset="['-77','0','0','0']"
                                         data-y="['top','middle','middle','middle']" data-voffset="['359','0','0','0']"
                                         data-type="text"
                                         data-responsive_offset="on"
                                         data-frames='[{"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;","speed":1500,"to":"o:1;","delay":700,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                                         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;font-size:24px;line-height:36px;color:#000;letter-spacing: 0;font-family: 'ProximaNova-Regular';text-transform: uppercase;"></div>                                   
                                         <!-- LAYER NR. 3 --> 
                                         <div class="tp-caption Restaurant-Cursive   tp-resizeme"
                                         id="slide-3010-layer-3"
                                         data-x="['left','left','left','left']" data-hoffset="['-75','0','0','0']"
                                         data-y="['top','middle','middle','middle']" data-voffset="['450','0','0','0']"
                                         data-type="text"
                                         data-responsive_offset="off"
                                         data-frames='[{"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;","speed":1500,"to":"o:1;","delay":700,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                                         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: 7;font-size:18px;line-height:18px;">
                                             <a href="product_list_with_sidebar.html" class="background-btn text-uppercase"><i class="flaticon-arrows-4"></i>  </a>
                                         </div>
                                </div>
                            </li>                             
                        </ul>
                       <!-- END MAIN SLIDE LIST -->;
                    </div>
                </div>
            </div>
                                            <!-- end Product Section -->

Collection

<!-- start Collection Section -->
<div class="shoes_collection_section padding-top-60 wow fadeIn">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-sm-8 wow fadeInLeft animated">
                            <div class="home_collection_content  position-relative">
                                <img src="your image" alt="" class="img-fluid"/>
                                <div class="shoes_collection_content">
                                    ...
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-sm-4 wow fadeInDown animated">
                            <div class="home_collection_content position-relative">
                                <img src="your image" alt="" class="img-fluid"/>
                                <div class="shoes_collection_content">
                                     ...                                
                                </div>
                            </div>                            
                            <div class="home_collection_content position-relative">
                                <img src="your image" alt="prducts" class="img-fluid"/>
                                <div class="shoes_collection_content">
                                    ...                                 
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                                            <!-- end Collection Section -->

Product

<!-- start Product Section -->
<section class="padding-top-text-60 arrival_featured_section wow fadeIn">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-3 col-md-4 col-6">
                            <div class="arrival_collection_content position-relative">
                                <img src="your image" alt="" class="img-fluid"/>
                                <div class="arrival_collection_text ">
                                   ...
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9 col-md-8 col-6">
                            <div id="arrival_slider" class="owl-carousel">          
                                <div class="item">                                   
                                    <div class="featured_content">
                                        Product  grid
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
                                            <!-- end Product Section -->

Promotion

<!-- start Promotion Section -->
<section class="padding-top-60 wow fadeIn">
                <div class="container">
                    <div class="promoton_collection_section text-center wow fadeInUp position-relative" >
                        Promotion Content
                    </div>
                </div>
            </section>
                                            <!-- end Promotion Section -->

Best Seller

<!-- start Best Seller Section -->
<section class="padding-top-text-60 arrival_featured_section wow fadeIn">
                <div class="container">
                    <div class="shoes_featured_title">
                        <h3 class="title_h3 text-uppercase">Title</h3>
                        <p class="shoes_featured_title_link mb-0">
                            <a href="product_list_detail.html" class="text-uppercase">View More<i class="flaticon-arrows-4"></i></a>
                        </p>
                    </div>
                    <div class="row">       
                        <div class="col-lg-3 col-md-4 col-6 wow fadeInLeft animated" data-wow-duration="1300ms">                                   
                            <div class="featured_content">
                                product grid
                            </div>
                        </div>
                    </div>
                </div>
            </section>
                                            <!-- end Best Seller Section -->

Blog

<!-- start Blog Section -->
<section class="padding-top-text-60 wow fadeIn blog_section shoes_blog_section">
                <div class="container">
                    <div class="shoes_featured_title">
                        <h3 class="title_h3 text-uppercase">Blog Title</h3>
                        <p class="shoes_featured_title_link mb-0">
                            <a href="grid_blog_list_with_sidebar.html" class="text-uppercase"><i class="flaticon-arrows-4"></i></a>
                        </p>
                    </div>
                    <div class="row">
                        <div class="col-md-6 wow fadeInLeft" data-wow-duration="1300ms">
                            <div class="blog_content">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <a href="blog_list_detail.html"><img src="your image" alt="" class="img-fluid"></a>
                                    </div>
                                    <div class="col-lg-6">
                                        Blog Content
                                    </div>
                                </div> 
                            </div>  
                        </div>
                    </div>
            </section>
                                            <!-- end Blog Section -->

Brand

<!-- start Brand Section -->
 <section class="padding-top-60 brand_logo_section shoes_brand_logo_section wow fadeIn">
                <div class="container">                        
                    <div id="brand_slider" class="owl-carousel">          
                            <div class="item">
                                <div class="brand_logo_img text-center position-relative">
                                    <img src="your image" alt="" class="img-fluid vertical_middle"/>
                                </div>
                            </div>
                        </div>
                </div>
            </section>
                                            <!-- end Brand Section -->

Instagram

<!-- start Instagram Section -->
<section class="padding-top-60 padding-bottom-60 instagram_section shoes_instagram_section  wow animated">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 wow fadeInLeft" data-wow-duration="1300ms">
                            <div class="instagram_title text-center">
                                <img src="your image" alt=""/>
                                <h4 class="title_h4  text-uppercase"> </h4>
                                <p>Shop <span> green text</span></p>
                            </div>
                        </div>
                        <div class="col-md-12 wow fadeInRight" data-wow-duration="1300ms" data-wow-delay="0.2s">
                            <div class="owl-carousel owl-theme instagram_slider" id="shoes_instafeed"></div>
                        </div>
                    </div>
                </div>
            </section>
                                            <!-- end Instagram Section -->

Furniture

Note To see the landing page of "Furniture" Please click here.

Banner

<!-- start Banner Section -->
<div class="furniture_banner_slider_section banner_slider_section">
                <div class="rev_slider_wrapper fullwidthbanner-container">
                    <!-- the ID here will be used in the JavaScript below to initialize the slider --> 
                    <div id="rev_slider_4" class="rev_slider fullwidthabanner" data-version="5.4.5" style="display:none;">
                        <!-- BEGIN MAIN SLIDE LIST --> 
                        <ul>
                            <!-- MINIMUM SLIDE STRUCTURE --> 
                            <li data-transition="fade"  data-title="interior 01" data-thumb="src/images/furniture_banner1.jpg" >
                                <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                                <img src="your image" alt="img" class="rev-slidebg">
                                <!-- LAYER NR. 1 --> 
                                <div class="tp-caption Restaurant-Cursive   tp-resizeme"
                                     id="slide-3010-layer-1"
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                     data-y="['top','middle','middle','middle']" data-voffset="['345','0','0','0']"
                                     data-type="text"
                                     data-responsive_offset="on"
                                     data-frames='[{"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;","speed":1500,"to":"o:1;","delay":700,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                                     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="text-transform: uppercase; z-index: 6;font-size:14px;line-height: 14px;color:#fff;letter-spacing: 0;font-family: 'Lato';font-weight: 400;">   </div>                                    
                                <!-- LAYER NR. 2 --> 
                                <div class="tp-caption Restaurant-Display   tp-resizeme"
                                     id="slide-3010-layer-2"
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                     data-y="['top','middle','middle','middle']" data-voffset="['370','0','0','0']"
                                     data-type="text"
                                     data-responsive_offset="on"
                                     data-frames='[{"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;","speed":1500,"to":"o:1;","delay":500,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                                     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: 5;font-size:48px;line-height: 48px;color:#fff;text-transform: capitalize;font-family: 'Lato';font-weight: 900;"> </div>
                                <!-- LAYER NR. 3 --> 
                                <div class="tp-caption Restaurant-Cursive   tp-resizeme"
                                     id="slide-3010-layer-3"
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                     data-y="['top','middle','middle','middle']" data-voffset="['428','0','0','0']"
                                     data-type="text"
                                     data-responsive_offset="on"
                                     data-frames='[{"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;","speed":1500,"to":"o:1;","delay":700,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
                                     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;font-size:24px;line-height: 24px;color:#fff;letter-spacing: 0;font-family: 'Lato';font-weight: 400;">We create contemporary furniture which makes an impact </div>
                                <!-- LAYER NR. 4 --> 
                                <div class="tp-caption  "
                                     id="slide-3010-layer-4"
                                     data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
                                     data-y="['top','middle','middle','middle']" data-voffset="['505','0','0','0']"
                                     data-type="button"
                                     data-basealign="slide"
                                     data-responsive_offset="on"
                                     data-responsive="on"
                                     data-frames='[{"from":"y:50px;opacity:0;","speed":1500,"to":"o:1;","delay":1500,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"y:50px;opacity:0;","ease":"nothing"}]'
                                     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: 7; font-size: 18px;line-height: 18px;">
                                    <a href="product_list_with_sidebar.html" class="background-btn text-capitalize"><span> </span> <i class="flaticon-arrows-4"></i>  </a>
                                </div>                                 
                            </li>                              
                        </ul>
                        <!-- END MAIN SLIDE LIST --> 
                    </div>
                </div>
            </div>
<!-- end Banner Section -->
                                            

Product

<!-- start Product Section -->
<section class="padding-bottom-60 furniture_featured_section featured_section wow fadeIn">
                <div class="container">                        
                    <div id="fur_product_slider" class="owl-carousel">          
                        <div class="item">  
                            <div class="featured_content mt-0 text-center">
                                <div class="featured_img_content">
                                    <img src="your image" alt="" class="img-fluid">
                                </div>
                                <div class="featured_detail_content">
                                    <a href="product_list_detail.html"><p class="featured_title  text-capitalize  text-center">Product title</p></a>
                                    <p class="featured_price title_h5  text-center"><span>product price</span></p>
                                    <div class="featured_variyant  text-center">
                                        <div class="radio text-uppercase  text-center">
                                            <input type="radio" id="radio1" name="size">
                                            <label for="radio1" class="color1"></label>
                                        </div>
                                        <div class="radio text-uppercase  text-center">
                                            <input type="radio" id="radio2" name="size">
                                            <label for="radio2" class="color2"></label>
                                        </div>
                                    </div>
                                    <div class="featured_btn d-table m-auto">
                                        <a href="cart.html" class="background-btn text-capitalize d-flex w-auto ">
                                            <span> </span><i class="plus_icon"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
<!-- end Product Section -->
                                            

Collection

<!-- start Collection Section -->
<section class="padding-bottom-60 furniture_collection_section wow fadeIn">
                <div class="container-md-fluid container">
                    <div class="row row-flex">
                        <div class="col-lg-6 pl-lg-0">
                            <div class="position-relative furniture_collection_content h-md-100">
                                <img src="your image" class="img-fluid" alt=""/>
                                <span class="c_date_top position-absolute text-uppercase"> collection text</span>
                                <h2 class="position-absolute text-white title_h2 c_title_bottom mb-0">
                                    <span class="d-block text-uppercase">collection products</span>
                                    <a href="product_list_with_filter.html" class="text-white">collection title</a>
                                </h2>

                            </div>
                        </div>
                        <div class="col-lg-6 pr-lg-0">
                            <div class="position-relative furniture_collection_content">
                                <img src="your image" class="img-fluid" alt=""/>
                                <span class="c_date_top position-absolute text-uppercase"> collection text</span>
                                <h2 class="position-absolute text-white title_h2 c_title_bottom mb-0">
                                    <span class="d-block text-uppercase">collection products</span>
                                    <a href="product_list_with_filter.html" class="text-white">collection title</a>
                                </h2>
                            </div>                    
                            <div class="position-relative furniture_collection_content">
                                <img src="your image" class="img-fluid" alt=""/>
                                <span class="c_date_top position-absolute text-uppercase"> collection text</span>
                                <h2 class="position-absolute text-white title_h2 c_title_bottom mb-0">
                                    <span class="d-block text-uppercase">collection products</span>
                                    <a href="product_list_with_filter.html" class="text-white">collection title</a>
                                </h2>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
<!-- end Collection Section -->
                                            

Best Selling Products

<!-- start Best Selling Products Section -->
<section class="padding-bottom-60 furniture_sell_product_section furniture_featured_section featured_section wow fadeIn">
                <div class="container">
                    <div class="row ">                        
                        <div class="col-md-4">
                            <div class="furniture_sell_content">
                                <h2 class="title_h2">Title</h2>
                                <p>Description</p>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div id="fur_sell_product_slider" class="owl-carousel">          
                                <div class="item">  
                                    <div class="featured_content mt-0 text-center">
                                        <div class="featured_img_content">
                                            <img src="your image" alt="" class="img-fluid">
                                        </div>
                                        <div class="featured_detail_content">
                                            <a href="product_list_detail.html"><p class="featured_title  text-capitalize  text-center">Product title</p></a>
                                            <p class="featured_price title_h5  text-center"><span>product price</span></p>
                                            <div class="featured_btn d-table m-auto">
                                                <a href="cart.html" class="background-btn text-capitalize d-flex w-auto ">
                                                    <span> </span><i class="plus_icon"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
<!-- end Best Selling Products Section -->
                                            

Planner

<!-- start Planner Section -->
<section class="furniture_planner_section  wow fadeIn">
                <div class="container">
                    <div class="row align-items-center">                        
                        <div class="col-md-4">
                            <div class="furniture_client_title">
                                <h2 class="title_h2">Planner Title</h2>
                                <p>Description</p>
                                <div class="position-relative d-inline-block">
                                    <a href="javascript:void(0);" class="background-btn w-auto text-capitalize"><span>Start Planning </span><i class="flaticon-arrows-4"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <figure class="cd-image-container mb-0 position-relative">
                                <img src="your image 1" alt="" class="img-fluid"/<
                                <span class="cd-image-label position-absolute" data-type="original">Original</span>
                                <div class="cd-resize-img"> 
                                    <img src="syour image gray" alt="" class="img-fluid"/>
                                    <span class="cd-image-label position-absolute" data-type="modified">Modified</span>
                                </div>
                                <span class="cd-handle"></span>
                            </figure>
                        </div>
                    </div>
                </div>
            </section>
<!-- end Planner Section -->
                                            

Instagram

<!-- start Instagram Section -->
 <section class="padding-top-60 padding-bottom-60 instagram_section furniture_instagram_section ">
                <div class="container">
                    <div class="row flex-row-reverse align-items-center">
                        <div class="col-md-4">                            
                            <img src=""your image" alt=""/>
                            <h2 class="title_h2  text-capitalize"></h2>
                            <p></p>                           
                        </div>
                        <div class="col-md-8">
                            <div class="owl-carousel owl-theme instagram_slider w-auto row fur_instafeed" id="fur_instafeed">
                            </div>
                        </div>
                    </div>
                </div>
            </section>
<!-- end Instagram Section -->
                                            

What Our Clients Say

<!-- start Clients Section -->
<section class="furniture_clients_section  wow fadeIn">
                <div class="container">
                    <div class="row ">                        
                        <div class="col-md-4">
                            <div class="furniture_client_title">
                                <h2 class="title_h2">Clients title</h2>
                                <p>Description</p>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div id="fur_blog_slider" class="owl-carousel w-auto">          
                                <div class="item">  
                                    <div class="furniture_client_content ">
                                        <div class="rounded-circle position-absolute client_img ">
                                            <img src="your image" alt="" class="img-fluid position-absolute"/>
                                        </div>
                                        <span class="quote d-block"><img src="your image" alt=""/></span>                                        
                                        <p>Description</p>
                                        <h5 class="title_h5">user name</h5>
                                        <span></span>                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
<!-- end Clients Section -->
                                            

Page Titles

It includes page title with aligned left and breadcrumb. See below image and code for more information.

<!-- start page title and breadcrumb section -->

<section class="breadcrumb_section">
	<<iv class="container">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">
				<li class="breadcrumb-item text-capitalize">
					<a href="index.html">Home</a>
					<i class="flaticon-arrows-4"></i>
				</li>
				<li class="breadcrumb-item active text-capitalize">Look Book</li>
			</ol>
		</nav>
		<!-- start page title -->
		<h1 class="title_h1 font-weight-normal text-capitalize">Page Title</h1>
		<!-- end page title -->
	</div>
</section>

<!-- end page title and breadcrumb section -->
                                        

Page Layout

You can choose between 3 Types of page layout while creating your page. The list of page layout options & its descriptions are provided below for your reference:

Full Width


Earthyellow
<!-- start navigation -->
<!-- START Full screen section -->
<section class="padding-top-60 padding-bottom-60 we_are_earthyellow_section wow fadeIn">
	<!-- Start >content area -->
	<div class="welcome_earthyellow1">
		<div class="container">
			...
		 </div>
	 </div>
	 <!-- END content area -->
</section>
<!-- END Full screen Section -->

                                        

Earthyellow
										
<!-- START Container Section   -->
<section class="padding-top-text-60 padding-bottom-60 page_section shipping_section">
	<div class="container">
		<div class="row">
			<div class="col-md-3">
				<!-- START Page Sidebar -->
				<div class="page_sidebar">
					...
				</div>
				<!-- End Page Sidebar -->
			</div>
			<div class="col-md-9">
				<!-- START Page Content -->
				<div class="page_content">
					...
				</div>
				<!-- End Page Content -->
			</div>
		</div>
	</div>
</section>
<!-- END Container Section  -->
                                        

Earthyellow
<!-- START Container Section -->
<section class="blog_section blog_detail_section padding-top-60 padding-bottom-60">
	<div class="blog_list2_section blog_list_section wow fadeIn">
		<div class="container">
			<div class="row">
				<!-- START Content Section -->
				<div class="col-md-8 col-xl-9 wow fadeInLeft" data-wow-duration="1300ms">
					...
				</div>
				<!-- END Content Section -->
				<!-- START Right Sidebar Section -->
				<div class="col-xl-3 col-md-4 wow fadeInRight" data-wow-duration="1300ms">
					
				</div>
				<!-- END Right Sidebar Section -->
			</div>
		</div>
	</div>
</section>
<!-- END Container Section -->										
										
                                        

Slider

Earthyellow includes Revolution Slider :

Revolution Slider


Earthyellow
<!-- START slider Section --> 
<section class="banner_slider_section">
	<div class="rev_slider_wrapper fullwidthbanner-container">
		<!-- the ID here will be used in the JavaScript below to initialize the slider --> 
		<div id="rev_slider_1" class="rev_slider fullwidthabanner" data-version="5.4.5" style="display:none;">
			<!-- BEGIN MAIN SLIDE LIST --> 
			<ul>
				<!-- MINIMUM SLIDE STRUCTURE --> 
				<li data-transition="fade">
					<!-- SLIDE'S MAIN BACKGROUND IMAGE --> 
					<img src="src/images/banner_img.jpg" alt="Sky" class="rev-slidebg">
					<!-- LAYER NR. 1 --> 
					<div class="tp-caption Restaurant-Display   tp-resizeme"
						id="slide-3010-layer-1"
						data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
						data-y="['middle','middle','middle','middle']" data-voffset="['-62','0','0','0']"
						data-type="text"
						data-responsive_offset="on"
						data-frames='[{"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;","speed":1500,"to":"o:1;","delay":500,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
						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: 5;font-size:48px;line-height: 48px;color:#333;text-transform: capitalize;font-weight: 600;font-family: 'Work Sans';"> Hot Collection </div>
					<!-- LAYER NR. 2 --> 
					<div class="tp-caption Restaurant-Cursive   tp-resizeme"
						id="slide-3010-layer-2"
						data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
						data-y="['middle','middle','middle','middle']" data-voffset="['-18','0','0','0']"
						data-type="text"
						data-responsive_offset="on"
						data-frames='[{"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;","speed":1500,"to":"o:1;","delay":700,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"opacity:0;","ease":"nothing"}]'
						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;font-size:24px;line-height: 24px;color:#333;letter-spacing: 0;font-weight: normal;font-family: 'Work Sans';">Step inside and choose your favorite </div>
					<!-- LAYER NR. 3 --> 
					<div class="tp-caption  "
						id="slide-3010-layer-5"
						data-x="['center','center','center','center']" data-hoffset="['0','0','0','0']"
						data-y="['middle','middle','middle','middle']" data-voffset="['55','0','0','0']"
						data-type="button"
						data-basealign="slide"
						data-responsive_offset="off"
						data-responsive="on"
						data-frames='[{"from":"y:50px;opacity:0;","speed":1500,"to":"o:1;","delay":1500,"ease":"Power3.easeInOut"},{"delay":"wait","speed":1000,"to":"y:50px;opacity:0;","ease":"nothing"}]'
						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: 7; font-size: 18px;line-height: 18px;">
						<a href="product_list_with_sidebar.html" class="border-btn text-uppercase">shop now <i class="flaticon-arrows vertical_middle"></i>  </a>
					</div>
				</li>
				
			</ul>
			<!-- END MAIN SLIDE LIST --> 
		</div>
	</div>
</section>
<!-- END slider Section --> 
                                        
Note You can find revolution slider - code in index.html page and above is the code for your reference.
Read Revolution Slider Document

Accordions

Extend the default collapse behavior to create an accordion with the panel component. See below image and code for more information.

Earthyellow
<!-- start accordion -->
<div id="accordion">
	<!-- start accordion item -->
	<div class="card">
		<div class="card-header" id="headingOne">
			<h5 class="mb-0">
			<button class="btn btn-link title_h5" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
			Title
			</button>
			</h5>
		</div>
		<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
			<div class="card-body">
				Description..
			</div>
		</div>
	</div>
	<!-- end accordion item -->
	<!-- start accordion item -->
	<div class="card">
		<div class="card-header" id="headingTwo">
			<h5 class="mb-0">
			<button class="btn btn-link collapsed title_h5" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
			Title
			</button>
			</h5>
		</div>
		<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
			<div class="card-body">
				Description..
			</div>
		</div>
	</div>
	<!-- end accordion item -->
	<!-- start accordion item -->
	<div class="card">
		<div class="card-header" id="headingThree">
			<h5 class="mb-0">
			<button class="btn btn-link collapsed title_h5" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
			Title
			</button>
			</h5>
		</div>
		<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
			<div class="card-body">
				Description..
			<div>
		</div>
	</div>
	<!-- end accordion item -->
</div>
<!-- end accordion -->
                                        

NoteWe have many examples and shown in faq.html page.

Animation

Scroll to reveal animations are latest in the trends. You can do them too with Earthyellow. You can use animations on any element you want. Here is the Sample Code:

<div class="wow bounceInUp">
  Content to Reveal Here
</div>
                                        

You can also use delays, duration and offset for your animations:

<section class="wow slideInLeft" data-wow-duration="1200ms" data-wow-delay="500ms">
    ...
</section>
                                        

NoteDelay duration is in milliseconds.

Here is the list of the Animation Types you can use:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

Blog Post

Beautiful bog post layouts to display your content with attractive look. See below image and code for more information.

Earthyellow
<!-- START Home Bolg Section -->
<section class="blog_section padding-top-text-60 wow fadeIn">
	<div class="container">
		<h3 class="title_h3  text-capitalize home_title_h3 text-center">Title of section</h3>
		<div class="row">
			<div class="col-md-6 wow fadeInLeft" data-wow-duration="1300ms">
				<div class="blog_content">
					<a href="blog_list_detail.html">
						<img src="your-image.jpg" alt="blog" class="img-fluid">
					</a>
					<span class="article__date">
						March 21, 2018 | Posted By Admin
						<span class="diamond_shape"></span>
					</span>
					<a href="blog_list_detail.html">
						<h5 class="article__title title_h5">
							Blog Title
						</h5>
					</a>
					<p>
						Short description of blog...
					</p>
				</div>
			</div>
			<div class="col-md-6 wow fadeInRight" data-wow-duration="1300ms" >
				<div class="blog_content">
					<a href="blog_list_detail.html">
						<img src="your-image.jpg" alt="blog" class="img-fluid">
					</a>
					<span class="article__date">
						March 21, 2018 | Posted By Admin
						<span class="diamond_shape"></span>
					</span>
					<a href="blog_list_detail.html">
						<h5 class="article__title title_h5">
							Blog post title
						</h5>
					</a>
					<p>
						Short Description of Blog post
					</p>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- END Home Bolg Section -->
                                        

NoteFor demo, You can please check this in index.html page.

Contact Form

Contact form for contact pages or you can use it for any inquries. See below image and code for more information.

Earthyellow
<!-- start form -->
<!-- START Contact From    -->
<div class="login_form">
	<form>
		<div class="row">
			<div class="col-sm-6">
				<div class="form-group">
					<label for="fname" class="title_h5">First Name*</label>
					<input type="text" class="form-control" id="fname" name="Firstname" required="">
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label class="title_h5" for="lname">Last Name*</label>
					<input type="text" class="form-control" "lname"="" name="Lastname" required="">
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label for="email" class="title_h5">Email*</label>
					<input type="email" class="form-control" id="email" name="Email" required="">
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label for="phone" class="title_h5">Phone*</label>
					<input type="text" class="form-control" id="phone" name="Phone" required="" >
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label for="onumber" class="title_h5">Order Number</label>
					<input type="text" class="form-control" id="onumber" name="onumber">
				</div>
			</div>
			<div class="col-sm-6">
				<div class="form-group">
					<label class="title_h5" for="myquestion">My Question</label>
					<select class="form-control" id="myquestion" name="myquestion" >
						<option>- Select -</option>
					</select>
				</div>
			</div>
			<div class="col-sm-12">
				<div class="form-group">
					<label class="title_h5" for="message">Message*</label>
					<textarea  class="form-control" id="message" name="message" required=""></textarea>
				</div>
				<div class="login_links ">
					<button type="submit" class="btn background-btn text-uppercase">submit</button>
				</div>
			</div>
		</div>
	</form>
</div>
<!-- END Contact From    -->
<!-- end form -->
                                        

NoteFor demo, You can please check this in contactus.html page.

heading

Different heading styles and font sizes. See below code for more information.

<h1 class="title_h1">Heading text</h1>
<h2  class="title_h2">Heading text</h2>
<h3  class="title_h3">Heading text</h3>
<h4  class="title_h4">Heading text</h4>
<h5  class="title_h5">Heading text</h5>
                                        

Instagram

Functionality to get your instagram posts and display it on your website. See below image and code for more information.

Earthyellow
<!-- start instagram images -->
<section class="padding-top-60 instagram_section  wow animated">
	<div class="container">
		<div class="row">
			<div class="col-md-4 wow fadeInLeft" data-wow-duration="1300ms">
				<div class="instagram_title">
					<i class="flaticon-instagram-logo"></i>
					<h3 class="title_h3  text-capitalize">Follow Us <br>On Instagram </h3>
					<p>#Lorem Ipsum is simply dummy text of the typesetting industry</p>
				</div>
			</div>
			<div class="col-md-8 wow fadeInRight" data-wow-duration="1300ms" data-wow-delay="0.2s">
				<div class="owl-carousel owl-theme instagram_slider" id="instafeed"></div>
			</div>
		</div>
	</div>
</section>
<!-- end instagram images --> 
                                        

Javascript (file path - /src/js/custom.js)

Earthuellow Landing Page Javascript

START Instagram slider 
if (jQuery('#instafeed').length > 0) {
	var userFeed = new Instafeed({
		target: 'instafeed',
		get: 'user',
		userId: 'Add user id',
		accessToken: 'Add token id',
		resolution: 'thumbnail',
		template: '<a href="{{link}}" target="_blank"><img src="{{image}}"/></a>',
		after: function () {
                var x = $('.instagram_slider').children();
                var i = 0;
                for (i = 0; i < x.length; i += 2) {
                    $('.owl-item:empty').remove();
                    x.slice(i, i + 2).wrapAll('<div></div>');
                    instaslider('#instafeed');
                    $('.owl-next').on("click", function () {
                        $('.instagram_slider .owl-prev').show();
                        var active = $('.instagram_slider .active').length;
                        if (active > 1) {
                            $('.instagram_slider .owl-next').hide();
                        }
                    });
                    $('.owl-prev').on("click", function () {
                        $('.instagram_slider .owl-next').show();
                        if ($(this).hasClass('disabled') === 1) {
                            $('.instagram_slider .owl-prev').hide();
                        }
                    });

                }
            }
	});
	userFeed.run();
}
function instaslider(c) {
	jQuery(c).owlCarousel({
		margin: 2,
		items: 4,
		nav: true,
		dots: false
	});
}
End Instagram slider 

                                        

Bag , Watch and Shoes Landing Page Javascript

START Instagram slider 
if ($('#instafeed').length > 0) {
        var userFeed = new Instafeed({
            target: 'instafeed',
            get: 'user',
            tagName: 'shoes',
            userId: '6666610766',
            accessToken: '6666610766.2a7d13b.60b18490cde1420db117dce0dfe65513',
            resolution: 'standard_resolution',
            template: '<a href="{{link}}" target="_blank"><img src="{{image}}"/></a>',
            after: function () {
                 $('#instafeed').owlCarousel({
                    margin: 30,
                    items: 4,
                    nav: true,
                    dots: false,
                    responsiveClass:true,
                    responsive:{
                        0:{
                            items:2,
                            margin: 20 
                        },
                        767:{
                            items:2,
                            margin: 20 ,
                            loop:false 
                        },
                        768:{
                            items:3,
                            loop:false ,
                            margin: 20              
                        },
                        992:{
                            items:4,
                            loop:false               
                        }
                    }
                });
           }
        });
        userFeed.run();
    }
End Instagram slider 

                                        

You have to add "user id" and "token" on custom.js. Reference how to get instagram token from here : https://jelled.com/instagram/access-token and paste in javascript code

NoteFor demo, You can please check this in index.html page.

Subscribe

See below image and code for more information.

Earthyellow
<!-- START Newsletter Section -->
<section class="newsletter padding-top-text-60 padding-bottom-60 wow fadeIn">
	<div class="container">
		<h3 class="title_h3  text-capitalize home_title_h3 text-center wow fadeInUp">Sign Up Our Newsletter</h3>
		<form class="form-inline justify-content-center">
			<input type="email" class="form-control wow fadeInLeft"  placeholder="Enter your email" name="email">
			<button type="submit" class="btn border-btn text-uppercase wow fadeInRight">SIGN UP <i class="flaticon-arrows"></i></button>
		</form>
	</div>
</section>
<!-- END Newsletter Section -->
                                        

NoteFor demo, You can please check this in index.html page.

Products Layout

Earthyellow includes different types of product listing layout as mentioned below to setup your own product listing page as per your requirement:

Product list with filter popup

Earthyellow

Earthyellow
										<!-- START Products List Section -->
<section class="padding-top-text-60 padding-bottom-60 featured_section product_list_section product_list_filter_menu_section">
	<div class="container">
		<div class="row">
			<div class="col-lg-3">
				<!-- START Collection Sidebar-->
				<div class="collection_sidebar">
					<div class="sidebar_title padding-bottom-60 ">
						<h3 class="title_h3">Filter</h3>
						<a class="filter_colse" href="javascript:void(0);"><i class="flaticon-close"></i></a>
					</div>
					<div class="filter_content mCustomScrollbar">
						Filter options...
					</div>   
				</div>
			</div>
			<!-- START Collection Sidebar-->
			<div class="col-sm-12">
				<!-- START Collection Sorting-->
				<div class="collection-sorting-row">
					Top Row
				</div>
				<!-- START Collection Sorting-->
				<!-- START Products -->
				<ul class=" category-products wow fadeIn">
					<div class="row">
						<li class="col-lg-3 col-md-4 col-6 column2 product wow fadeInLeft animated" data-wow-duration="1300ms">
							Product Grid
						</li>
						<li class="col-lg-3 col-md-4 col-6 column2 product wow fadeInLeft animated" data-wow-duration="1300ms" data-wow-delay="0.2s">
							Product Grid
						</li>
						<li class="col-lg-3 col-md-4 col-6 column2 product wow fadeInRight animated" data-wow-duration="1300ms" >
							Product Grid
						</li>
						<li class="col-lg-3 col-md-4 col-6 column2 product wow fadeInRight animated" data-wow-duration="1300ms" data-wow-delay="0.2s">
							Product Grid
						</li>
						<li class="col-lg-3 col-md-4 col-6 column2 product wow fadeInLeft animated" data-wow-duration="1300ms" >
						   Product Grid 
						</li>
						<li class="col-lg-3 col-md-4 col-6 column2 product wow fadeInLeft animated" data-wow-duration="1300ms" data-wow-delay="0.2s">
							Product Grid
						</li>
						<li class="col-lg-3 col-md-4 col-6 column2 product wow fadeInRight animated" data-wow-duration="1300ms">
							Product Grid
						</li>
						
					</div>
				</ul>
				<!-- END Products -->
				<!-- START Products Pagination -->
				<div class="align-self-center">
					<ul class="pagination text-center justify-content-center">
						
					</ul>
				</div>
				<!-- END Products Pagination -->
			</div>
		</div>
	</div>
</section>
<!-- END Products List Section -->
                                        

NoteFor demo, You can please check this in product_list_with_filter.html page.

Product list with sidebar

Earthyellow
<!-- START Products List Section -->
<section class="padding-top-text-60 padding-bottom-60 featured_section product_list_section product_list_filter_section ">
	<div class="container">
		<div class="row">
			<div class="col-lg-3">
				<!-- START Collection Sidebar-->
				<div class="collection_sidebar">
					<div class="sidebar_title padding-bottom-60 hidden-lg">
						<h3 class="title_h3">Filter</h3>
						<a class="filter_colse" href="javascript:void(0);"><i class="flaticon-close"></i></a>
					</div>
					<div class="filter_content mCustomScrollbar">
						Add filter option here...
					</div>
				</div>
				<!-- START Collection Sidebar-->
			</div>
			<div class="col-lg-9">
				<!-- START Collection Sorting-->
				<div class="collection-sorting-row">
				   Sorting bar....
				</div>
				<!-- START Collection Sorting-->
				<!-- START Products -->
				<ul class=" category-products  wow fadeIn">
					<div class="row">
						<li class="col-lg-3 col-md-4 col-6 column3 product  wow fadeInLeft animated" data-wow-duration="1300ms" >
							Add Product Grid here
						</li>
						<li class="col-lg-3 col-md-4 col-6 column3 product  wow fadeInLeft animated" data-wow-duration="1300ms" data-wow-delay="0.2s">
							Add Product Grid here
						</li>
						<li class="col-lg-3 col-md-4 col-6 column3 product  wow fadeInLeft animated" data-wow-duration="1300ms" data-wow-delay="0.4s">
							Add Product Grid here
						</li>
						<li class="col-lg-3 col-md-4 col-6 column3 product  wow fadeInRight animated" data-wow-duration="1300ms">
							Add Product Grid here
						</li>
						<li class="col-lg-3 col-md-4 col-6 column3 product  wow fadeInRight animated" data-wow-duration="1300ms" data-wow-delay="0.2s">
							Add Product Grid here
						</li>
						<li class="col-lg-3 col-md-4 col-6 column3 product  wow fadeInRight animated" data-wow-duration="1300ms" data-wow-delay="0.4s">
							Add Product Grid here
						</li>
						<li class="col-lg-3 col-md-4 col-6 column3 product  wow fadeInLeft animated" data-wow-duration="1300ms">
							Add Product Grid here
						</li>
						<li class="col-lg-3 col-md-4 col-6 column3 product  wow fadeInLeft animated" data-wow-duration="1300ms" data-wow-delay="0.2s">
							Add Product Grid here
						</li>
						<li class="col-lg-3 col-md-4 col-6 column3 product  wow fadeInLeft animated" data-wow-duration="1300ms" data-wow-delay="0.4s">
							Add Product Grid here
						</li>
						...
					</div>
				</ul>
				<!-- END Products -->
				<!-- START Products Pagination -->
				<div class="align-self-center">
					Add Pagination here...
				</div>
				<!-- END Products Pagination -->
			</div>
		</div>
	</div>
</section>
<!-- END Products List Section -->
                                        

NoteFor demo, You can please check this in product_list_with_sidebar.html page.

Product Details Page

Earthyellow provides excellent layout of product detail page as mentioned below:

Earthyellow

Blog

Blog Layout

Earthyellow includes different types of blog layout as mentioned below to setup your own blog listing as per your requirement:

Blog List with sidebar

Earthyellow
										
										<!-- START Blog Section --">
<section class="blog_section  padding-top-60 padding-bottom-60"">
	<div class="blog_list2_section blog_list_section wow fadeIn"">
		<div class="container"">
			<div class="row"">
				<div class="col-md-8 col-xl-9 wow fadeInLeft" data-wow-duration="1300ms"">
					<div class="blog_content"">
						
					</div">
					<div class="blog_content"">
						
					</div">
					<div class="blog_content"">
						
					</div">
					<div class="blog_content"">
						
					</div">
					<div class="blog_content"">
						
					</div">
					<div class="blog_content"">
						
					</div">
				</div">
				<div class="col-xl-3 col-md-4 wow fadeInRight" data-wow-duration="1300ms"">
					<!-- Blog Post Navigation  --">
					<div class="featured_posts"">
						
						</div">
						<!--  Post Instagram  --">
						<div class="blog_instagram"">
							
						</div">
					</div">
				</div">
				<!-- Blog pagination  --">
				<div class="col-md-8 col-xl-9 align-self-center"">
					
				</div">
			</div">
		</div">
	</div">
</section">
<!-- END Blog Section --">
										
										
                                        

NoteFor demo, You can please check this in grid_blog_list_with_sidebar.html page.

Blog Grid

Earthyellow
										
										<!-- START Blog Section --">
<section class="blog_section  padding-top-60 padding-bottom-60"">
	<div class="blog_list_section wow fadeIn"">
		<div class="container"">
			<div class="row"">
				<div class="col-md-6 wow fadeInLeft animated" data-wow-duration="1300ms"">
					
				</div">
				<div class="col-md-6 wow fadeInRight animated" data-wow-duration="1300ms"">
					
				</div">
				<div class="col-md-6 wow fadeInLeft animated" data-wow-duration="1300ms"">
					
				</div">
				<div class="col-md-6 wow fadeInRight animated" data-wow-duration="1300ms"">
					
				</div">
				<div class="col-md-6 wow fadeInLeft animated" data-wow-duration="1300ms"">
					
				</div">
				<div class="col-md-6 wow fadeInRight animated" data-wow-duration="1300ms"">
					
				</div">
				<div class="col-md-6 wow fadeInLeft animated" data-wow-duration="1300ms"">
					
				</div">
				<div class="col-md-6 wow fadeInRight animated" data-wow-duration="1300ms"">
					
				</div">
				<div class="col-md-6 wow fadeInLeft animated" data-wow-duration="1300ms"">
					
				</div">
				<div class="col-md-6 wow fadeInRight animated" data-wow-duration="1300ms"">
					
				</div">
				<div class="col-md-6 wow fadeInLeft animated" data-wow-duration="1300ms"">
					
				</div">
				<div class="col-md-6 wow fadeInRight animated" data-wow-duration="1300ms"">
					
				</div">
				<!-- Blog Pagination  --">
				<div class="col-md-12 align-self-center"">
				   
				</div">
			</div">
		</div">
	</div">
</section">
<!-- END Blog Section --">
										
                                        

NoteFor demo, You can please check this in grids_blog_list.html page.

Blog Details

Earthyellow includes beautiful blog post page style as mentioned below.

Earthyellow

Header Type 1

Earthyellow
<!-- start Header -->
<header class="header_type1 d-block p-0 main_header">                          
            <div class="header_top container-fluid">
                <div class="row align-items-center">
                    <!-- Start Header Currency--> ;
                    <div class="col-lg-3">
                        
                    </div>
                    <!-- End Header Currency--> ;
                    <!-- Start Header Promo--> ;
                    <div class="col-lg-6">
                       
                    </div>
                    <!-- End Header Promo--> ;
                    <!-- Start Header Social Menu --> ;
                    <div class="col-md-3 text-right d-none d-lg-inline-block">
                        
                    </div>
                    <!-- End Header Social Menu --> ;
                </div>
            </div>                 
            <div class="header_bottom container-fluid"> 
                <div class="row align-items-center">
                    <!-- Start Header Logo--> ;
                    <div class="col-2 d-lg-none">
                        Menu Button
                    </div>
                    <div class="col-lg-3 col-8">
                        logo
                    </div>
                    <!-- End Header Logo--> ;
                    <!-- Start Header Navigation--> ;
                    <div class="col-md-6 text-center position-static d-lg-block d-none">
                        <nav class="navbar-dark navbar-expand-lg navbar">
                            <!-- Navigation menu container --> ;
                            <div class="navbar-collapse collapse justify-content-center" id="collapseNavbar">
                                <!-- Navigation links --> ;
                                <ul class="navbar-nav">
                                    <li class="nav-item active">
                                        <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                    <!-- End Header Navigation--> ;
                    <!-- Start Header Social Menu --> ;
                    <div class="col-lg-3 col-2 text-right">
                        
                    </div>
                    <!-- End Header Social Menu --> ;
                </div>
            </div>  
            <div class="header_mobile hidden-lg d-block">
                <nav class="navbar-dark navbar-expand-lg navbar">                    
                    <!-- Navigation menu container --> ;
                    <div class="navbar-collapse collapse ">
                        <!-- Navigation links --> ;
                        <div class="close_icon"><a class="menu_colse" href="javascript:void(0);"><i class="flaticon-close"></i></a></div>
                        <div class="social_icons">
                            <div class="search_form d-block position-relative">
                                <form>
                                    <input type="text"  placeholder="search" class="text-capitalize" />
                                    <button type="submit" class="vertical_middle"><i class="flaticon-magnifying-glass"></i></button>
                                </form>
                            </div>  
                        </div>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" href="earthyellow.html">Menu item </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
<!-- end Header -->
                                        

Header Type 2

Earthyellow
<!-- start Header -->
<header class="header_type2 d-block p-0 main_header">                          
            <div class="container"> 
                <div class="header_top">
                    <div class="row align-items-center">
                        <div class="col-md-4 d-lg-block d-none">
                            
                        </div>
                        <div class="col-lg-8 col-12 text-lg-right text-center">
                                                       
                        </div>
                    </div>
                </div>
                <div class="header_bottom">
                    <div class="row align-items-center">
                        <div class="col-2 d-lg-none">
                           
                        </div>
                        <div class="col-8  d-lg-none">
                            
                        </div>
                        <div class="col-lg-8 position-static d-lg-block d-none">
                            <nav class="navbar-dark navbar-expand-lg navbar">
                                <!-- Navigation menu container --> 
                                <div class="navbar-collapse collapse" id="collapseNavbar">
                                     <!-- Navigation links --> 
                                    <ul class="navbar-nav">
                                        <li class="nav-item active">
                                            <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                        <div class="col-lg-4 col-2">

                        </div>
                    </div>
                </div>
            </div>
            <div class="header_mobile hidden-lg d-block">
                <nav class="navbar-dark navbar-expand-lg navbar">                    
                    <!-- Navigation menu container --> 
                    <div class="navbar-collapse collapse ">
                        <!-- Navigation links --> 
                        <div class="close_icon"><a class="menu_colse" href="javascript:void(0);"><i class="flaticon-close"></i></a></div>
                        <div class="social_icons">
                            <div class="search_form d-block position-relative">
                                <form>
                                    <input type="text"  placeholder="search" class="text-capitalize" />
                                    <button type="submit" class="vertical_middle"><i class="flaticon-magnifying-glass"></i></button>
                                </form>
                            </div>  
                        </div>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                            </li>                            
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
<!-- end Header -->
                                        

Header Type 3

Earthyellow
<!-- start Header -->
<header class="header_type3 d-block p-0 main_header">                          
            <div class="container"> 
                <div class="header_top">
                    <div class="row align-items-center">                        
                        <div class="col-lg-3">
                             
                        </div>
                        <div class="col-lg-6 text-center">
                                                                                 
                        </div>
                        <div class="col-lg-3 d-lg-block d-none">
                           
                        </div>
                    </div>
                </div>
                <div class="header_bottom">
                    <div class="row align-items-center">
                        <div class="col-2 d-lg-none">
                            
                        </div>
                        <div class="col-lg-4 col-8 ">
                            
                        </div>
                        <div class="col-2 d-lg-none">
                            
                        </div>
                        <div class="col-lg-8 position-static d-lg-block d-none">
                            <nav class="navbar-dark navbar-expand-lg navbar">
                                <!-- Navigation menu container --> 
                                <div class="navbar-collapse collapse justify-content-flex-end" id="collapseNavbar">
                                    <!-- Navigation links --> 
                                    <ul class="navbar-nav">
                                        <li class="nav-item">
                                            <a class="nav-link text-uppercase" href="earthyellow.html"> menu item </a>
                                        </li>
                                    </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
            <div class="header_mobile hidden-lg d-block">
                <nav class="navbar-dark navbar-expand-lg navbar">                    
                    <!-- Navigation menu container --> 
                    <div class="navbar-collapse collapse ">
                        <!-- Navigation links --> 
                        <div class="close_icon"><a class="menu_colse" href="javascript:void(0);"><i class="flaticon-close"></i></a></div>
                        <div class="social_icons">
                            <div class="search_form d-block position-relative">
                                <form>
                                    <input type="text"  placeholder="search" class="text-capitalize" />
                                    <button type="submit" class="vertical_middle"><i class="flaticon-magnifying-glass"></i></button>
                                </form>
                            </div>  
                        </div>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" href="earthyellow.html"> menu item </a>
                            </li> 
                        </ul>
                    </div>
                </nav>
            </div>
        </header>


<!-- end Header -->
                                        

Header Type 4

Earthyellow
<!-- start Header -->
<header class="header_type4 d-block p-0 main_header">                          
            <div class="header_mobile_top text-center d-lg-none">
                
            </div>
            <div class="header_top container-fluid">
                <div class="row align-items-center">
                    <div class="col-2 d-lg-none">
                        
                    </div>
                    <div class="col-lg-4 col-8">
                        
                    </div>                    
                    <div class="col-lg-4 d-lg-block d-none">
                        
                    </div>
                    <div class="col-lg-4 text-right col-2">
                                               
                    </div>
                </div>
            </div>
            <div class="header_bottom container-fluid d-lg-block d-none">
                <div class="row align-items-center">
                    <div class="col-lg-6 position-static">
                        <nav class="navbar-dark navbar-expand-lg navbar">
                            <!-- Navigation menu container --> 
                            <div class="navbar-collapse collapse" id="collapseNavbar">
                                <!-- Navigation links --> 
                                <ul class="navbar-nav">
                                    <li class="nav-item active">
                                        <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                                    </li> 
                                </ul>
                            </div>
                        </nav>
                    </div>
                    <div class="col-lg-6">
                        
                    </div>
                </div>                
            </div>            
            <div class="header_mobile hidden-lg d-block">
                <nav class="navbar-dark navbar-expand-lg navbar">                    
                    <!-- Navigation menu container --> 
                    <div class="navbar-collapse collapse ">
                        <!-- Navigation links --> 
                        <div class="close_icon"><a class="menu_colse" href="javascript:void(0);"><i class="flaticon-close"></i></a></div>
                        <div class="social_icons">
                            <div class="search_form d-block position-relative">
                                <form>
                                    <input type="text"  placeholder="search" class="text-capitalize" />
                                    <button type="submit" class="vertical_middle"><i class="flaticon-magnifying-glass"></i></button>
                                </form>
                            </div>  
                        </div>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" href="earthyellow.html">Menu item </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
<!-- end Header -->
                                        

Header Type 5

Earthyellow
<!-- start Header -->
<header class="header_type5 d-block p-0 main_header">
            <div class="header_top position-relative">                
                 
            </div>
            <div class="header_bottom container-fluid">
                <div class="row">
                    <div class="col-lg-3 col-2">
                        
                    </div>
                    <div class="col-lg-6 col-8  ">
                        
                    </div>
                    <div class="col-lg-3 col-2">
                        
                    </div>
                </div>
            </div>
            <div class="header_mobile  d-block">
                <nav class="navbar-dark navbar-expand-lg navbar">                    
                    <!-- Navigation menu container --> 
                    <div class="navbar-collapse collapse ">
                        <!-- Navigation links --> 
                        <div class="close_icon"><a class="menu_colse" href="javascript:void(0);"><i class="flaticon-close"></i></a></div>
                        <div class="social_icons d-lg-none">
                            <div class="search_form d-block position-relative">
                                <form>
                                    <input type="text"  placeholder="search" class="text-capitalize" />
                                    <button type="submit" class="vertical_middle"><i class="flaticon-magnifying-glass"></i></button>
                                </form>
                            </div>  
                        </div>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
<!-- end Header -->
                                        

Header Type 6

Earthyellow
<!-- start Header -->
<header class="header_type6 d-block w-auto p-0 main_header"> 
            <div class="header_mobile_top text-center d-lg-none">
                               
            </div>
            <div class="header_top container-fluid">
                <div class="row "> 
                    <div class="col-2 d-lg-none">
                        
                    </div>
                    <div class="col-lg-12 col-8">
                        
                    </div>
                    <div class="col-2 d-lg-none text-right">
                        
                    </div>
                </div>
            </div>
            <div class="header_bottom container-fluid d-none d-lg-block">
                <div class="row ">                        
                    <div class="col-lg-3">
                        
                    </div>
                    <div class="col-lg-6 position-static">
                        <nav class="navbar-dark navbar-expand-lg navbar">
                            <!-- Navigation menu container --> 
                            <div class="navbar-collapse collapse justify-content-center" id="collapseNavbar">
                                <!-- Navigation links --> 
                                <ul class="navbar-nav">
                                    <li class="nav-item active">
                                        <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                                    </li>                               
                                    </li>
                                </ul>
                            </div>
                        </nav>                                             
                    </div>
                    <div class="col-lg-3 d-lg-block d-none">
                        
                    </div>
                </div>
            </div>
            <div class="header_mobile hidden-lg d-block">
                <nav class="navbar-dark navbar-expand-lg navbar">                    
                     <!-- Navigation menu container --> 
                    <div class="navbar-collapse collapse ">
                        <!-- Navigation links --> 
                        <div class="close_icon"><a class="menu_colse" href="javascript:void(0);"><i class="flaticon-close"></i></a></div>
                        <div class="social_icons">
                            <div class="search_form d-block position-relative">
                                <form>
                                    <input type="text"  placeholder="search" class="text-capitalize" />
                                    <button type="submit" class="vertical_middle"><i class="flaticon-magnifying-glass"></i></button>
                                </form>
                            </div>  
                        </div>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
<!-- end Header -->
                                        

Header Type 7

Earthyellow
<!-- start Header -->
<header class="header_type7 d-block w-auto p-0 main_header"> 
            <div class="header_mobile_top text-center d-lg-none">
                                
            </div>            
            <div class="header_bottom container-fluid ">
                <div class="row align-items-center">                        
                    <div class="col-lg-2 d-lg-block d-none">
                        
                    </div>
                    <div class="col-2 d-lg-none">
                        
                    </div>
                    <div class="col-lg-3 col-8">
                        
                    </div>
                    <div class="col-lg-5 position-static d-lg-block d-none">
                        <nav class="navbar-dark navbar-expand-lg navbar">
                            <!-- Navigation menu container --> 
                            <div class="navbar-collapse collapse justify-content-center" id="collapseNavbar">
                                <!-- Navigation links --> 
                                <ul class="navbar-nav">
                                    <li class="nav-item active">
                                        <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                                    </li>
                                </ul>
                            </div>
                        </nav>                                             
                    </div>
                    <div class="col-lg-2 col-2 text-right">
                        
                    </div>
                </div>
            </div>
            <div class="header_mobile hidden-lg d-block">
                <nav class="navbar-dark navbar-expand-lg navbar">                    
                    <!-- Navigation menu container --> 
                    <div class="navbar-collapse collapse ">
                        <!-- Navigation links --> 
                        <div class="close_icon"><a class="menu_colse" href="javascript:void(0);"><i class="flaticon-close"></i></a></div>
                        <div class="social_icons">
                            <div class="search_form d-block position-relative">
                                <form>
                                    <input type="text"  placeholder="search" class="text-capitalize" />
                                    <button type="submit" class="vertical_middle"><i class="flaticon-magnifying-glass"></i></button>
                                </form>
                            </div>  
                        </div>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
<!-- end Header -->
                                        

Header Type 8

Earthyellow
<!-- start Header -->
 <header class="header_type8 d-block p-0 main_header">                          
            <div class="header_top container-fluid">
                <div class="row align-items-center">
                    <!-- Start Header Currency-->
                    <div class="col-lg-3">
                        
                    </div>
                    <!-- End Header Currency-->  
                    <!-- Start Header Promo--> 
                    <div class="col-lg-6">
                        
                    </div>
                    <!-- End Header Promo--> 
                    <!-- Start Header Social Menu --> 
                    <div class="col-md-3 text-right d-none d-lg-inline-block">
                        
                    </div>
                    <!-- End Header Social Menu --> 
                </div>
            </div>                 
            <div class="header_bottom container-fluid"> 
                <div class="row align-items-center">
                    <!-- Start Header Logo--> 
                    <div class="col-2 d-lg-none">
                        
                    </div>
                    <div class="col-lg-3 col-8">
                        
                    </div>
                    <!-- End Header Logo--> 
                    <!-- Start Header Navigation--> 
                    <div class="col-md-6 text-center position-static d-lg-block d-none">
                        <nav class="navbar-dark navbar-expand-lg navbar">
                            <!-- Navigation menu container --> 
                            <div class="navbar-collapse collapse justify-content-center" id="collapseNavbar">
                                <!-- Navigation links --> 
                                <ul class="navbar-nav">
                                    <li class="nav-item active">
                                        <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                     <!-- End Header Navigation--> 
                     <!-- Start Header Social Menu --> 
                    <div class="col-lg-3 col-2 text-right">
                        
                    </div>
                    <!-- End Header Social Menu --> 
                </div>
            </div>  
            <div class="header_mobile hidden-lg d-block">
                <nav class="navbar-dark navbar-expand-lg navbar">                    
                     <!-- Navigation menu container --> 
                    <div class="navbar-collapse collapse ">
                         <!-- Navigation links --> 
                        <div class="close_icon"><a class="menu_colse" href="javascript:void(0);"><i class="flaticon-close"></i></a></div>
                        <div class="social_icons">
                            <div class="search_form d-block position-relative">
                                <form>
                                    <input type="text"  placeholder="search" class="text-capitalize" />
                                    <button type="submit" class="vertical_middle"><i class="flaticon-magnifying-glass"></i></button>
                                </form>
                            </div>  
                        </div>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
<!-- end Header -->
                                        

Header Type 9

Earthyellow
<!-- start Header -->
<header class="header_type9">
            <div class="header_mobile_top text-center d-lg-none">
                               
            </div>
            <div class="header_mobile_bottom container-fluid d-lg-none">
                <div class="row">
                    <div class="col-2 d-lg-none">
                    
                    </div>
                </div>
            </div>
            <!-- Start Header Logo--> 
            <div class="header_logo col_4 visible-lg d-none">
                <a href="earthyellow.html"><img src="src/images/logo.png" class="img-fluid" alt="logo" /></a>
            </div>
            <!-- End Header Logo--> 
            <!-- Start Header Navigation--> 
            <div class="col_6 visible-lg d-none">
                <nav class="navbar-dark navbar-expand-lg navbar">
                    <!-- Navigation menu container --> 
                    <div class="navbar-collapse collapse" id="collapseNavbar">
                        <!-- Navigation links --> 
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
            <!-- End Header Navigation--> 
            <!-- Start Header Social Menu --> 
            <div class="col_3 visible-lg d-none">
                
            </div>
            <!-- End Header Social Menu --> 
            <!-- Start Header Currency--> 
            <div class="header_currency col_4 text-right visible-lg d-none">
                
            </div>
             <!-- End Header Currency--> 

            <div class="header_mobile hidden-lg d-block">
                <nav class="navbar-dark navbar-expand-lg navbar">                    
                    <!-- Navigation menu container --> 
                    <div class="navbar-collapse collapse ">
                        <!-- Navigation links --> 
                        <div class="close_icon"><a class="menu_colse" href="javascript:void(0);"><i class="flaticon-close"></i></a></div>
                        <div class="social_icons">
                            <div class="search_form d-block position-relative">
                                <form>
                                    <input type="text"  placeholder="search" class="text-capitalize" />
                                    <button type="submit" class="vertical_middle"><i class="flaticon-magnifying-glass"></i></button>
                                </form>
                            </div>  
                        </div>
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link text-uppercase" href="earthyellow.html">menu item </a>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        </header>
<!-- end Header -->
                                        

Instagram Type 1

Earthyellow
<!-- end Instagram -->
                                    <section class="padding-top-60 instagram_section instagram_type1   wow animated">                    
            <div class=" wow fadeInUp position-relative" data-wow-duration="1300ms" data-wow-delay="0.2s">
                <div class="owl-carousel owl-theme instagram_slider" id="watch_instafeed"></div>
                <div class="instagram_title text-center rounded-circle vertical_middle p-0 position-absolute">
                    <img src="src/images/ins_icon.png" alt="">
                    <h4 class="title_h4  text-uppercase mb-0">Instagram Title </h4>
                </div>
            </div>                    
        </section>
                         <!-- end Instagram -->       

Instagram Type 2

Earthyellow
<!-- end Instagram -->
                                   <section class=" instagram_section instagram_type2  wow animated">
                <div class="container container-lg-fluid ">
                    <div class="row ">
                        <div class="col-lg-4 wow fadeInLeft" data-wow-duration="1300ms">
                            <div class="instagram_title  pt-0 pb-0 h-100 d-table w-100 position-relative ">
                                <div class="d-table-cell align-middle">
                                <i class="flaticon-instagram-logo text-white"></i>
                                <h3 class="title_h3 text-white text-uppercase   ">
                                    <span class="d-inline-block w-100">Instagram title</span>
                                </h3> 
                               <p class="text-white mb-0"></p>  
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-8 wow fadeInRight" data-wow-duration="1300ms" data-wow-delay="0.2s">
                            <div class="owl-carousel owl-theme instafeed_silder_type2 w-auto d-flex h-100 position-relative" id="instafeed_type2"></div>
                        </div>
                    </div>
                </div>
            </section>
<!-- end Instagram -->       

Instagram Type 3

Earthyellow
<!-- end Instagram -->
                               <section class=" instagram_section instagram_type3  wow animated">
                <div class="container">
                    <div class="row no-gutters">
                        <div class="col-md-6 wow fadeInLeft" data-wow-duration="1300ms">
                            <div class="instagram_title  h-100 d-table w-100 p-0 ">
                                <h3 class="title_h3  text-uppercase text-center d-table m-auto vertical_middle position-absolute">
                                    <span class="d-inline-block w-100">Instagram title</span>
                                </h3>                                
                            </div>
                        </div>
                        <div class="col-md-6 wow fadeInRight" data-wow-duration="1300ms" data-wow-delay="0.2s">
                            <div class="owl-carousel owl-theme instafeed_silder_type3 w-auto row d-flex h-100" id="instafeed_type3"></div>
                        </div>
                    </div>
                </div>
            </section>  
                         <!-- end Instagram -->       

Instagram Type 4

Earthyellow
<!-- end Instagram -->
                              <section class="padding-top-60 padding-bottom-60 instagram_section instagram_type4  wow animated">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12 wow fadeInLeft" data-wow-duration="1300ms">
                            <div class="instagram_title text-center p-0">
                                <img src="src/images/ins_icon.png" alt=""/>
                                <h4 class="title_h4  text-uppercase">Instagram title</h4>
                                <p></p>
                            </div>
                        </div>
                        <div class="col-md-12 wow fadeInRight" data-wow-duration="1300ms" data-wow-delay="0.2s">
                            <div class="owl-carousel owl-theme instagram_slider" id="shoes_instafeed"></div>
                        </div>
                    </div>
                </div>
            </section>   
                         <!-- end Instagram -->       

Instagram Type 5

Earthyellow
<!-- end Instagram -->
                               <section class=" instagram_section instagram_type5  wow animated">
                <div class="container">
                    <div class="row  align-items-center">
                        <div class="col-md-12 wow fadeInLeft" data-wow-duration="1300ms">
                            <div class="instagram_title text-center p-0">
                                <img src="src/images/ins_icon.png" alt=""/>
                                <h3 class="title_h3  text-uppercase">Instagram title</h3>
                                <p></p>
                            </div>
                        </div>
                        <div class="col-md-6 wow fadeInLeft" data-wow-duration="1300ms">
                            <div class="owl-carousel owl-theme banner_slider user_content">
                                <div>
                                    <div class="user_img position-relative d-table m-auto"><img src="your image" alt="" class="img-fluid vertical_middle"/></div>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                                <span class="uesr_name"> - Happy Customer</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 wow fadeInRight" data-wow-duration="1300ms" data-wow-delay="0.2s">
                            <div class="owl-carousel owl-theme instagram_slider w-auto row d-flex h-100" id="fur_instafeed"></div>
                            <div class="instagram_slider_title  h-100 d-table w-100 p-0 vertical_middle">
                                <h3 class="title_h3  text-uppercase text-center d-table m-auto ">
                                    <span class="d-inline-block w-100">Instagram title</span>
                                </h3>                                
                            </div>
                        </div>
                    </div>
                </div>
            </section>  
                         <!-- end Instagram -->       

Credits

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

A big thanks to these guys!

Version 1.0 - Initial Release

Buy Theme
Quick Question?