<!DOCTYPE HTML>
<html>
<head>
<title>KreativePixel Website Template | Home </title>
<link href="css/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</script>
<!----webfonts---->
<link href='http//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http//fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<!----//webfonts---->
<!---animate-header--->
<link href="css/animate.css" rel="stylesheet" type="text/css" />
<!---animate-header--->
<!---slider---->
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/slippry.css">
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/scripts-f0e4e0c2.js" type="text/javascript"></script>
<script>
jQuery('#jquery-demo').slippry({
// general elements & wrapper
slippryWrapper: '<div class="sy-box jquery-demo" />', // wrapper to wrap everything, including pager
// options
adaptiveHeight: false, // height of the sliders adapts to current slide
useCSS: false, // true, false -> fallback to js if no browser support
autoHover: false,
transition: 'fade'
});
</script>
<!---scrooling-script--->
<!---smoth-scrlling---->
<script type="text/javascript">
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 1000, 'swing', function () {
window.location.hash = target;
});
});
});
</script>
<!---//smoth-scrlling---->
<!---//scrooling-script--->
<!-----768px-menu----->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css" />
<script type="text/javascript" src="js/jquery.mmenu.js"></script>
<script type="text/javascript">
// The menu on the left
$(function() {
$('nav#menu-left').mmenu();
});
</script>
<!-----//768px-menu----->
</head>
<body>
<!---start-wrap---->
<!---start-banner---->
<div class="banner" id="move-top">
<!----start-header---->
<div class="header animated bounceInDown">
<!------start-768px-menu---->
<div id="page">
<div id="header">
<a class="navicon" href="#menu-left"> </a>
</div>
<nav id="menu-left">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#fea">Features</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<!------start-768px-menu---->
<div class="wrap">
<!---start-logo---->
<div class="logo">
<a data-scroll-reveal="enter from the top over 0.7s" href="#"> <img src="images/logo.png" title="KreativePixel" /></a>
</div>
<!---//End-logo---->
<!---start-top-nav---->
<div data-scroll-reveal="enter from the top over 0.7s" class="top-nav">
<ul>
<li class="active"><a href="#home">Home<span> </span></a></li>
<li><a href="#fea">Features</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="clear"> </div>
<!---//End-top-nav---->
</div>
</div>
<!----//End-header---->
<!----start-image-slider---->
<div data-scroll-reveal="enter bottom but wait 0.7s" class="img-slider" id="home">
<div class="wrap">
<ul id="jquery-demo">
<li>
<a href="#slide1">
</a>
<div data-scroll-reveal="enter bottom but wait 0.7s" class="slider-detils">
<h3>We Design <label>Creative Website</label> For Enterprising People</h3>
<span>Lorem ipsum dolor sit amet, consectetur adipisc ing elit.<i> Aliquam viverra consectetur nibh a blan dit. Proin at amet consectetur adipisc lacinia nunc.</i></span>
<a class="slide-btn" href="#">View Projects</a>
</div>
</li>
<li>
<a href="#slide2">
</a>
<div data-scroll-reveal="enter bottom but wait 1s" class="slider-detils">
<h3>We Design <label>Creative Website</label> For Enterprising People</h3>
<span>Lorem ipsum dolor sit amet, consectetur adipisc ing elit.<i> Aliquam viverra consectetur nibh a blan dit. Proin at amet consectetur adipisc lacinia nunc.</i></span>
<a class="slide-btn" href="#">View Projects</a>
</div>
</li>
<li>
<a href="#slide3">
</a>
<div data-scroll-reveal="enter bottom but wait 1.5s" class="slider-detils">
<h3>We Design <label>Creative Website</label> For Enterprising People</h3>
<span>Lorem ipsum dolor sit amet, consectetur adipisc ing elit.<i> Aliquam viverra consectetur nibh a blan dit. Proin at amet consectetur adipisc lacinia nunc.</i></span>
<a class="slide-btn" href="#">View Projects</a>
</div>
</li>
</ul>
</div>
</div>
<div class="clear"> </div>
</div>
<!----//End-image-slider---->
<!---start-top-grids---->
<div class="top-grids" id="fea">
<div class="wrap">
<h3><span>Check Out</span>Features</h3>
<i> </i>
<div data-scroll-reveal="enter bottom but wait 0.7s" class="top-grids-box">
<div data-scroll-reveal="enter top over 0.7s after 0.7s" class="top-grid">
<a class="icon1" href="#"><span> </span></a>
<h4><a href="#">Mobile Ready</a></h4>
<p> Lorem ipsum dolor sit amet, consectetur adipisc ing. Aliquam viverra dolor sit consectetur nibh a blan.</p>
<a class="btn" href="#">Read More</a>
</div>
<div data-scroll-reveal="enter top over 0.7s after 0.7s" class="top-grid">
<a class="icon2" href="#"><span> </span></a>
<h4><a href="#">HTML5 Valid</a></h4>
<p> Lorem ipsum dolor sit amet, consectetur adipisc ing. Aliquam viverra dolor sit consectetur nibh a blan.</p>
<a class="btn" href="#">Read More</a>
</div>
<div data-scroll-reveal="enter top over 0.7s after 0.7s" class="top-grid">
<a class="icon3" href="#"><span> </span></a>
<h4><a href="#">CSS3 Magic</a></h4>
<p> Lorem ipsum dolor sit amet, consectetur adipisc ing. Aliquam viverra dolor sit consectetur nibh a blan.</p>
<a class="btn" href="#">Read More</a>
</div>
<div data-scroll-reveal="enter top over 0.7s after 0.7s" class="top-grid">
<a class="icon4" href="#"><span> </span></a>
<h4><a href="#">Amazing design</a></h4>
<p> Lorem ipsum dolor sit amet, consectetur adipisc ing. Aliquam viverra dolor sit consectetur nibh a blan.</p>
<a class="btn" href="#">Read More</a>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<!---//End-top-grids---->
<!---- start-works---->
<!-- Owl Carousel Assets -->
<link href="css/owl.carousel.css" rel="stylesheet">
<!-- Owl Carousel Assets -->
<!-- Prettify -->
<script src="js/owl.carousel.js"></script>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
items : 1,
lazyLoad : true,
autoPlay : true,
navigation : true,
navigationText : ["",""],
re