HTML Template Documentation

# Cinagro

### About Cinagro

Cinagro – new unique, modern, with elegant curves and simple forms, fully responsive HTML theme, based on Bootstrap 3.3.6 created using HTML and LESS.

### Install Theme

### Important!

In order to get JS loading data you need to install localhost server or your computer must have internet access. To install the localhost server You can use WAMP. Then you need to:

- Copy your files into `*wamp/www`
- Run WAMP. This will start your localhost server.
- Open browser and in URL type `localhost/Cinagro` (or other path)

### Folder Structure

- Cinagro
  - HTML Files
  - assets
    - audio - Audio File
    - css - CSS style sheets
    - fonts - Font Awesome font
    - images - Images
    - js - JS script files
  - documentation - This documentation

### Owl carousel

###### HTML head

    	<link rel="stylesheet" href="css/owl.carousel.min.css" type="text/css">

###### HTML:

    	<div class="base-slider owl-carousel owl-theme">
    		<div class="item">
    			<img src="assets/images/slider.jpg" alt="slider">
    			<div class="text-slider">
    				<h2>Nature has always<br>cared for us!</h2>
    				<a href="#" class="custom-btn text-center yellow">top tips</a>
    			</div><!--text-slider-->
    		</div><!--item-->
    		<div class="item slide-two">
    			<img src="assets/images/slider2.jpg" alt="slider">
    			<div class="text-slider">
    				<h2>Organic pancakes<br>homestyle</h2>
    				<span class="price">12.99$</span>
    				<a href="#" class="custom-btn text-center yellow">top tips</a>
    			</div><!--text-slider-->
    		</div><!--item-->
    		<div class="item slide-three">
    			<img src="assets/images/slider3.jpg" alt="slider">
    			<div class="text-slider last">
    				<h2>One day sale!<br>large avocados<span class="text-pink">for $5</span></h2>
    				<div id="countdown">
    					<div><span class="hours">00</span><span class="text">hrs</span></div>
    					<div><span class="minutes">00</span><span class="text">min</span></div>
    					<div><span class="seconds">00</span><span class="text">sec</span></div>
    				</div>
    				<a href="#" class="custom-btn green text-center">top tips</a>
    			</div><!--text-slider-->
    		</div><!--item-->
    	</div>

###### Before </body> tag ends:

    	<script type="text/javascript" src="js/lib/owl.carousel.min.js"></script>

###### Js

    	$('.base-slider').owlCarousel({
    		loop: true,
    		margin: 0,
    		nav: false,
    		dots: true,
    		item: 1,
    		responsive:{
    			0:{
    				items:1
    			},
    			600:{
    				items:1
    			},
    			1000:{
    				items:1
    			}
    		}
    	});

Owl-carousel settings can be found here

### News Carousel Single Blog

###### HTML:

    <div class="slider-product owl-carousel owl-theme">
    <div class="item">
    	<div class="product">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product1.png" alt="product1"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Daiya - Cheddar</a>
    			<span class="price">$20</span>
    		</div><!--info-product-->
    	</div><!--product-->
    </div>
    <div class="item">
    	<div class="product">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product2.png" alt="product2"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Vegan Burger - Veggie Mix</a>
    			<span class="price">$9.99</span>
    		</div><!--info-product-->
    	</div><!--product-->
    </div>
    <div class="item">
    	<div class="product">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product3.png" alt="product3"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Vegan Protein</a>
    			<span class="price">$50</span>
    		</div><!--info-product-->
    	</div><!--product-->
    </div>
    <div class="item">
    	<div class="product">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product4.png" alt="product4"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Over the Moo - Ice Cream</a>
    			<span class="price">$7.99</span>
    		</div><!--info-product-->
    	</div><!--product-->
    </div>
    </div><!--slider-product-->

###### Before </body> tag ends:

    	<script type="text/javascript" src="js/lib/owl.carousel.min.js"></script>
    	<script type="text/javascript" src="js/main.js"></script>

