Cinagro Html Theme

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>

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 Creditstop

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!

Cinagro

About Cinagro

Install Theme

Important!

Folder Structure

Owl carousel

HTML head

HTML:

Before </body> tag ends:

Js

News Carousel Single Blog

HTML:

Before </body> tag ends:

Initialize carousels in main.js file

Schedule

HTML:

Before </body> tag ends:

Shop With Sidebar

HTML:

Before </body> tag ends:

Initialize masonry in main.js file

Blog Post

HTML:

Banner

HTML:

Single Product

Contact Form

Sources and Creditstop

Contacts