<!DOCTYPE html>
<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
--><html lang="zxx">
<head>
<?php include_once( LAYOUT_PATH . DS . 'htmlHeader' . TPL ) ?>
<!--meta tags --><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script><!--//meta tags ends here--><!--booststrap--><link href="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<!--//booststrap end--><!-- font-awesome icons --><link href="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/css/font-awesome.css" rel="stylesheet">
<!-- //font-awesome icons --><!-- Nav-CSS --><link href="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/css/nav.css" rel="stylesheet" type="text/css" media="all">
<script src="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/js/modernizr.custom.js"></script><!-- //Nav-CSS --><link rel="stylesheet" href="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/css/lightbox.css">
<!--gallery--><!--stylesheets--><link href="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/css/style.css" rel="stylesheet" type="text/css" media="all">
<!--//stylesheets--><link href="//fonts.googleapis.com/css?family=Montserrat:300,400,500" rel="stylesheet">
</head>
<body data-pc-section-name="body">
<?php include_once( LAYOUT_PATH . DS . 'header' . TPL ) ?>
<!-- navigation section -->
	
@@@pc_body_1@@@

{@@@pc_body_1
<div class="header-outs">
		<div class="header-w3layouts">
		<div class="container">

<div class="right-side"> 
<p>
		<button id="trigger-overlay" type="button">
			<span class="fa fa-bars" aria-hidden="true">&nbsp;</span>
		</button>
		</p>
</div>
	<!-- open/close -->
		<div class="overlay overlay-hugeinc">
			<button type="button" class="overlay-close">Close</button>
			<nav data-pc-menu-ignore="1"><ul>
<li><a href="#index.html" class="scroll">Home</a></li>
					<li><a href="#about" class="scroll">About</a></li>
					<li><a href="#services" class="scroll">Services</a></li>
					<li><a href="#experience" class="scroll">Qualification</a></li>
					<li><a href="#gallery" class="scroll">Gallery</a></li>
					<li><a href="#contact" class="scroll">Contact</a></li>
					
				</ul></nav>
</div>
					<div class="hedder-logo">
				<h1><a href="<?php echo Ayoola_Application::getUrlPrefix(); ?>/">Intro</a></h1>
		</div>
	<!-- /open/close -->
<!-- /navigation section -->
</div>
<div class="clearfix"> </div>

</div>
<!-- Slideshow 4 -->
		<div class="slider">
			<div class="callbacks_container">
				<ul class="rslides" id="slider4">
<li>
						<div class="slider-img">
							<div class="container">
								<div class="slider-info">
									<h4>I am Kelly Jhon 
										</h4>
									<p>Web Design</p>

								</div>
							</div>
						</div>
					</li>
					<li>
						<div class="slider-img ">
							<div class="container">
								<div class="slider-info">
									<h4>Am Web Designer
										 </h4>
									<p>My Passion</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
</div>
			<div class="clearfix"> </div>
		</div>
		<!-- This is here just to demonstrate the callbacks -->
		<!-- <ul class="events">
      <li>Example 4 callback events</li>
    </ul>-->
</div>

pc_body_1@@@}
@@@oneness@@@<section data-pc-all-sections="1" class="container">	
									<div class="">
										<div class="row">
											<div class="pc_page_layout_grid col-md-12 12u">
												@@@middlebar@@@
										   </div>
										</div> 
										<div class="row">
											<div class="pc_page_layout_grid col-sm-6 6u 6u$(medium) 12u$(xsmall) 12u$(mobile)">
												@@@twosome1@@@
											</div>
											<div class="pc_page_layout_grid col-sm-6 6u 6u$(medium) 12u$(xsmall) 12u$(mobile)">
												@@@twosome2@@@
											</div> 
										</div> 
										<div class="row">
											<div class="pc_page_layout_grid col-sm-4 4u 12u$(medium) 12u$(xsmall) 12u$(mobile)"> 
												@@@threesome1@@@
										   </div>
											<div class="pc_page_layout_grid col-sm-4 4u 12u$(medium) 12u$(xsmall) 12u$(mobile)">
												@@@threesome2@@@
											</div> 
											<div class="pc_page_layout_grid col-sm-4 4u 12u$(medium) 12u$(xsmall) 12u$(mobile)">
												@@@threesome3@@@
											</div> 
										</div> 
										<div class="row">
											<div class="pc_page_layout_grid col-sm-3 3u 6u$(medium) 12u$(xsmall) 12u$(mobile)">
												@@@foursome1@@@
										   </div>
											<div class="pc_page_layout_grid col-sm-3 3u 6u$(medium) 12u$(xsmall) 12u$(mobile)">
												@@@foursome2@@@
											</div> 
											<div class="pc_page_layout_grid col-sm-3 3u 6u(medium) 12u$(xsmall) 12u$(mobile)">
												@@@foursome3@@@
											</div> 
											<div class="pc_page_layout_grid col-sm-3 3u 6u$(medium) 12u$(xsmall) 12u$(mobile)">    
												@@@foursome4@@@
											</div> 
										</div> 
										<div class="row">
											<div class="pc_page_layout_grid col-sm-4 4u 12u$(medium) 12u$(xsmall) 12u$(mobile)">
												@@@leftbar@@@
										   </div>
											<div class="pc_page_layout_grid col-sm-8 8u 12u$(medium) 12u$(xsmall) 12u$(mobile)">
												@@@leftbarright@@@
											</div> 
										</div> 
										<div class="row">
											<div class="pc_page_layout_grid col-sm-8 8u 12u$(medium) 12u$(xsmall) 12u$(mobile)">
												@@@rightbarleft@@@
											</div> 
											<div class="pc_page_layout_grid col-sm-4 4u 12u$(medium) 12u$(xsmall) 12u$(mobile)">
												@@@rightbar@@@
											</div>   
										</div> 
									</div> 
								</section>@@@lastoneness@@@
