master

分支 (1)

管理

管理

master

2_java_kang_zhuang
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<!-- for-mobile-apps -->
<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="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- gallery -->
<link type="text/css" rel="stylesheet" href="css/cm-overlay.css" />

<!-- //gallery -->
<!-- font-awesome icons -->
<link href="css/font-awesome.css" rel="stylesheet">

<!-- //font-awesome icons -->
<link href="http://fonts.googleapis.com/css?family=Gidugu" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>

</head>

<body>
<div class="main" id="home">
<!-- banner -->
	<div class="banner">
			<!--Slider-->
			<img src="images/pic2.jpg" alt=" " class="img-responsive">
					<h2>I'M John McCoist</h2>
					<span>PROGRAMMER / WEB DEVELOPER</span>
				<div class="callbacks_container">
					<ul class="rslides" id="slider3">
						<li>

							<div class="slider-info">
								  <p>Lorem Ipsum is simply dummy text of the printing. </p>
							</div>
						</li>
						<li>
							<div class="slider-info">

								   <p>Itaque earum rerum hic tenetur a sapiente delectus</p>
						    </div>
						</li>
						<li>

							<div class="slider-info">
							<p>Lorem Ipsum is simply dummy text of the printing. </p>

							</div>
						</li>


					</ul>

			<div class="clearfix"></div>
		</div>
		<!--//Slider-->
					<ul class="top-links">
									<li><a href="#"><i class="fa fa-facebook"></i></a></li>
									<li><a href="#"><i class="fa fa-twitter"></i></a></li>
									<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
									<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
								</ul>
	</div>
<!-- //banner -->
	</div>
<!-- header -->
	<div class="w3_navigation">
		<div class="container">
			<nav class="navbar navbar-default">
				<!-- 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">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				  </button>
					<div class="logo">
						<h1><a class="navbar-brand" href="index.html"><span class="one">C</span>lassy Resume</a></h1>
					</div>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
					<nav class="cl-effect-1" id="cl-effect-1">
						<ul class="nav navbar-nav">
							<li class="active"><a class="scroll" href="index.html">Home</a></li>
							<li><a href="#about" class="scroll hvr-bounce-to-bottom">About</a></li>
							<li><a href="#services" class="scroll hvr-bounce-to-bottom">Services</a></li>
							<li><a href="#education" class="scroll hvr-bounce-to-bottom">Skills</a></li>
							<li><a href="#gallery" class="scroll hvr-bounce-to-bottom">Gallery</a></li>
							<li><a href="#mail" class="scroll hvr-bounce-to-bottom">Contact</a></li>
						</ul>
					</nav>
				</div>
				<!-- /.navbar-collapse -->
			</nav>
		</div>
	</div>
</div>
<!-- //header -->
<!-- about -->
	<div class="about" id="about">
		<div class="container">
					<h3 class="w3l_head">About Me</h3>
			<p class="w3ls_head_para">A few words about me</p>
		<div class="w3l-grids-about">
				<div class="col-md-5 w3ls-ab-right">
					<div class="agile-about-right-img">
						<img src="images/ab.jpg" alt="">
					</div>
				</div>
				<div class="col-md-7 w3ls-agile-left">
					<div class="w3ls-agile-left-info">
						<h4>Job Title</h4>
						<p>Programmer / Web Developer</p>
					</div>
					<div class="w3ls-agile-left-info">
						<h4>Name</h4>
						<p>John Mccoist</p>
					</div>
					<div class="w3ls-agile-left-info">
						<h4>Sex</h4>
						<p>Male</p>
					</div>
					<div class="w3ls-agile-left-info">
						<h4>Address</h4>
						<p> 30, Golden Street, New Castle</p>
					</div>
					<div class="w3ls-agile-left-info">
						<h4>Email Address</h4>
						<p><a href="mailto:example@email.com">mail@example.com</a></p>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
			</div>
		</div>
<!-- //about-bottom -->
<!-- services -->
<div class="service" id="services">
     <div class="container">

	 		<h3 class="w3l_head two">WHAT I DO FOR YOU</h3>
			<p class="w3ls_head_para">See My Services</p>
    <div class="service-agileits">

			<div class="col-md-4 list-gds text-center">
				<i class="fa fa-cog" aria-hidden="true"></i>
				<h4>WHY CHOOSE Me.</h4>
				<p>Nam aliquam pretium feugiat. Duis sem est, viverra eu interdum ac,
					suscipit nec mauris. Suspendisse commodo tempor sagittis</p>
			</div>
			<div class="col-md-4 list-gds text-center">
				<i class="fa fa-laptop" aria-hidden="true"></i>
				<h4>WHAT I DO. </h4>
				<p>Nam aliquam pretium feugiat. Duis sem est, viverra eu interdum ac,
					suscipit nec mauris. Suspendisse commodo tempor sagittis</p>
			</div>
				<div class="col-md-4 list-gds text-center">
				<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
				<h4>My MISSION.</h4>
				<p>Nam aliquam pretium feugiat. Duis sem est, viverra eu interdum ac,
					suscipit nec mauris. Suspendisse commodo tempor sagittis</p>
			</div>

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

	 </div>
  </div>
 </div>
