index.html

<!--
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 lang="en">

<head>
	<title>Apt Resume a Personal Category Bootstrap Responsive website Template | Home :: w3layouts</title>
	<!-- Meta Tags -->
	<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="Apt Resume Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, Sony Ericsson, Motorola web design" />
	<script type="application/x-javascript">
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<!-- //Meta Tags -->
	<!-- Style Sheets -->
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
	<link href="css/font-awesome.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
	<!-- //Style Sheets -->
	<!--web-fonts-->
	<link href="//fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700" rel="stylesheet">
	<link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
	<!--//web-fonts-->
</head>

<body>
	<!-- banner -->
	<div class="banner" id="home">
		<div class="container">
			<!-- header -->
			<header>

				<div class="header-bottom-agileits">
					<div class="w3-logo">
						<h1><a href="index.html">Apt Resume<span class="sub-logo">Apt Resume</span></a></h1>
					</div>
					<!-- navigation -->
					<nav class="navbar navbar-default shift">
						<!-- Brand and toggle get grouped for better mobile display -->
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
							    aria-expanded="false">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				  </button>

						</div>

						<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav">
								<li><a class="active" href="index.html">Home</a></li>
								<li><a class="scroll" href="#about">About</a></li>
								<li><a class="scroll" href="#skills">Skills</a></li>
								<li><a class="scroll" href="#portfolio">Portfolio</a></li>
								<li><a class="scroll" href="#contact">Contact</a></li>
							</ul>

						</div>
						<!-- /.navbar-collapse -->

					</nav>
				</div>
				<div class="clearfix"></div>
				<!-- //navigation -->
			</header>
			<!-- //header -->
			<div class="banner-text-w3-agileits">
				<h5>Hi, I'm</h5>
				<h2><span>AA</span>mod <span>G</span>okhale</h2>
				<p>Web Designer & Director</p>
				<div class="botton">
					<a href="#about" class="scroll">About me <span class="fa fa-caret-right"></span></a>
				</div>
			</div>
		</div>
	</div>
	<!-- //banner -->
	<!--about-->
	<div class="about-w3layouts" id="about">
		<div class="container">
			<div class="tittle-agileinfo">
				<div class="title-wthree">
					<h5 class="title-w3"><span>01</span>About Me</h5>
					<div class="clearfix"></div>
				</div>
				<div class="about-top">
					<h3 class="subheading-agileits-w3layouts">Some words about me</h3>
					<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis tristique est, et egestas odio. Mauris ac tristique
						arcu, sed interdum risus. </p>
				</div>
			</div>
			<div class="col-md-4 about-left-agileits">
				<div class="services-grids social">
					<a class="fa fa-delicious" aria-hidden="true"></a>
					<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					<div class="clearfix"></div>
					<h6>Logo Design</h6>
				</div>
				<div class="services-grids">
					<a class="fa fa-globe" aria-hidden="true"></a>
					<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					<h6>Website</h6>
				</div>
				<div class="services-grids">
					<a class="fa fa-desktop" aria-hidden="true"></a>
					<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					<h6>Softwares</h6>
				</div>
				<div class="services-grids">
					<a class="fa fa-mobile" aria-hidden="true"></a>
					<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
					<h6>Applications</h6>
				</div>
				<div class="clearfix"></div>
			</div>

			<div class="col-md-8 about-right">
				<div class="about-border-w3ls">
				</div>
				<div class="person-info-agileits-w3layouts">
					<p class="para-agileits-w3layouts"><span>Hi!, Iam James Martin </span>Nam arcu mauris, tincidunt sed convallis non, egestas ut lacus. Cras sapien urna,
						malesuada ut varius consequat, hendrerit nisl. Aliquam vestibulum, odio non ullamcorper malesuada.Nam arcu mauris,
						tincidunt sed convallis non, egestas ut lacus.</p>
					<ul>
						<li><span>Name</span>: Steve Martin</li>
						<li><span>Age</span>: 29 Years</li>
						<li><span>Experience</span>: +8 Years</li>
						<li><span>Email</span>: <a href="mailto:info@example.com">info@example.com</a></li>
						<li><span>Phone</span>: (012) 345 6789</li>
						<li><span>Website</span>: <a href="#">www.mywebsite.com</a></li>
						<li><span>Address</span>: 27 Nether Street, Finchley, UK</li>
						<li><a href="#" class="botton-w3ls">Download CV</a>
						</li>
					</ul>
					<div class="clearfix"></div>

					<div class="pos-w3ls">
						<h4><span class="red-w3ls">Get</span> in touch</h4>
						<div class="button-w3layouts"><a href="#contact" class="scroll">Contact Me</a></div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!--//about-->
	<!--education-->
	<div class="display-w3lsagile">
		<div class="col-md-7 col-sm-7 edu-img-agileits">
		</div>
		<div class="col-md-5 col-sm-5 display-grid-w3lsagile display-grid-1-w3lsagile">

			<!-- Scrolling-Articles -->
			<div class="activity_box agileits w3layouts">
				<div class="title-wthree">
					<h5 class="title-w3"><span>02</span>Education</h5>
					<div class="clearfix"></div>
				</div>
				<div class="scrollbar agileits w3layouts" id="style-2">
					<div class="activity-row agileits w3layouts">
						<div class="activity-img agileits w3layouts">
							<h6>2003-2007</h6>
						</div>
						<div class="activity-desc agileits w3layouts">
							<h5>University Name</h5>
							<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec congue risus. In non nulla lacus. Maecenas
								eros sapien, eleifend quis augue eu, pellentesque tincidunt tellus.</p>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="activity-row agileits w3layouts">
						<div class="activity-img agileits w3layouts">
							<h6>2001-2003</h6>
						</div>
						<div class="activity-desc agileits w3layouts">
							<h5>College Name</h5>
							<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec congue risus. In non nulla lacus. Maecenas
								eros sapien, eleifend quis augue eu, pellentesque tincidunt tellus.</p>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<!-- //Scrolling-Articles -->

		</div>
		<div class="clearfix"></div>
	</div>
	<!--//education-->
	<!--experience-->
	<div class="display-w3lsagile">
		<div class="col-md-7 col-sm-7 exp-img-agileits">
		</div>
		<div class="col-md-5 col-sm-5 display-grid-w3lsagile display-grid-1-w3lsagile">

			<!-- Scrolling-Articles -->
			<div class="activity_box agileits w3layouts">
				<div class="title-wthree work_box">
					<h5 class="title-w3"><span>03</span>Work Experience</h5>
					<div class="clearfix"></div>
				</div>
				<div class="scrollbar agileits w3layouts" id="style-1">
					<div class="activity-row agileits w3layouts">
						<div class="activity-img agileits w3layouts">
							<h6>2016-present</h6>
						</div>
						<div class="activity-desc agileits w3layouts">
							<h5>Lorem Ipsum</h5>
							<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec congue risus. In non nulla lacus. Maecenas
								eros sapien, eleifend quis augue eu, pellentesque tincidunt tellus.</p>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="activity-row agileits w3layouts">
						<div class="activity-img agileits w3layouts">
							<h6>2014-2016</h6>
						</div>
						<div class="activity-desc agileits w3layouts">
							<h5>Dolores</h5>
							<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec congue risus. In non nulla lacus. Maecenas
								eros sapien, eleifend quis augue eu, pellentesque tincidunt tellus.</p>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="activity-row agileits w3layouts">
						<div class="activity-img agileits w3layouts">
							<h6>2012-2014</h6>
						</div>
						<div class="activity-desc agileits w3layouts">
							<h5>Sitamet</h5>
							<p class="para-agileits-w3layouts">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
						</div>
						<div class="clearfix"></div>
					</div>
					<div class="activity-row agileits w3layouts">
						<div class="activity-img agileits w3layouts">
							<h6>2008-2011</h6>
						</div>
						<div class="activity-desc agileits w3layouts">
							<h5>Consectetur</h5>
							<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec congue risus. In non nulla lacus. Maecenas
								eros sapien, eleifend quis augue eu, pellentesque tincidunt tellus.</p>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<!-- //Scrolling-Articles -->

		</div>
		<div class="clearfix"></div>
	</div>
	<!--//experience-->
	<!-- awards and skills -->
	<div class="awards-bg-agile" id="skills">
		<div class="container">
			<div class="col-md-6 awards-agileits-w3layouts">
				<div class="title-wthree">
					<h5 class="title-w3"><span>04</span>Awards</h5>
					<div class="clearfix"></div>
				</div>
				<div class="w3_agileits_services_grids">
					<div class="col-md-3 w3_agileits_services_grid">
						<div class="w3_agileits_services_grid_agile">
							<div class="w3_agileits_services_grid_1 i1">
								<a class="fa fa-bookmark-o" aria-hidden="true"></a>
							</div>
							<h3>Best Logo Design</h3>
							<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
					</div>
					<div class="col-md-3 w3_agileits_services_grid">
						<div class="w3_agileits_services_grid_agile">
							<div class="w3_agileits_services_grid_1 i2">
								<a class="fa fa-television" aria-hidden="true"></a>
							</div>
							<h3>The Web Awards</h3>
							<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
					</div>
					<div class="col-md-3 w3_agileits_services_grid hvr-overline-from-center">
						<div class="w3_agileits_services_grid_agile">
							<div class="w3_agileits_services_grid_1 i3">
								<a class="fa fa-magic" aria-hidden="true"></a>
							</div>
							<h3>Red Dot Award</h3>
							<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
					</div>
					<div class="col-md-3 w3_agileits_services_grid">
						<div class="w3_agileits_services_grid_agile">
							<div class="w3_agileits_services_grid_1 i4">
								<a class="fa fa-trophy" aria-hidden="true"></a>
							</div>
							<h3>Prime Gold Award</h3>
							<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="col-md-6 skills-w3layouts">
				<div class="title-wthree">
					<h5 class="title-w3"><span>05</span>Skills</h5>
					<div class="clearfix"></div>
				</div>
				<div class="skill-main-agileits">
					<p class="p1">95%</p>
					<h4>Adobe Photoshop</h4>
				</div>
				<div class="skill-main-agileits">
					<p class="p2">86%</p>
					<h4>Adobe Illustrator</h4>
				</div>
				<div class="skill-main-agileits">
					<p class="p3">72%</p>
					<h4>Adobe InDesign</h4>
				</div>
				<div class="skill-main-agileits">
					<p class="p4">82%</p>
					<h4>Graphic Design</h4>
				</div>
				<div class="skill-main-agileits">
					<p class="p5">65%</p>
					<h4>Corel Draw</h4>
				</div>
				<div class="skill-main-agileits">
					<p class="p6">93%</p>
					<h4>Typography</h4>
				</div>
			</div>
		</div>
	</div>
	<!-- //awards and skills -->
	<!-- language -->
	<div class="language-skills">
		<div class="container">
			<div class="col-md-6 lang-left-w3-agile">
				<div class="title-wthree">
					<h5 class="title-w3">Language Skills</h5>
					<div class="clearfix"></div>
				</div>
				<p class="para-agileits-w3layouts">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec congue risus. In non nulla lacus. Maecenas
					eros sapien, eleifend quis augue eu, pellentesque tincidunt tellus</p>
			</div>
			<div class="col-md-6 w3l_about_bottom_grid_right bar-grids">
				<h6>English<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>Dutch<span> 85% </span></h6>
					<div class="progress">
						<div class="progress-bar progress-bar-striped active" style="width: 85%">
						</div>
					</div>
				</div>
				<h6>Hindi<span>67% </span></h6>
				<div class="progress">
					<div class="progress-bar progress-bar-striped active" style="width: 67%">
					</div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!-- //language -->
	<!-- gallery -->
	<div class="gallery" id="portfolio">
		<div class="container">
			<div class="title-wthree">
				<h5 class="title-w3"><span>07</span>Portfolio</h5>
				<div class="clearfix"></div>
			</div>
			<div class="w3ls_gallery_grids">
				<div class="col-md-4 w3_agile_gallery_grid">
					<div class="agile_gallery_grid">
						<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/1.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/1.jpg" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
					<div class="agile_gallery_grid">
						<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/2.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/2.jpg" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
					<div class="agile_gallery_grid">
						<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/3.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/3.jpg" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-4 w3_agile_gallery_grid">
					<div class="agile_gallery_grid">
						<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/4.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/4.jpg" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
					<div class="agile_gallery_grid">
						<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/5.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/5.jpg" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
					<div class="agile_gallery_grid">
						<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/6.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/6.jpg" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
				</div>
				<div class="col-md-4 w3_agile_gallery_grid">
					<div class="agile_gallery_grid">
						<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/7.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/7.jpg" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
					<div class="agile_gallery_grid">
						<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/8.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/8.jpg" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
					<div class="agile_gallery_grid">
						<a title="Donec sapien massa, placerat ac sodales ac, feugiat quis est." href="images/9.jpg">
							<div class="agile_gallery_grid1">
								<img src="images/9.jpg" alt=" " class="img-responsive" />
							</div>
						</a>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!-- //gallery -->

	<!-- footer -->

	<!-- contact -->
	<div class="contact-agileits-w3layouts" id="contact">
		<div class="contact-right-wthree">
			<div class="container">
				<div class="title-wthree">
					<h5 class="title-w3"><span>08</span>Contact Me</h5>
					<div class="clearfix"></div>
				</div>
				<div class="address-w3layouts">
					<p class="para-agileits-w3layouts">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet</p>
					<h4><a href="mailto:info@example.com">info@example.com</a></h4>
					<h6>0 123 456 789</h6>
					<p class="para-agileits-w3layouts">27 Nether Street, Finchley, London N12 7NN, United Kingdom</p>
				</div>
				<div class="botttom-nav-agileits">
					<div class="w3l-social">
						<ul>
							<li><a href="#" class="fa fa-facebook"></a></li>
							<li><a href="#" class="fa fa-twitter"></a></li>
							<li><a href="#" class="fa fa-google-plus"></a></li>
						</ul>
					</div>
				</div>
				<div class="clearfix"> </div>

			</div>
		</div>
		<div class="wthree-form">
			<div class="container">
				<div class="col-md-6 contact-form agile_inner_grids">
					<h5 class="title-w3">Say Hello</h5>
					<form action="#" method="post">
						<div class="fields-grid">
							<div class="styled-input">
								<input type="text" name="Full Name" placeholder="Name" required="">
							</div>
							<div class="styled-input">
								<input type="email" name="Email" placeholder="Email" required="">
							</div>
							<div class="styled-input">
								<input type="text" name="Subject" placeholder="Subject" required="">
							</div>
							<div class="clearfix"> </div>
						</div>
						<div class="styled-input textarea-grid">
							<textarea name="Message" placeholder="Message" required=""></textarea>
						</div>
						<input type="submit" value="Send">
					</form>
				</div>
				<div class="col-md-6 map-w3-agileits">
					<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2477.523147399147!2d-0.18136368416846532!3d51.61362537965271!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487619e5c86f6147%3A0x7f009116a7f24760!2sNether+Street+Apartment!5e0!3m2!1sen!2sin!4v1501221607097"></iframe>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //contact -->
	<!-- Footer -->
	<div class="copyright-wthree">
		<div class="container">
			<p>&copy; 2017 Apt Resume . All Rights Reserved | Design by <a href="http://w3layouts.com/"> W3layouts </a></p>
		</div>
	</div>
	<!-- //Footer -->

	<a href="#home" class="scroll" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	<!-- //smooth scrolling -->
	<script type='text/javascript' src='js/jquery-2.2.3.min.js'></script>
	<!-- start-smoth-scrolling -->
	<!--gallery -->
	<script src="js/jquery.chocolat.js"></script>
	<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen">
	<!--light-box-files -->
	<script type="text/javascript">
		$(function () {
			$('.w3_agile_gallery_grid a').Chocolat();
		});
	</script>
	<!-- //gallery -->
	<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
				}, 1000);
			});
		});
	</script>
	<!-- start-smoth-scrolling -->
	<!-- here stars scrolling icon -->
	<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>
	<!-- //here ends scrolling icon -->
	<!--js for bootstrap working-->
	<script src="js/bootstrap.js"></script>
	<!-- //for bootstrap working -->
</body>

</html>