###### Initialize carousels in main.js file

    	$('.slider-product').owlCarousel({
    		loop: true,
    		margin: 30,
    		nav: false,
    		dots: true,
    		item: 4,
    		responsive:{
    			0:{
    				items:1
    			},
    			600:{
    				items:2
    			},
    			1000:{
    				items:4
    			}
    		}
    	});

### Schedule

###### HTML:

    <div class="schedule">
    <div class="row">
    	<div class="col-md-6 text-center">
    		<div class="inside">
    			<div class="title-head">
    				<h2 class="text-black">Healthy Lunch</h2>
    				<p>Be Healty Organic Food</p>
    			</div>
    			<ul class="week nav nav-tabs">
    				<li><a href="#sunday" data-toggle="tab">S</a></li>
    				<li class="active"><a href="#monday" data-toggle="tab" aria-expanded="true">M</a></li>
    				<li><a href="#tuesday" data-toggle="tab">T</a></li>
    				<li><a href="#wednesday" data-toggle="tab">W</a></li>
    				<li><a href="#thursday" data-toggle="tab">T</a></li>
    				<li><a href="#friday" data-toggle="tab">F</a></li>
    				<li><a href="#saturday" data-toggle="tab">S</a></li>
    			</ul><!--week-->
    			<div class="tab-content">
    				<div class="tab-pane fade" id="sunday">
    					<ul>
    						<li class="first">sunday:</li>
    						<li>4 oz. grilled chicken breast</li>
    						<li>1/2 cup sliced strawberries</li>
    						<li>1/2 cup steamed spinach w/ salt and pepper</li>
    						<li>1/2 cup brown rice, steamed</li>
    					</ul>
    				</div>
    				<div class="tab-pane fade in active" id="monday">
    					<ul>
    						<li class="first">monday:</li>
    						<li>4 oz. grilled chicken breast</li>
    						<li>1/2 cup sliced strawberries</li>
    						<li>1/2 cup steamed spinach w/ salt and pepper</li>
    						<li>1/2 cup brown rice, steamed</li>
    					</ul>
    				</div>
    				<div class="tab-pane fade" id="tuesday">
    					<ul>
    						<li class="first">tuesday:</li>
    						<li>4 oz. grilled chicken breast</li>
    						<li>1/2 cup sliced strawberries</li>
    						<li>1/2 cup steamed spinach w/ salt and pepper</li>
    						<li>1/2 cup brown rice, steamed</li>
    					</ul>
    				</div>
    				<div class="tab-pane fade" id="wednesday">
    					<ul>
    						<li class="first">wednesday:</li>
    						<li>4 oz. grilled chicken breast</li>
    						<li>1/2 cup sliced strawberries</li>
    						<li>1/2 cup steamed spinach w/ salt and pepper</li>
    						<li>1/2 cup brown rice, steamed</li>
    					</ul>
    				</div>
    				<div class="tab-pane fade" id="thursday">
    					<ul>
    						<li class="first">thursday:</li>
    						<li>4 oz. grilled chicken breast</li>
    						<li>1/2 cup sliced strawberries</li>
    						<li>1/2 cup steamed spinach w/ salt and pepper</li>
    						<li>1/2 cup brown rice, steamed</li>
    					</ul>
    				</div>
    				<div class="tab-pane fade" id="friday">
    					<ul>
    						<li class="first">friday:</li>
    						<li>4 oz. grilled chicken breast</li>
    						<li>1/2 cup sliced strawberries</li>
    						<li>1/2 cup steamed spinach w/ salt and pepper</li>
    						<li>1/2 cup brown rice, steamed</li>
    					</ul>
    				</div>
    				<div class="tab-pane fade" id="saturday">
    					<ul>
    						<li class="first">saturday:</li>
    						<li>4 oz. grilled chicken breast</li>
    						<li>1/2 cup sliced strawberries</li>
    						<li>1/2 cup steamed spinach w/ salt and pepper</li>
    						<li>1/2 cup brown rice, steamed</li>
    					</ul>
    				</div>
    			</div>
    			<a href="blog.html" class="custom-btn text-center green">order now</a>
    		</div><!--inside-->
    	</div>
    </div>
    </div><!--schedule-->

