<!--A Design by Geektutor
Author: Geektutor
Author URL: http://adresocial.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="zxx">

<head>
	<title>Intro a Personal Category bootstrap Responsive website Template | Home :: AdreSocial</title>

	<!--meta tags -->
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="Intro Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!--//meta tags ends here-->
	<!--booststrap-->
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
	<!--//booststrap end-->
	<!-- font-awesome icons -->
	<link href="css/font-awesome.css" rel="stylesheet">
	<!-- //font-awesome icons -->
<!-- Nav-CSS -->	
<link href="css/nav.css" rel="stylesheet" type="text/css" media="all" />
 <script src="js/modernizr.custom.js"></script>
<!-- //Nav-CSS -->	
	<link rel="stylesheet" href="css/lightbox.css">
	<!--gallery-->

	<!--stylesheets-->
	<link href="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>
<!-- navigation section -->
	<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"></span>
		</button>
		</p>
</div>
	<!-- open/close -->
		<div class="overlay overlay-hugeinc">
			<button type="button" class="overlay-close">Close</button>
			<nav>
				<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="index.html">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 Aja Lekoko 
										</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>
<!-- //banner -->
<!--about -->
	<div class="about" id="about">
		<div class="container">
		<div class="col-md-4 about-left ">
					<img src="images/ab2.jpg" class="img-responsive" alt="">
				</div>
				<div class="col-md-7 about-right">
				<div class="about-me">
				<h2>Aja Lekoko </h2>
				<h4>Web Design & Web Developer</h4>
				</div>
				<div class="w3layouts_more-buttn">
				<p>Lorem ipsum dolor sit amet, consectetuer
				adipiscing elit. Aenean commodo ligula eget dolor.
				Aenean massa. Cum sociis natoque penatibus
				adipiscing elit. Aenean commodo ligula eget dolor.</p>
				<div class="buttn-about">
								<a href="#services">Read More</a>
							</div>
							<div class="buttom-social-grids">

					<ul>
						<li><a href="#"><span class="fa fa-facebook"></span></a></li>
						<li><a href="#"><span class="fa fa-twitter"></span></a></li>
						<li><a href="#"><span class="fa fa-rss"></span></a></li>
						<li><a href="#"><span class="fa fa-vk"></span></a></li>
					</ul>
				</div>
							</div>
							
				</div>
				<div class="clearfix"> </div>
				<div class="my-ser-info">
				<div class="col-md-5 my-datas">
				<h3>My Personal Data</h3>
				<ul class="address">
										<li>
							<ul class="address-text ">
								<li><b>Name </b></li>
								<li>:Aja Lekoko</li>
							</ul>
						</li>
						<li>
							<ul class="address-text ">
								<li><b>D.O.B </b></li>
								<li>:23-06-1989</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>PHONE </b></li>
								<li>:+00 111 222 3333</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>ADDRESS </b></li>
								<li>:756 hill,south pole,U.S.A</li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>E-MAIL </b></li>
								<li><a href="mailto:example@mail.com">: mail@example.com</a></li>
							</ul>
						</li>
						<li>
							<ul class="address-text">
								<li><b>WEBSITE </b></li>
								<li><a href="mailto:example@mail.com">: www.myresume.com</a></li>
							</ul>
						</li>
					</ul> 
			<div class="hire-w3lgrids">
						<a href="#" class="there-more"> 
							Download				
						</a> 
						<a href="#" class="there-more"> 
						Hire Me
						</a>
					</div>
				</div>
				<div class="col-md-7 aboutmy-services">
								
								<div class="col-md-6 col-sm-6 col-xs-6 about-ser-grid">
								<div class="about-gap">
								<span class="fa fa-television" aria-hidden="true"></span>
								<h3>web Design</h3>
								<p>Lorem ipsum dolor sit amet, consectetuer</p>
								</div>
								<div class="clearfix"> </div>
								</div>
								<div class="col-md-6 col-sm-6 col-xs-6 about-ser-grid">
								<div class="about-gap clr-green">
								<span class="fa fa-database" aria-hidden="true"></span