<!-- //services -->
<!-- /education -->
 <div class="education" id="education">
	    <div class="col-md-6 education-w3l">
		     <h3 class="w3l_head three">My Education</h3>
			  <div class="education-agile-grids">
				  <div class="education-agile-w3l">
				     <div class="education-agile-w3l-year">
					       <h4>2014-2015</h4>
						   <h6>Master Degree</h6>
				     </div>
					 <div class="education-agile-w3l-info">
					       <h4>COMPUTER UNIVERSITY</h4>
						   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa..</p>

				     </div>
				      <div class="clearfix"></div>
				  </div>
				  <div class="education-agile-w3l two">
				     <div class="education-agile-w3l-year">
					       <h4>2010-2012</h4>
						   <h6>Master Degree</h6>
				     </div>
					 <div class="education-agile-w3l-info">
					       <h4>COMPUTER UNIVERSITY</h4>
						   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa..</p>

				     </div>
				      <div class="clearfix"></div>
				  </div>
				  <div class="education-agile-w3l">
				     <div class="education-agile-w3l-year">
					       <h4>2008-2010</h4>
						   <h6>Master Degree</h6>
				     </div>
					 <div class="education-agile-w3l-info">
					       <h4>COMPUTER UNIVERSITY</h4>
						  						   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa..</p>

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

			  </div>
		</div>
		<div class="col-md-6 skills">
		<h3 class="w3l_head two">My Skills</h3>
	     <div class="skill-agile">
						<div class='bar_group'>
						<div class='bar_group__bar thin elastic' label='HTML' value='230'></div>
						<div class='bar_group__bar thin elastic' label='Css3' value='130'></div>
						<div class='bar_group__bar thin elastic' label='Js' value='160'></div>
						<div class='bar_group__bar thin elastic' label='Php' value='340'></div>
					</div>

						</div>
		 </div>
		 <div class="clearfix"> </div>
		</div>
 <!-- //education -->
 <!-- /experience -->
 <div class="education" id="education two">
 		<div class="col-md-6 skills two">
		<h3 class="w3l_head two">More Skills</h3>
	     <div class="skill-agile">
			<div class="col-sm-4 abt-gd-left text-center">
			<div id="demo-pie-1" class="pie-title-center" data-percent="25"> <span class="pie-value"></span> </div>
			<h4>HTML</h4>
		</div>

		<div class="col-sm-4 abt-gd-left text-center">
			<div id="demo-pie-3" class="pie-title-center" data-percent="75"> <span class="pie-value"></span> </div>
			<h4>Java Script</h4>
		</div>
		<div class="col-sm-4 abt-gd-left text-center">
			<div id="demo-pie-4" class="pie-title-center" data-percent="15"> <span class="pie-value"></span> </div>
			<h4>UI/UX Designer</h4>
		</div>
		<div class="clearfix"></div>