###### Before </body> tag ends:

    			<script src="js/main.js"></script>

### Shop With Sidebar

###### HTML:

    <div class="content-product grid masonry">
    	<div class="product mask down grid-item grid-item-width1 grid-item-height-mini">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product5.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">ORS - Olive Oil</a>
    			<span class="price">$9.99</span>
    		</div><!--info-product-->
    	</div><!--product-->
    	<div class="product mask down grid-item grid-item-width1 grid-item-height-mini">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product12.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Organic - Agave Five</a>
    			<span class="price">
    				<del>$9.99</del>
    				<ins>$6.99</ins>
    			</span>
    		</div><!--info-product-->
    	</div><!--product-->
    	<div class="product mask down grid-item grid-item-width2 grid-item-height">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/organicgirl-romaine-7oz.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Organic Girl - Romanie</a>
    			<span class="price">$4.79</span>
    		</div><!--info-product-->
    		<div class="label-product text-center text-white sale">
    			<span>Sale</span>
    		</div>
    	</div><!--product-->
    	<div class="product mask down grid-item grid-item-width1 grid-item-height-mini">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product8.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Beech Nut - Just Pumpkin </a>
    			<span class="price">$9.69</span>
    		</div><!--info-product-->
    	</div><!--product-->
    	<div class="product mask down grid-item grid-item-width1 grid-item-height-mini">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product9.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Detox Zero</a>
    			<span class="price">$16.99</span>
    		</div><!--info-product-->
    	</div><!--product-->
    </div>
    <div class="content-product grid masonry">
    	<div class="product mask down grid-item grid-item-width1 grid-item-height-mini">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product1.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Daiya - Cheddar </a>
    			<span class="price">$20</span>
    		</div><!--info-product-->
    	</div><!--product-->
    	<div class="product mask down grid-item grid-item-width2 grid-item-height">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/almondmilk.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Mooala Original</a>
    			<span class="price">$10.99</span>
    		</div><!--info-product-->
    		<div class="label-product text-center text-white new">
    			<span>new</span>
    		</div>
    	</div><!--product-->
    	<div class="product mask down grid-item grid-item-width1 grid-item-height-mini">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product2.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Vegan Burger - Veggie Mix</a>
    			<span class="price">$9.99</span>
    		</div><!--info-product-->
    	</div><!--product-->
    	<div class="product mask down grid-item grid-item-width1 grid-item-height-mini">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product3.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Vegan Protein</a>
    			<span class="price">$50</span>
    		</div><!--info-product-->
    	</div><!--product-->
    	<div class="product mask down grid-item grid-item-width1 grid-item-height-mini">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product16.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Organic Orange</a>
    			<span class="price">$6.99</span>
    		</div><!--info-product-->
    	</div><!--product-->
    	<div class="product mask down grid-item grid-item-width1 grid-item-height-mini">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product17.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Purity Organic</a>
    			<span class="price">$4.79</span>
    		</div><!--info-product-->
    	</div><!--product-->
    	<div class="product mask down grid-item grid-item-width1 grid-item-height-mini">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product18.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Cold Pressed Juice</a>
    			<span class="price">$9.99</span>
    		</div><!--info-product-->
    	</div><!--product-->
    	<div class="product mask down grid-item grid-item-width1 grid-item-height-mini">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product15.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Organic Nutrition Shake</a>
    			<span class="price">$5.79</span>
    		</div><!--info-product-->
    	</div><!--product-->
    	<div class="product mask down grid-item grid-item-width1 grid-item-height-mini">
    		<div class="images text-center">
    			<a href="single-product.html"><img src="assets/images/product19.png" alt="product5"></a>
    			<div class="button-group">
    				<a href="cart.html" class="custom-btn pink"><i class="fa fa-shopping-bag"></i></a>
    				<a href="#" class="custom-btn pink"><i class="fa fa-search"></i></a>
    			</div><!--button-group-->
    		</div><!--images-->
    		<div class="info-product">
    			<a href="single-product.html" class="title">Fruit Punch</a>
    			<span class="price">$8.99</span>
    		</div><!--info-product-->
    	</div><!--product-->
    </div>