>								<h3>UI/UX Design</h3>
                           <p>Lorem ipsum dolor sit amet, consectetuer</p>
								</div>
								<div class="clearfix"> </div>
								</div>
								<div class="col-md-6 col-sm-6 col-xs-6 about-ser-grid">
								<div class="about-gap clr-green">
								<span class="fa fa-picture-o" aria-hidden="true"></span>
								<h3>Photoshop</h3>
								<p>Lorem ipsum dolor sit amet, consectetuer</p>
								</div>
								<div class="clearfix"> </div>
								</div>
								<div class="col-md-6 col-sm-6 col-xs-6 about-ser-grid">
								<div class="about-gap">
								<span class="fa fa-mobile" aria-hidden="true"></span>
								<h3>Web Design</h3>
								<p>Lorem ipsum dolor sit amet, consectetuer</p>
								</div>
								<div class="clearfix"> </div>
								</div>
							</div>	
							<div class="clearfix"> </div>
							</div>
							<div class="clearfix"> </div>

</div>
</div>
<!--//about -->
		<div class="services" id="services">
		<div class="container">
			<h3 class="title clr">Services</h3>
						<div class="banner-bottom-girds">

<div class="col-md-5 my-ser-right">
				<div class="col-md-6 col-sm-6 col-xs-6 stats-grid stats-grid-1">
					<div class="ser-icone"> 
					<span class="fa fa-users font" aria-hidden="true"></span>
				
					<div class="counter">3500</div>
					<div class="stat-info-w3ls">
						<h4>Clients</h4>
					</div>
						</div>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-6 stats-grid stats-grid-2">
					<div class="ser-icone clr-green"> 
					<span class="fa fa-coffee font" aria-hidden="true"></span>
					<div class="counter">650</div>
					<div class="stat-info-w3ls">
						<h4>Coffee</h4>
					</div>
					</div>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-6 stats-grid stats-grid-3">
					<div class="ser-icone clr-green">
					<span class="fa fa-trophy font" aria-hidden="true"></span>
					
					<div class="counter">1021</div>
					<div class="stat-info-w3ls">
						<h4>Awards</h4>
					</div>
					</div>
				</div>
				<div class="col-md-6 col-sm-6 col-xs-6 stats-grid stats-grid-4">
					<div class="ser-icone"> <span class="fa fa-lightbulb-o font" aria-hidden="true"></span>
					
					<div class="counter">1010</div>
					<div class="stat-info-w3ls">
						<h4>Ideas</h4>
					</div>
					</div>
				</div>
				<div class="clearfix"></div>
			<div class="w3l_about_bottom_grid_right bar-grids">
				<h6>Html<span> 100% </span></h6>
				<div class="progress">
					<div class="progress-bar progress-bar-striped active" style="width: 100%">
					</div>
				</div>
				<div class="mid-bar">
					<h6>Css<span> 85% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 85%">
						</div>
					</div>
				</div>
				<h6>Java<span>67% </span></h6>
				<div class="progress">
					<div class="progress-bar progress-bar-striped active" style="width: 67%">
					</div>
				</div>
			</div>
</div>	
			<div class="col-md-7 my-ser-left">
<div class="white-shadow">
			 <div class=" col-md-3 col-sm-3 col-xs-3 service-num-left">
			   <h6>1</h6>
			   </div>
			   <div class="col-md-9 col-sm-9 col-xs-9 service-info-left">
			   <h4>Development</h4>
			   <p>Lorem ipsum dolor sitamet,consectetuer
				adipiscing elit.Aenean commodo ligula eget</p>
			   </div>
						<div class="clearfix"> </div>
					</div>
					<div class="white-shadow">
			 <div class=" col-md-3 col-sm-3 col-xs-3 service-num-left">
			   <h6>2</h6>
			   </div>
			   <div class="col-md-9 col-sm-9 col-xs-9 service-info-left">
			   <h4>Typography</h4>
			   <p>Lorem ipsum dolor sitamet,consectetuer
				adipiscing elit.Aenean commodo ligula eget</p>
			   </div>
						<div class="clearfix"> </div>
					</div>
					<div class="white-shadow">
			 <div class=" col-md-3 col-sm-3 col-xs-3 service-num-left">
			   <h6>3</h6>
			   </div>
			   <div class="col-md-9 col-sm-9 col-xs-9 service-info-left">
			   <h4>Graphic Design</h4>
			   <p>Lorem ipsum dolor sitamet,consectetuer
				adipiscing elit.Aenean commodo ligula eget</p>
			   </div>
						<div class="clearfix"> </div>
					</div><div class="white-shadow">
			 <div class=" col-md-3 col-sm-3 col-xs-3 service-num-left">
			   <h6>4</h6>
			   </div>
			   <div class="col-md-9 col-sm-9 col-xs-9 service-info-left">
			   <h4>Adobe Photoshop</h4>
			   <p>Lorem ipsum dolor sitamet,consectetuer
				adipiscing elit.Aenean commodo ligula eget</p>
			   </div>
						<div class="clearfix"> </div>
					</div>
					<div class="clearfix"> </div>