</div>
		 </div>
	    <div class="col-md-6 education-w3l">
		     <h3 class="w3l_head three">My Experience</h3>
			  <div class="education-agile-grids">
				  <div class="education-agile-w3l">
				     <div class="education-agile-w3l-year">
					       <h4>2011-2014</h4>
						   <h6>Lorem ipsum dolor</h6>
				     </div>
					 <div class="education-agile-w3l-info">
					       <h4>Web Developer</h4>
						   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa..</p>

				     </div>
				      <div class="clearfix"></div>
				  </div>
				  <div class="education-agile-w3l two">
				     <div class="education-agile-w3l-year">
					       <h4>2012-2014</h4>
						   <h6>Lorem ipsum dolor</h6>
				     </div>
					 <div class="education-agile-w3l-info">
					       <h4>Photographer</h4>
						   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa..</p>

				     </div>
				      <div class="clearfix"></div>
				  </div>
				  <div class="education-agile-w3l">
				     <div class="education-agile-w3l-year">
					       <h4>2012-2014</h4>
						   <h6>Lorem ipsum dolor</h6>
				     </div>
					 <div class="education-agile-w3l-info">
					       <h4>GRAPHIC DESIGNER</h4>
						  						   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa..</p>

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

			  </div>
		</div>

		 <div class="clearfix"> </div>
		</div>
 <!-- //experience -->
 <!-- /gallery-->
	<div class="portfolio" id="gallery">
		<div class="container">
				<h3 class="w3l_head">My Gallery</h3>
			<p class="w3ls_head_para">See My Works</p>
				<div class="agileits_portfolio_grids">
				<div class="col-md-4 agileits_portfolio_grid">
					<div class="agileinfo_portfolio_grid hovereffect">
						<a class="cm-overlay" href="images/1.jpg">
							<img src="images/1.jpg" alt=" " class="img-responsive">
							<div class="overlay">
								<h4>Classy Resume</h4>

							</div>
						</a>
					</div>
					<div class="agileinfo_portfolio_grid hovereffect">
						<a class="cm-overlay" href="images/2.jpg">
							<img src="images/2.jpg" alt=" " class="img-responsive">
							<div class="overlay">
								<h4>Classy Resume</h4>

							</div>
						</a>
					</div>
					<div class="agileinfo_portfolio_grid hovereffect">
						<a class="cm-overlay" href="images/3.jpg">
							<img src="images/3.jpg" alt=" " class="img-responsive">
							<div class="overlay">
								<h4>Classy Resume</h4>

							</div>
						</a>
					</div>
				</div>
				<div class="col-md-4 agileits_portfolio_grid">
					<div class="agileinfo_portfolio_grid hovereffect">
						<a class="cm-overlay" href="images/4.jpg">
							<img src="images/4.jpg" alt=" " class="img-responsive">
							<div class="overlay">
								<h4>Classy Resume</h4>

							</div>
						</a>
					</div>
					<div class="agileinfo_portfolio_grid hovereffect">
						<a class="cm-overlay" href="images/5.jpg">
							<img src="images/5.jpg" alt=" " class="img-responsive">
							<div class="overlay">
								<h4>Classy Resume</h4>

							</div>
						</a>
					</div>
					<div class="agileinfo_portfolio_grid hovereffect">
						<a class="cm-overlay" href="images/6.jpg">
							<img src="images/6.jpg" alt=" " class="img-responsive">
							<div class="overlay">
								<h4>Classy Resume</h4>

							</div>
						</a>
					</div>
				</div>
				<div class="col-md-4 agileits_portfolio_grid">
					<div class="agileinfo_portfolio_grid hovereffect">
						<a class="cm-overlay" href="images/7.jpg">
							<img src="images/7.jpg" alt=" " class="img-responsive">
							<div class="overlay">
								<h4>Classy Resume</h4>

							</div>
						</a>
					</div>
					<div class="agileinfo_portfolio_grid hovereffect">
						<a class="cm-overlay" href="images/8.jpg">
							<img src="images/8.jpg" alt=" " class="img-responsive">
							<div class="overlay">
								<h4>Classy Resume</h4>

							</div>
						</a>
					</div>
					<div class="agileinfo_portfolio_grid hovereffect">
						<a class="cm-overlay" href="images/9.jpg">
							<img src="images/9.jpg" alt=" " class="img-responsive">
							<div class="overlay">
								<h4>Classy Resume</h4>

							</div>
						</a>
					</div>
				</div>

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


		</div>
	</div>
<!-- //gallery -->
<!--counter-->
<div id="counter" class="counter">
	<div class="container">
			<!--count-down -->
		<div class="count">
			<div class="col-md-3 agile_count_grid">
				<span class="glyphicon glyphicon-user" aria-hidden="true"></span>

				<h5>CLIENTS</h5>

					<p class="counter">468</p>

			</div>
			<div class="col-md-3 agile_count_grid">
				<span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span>

				<h5>PROJECTS</h5>

					<p class="counter">168</p>

			</div>
			<div class="col-md-3 agile_count_grid c3">
				<span class="glyphicon glyphicon-heart-empty" aria-hidden="true"></span>

				<h5>EXPERIENCE</h5>

					<p class="counter">12</p>

			</div>
			<div class="col-md-3 agile_count_grid c4">

					<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>

				<h5>LINES OF CODE</h5>

					<p class="counter">5008</p>


			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!--counter-->