###### Before </body> tag ends:

    		<script src="js/lib/masonry.pkgd.min.js.js"></script>

###### Initialize masonry in main.js file

    		$('.grid').masonry({
    			itemSelector: '.grid-item'
    		});

### Blog Post

###### HTML:

    <article class="post gallery-post border-bottom border-color-gray">
    	<div class="wp-picture">
    		<div class="gallery owl-carousel owl-theme">
    			<div class="item">
    				<img src="assets/images/blog-post.jpg" alt="slider">
    			</div><!--item-->
    			<div class="item">
    				<img src="assets/images/blog-post.jpg" alt="slider">
    			</div><!--item-->
    			<div class="item">
    				<img src="assets/images/blog-post.jpg" alt="slider">
    			</div><!--item-->
    		</div><!--gallery-->
    	</div><!--wp-picture-->
    	<div class="content-article text-center">
    		<h2 class="post-heading">
    			<a href="single-blog.html">Tea Time: The health reasons why you should</a>
    		</h2>
    		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor<br>incididunt ut labore et dolore magna aliqua...</p>
    		<div class="category">
    			<span>in</span><a href="single-blog.html">NUTRITION + WELLNESS / </a><a href="#">September 05, 2017</a>
    		</div><!--category-->
    	</div><!--content-article-->
    </article>

### Banner

###### HTML:

    <div class="banner-img">
    	<div class="row">
    		<div class="col-md-6">
    			<img src="assets/images/banner.jpg" alt="banner">
    			<div class="inside text-right">
    				<h2 class="text-black">gift Certificate</h2>
    				<p>Give the perfect gift every time</p>
    				<a href="blog.html" class="custom-btn text-center white">Read More</a>
    			</div><!--inside-->
    		</div>
    		<div class="col-md-6">
    			<img src="assets/images/banner2.jpg" alt="banner">
    			<div class="inside text-right">
    				<h2 class="text-black">Fresh Fruits</h2>
    				<p>100% freshness guarantee </p>
    				<a href="blog.html" class="custom-btn text-center white">Read More</a>
    			</div><!--inside-->
    		</div>
    	</div>
    </div>