<!-- //banner -->
<!--about -->
	
@@@about@@@



<!--//about -->
		
@@@services@@@



				<!--// services-->

@@@experience@@@



<!-- gallery-->
	
@@@gallery@@@



	<!-- //gallery-->
<!--contact-->
	
@@@contact@@@





@@@pc_body_7@@@

{@@@pc_body_7
<footer><div class="social-icons">

					<ul>
<li><a href="#"><span class="fa fa-facebook">&nbsp;</span></a></li>
						<li><a href="#"><span class="fa fa-twitter">&nbsp;</span></a></li>
						<li><a href="#"><span class="fa fa-rss">&nbsp;</span></a></li>
						<li><a href="#"><span class="fa fa-vk">&nbsp;</span></a></li>
					</ul>
</div>

		<p>&copy; 2018 Intro. All Rights Reserved | Design by <a href="http://w3layouts.com/" target="_blank"> W3layouts </a></p>
	</footer>
pc_body_7@@@}
<!--js working--><script src="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/js/jquery-2.2.3.min.js"></script><script src="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/js/bootstrap.js"></script><!--//js working--><!--nav menu--><script src="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/js/classie.js"></script><script src="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/js/demo1.js"></script><!-- //nav menu--><!-- gallery --><script src="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/js/lightbox-plus-jquery.min.js"></script><!-- //gallery --><!--banner--><script src="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/js/responsiveslides.min.js"></script><script>
		// You can also use "$(window).load(function() {"
		$(function () {
			// Slideshow 4
			$("#slider4").responsiveSlides({
				auto: true,
				pager: false,
				nav: true,
				speed: 900,
				namespace: "callbacks",
				before: function () {
					$('.events').append("<li>before event fired.");
				},
				after: function () {
					$('.events').append("<li>after event fired.");
				}
			});

		});
	</script><!--// banner--><!-- OnScroll-Number-Increase-JavaScript --><script src="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/js/jquery.waypoints.min.js"></script><script src="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/js/jquery.countup.js"></script><script>
		$('.counter').countUp();
	</script><!-- //OnScroll-Number-Increase-JavaScript --><!-- start-smoth-scrolling --><script src="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/js/move-top.js"></script><script src="<?php echo Ayoola_Application::getUrlPrefix(); ?>/layout/pc_layout_introwebtheme/js/easing.js"></script><script>
		jQuery(document).ready(function ($) {
			$(".scroll").click(function (event) {
				event.preventDefault();
				$('html,body').animate({
					scrollTop: $(this.hash).offset().top
				}, 900);
			});
		});
	</script><!-- start-smoth-scrolling --><!-- here stars scrolling icon --><script>
		$(document).ready(function () {

			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear'
			};


			$().UItoTop({
				easingType: 'easeOutQuart'
			});

		});
	</script><!-- //here ends scrolling icon --><?php include_once( LAYOUT_PATH . DS . 'footerJs' . TPL ) ?><?php include_once( LAYOUT_PATH . DS . 'footer' . TPL ) ?>
</body>
</html>