<!-- mail -->
	<div class="mail" id="mail">
		<div class="container">
			<h3 class="w3l_head w3l_head1">Contact Me</h3>
			<p class="w3ls_head_para w3ls_head_para1">send Me a message</p>
			<div class="w3_mail_grids">
				<form action="#" method="post">
					<div class="col-md-6 w3_agile_mail_grid">
						<span class="input input--ichiro">
							<input class="input__field input__field--ichiro" type="text" id="input-25" placeholder=" " required="">
							<label class="input__label input__label--ichiro" for="input-25">
								<span class="input__label-content input__label-content--ichiro">Your Name</span>
							</label>
						</span>
						<span class="input input--ichiro">
							<input class="input__field input__field--ichiro" type="email" id="input-26" placeholder=" " required="">
							<label class="input__label input__label--ichiro" for="input-26">
								<span class="input__label-content input__label-content--ichiro">Your Email</span>
							</label>
						</span>
						<span class="input input--ichiro">
							<input class="input__field input__field--ichiro" type="text" id="input-27" placeholder=" " required="">
							<label class="input__label input__label--ichiro" for="input-27">
								<span class="input__label-content input__label-content--ichiro">Your Phone Number</span>
							</label>
						</span>

					</div>
					<div class="col-md-6 w3_agile_mail_grid">
						<textarea name="Message" placeholder="Your Message" required=""></textarea>
						<input type="submit" value="Submit">
					</div>
					<div class="clearfix"> </div>
				</form>
			</div>
		</div>
	</div>

<!-- //mail -->
<!-- footer -->
	<div class="w3l_footer">
		<div class="container">

			<div class="w3ls_footer_grids">

				<div class="w3ls_footer_grid">
					<div class="col-md-4 w3ls_footer_grid_left">
						<div class="w3ls_footer_grid_leftl">
							<i class="fa fa-map-marker" aria-hidden="true"></i>
						</div>
						<div class="w3ls_footer_grid_leftr">
							<h4>Location</h4>
							<p>3030 New York, NY, USA</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="col-md-4 w3ls_footer_grid_left">
						<div class="w3ls_footer_grid_leftl">
							<i class="fa fa-envelope" aria-hidden="true"></i>
						</div>
						<div class="w3ls_footer_grid_leftr">
							<h4>Email</h4>
							<a href="mailto:info@example.com">info@example.com</a>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="col-md-4 w3ls_footer_grid_left">
						<div class="w3ls_footer_grid_leftl">
							<i class="fa fa-phone" aria-hidden="true"></i>
						</div>
						<div class="w3ls_footer_grid_leftr">
							<h4>Call Me</h4>
							<p>(+000) 003 003 0052</p>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="w3l_footer_pos">
			<p>Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
		</div>
	</div>
<!-- //footer -->
<script src="js/jquery-2.2.3.min.js"></script>
<!-- skills -->
<script src="js/pie-chart.js" type="text/javascript"></script>
 <script type="text/javascript">

        $(document).ready(function () {
            $('#demo-pie-1').pieChart({
                barColor: '#44c7f4',
                trackColor: '#fff',
                lineCap: 'round',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });

            $('#demo-pie-2').pieChart({
                barColor: '#44c7f4',
                trackColor: '#fff',
                lineCap: 'butt',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });

            $('#demo-pie-3').pieChart({
                barColor: '#44c7f4',
                trackColor: '#fff',
                lineCap: 'square',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });

			$('#demo-pie-4').pieChart({
                barColor: '#44c7f4',
                trackColor: '#fff',
                lineCap: 'square',
                lineWidth: 8,
                onStep: function (from, to, percent) {
                    $(this.element).find('.pie-value').text(Math.round(percent) + '%');
                }
            });
        });
    </script>
<!-- skills -->
						<script src="js/responsiveslides.min.js"></script>
							<script>
								// You can also use "$(window).load(function() {"
								$(function () {
								  // Slideshow 4
								  $("#slider3").responsiveSlides({
									auto: true,
									pager:true,
									nav:false,
									speed: 500,
									namespace: "callbacks",
									before: function () {
									  $('.events').append("<li>before event fired.</li>");
									},
									after: function () {
									  $('.events').append("<li>after event fired.</li>");
									}
								  });

								});
							 </script>
							 <!-- js -->
				<script src="js/jquery.tools.min.js"></script>
				<script src="js/jquery.mobile.custom.min.js"></script>
				<script src="js/jquery.cm-overlay.js"></script>
				<script>
					$(document).ready(function(){
						$('.cm-overlay').cmOverlay();
					});
				</script>
<!-- js files -->


<script src="js/bars.js"></script>

<!-- start-smoth-scrolling -->
<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 -->

<!-- //js -->
	<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
<!-- 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 -->
</body>
</html>