### Single Product

    <div class="row">
      <div class="col-md-6">
      	<!--================= Single Product Slider  ====================-->
      	<div class="single-product-slider">
      	  <div class="product-slider-shop owl-carousel owl-theme">
      	  	<div class="item"><img src="assets/images/single-product.jpg" alt="single-product"></div>
      	  	<div class="item"><img src="assets/images/single-product.jpg" alt="single-product"></div>
      	  	<div class="item"><img src="assets/images/single-product.jpg" alt="single-product"></div>
      	  	<div class="item"><img src="assets/images/single-product.jpg" alt="single-product"></div>
      	  	<div class="item"><img src="assets/images/single-product.jpg" alt="single-product"></div>
      	  	<div class="item"><img src="assets/images/single-product.jpg" alt="single-product"></div>
      	  </div>
      	  <div class="thumbnail owl-carousel owl-theme">
      	  	<div class="item"><img src="assets/images/single-product-mini.jpg" alt="product"></div>
      	  	<div class="item"><img src="assets/images/single-product-mini.jpg" alt="product"></div>
      	  	<div class="item"><img src="assets/images/single-product-mini.jpg" alt="product"></div>
      	  	<div class="item"><img src="assets/images/single-product-mini.jpg" alt="product"></div>
      	  	<div class="item"><img src="assets/images/single-product-mini.jpg" alt="product"></div>
      	  	<div class="item"><img src="assets/images/single-product-mini.jpg" alt="product"></div>
      	  </div>
      	  <div class="zoom" data-toggle="modal" data-target="#zoom-modal">
      	  	<img src="assets/images/zoom.png" alt="zoom">
      	  </div>
      	</div>
      	<!--================= End of Single Product Slider  ====================-->
      	<div class="modal fade" id="zoom-modal" tabindex="-1" role="dialog">
      	  <div class="modal-dialog" role="document">
      	  	<div class="modal-content">
      	  	  <div class="modal-header">
      	  	  	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
      	  	  	<span aria-hidden="true">×</span></button>
      	  	  </div>
      	  	  <div class="modal-body">
      	  	  	<div id="carousel" class="carousel slide" data-ride="carousel">
      	  	  	  <div class="carousel-inner">
      	  	  	   <div class="item active">
      	  	  	   	<img src="assets/images/single-product.jpg" alt="single">
      	  	  	   </div><!--item-->
      	  	  	   <div class="item">
      	  	  	   	<img src="assets/images/single-product.jpg" alt="single">
      	  	  	   </div><!--item-->
      	  	  	   <div class="item">
      	  	  	   	<img src="assets/images/single-product.jpg" alt="single">
      	  	  	   </div><!--item-->
      	  	  	   <div class="item">
      	  	  	   	<img src="assets/images/single-product.jpg" alt="single">
      	  	  	   </div><!--item-->
      	  	  	   <div class="item">
      	  	  	   	<img src="assets/images/single-product.jpg" alt="single">
      	  	  	   </div><!--item-->
      	  	  	   <div class="item">
      	  	  	   	<img src="assets/images/single-product.jpg" alt="single">
      	  	  	   </div><!--item-->
      	  	  	   <div class="item">
      	  	  	   	<img src="assets/images/single-product.jpg" alt="single">
      	  	  	   </div><!--item-->
      	  	  	   <div class="item">
      	  	  	   	<img src="assets/images/single-product.jpg" alt="single">
      	  	  	   </div><!--item-->
      	  	  	  </div><!--carousel-inner-->
      	  	  	</div><!--carousel-->
      	  	  	<div id="thumbcarousel" class="carousel slide" data-interval="false">
      	  	  	 <div class="carousel-inner">
      	  	  	   <div class="item active">
      	  	  	   	<div data-target="#carousel" data-slide-to="0" class="thumb">
      	  	  	   		<img src="assets/images/single-product-mini.jpg" alt="product">
      	  	  	   	</div>
      	  	  	   	<div data-target="#carousel" data-slide-to="1" class="thumb">
      	  	  	   		<img src="assets/images/single-product-mini.jpg" alt="product">
      	  	  	   	</div>
      	  	  	   	<div data-target="#carousel" data-slide-to="2" class="thumb">
      	  	  	   		<img src="assets/images/single-product-mini.jpg" alt="product">
      	  	  	   	</div>
      	  	  	   	<div data-target="#carousel" data-slide-to="3" class="thumb">
      	  	  	   		<img src="assets/images/single-product-mini.jpg" alt="product">
      	  	  	   	</div>
      	  	  	   </div><!--item-->
      	  	  	   <div class="item">
      	  	  	   	<div data-target="#carousel" data-slide-to="4" class="thumb">
      	  	  	   		<img src="assets/images/single-product-mini.jpg" alt="product">
      	  	  	   	</div>
      	  	  	   	<div data-target="#carousel" data-slide-to="5" class="thumb">
      	  	  	   		<img src="assets/images/single-product-mini.jpg" alt="product">
      	  	  	   	</div>
      	  	  	   	<div data-target="#carousel" data-slide-to="6" class="thumb">
      	  	  	   		<img src="assets/images/single-product-mini.jpg" alt="product">
      	  	  	   	</div>
      	  	  	   	<div data-target="#carousel" data-slide-to="7" class="thumb">
      	  	  	   		<img src="assets/images/single-product-mini.jpg" alt="product">
      	  	  	   	</div>
      	  	  	   </div>
      	  	  	 </div><!--carousel-inne-->
      	  	  	 <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
      	  	  	 <i class="fa fa-angle-left"></i></a>
      	  	  	 <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
      	  	  	 <i class="fa fa-angle-right"></i></a>
      	  	  	</div><!--thumbcarousel-->
      	  	  </div><!--modal-body-->
      	  	</div><!--modal-content-->
      	  </div><!--modal-dialog-->
      	</div><!--modal-->
      </div>
      <div class="col-md-6">
      	<!--================= Inside Single  ====================-->
      	<div class="inside-single">
      	  <div class="price">$9.99</div>
      	  <div class="star">
      	  	<span>
      	  	  <i class="fa fa-star"></i>
      	  	  <i class="fa fa-star"></i>
      	  	  <i class="fa fa-star"></i>
      	  	  <i class="fa fa-star"></i>
      	  	  <i class="fa fa-star"></i>
      	  	</span>
      	  	<a href="#">(4 customer reviews)</a>
      	  </div><!--star-->
      	  <div class="description">
      	  	<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
      	  	eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
      	  	 qui officia.</p>
      	  </div><!--description-->
      	  <div class="add-to-cart">
      	  	<div class="quantity">
      	  	  <span class="minus"><img src="assets/images/minus.png" alt="minus"></span>
      	  	  <input value="1" size="5">
      	  	  <span class="plus"><img src="assets/images/plus.png" alt="plus"></span>
      	  	</div>
      	  	<a href="cart.html" class="custom-btn green">add to bag</a>
      	  </div><!--add-to-cart-->
      	  <ul>
      	  	<li>Categories:<a href="#">Oil</a></li>
      	  	<li>Tags:<a href="#">Oil,</a><a href="#">Organic,</a><a href="#">Health</a></li>
      	  	<li>Share:
      	  	  <ul class="social-icon">
      	  	  	<li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
      	  	  	<li class="google"><a href="#"><i class="fa fa-google-plus"></i></a></li>
      	  	  	<li class="tumblr"><a href="#"><i class="fa fa-tumblr"></i></a></li>
      	  	  	<li class="instagram"><a href="#"><i class="fa fa-instagram"></i></a></li>
      	  	  </ul><!--social-icon-->
      	  	</li>
      	  </ul>
      	</div>
      	<!--================= End of Inside Single  ====================-->
      </div>
    </div>