</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		</div>
				<!--// services-->
<div class="experience" id="experience">
	<div class="container">
		<div class="education">
		<div class="col-md-5 education-info">
		 <h4>education</h4>
		</div>
		<div class="col-md-7 education-matter">
		<div class="edu-right ">
		<h6>2011-2014</h6>
		<h5>Bachelor Degree Of Education</h5>
		<p>Lorem ipsum dolor sit amet,</p>
		</div>
		<div class="edu-right back-shadow clr-green">
				<h6>2011-2014</h6>
		<h5>Bachelor Degree Of Education</h5>
		<p>Lorem ipsum dolor sit amet,</p>
		</div>
		
		<div class="edu-right ">
				<h6>2011-2014</h6>
		<h5>Bachelor Degree Of Education</h5>
		<p>Lorem ipsum dolor sit amet,</p>
		</div>
		<div class="edu-right back-shadow clr-green">
				<h6>2011-2014</h6>
		<h5>Bachelor Degree Of Education</h5>
		<p>Lorem ipsum dolor sit amet,</p>
		
		</div>
	
		</div>
			<div class="clearfix"></div>
		</div>
		<div class="experience-info">
		<div class="col-md-7 exp-matter">
		<div class="exp-left">
		<h6>2012-2014</h6>
		<h5>WebDesigner – Mutation Media</h5>
		<p>Lorem ipsum dolor sit amet,</p>
		</div>
		<div class="exp-left back-shadow clr-green">
				<h6>2011-2012</h6>
		<h5>WebDesigner – Mutation Media</h5>
		<p>Lorem ipsum dolor sit amet,</p>
		</div>
		
		<div class="exp-left">
				<h6>2009-2011</h6>
		<h5>WebDesigner – Mutation Media</h5>
		<p>Lorem ipsum dolor sit amet,</p>
		</div>
		<div class="exp-left back-shadow clr-green">
				<h6>2008-2009</h6>
		<h5>WebDesigner – Mutation Media</h5>
		<p>Lorem ipsum dolor sit amet,</p>
		
		</div>
		</div>
					<div class="col-md-5 exp-info-right">
		 <h4>experience</h4>
		</div>
		<div class="clearfix"></div>
		</div>
	</div>
	</div>
<!-- gallery-->
	<div id="gallery" class="gallery">
	<div class="container">
			<h3 class="title clr">Gallery</h3>
			<div class="gallery-info">
				<div class="col-md-3 col-sm-6 col-xs-6 gallery-grids">
					<a href="images/g1.jpg" class="gallery-box" data-lightbox="example-set" data-title="">
					<img src="images/g1.jpg" alt="" class="img-responsive zoom-img">
				</a>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 gallery-grids">
					<a href="images/g2.jpg" class="gallery-box" data-lightbox="example-set" data-title="">
					<img src="images/g2.jpg" alt="" class="img-responsive zoom-img">
				</a>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 gallery-grids">
					<a href="images/g3.jpg" class="gallery-box" data-lightbox="example-set" data-title="">
					<img src="images/g3.jpg" alt="" class="img-responsive zoom-img">
				</a>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 gallery-grids">
					<a href="images/g4.jpg" class="gallery-box" data-lightbox="example-set" data-title="">
					<img src="images/g4.jpg" alt="" class="img-responsive zoom-img">
				</a>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 gallery-grids grid-mdl">
					<a href="images/g5.jpg" class="gallery-box" data-lightbox="example-set" data-title="">
					<img src="images/g5.jpg" alt="" class="img-responsive zoom-img">
				</a>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 gallery-grids  grid-mdl">
					<a href="images/g6.jpg" class="gallery-box" data-lightbox="example-set" data-title="">
					<img src="images/g6.jpg" alt="" class="img-responsive zoom-img">
				</a>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 gallery-grids  grid-mdl">
					<a href="images/g7.jpg" class="gallery-box" data-lightbox="example-set" data-title="">
					<img src="images/g7.jpg" alt="" class="img-responsive zoom-img">
				</a>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 gallery-grids  grid-mdl">
					<a href="images/g8.jpg" class="gallery-box" data-lightbox="example-set" data-title="">
					<img src="images/g8.jpg" alt="" class="img-responsive zoom-img">
				</a>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 gallery-grids  grid-mdl">
					<a href="images/g9.jpg" class="gallery-box" data-lightbox="example-set" data-title="">
					<img src="images/g9.jpg" alt="" class="img-responsive zoom-img">
				</a>
				</div>
								<div class="col-md-3 col-sm-6 col-xs-6 gallery-grids  grid-mdl">
					<a href="images/g12.jpg" class="gallery-box" data-lightbox="example-set" data-title="">
					<img src="images/g12.jpg" alt="" class="img-responsive zoom-img">
				</a>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 gallery-grids  grid-mdl">
					<a href="images/g10.jpg" class="gallery-box" data-lightbox="example-set" data-title="">
					<img src="images/g10.jpg" alt="" class="img-responsive zoom-img">
				</a>
				</div>
				<div class="col-md-3 col-sm-6 col-xs-6 gallery-grids  grid-mdl">
					<a href="images/g11.jpg" class="gallery-box" data-lightbox="example-set" data-title="">
					<img src="images/g11.jpg" alt="" class="img-responsive zoom-img">
				</a>
				</div>
			</div>
	</div>
	</div>
	<!-- //gallery-->
