<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]>
<!--><html class="no-js" lang="en"><!--<![endif]-->
<head>

	<!-- Basic Page Needs
	================================================== -->
	<meta charset="utf-8">
	<title>IG Design</title>
	<meta name="description"  content="Professional Creative Template" />
	<meta name="author" content="IG Design">
	<meta name="keywords"  content="ig design, website, design, html5, css3, jquery, creative, clean, animated, portfolio, blog, one-page, multi-page, corporate, business," />
	<meta property="og:title" content="Professional Creative Template" />
	<meta property="og:type" content="website" />
	<meta property="og:url" content="" />
	<meta property="og:image" content="" />
	<meta property="og:image:width" content="470" />
	<meta property="og:image:height" content="246" />
	<meta property="og:site_name" content="" />
	<meta property="og:description" content="Professional Creative Template" />
	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:site" content="https://twitter.com/IvanGrozdic" />
	<meta name="twitter:domain" content="http://ivang-design.com/" />
	<meta name="twitter:title" content="" />
	<meta name="twitter:description" content="Professional Creative Template" />
	<meta name="twitter:image" content="http://ivang-design.com/" />

	<!-- Mobile Specific Metas
	================================================== -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="theme-color" content="#212121"/>
    <meta name="msapplication-navbutton-color" content="#212121"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="#212121"/>

	<!-- Web Fonts 
	================================================== -->
	<link href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900" rel="stylesheet"/>
	<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"/>
	
	<!-- CSS
	================================================== -->
	<link rel="stylesheet" href="landing/css/bootstrap.min.css"/>
	<link rel="stylesheet" href="landing/css/font-awesome.min.css"/>
	<link rel="stylesheet" href="landing/css/style.css"/>
	<link rel="stylesheet" href="landing/css/colors/color.css"/>
	<link rel="stylesheet" href="landing/css/ionicons.min.css"/>
	<link rel="stylesheet" href="landing/css/owl.carousel.css"/>
	<link rel="stylesheet" href="landing/css/owl.transitions.css"/>
			
	<!-- Favicons
	================================================== -->
	<link rel="icon" type="image/png" href="favicon.png">
	<link rel="apple-touch-icon" href="apple-touch-icon.png">
	<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
	
	