### Contact Form

    <form id="contact-us-form">
      <div>
      	<input type="text" name="contact-us-name" class="contact-us-input-one" placeholder="Your Name">
      	<input type="text" name="contact-us-email"  class="contact-us-input-two" placeholder="Your E-mail">
      </div>
      <div>
      	<textarea name="contact-us-massage" class="contact-us-massage"  placeholder="Your Message..."></textarea>
      </div>
      <div>
      	<button type="submit" class="custom-btn green">submit</button>
      </div>
    </form>

### Sources and Credits top

- Bootstrap Framework – https://getbootstrap.com/
- OwlCarousel - https://owlcarousel2.github.io/OwlCarousel2
- Jquery - https://jquery.com/
- Google fonts – https://www.google.com/fonts
- Slick – http://kenwheeler.github.io/slick/
- Masonry – https://github.com/desandro/masonry
- Jquery Ui – https://jqueryui.com/
- lazyYT – https://github.com/tylerpearson/lazyYT
- Jquery Filterizr – https://github.com/giotiskl/Filterizr
- Jquery Counterup – https://github.com/bfintal/Counter-Up
- TweenMax – https://greensock.com/tweenmax
- Waypoints – http://imakewebthings.com/waypoints/

### Contacts

Created: 2018
By: Fruitful code
Email: mail@fruitfulcode.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!