<!--contact-->
	<div class="contact" id="contact">
		<div class="container">
			<h3 class="title">Contact</h3>
						<div class="contact-us">
				<form action="#" method="post">
					<div class="col-md-6 col-sm-6 col-xs-6 styled-input">
						<input type="text" name="Name" placeholder="Name" required="">
					</div>
					<div class="col-md-6 col-sm-6 col-xs-6 styled-input">
						<input type="text" name="Last Name" placeholder="Last Name" required="">
					</div>

					<div class="col-md-6 col-sm-6 col-xs-6 styled-input">
						<input type="email" name="Email" placeholder="Email" required="">

					</div>

					<div class="col-md-6 col-sm-6 col-xs-6 styled-input">

						<input type="text" name="phone" placeholder="phone" required="">

					</div>
					<div class="clearfix"> </div>
					<div class="styled-input">

						<textarea name="Message" placeholder="Message" required=""></textarea>
					</div>
					<div>
						<div class="click">
							<input type="submit" value="SEND">
						</div>
					</div>
				</form>
			</div>
			<div class="clearfix"> </div>
			<div class=" col-md-8 col-sm-8 col-xs-7 contact-map">
				<div class="map-grid">
					<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3023.948805392833!2d-73.99619098458929!3d40.71914347933105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25a27e2f24131%3A0x64ffc98d24069f02!2sCANADA!5e0!3m2!1sen!2sin!4v1479793484055"></iframe>

				</div>
			</div>

			<div class=" col-md-4 col-sm-4 col-xs-5 contact-icons">
				<div class="footer_grid_left">
					<h5>Address</h5>
					<p>756 st hill,south pole,<span> New York,10002,
					USA</span></p>
				</div>
				<div class="footer_grid_left">
					<h5> Contact</h5>
					<p>+(000) 123 4565 32 <span>+(010) 123 4565 35</span></p>
				</div>
				<div class="footer_grid_left">
					<h5>Email</h5>
					<p><a href="mailto:info@example.com">mail@example1.com</a>
					<span><a href="mailto:info@example.com">mail@example2.com</a></span></p>
				</div>

			</div>
			<div class="clearfix"> </div>



		
		</div>
	</div>

<footer>
<div class="social-icons">

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

		<p>© 2018 Intro. All Rights Reserved | Design by <a href="http://adresocial.com/" target="_blank"> AdreSocial </a></p>
	</footer>
	<!--js working-->
	<script src='js/jquery-2.2.3.min.js'></script>
	<script src="js/bootstrap.js"></script>
	<!--//js working-->
	<!--nav menu-->
		<script src="js/classie.js"></script>
		<script src="js/demo1.js"></script>
<!-- //nav menu-->	
	<!-- gallery -->
	<script src="js/lightbox-plus-jquery.min.js"></script>
	<!-- //gallery -->
<!--banner-->

	<script src="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.</li>");
				},
				after: function () {
					$('.events').append("<li>after event fired.</li>");
				}
			});

		});
	</script>
	<!--// banner-->
	<!-- OnScroll-Number-Increase-JavaScript -->
	<script src="js/jquery.waypoints.min.js"></script>
	<script src="js/jquery.countup.js"></script>
	<script>
		$('.counter').countUp();
	</script>
	<!-- //OnScroll-Number-Increase-JavaScript -->

<!-- start-smoth-scrolling -->
	<script src="js/move-top.js"></script>
	<script src="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 -->
</body>

</html>