<!DOCTYPE HTML>
<html>
	<head>
		<title>Under Construction | Home</title>
		<meta name="keywords" content="download pdf,epub,mobi,txt,chm,doc,ppt ebooks" />

	</head>
	<body>
<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Afford  A personal Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Afford Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href='http://fonts.googleapis.com/css?family=Monda:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/swipebox.css">
<script src="js/jquery.min.js"></script>
<!------ Light Box ------>
    <script src="js/jquery.swipebox.min.js"></script> 
    <script type="text/javascript">
		jQuery(function($) {
			$(".swipebox").swipebox();
		});
	</script>
    <!------ Eng Light Box ------>
	<script type="text/javascript" src="js/move-top.js"></script>
       <script type="text/javascript" src="js/easing.js"></script>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
				});
			});
		</script>
		<script type="text/javascript">
		$(document).ready(function() {
				/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
				*/
		$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>

</head>
<body>
<!-- header -->
	<div class="banner">
  	    <div class="container">
			<div class="header">
				<div class="logo">
					<a href="index.html"><img src="images/logo.png" class="img-responsive" alt="" /></a>
				</div>
				<div class="menu">												
						<a href="#" class="right_bt" id="activator"><img src="images/menu.png" alt=""/></a>
							<div class="box" id="box">
								<div class="box_content">
								<div class="social-top">
									<ul>
										<li><a href="#"><i class="facebook-2"> </i></a></li>
										<li><a href="#"><i class="twiter-2"> </i></a></li>
										<li><a href="#"><i class="drible-2"> </i></a></li>
										<li><a href="#"><i class="youtube-2"> </i></a></li>
										<li><a href="#"><i class="goplus-2"> </i></a></li>
											<div class="clearfix"></div>	
									</ul>
								</div>
								   <div class="menu_box_list">
									   <ul>
										   <li class="active"><a href="#home" class="scroll">home</a></li>
											<li><a href="#portfolio" class="scroll">portfolio</a></li>
											<li><a href="#qualification" class="scroll">qualification</a></li>
											<li><a href="#article" class="scroll">article</a></li>
											<li><a href="#hire" class="scroll">hire</a></li>
												<div class="clearfix"></div>
										</ul>
									</div>
									
									<a class="boxclose" id="boxclose"><img src="images/close.png" alt=""/></a>
								</div> 								
							</div>
							<script type="text/javascript" src="js/easing.js"></script>
								 <script type="text/javascript">
										var $ = jQuery.noConflict();
											$(function() {
												$('#activator').click(function(){
														$('#box').animate({'top':'0px'},500);
												});
												$('#boxclose').click(function(){
														$('#box').animate({'top':'-700px'},500);
												});
											});
											$(document).ready(function(){
											
											//Hide (Collapse) the toggle containers on load
											$(".toggle_container").hide(); 
											
											//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
											$(".trigger").click(function(){
												$(this).toggleClass("active").next().slideToggle("slow");
												return false; //Prevent the browser jump to the link anchor
											});
											
											});
										</script>
				</div> 
				
						<div class="clearfix"></div>
			</div>
			<div class="banner-info">
				<h1>Lorem ipsum dolor sit amet,<span> adipiscing elit</span></h1>
			</div>
		</div> 		
	</div>	
<!-- header -->
<!-- action -->
	<div class="action">
		<div class="container">
			<div class="col-md-7 action-left">
				<h3>Lorem ipsum dolor sit amet</h3>
				<p>laoreet dolore CREATIVE erat!</p>
			</div>
			<div class="col-md-5 action-right">
				<a href="#" class="btn  btn-1b">DOWNLOAD</a>
			</div>
					<div class="clearfix"></div>		
		</div>
	</div>
<!-- action -->
<!-- about -->
	<div class="about-me">
		<div class="container">
				<h2>ABOUT ME</h2>
				<h3> Ut wisi enim ad minim</h3>
				<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
			<div class="social-about">
				<ul>
					<li class="blue"><a href="#"><i class="facebook1"> </i></a></li>
					<li class="skyblue"><a href="#"><i class="twiter1"> </i></a></li>
					<li class="pink"><a href="#"><i class="drible1"> </i></a></li>
					<li class="red"><a href="#"><i class="goplus1"> </i></a></li>
						<div class="clearfix"></div>	
				</ul>
			</div>
		</div>
	</div>
<!-- about -->
<!-- portfolio -->
	<div class="portfolio-section" id="portfolio">
	<div class="container">
	<h2>PORTFOLIO</h2>
	<p> Ut wisi enim</p>
					<ul id="filters" class="clearfix">
							<li><span class="filter active" data-filter="app card icon web">All</span></li>
							<li><span class="filter" data-filter="app">web design</span></li>
							<li><span class="filter" data-filter="card">mobile apps</span></li>
							<li><span class="filter" data-filter="app card icon">ui design</span></li>
							<li><span class="filter" data-filter="card icon web">other</span></li>
							</ul>
		<!-- portfolio-section -->
		</div>
	 <div class="portfolio"  id="portfolio">
				<div id="portfoliolist">
					<div class="portfolio card mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							<a href="images/1.jpg" class="swipebox"  title="Image Title"> <img src="images/1.jpg" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
							
		                </div>
					</div>				
					<div class="portfolio app mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/2.jpg" class="swipebox"  title="Image Title"> <img src="images/2.jpg" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
							 
		                </div>
					</div>					
					
					<div class="portfolio app mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/3.jpg" class="swipebox"  title="Image Title"> <img src="images/3.jpg" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
							
		                </div>
					</div>						
						
					<div class="portfolio card mix_all  wow bounceIn" data-wow-delay="0.4s" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							<a href="images/4.jpg" class="swipebox"  title="Image Title"> <img src="images/4.jpg" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>										
					<div class="clearfix"></div>								
				</div>
					<div class="clearfix"></div>
    </div>
							<a href="#" class="btn  btn-1b">LOAD MORE</a>
	  <!-- Script for gallery Here -->
				<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
					<script type="text/javascript">
					$(function () {
						
						var filterList = {
						
							init: function () {
							
								// MixItUp plugin
								// http://mixitup.io
								$('#portfoliolist').mixitup({
									targetSelector: '.portfolio',
									filterSelector: '.filter',
									effects: ['fade'],
									easing: 'snap',
									// call the hover effect
									onMixEnd: filterList.hoverEffect()
								});				
							
							},
							
							hoverEffect: function () {
							
								// Simple parallax effect
								$('#portfoliolist .portfolio').hover(
									function () {
										$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
										$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
									},
									function () {
										$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
										$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
									}		
								);				
							
							}
				
						};
						
						// Run the show!
						filterList.init();
						
						
					});	
					</script>
<!-- portfolio-section  -->
</div>
<!-- portfolio -->
<!-- skills -->
	<div class="skills" id="qualification">
		<div class="container">
			<h3>skills</h3>
			<p>My ess !</p>
					<div class="skills-bottom">
						<div class="green-about">
							<div class="about-green">
								<h6>Photoshop</h6>							
								<div class="content-green">
									<div style="width:80%;" >
									</div>
								 </div>
							</div>	
							<div class="about-green">
								<h6>Ilustrator</h6>							
								<div class="content-green">
									<div style="width:40%;" >
									</div>
								 </div>
							</div>	
							<div class="about-green">
								<h6>HTML</h6>							
								<div class="content-green">
									<div style="width:60%;" >
									</div>
								 </div>
							</div>	
							<div class="about-green">
								<h6>css</h6>							
								<div class="content-green">
									<div style="width:70%;" >
									</div>
								 </div>
							</div>	
							<div class="about-green">
								<h6>Javascript</h6>							
								<div class="content-green">
									<div style="width:30%;" >
									</div>
								 </div>
							</div>
							<div class="about-green">
								<h6>PYthon</h6>							
								<div class="content-green">
									<div style="width:20%;" >
									</div>
								 </div>
							</div>
						</div>		
					</div>
					

		</div>
	</div>
<!-- skills -->
<!-- think -->
<div class="think" id="hire">
	<div class="container">
		<div class="col-md-5 think-left">
				<a href="#" class="btn1  btn-1c">HIRE ME</a>
			</div>
			<div class="col-md-7 think-right">
				<h3>If  you think </h3>
				<p>vel AFFORD feugiat</p>
			</div>
					<div class="clearfix"></div>		
	</div>
</div>
<!-- think -->
<!-- shocked -->
<div class="shocked" id="article">
	<div class="container">
		<div class="shocked-top">
			<img src="images/img1.png" class="img-responsive" alt="" />
			<h3>“I am SHOCKED !”</h3>
			<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus consuetudium lectorum.  </p>
			<a href="#contact" class="scroll""><img src="images/downarrow.png" class="img-responsive" alt="" /></a>
		</div>
	</div>
</div>
<!-- shocked -->
<!-- contuct -->
	<div class="contuct" id="contact">
		<div class="container">
			<h3>CONTACT</h3>
			<p> Duis autem vel eum  ?!vel eum iriure dolor </p>
		</div>
	</div>
<!-- contuct -->
<!-- waiting -->
	<div class="waiting">
		<div class="container">
			<div class="waiting-top">
				<div class="col-md-5 waiting-left">
					<div class="waiting-left1">
						<h4> Typi non habent </h4>
						<h3> Nam liber</h3>
					</div>
				</div>
				<div class="col-md-7 waiting-right">
					<form>
						<input type="text" class="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
					</form>	
					<div class="text2">
	                   <textarea value="Message:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message..</textarea>
					   <input type="submit" class="mybutton" value="Submit">
	              	 </div>	
				</div>
					<div class="clearfix"></div>		
			</div>
			<div class="social">
						<ul>
							<li class="blue"><a href="#"><i class="facebook"> </i></a></li>
							<li class="skyblue"><a href="#"><i class="twiter"> </i></a></li>
							<li class="pink"><a href="#"><i class="drible"> </i></a></li>
							<li class="red"><a href="#"><i class="goplus"> </i></a></li>
								<div class="clearfix"></div>	
						</ul>
					</div>
		</div>
	</div>
<!-- waiting -->
	<div class="waiting-bottom">
	</div>
<!-- footer -->
	<div class="footer">
		<div class="container">
			<p>Copyrights © 2015 Afford All rights reserved | Template by <a href="http://w3layouts.com/">W3layouts</a></p>
		</div>
	</div>
<!-- footer -->
</body>
</html>