</head>
<body class="royal_preloader">	
	
	<div id="royal_preloader"></div>

	
	<!-- Nav and Logo
	================================================== -->

	
	<!-- MENU
    ================================================== -->	

		<nav id="menu-wrap" class="menu-back cbp-af-header">
			<div class="menu">
				<a href="index.html" ><div class="logo"></div></a>
				<ul>
					<li>
						<a class="shadow-hover curent-shadow" href="#" >Work</a>
						<ul>
							<li><a class="curent-multi-page" href="index.html">Motion Hover Effect</a></li>
							<li><a href="index-1.html">Title Follow - Gallery</a></li>
							<li><a href="index-2.html">Stack Motion Effect</a></li>
							<li><a href="index-3.html">Hero Letter Effect</a></li>
							<li><a href="index-4.html">Hero Fullscreen Slider</a></li>
							<li><a href="index-5.html">Parallax Back Effect</a></li>
							<li><a href="index-6.html">Hero Video Player</a></li>
							<li><a href="project.html">Project Page</a></li>
						</ul>
					</li>
					<li>
						<a class="shadow-hover" href="about.html">About</a>
					</li>
					<li>
						<a class="shadow-hover" href="blog.html">Journal</a>
					</li>
					<li>
						<a class="shadow-hover" href="contact.html">Contact</a>
					</li>
					<li>
						<a class="shadow-hover" href="#">Buy <span>$18</span></a>
					</li>
				</ul>
			</div>
		</nav>
		
	<!-- Primary Page Layout
	================================================== -->

		<main>
			
			<!-- Hero Section -->
		
			<div class="section full-height mob-height">
				<div class="hero-slider-wrap">
					<div class="customNavigation">
						<a class="prev-hero-sync-1"><i class="fa fa-long-arrow-up"></i></a>
						<a class="next-hero-sync-1"><i class="fa fa-long-arrow-down"></i></a>
					</div>		
					<div id="hero-sync1" class="owl-carousel">
						<div class="item full-height mob-height">	
							<div class="container text-left">
								<div class="row">
									<div class="col-md-12 full-height mob-height mx-3">	
										<div class="hero-slider-img">	
											<img src="landing/img/slide/1.jpg" alt="hero image"/>
										</div>
										<div class="hero-center-wrap z-bigger">
											<h1 class="parallax-fade-top">Cek Tingkat <br><span>Depresimu </span></h1> 
										</div>
										<p class="hero-top-text">Depresimu</p>
									</div>	
								</div>
							</div>	
						</div>
						<div class="item full-height mob-height">	
							<div class="container text-left">
								<div class="row">
									<div class="col-md-12 full-height mob-height mx-3">	
										<div class="hero-slider-img">	
											<img src="landing/img/slide/2.jpg" alt="hero image"/>
										</div>
										<div class="hero-center-wrap z-bigger">
											<h1 class="parallax-fade-top">Atasi <br><span>Depresimu</span></h1>
										</div>
										<p class="hero-top-text">art direction</p>
									</div>	
								</div>
							</div>	
						</div>
						<div class="item full-height mob-height">	
							<div class="container text-left">
								<div class="row">
									<div class="col-md-12 full-height mob-height mx-3">	
										<div class="hero-slider-img">	
											<img src="landing/img/slide/3.jpg" alt="hero image"/>
										</div>
										<div class="hero-center-wrap z-bigger">
											<h1 class="parallax-fade-top">Temukan <br><span>solusinya</span></h1>
										</div>
										<p class="hero-top-text">motion</p>
									</div>	
								</div>
							</div>	
						</div>
					</div>

					<div class="container">
						<div class="row">
							<div class="col-md-12">
								<div id="hero-sync2" class="owl-carousel">
									<div class="item">
										<p><span>smart &amp; casual</span></p>	
									</div>
									<div class="item">
										<p><span>black candles</span></p>	
									</div>
									<div class="item">
										<p><span>lunar wines</span></p>
									</div>
								</div>
							</div>	
						</div>
					</div>
				</div>
				<a href="#top-scroll" data-gal="m_PageScroll2id"><div class="scroll-to-next">discover <i class="fa fa-long-arrow-down"></i></div></a>
			</div>	
			
			<!-- Portfolio -->
			
			<div class="content padding-top-bottom-big" id="top-scroll">
				<div class="grid">
					<a class="grid__item" href="#preview-1">
						<div class="box">
							<div class="box__shadow pattern-1"></div>
							<img class="box__img" src="landing/img/1.jpg" alt="Some image"/>
							<h3 class="box__title"><span class="box__title-inner" data-hover="a box">a box</span></h3>
							<h4 class="box__text"><span class="box__text-inner">beige</span></h4>
						</div>
					</a>
					<a class="grid__item" href="#preview-2">
						<div class="box">
							<div class="box__shadow pattern-2"></div>
							<img class="box__img" src="landing/img/2-1.jpg" alt="Some image"/>
							<h3 class="box__title box__title--straight box__title--bottom"><span class="box__title-inner" data-hover="diploma">diploma</span></h3>
							<h4 class="box__text box__text--bottom"><span class="box__text-inner box__text-inner--rotated1">gray</span></h4>
						</div>
					</a>
					<a class="grid__item" href="#preview-3">
						<div class="box">
							<div class="box__shadow pattern-3"></div>
							<img class="box__img" src="landing/img/3.jpg" alt="Some image"/>
							<h3 class="box__title"><span class="box__title-inner" data-hover="table">table</span></h3>
							<h4 class="box__text box__text--topcloser"><span class="box__text-inner">metal</span></h4>
						</div>
					</a>
					<a class="grid__item" href="#preview-4">
						<div class="box">
							<div class="box__shadow pattern-4"></div>
							<img class="box__img" src="landing/img/4.jpg" alt="Some image"/>
							<h3 class="box__title"><span class="box__title-inner" data-hover="a cup">a cup</span></h3>
							<h4 class="box__text box__text--bottom box__text--right"><span class="box__text-inner box__text-inner--rotated3">milk</span></h4>
						</div>
					</a>
					<a class="grid__item" href="#preview-5">
						<div class="box">
							<div class="box__shadow pattern-5"></div>
							<img class="box__img" src="landing/img/5.jpg" alt="Some image"/>
							<h3 class="box__title"><span class="box__title-inner" data-hover="glass">glass</span></h3>
							<h4 class="box__text box__text--bottomcloser"><span class="box__text-inner">wine</span></h4>
						</div>
					</a>
					<a class="grid__item" href="#preview-6">
						<div class="box">
							<div class="box__shadow pattern-6"></div>
							<img class="box__img" src="landing/img/6.jpg" alt="Some image"/>
							<h3 class="box__title"><span class="box__title-inner" data-hover="booklet">booklet</span></h3>
							<h4 class="box__text"><span class="box__text-inner">white</span></h4>
						</div>
					</a>
					<a class="grid__item" href="#preview-7">
						<div class="box">
							<div class="box__shadow pattern-7"></div>
							<img class="box__img" src="landing/img/7.jpg" alt="Some image"/>
							<h3 class="box__title box__title--straight box__title--bottom"><span class="box__title-inner" data-hover="a bottle">a bottle</span></h3>
							<h4 class="box__text box__text--topcloser"><span class="box__text-inner">plant</span></h4>
						</div>
					</a>
					<a class="grid__item" href="#preview-8">
						<div class="box">
							<div class="box__shadow pattern-8"></div>
							<img class="box__img" src="landing/img/8.jpg" alt="Some image"/>
							<h3 class="box__title"><span class="box__title-inner" data-hover="coffee">coffee</span></h3>
							<h4 class="box__text box__text--bottom"><span class="box__text-inner">black</span></h4>
						</div>
					</a>
				</div>
			</div>
			<div class="overlay">
				<div class="overlay__reveal"></div>
				<div class="overlay__item" id="preview-1">
					<div class="box">
						<div class="box__shadow"></div>
						<img class="box__img box__img--original" src="landing/img/original/1.jpg" alt="Some image"/>
						<h3 class="box__title"><span class="box__title-inner">a box</span></h3>
						<h4 class="box__text"><span class="box__text-inner">beige</span></h4>
					</div>
					<p class="overlay__content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
				</div>
				<div class="overlay__item" id="preview-2">
					<div class="box">
						<div class="box__shadow"></div>
						<img class="box__img box__img--original" src="landing/img/original/2-1.jpg" alt="Some image"/>
						<h3 class="box__title box__title--straight box__title--bottom"><span class="box__title-inner">diploma</span></h3>
						<h4 class="box__text box__text--bottom"><span class="box__text-inner box__text-inner--rotated1">gray</span></h4>
					</div>
					<p class="overlay__content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
				</div>
				<div class="overlay__item" id="preview-3">
					<div class="box">
						<div class="box__shadow"></div>
						<img class="box__img box__img--original" src="landing/img/original/3.jpg" alt="Some image"/>
						<h3 class="box__title"><span class="box__title-inner">table</span></h3>
						<h4 class="box__text box__text--topcloser"><span class="box__text-inner">metal</span></h4>
					</div>
					<p class="overlay__content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
				</div>
				<div class="overlay__item" id="preview-4">
					<div class="box">
						<div class="box__shadow"></div>
						<img class="box__img box__img--original" src="landing/img/original/4.jpg" alt="Some image"/>
						<h3 class="box__title"><span class="box__title-inner">a cup</span></h3>
						<h4 class="box__text box__text--bottom box__text--right"><span class="box__text-inner box__text-inner--rotated3">milk</span></h4>
					</div>
					<p class="overlay__content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
				</div>
				<div class="overlay__item" id="preview-5">
					<div class="box">
						<div class="box__shadow"></div>
						<img class="box__img box__img--original" src="landing/img/original/5.jpg" alt="Some image"/>
						<h3 class="box__title"><span class="box__title-inner">glass</span></h3>
						<h4 class="box__text box__text--bottomcloser"><span class="box__text-inner">wine</span></h4>
					</div>
					<p class="overlay__content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
				</div>
				<div class="overlay__item" id="preview-6">
					<div class="box">
						<div class="box__shadow"></div>
						<img class="box__img box__img--original" src="landing/img/original/6.jpg" alt="Some image"/>
						<h3 class="box__title"><span class="box__title-inner">booklet</span></h3>
						<h4 class="box__text"><span class="box__text-inner">white</span></h4>
					</div>
					<p class="overlay__content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
				</div>
				<div class="overlay__item" id="preview-7">
					<div class="box">
						<div class="box__shadow"></div>
						<img class="box__img box__img--original" src="landing/img/original/7.jpg" alt="Some image"/>
						<h3 class="box__title box__title--straight box__title--bottom"><span class="box__title-inner">a bottle</span></h3>
						<h4 class="box__text box__text--topcloser"><span class="box__text-inner">plant</span></h4>
					</div>
					<p class="overlay__content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
				</div>
				<div class="overlay__item" id="preview-8">
					<div class="box">
						<div class="box__shadow"></div>
						<img class="box__img box__img--original" src="landing/img/original/8.jpg" alt="Some image"/>
						<h3 class="box__title"><span class="box__title-inner">coffee</span></h3>
						<h4 class="box__text box__text--bottom"><span class="box__text-inner">black</span></h4>
					</div>
					<p class="overlay__content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
				</div>
				<button class="overlay__close"><span class="overlay__close-in"></span></button>
			</div>
			
						
			<div class="section footer padding-top-big background-image-cover" style="background-image: url(img/footer.jpg);">	
				<div class="container">
					<div class="row">
						<div class="col-md-12">	
							<img src="landing/img/logo-light.png" alt="logo image"/>
						</div>	
						<div class="col-md-12 my-4">
							<ul class="footer-social">
								<li>
									<a href="#">Tw</a>
								</li>
								<li>
									<a href="#">Fb</a>
								</li>
								<li>
									<a href="#">G+</a>
								</li>
								<li>
									<a href="#">Vm</a>
								</li>
							</ul>	
						</div>	
						<div class="col-md-12 mt-5">
							<div class="footer-line"></div>	
						</div>	
						<div class="col-md-12 rights my-3">
							<p>2018 © Chiron. All rights reserved. IG Design</p>
						</div>	
					</div>
				</div>	
			</div>
			
		</main>

	
	<!-- JAVASCRIPT
    ================================================== -->
	<script src="landing/js/jquery.js"></script>
	<script src="landing/js/royal_preloader.min.js"></script> 
	<script src="landing/js/popper.min.js"></script> 
	<script src="landing/js/bootstrap.min.js"></script>
	<script src="landing/js/plugins.js"></script> 
	<script src="landing/js/custom.js"></script>  
	<script src="landing/js/portfolio-animation.js"></script> 
<!-- End Document
================================================== -->
</body>
</html>