简洁风格的个人技能展示网页模板下载



21 83 28



模板描述:简洁风格 个人技能展示 模板下载,简洁风格的个人技能展示网页模板下载html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/swipebox.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/jquery.swipebox.min.js"></script>
<script type="text/javascript" src="js/jquery.flexisel.js"></script>

3. HTML代码

<!-- header -->
	<div class="banner">
		<div class="container">
			<div class="logo">
				<h1><a href="index.html">RECOUP</a></h1>
			</div>	
			<div class="banner-info">
				<h2>Hi,I am Johnson</h2>
				<h3>There are many variations of passages</h3>
			</div>
		</div>
	</div>
<!-- header -->
<!-- about -->
				<div class="scroll">
					<a href="#contact" class="scroll"><img src="images/down.png" class="img-responsive" alt=""></a>
				</div>
	<div class="about">
		<div class="container">
			<h3>My skills</h3>
			<div class="study2">
			<div class="col-md-6 about-left">
						<h4>html</h4>
							<div class="progress">
							  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
								<span class="sr-only">40% Complete (success)</span>
							  </div>
							</div>
						<h4>css</h4>
						<div class="progress">
						  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
							<span class="sr-only">20% Complete</span>
						  </div>
						</div>
						<h4>js</h4>
						<div class="progress">
						  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
							<span class="sr-only">30% Complete (warning)</span>
						  </div>
						</div>
						<h4>php</h4>
						<div class="progress">
						  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
							<span class="sr-only">50% Complete (danger)</span>
						  </div>
						</div>
					</div>
					<div class="col-md-6 about-right">
						<h4>illustrate</h4>
						<div class="progress">
						  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
							<span class="sr-only">70% Complete (danger)</span>
						  </div>
						</div>
						<h4>print</h4>
						<div class="progress">
						  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
							<span class="sr-only">60% Complete (danger)</span>
						  </div>
						</div>
						<h4>photoshop</h4>
						<div class="progress">
						  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%">
							<span class="sr-only">90% Complete (danger)</span>
						  </div>
						</div>
						<h4>media</h4>
							<div class="progress">
							  <div class="progress-bar progress-bar-danger-3" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
								<span class="sr-only">75% Complete (success)</span>
							  </div>
							</div>
					</div>
		</div>
	</div>
	</div>
<!-- about -->
<!-- services -->
	<div class="services">
		<div class="container">
			<h3>Services</h3>
			<div class="service-grids">
							<div class="col-md-4 service-grid">
									<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
								<h4>THE BEST DESIGN</h4>
								<span> </span>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem Ipsum passages containing of Letraset sheets</p>
							</div>
							<div class="col-md-4 service-grid">
								<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
								<h4>THE BEST SUPPORT</h4>
								<span> </span>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem Ipsum passages containing of Letraset sheets</p>
							</div>
							<div class="col-md-4 service-grid">
								<span class="glyphicon glyphicon-bullhorn" aria-hidden="true"></span>
								<h4>THE BEST SOLUTIONS</h4>
								<span> </span>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem Ipsum passages containing of Letraset sheets</p>
							</div>
							<div class="col-md-4 service-grid">
								<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
								<h4>THE BEST SOLUTIONS</h4>
								<span> </span>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem Ipsum passages containing of Letraset sheets</p>
							</div>
							<div class="col-md-4 service-grid">
								<span class="glyphicon glyphicon-globe" aria-hidden="true"></span>
								<h4>THE BEST SOLUTIONS</h4>
								<span> </span>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem Ipsum passages containing of Letraset sheets</p>
							</div>
							<div class="col-md-4 service-grid">
								<span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>
								<h4>THE BEST SOLUTIONS</h4>
								<span> </span>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod Lorem Ipsum passages containing of Letraset sheets</p>
							</div>
							<div class="clearfix"> </div>
						</div>
		</div>
	</div>
<!-- services -->
<!-- portfolio -->
	<div class="gallery">
		<div class="container">
			<h3>Portfolio</h3>
			<div class="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/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="app" 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 icon 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/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="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/5.JPG" class="swipebox"  title="Image Title"> <img src="images/5.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/6.JPG" class="swipebox"  title="Image Title"> <img src="images/6.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/7.JPG" class="swipebox"  title="Image Title"> <img src="images/7.JPG" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>	
					<div class="portfolio icon 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/13.JPG" class="swipebox"  title="Image Title"> <img src="images/13.JPG" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
						</div>
					<div class="portfolio logos mix_all wow bounceIn" data-wow-delay="0.4s" data-cat="logos" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper grid_box">		
							 <a href="images/14.JPG" class="swipebox"  title="Image Title"> <img src="images/14.JPG" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		                </div>
					</div>
				<div class="clearfix"></div>					
				</div>
		  <div class="clearfix"></div>
			</div>
		</div>
	</div>
<!-- portfolio -->	
<!-- client -->
	<div class="client">
		<div class="container">
			<h3>Clients</h3>
			<div class="nbs-flexisel-container"><div class="nbs-flexisel-inner"><ul id="flexiselDemo1" class="nbs-flexisel-ul" style="left: -228px; display: block;">			
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/5.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/2.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/3.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/4.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/6.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/7.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/5.png" alt=" " class="img-responsive">
						</div>
					</li>
					<li class="nbs-flexisel-item" style="width: 300px;">
						<div class="sliderfig-grid">
							<img src="images/1.png" alt=" " class="img-responsive">
						</div>
					</li>
					</ul>
					<div class="nbs-flexisel-nav-left" style="top: 27.5px;"></div><div class="nbs-flexisel-nav-right" style="top: 27.5px;"></div></div></div>
					<script type="text/javascript">
							$(window).load(function() {
								$("#flexiselDemo1").flexisel({
									visibleItems: 7,
									animationSpeed: 1000,
									autoPlay: true,
									autoPlaySpeed: 3000,    		
									pauseOnHover: true,
									enableResponsiveBreakpoints: true,
									responsiveBreakpoints: { 
										portrait: { 
											changePoint:480,
											visibleItems: 2
										}, 
										landscape: { 
											changePoint:640,
											visibleItems:3
										},
										tablet: { 
											changePoint:768,
											visibleItems: 3
										}
									}
								});
							});
					</script>
		</div>
	</div>
<!-- client -->
<!-- contact -->
	<div class="contact" id="contact">
		<div class="container">
			<h3>Contact</h3>
			<div class="footer-left">
				<li><i class="add"> </i>lorem ipsum</li>
				<li><i class="phone"> </i>1234567890</li>
				<li><a href="mailto:info@example.com"><i class="mail"> </i>info@sitename.com </a></li>
			<div class="soci">
					<ul>
						<li><a href="#"><i class="facebk"> </i></a></li>
						<li><a href="#"><i class="twter"> </i></a></li>
						<li><a href="#"><i class="goopl"> </i></a></li>
						<li><a href="#"><i class="insta"> </i></a></li>
							<div class="clearfix"></div>	
					</ul>
			</div>
			</div>
			<div class="co-ntact">
				  <form method="post" action="contact-post.html">
					<div class="to">
                     	<input type="text" class="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
					 	<input type="text" class="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
					 	<input type="text" class="text" value="Subject" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Subject';}">
					</div>
					<div class="text">
	                   <textarea value="Message" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
	                   <div class="form-submit">
			           <input name="submit" type="submit" id="submit" value="Submit"><br>
			           </div>
	                </div>
	                <div class="clearfix"></div>
                   </form>
			</div>
		</div>
		<div class="map">
			</div>
			<p>Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://www.51qianduan.com//moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
	</div>
	<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 0;"></span> <span id="toTopHover" style="opacity: 0;"> </span></a>
<!-- contact -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 分类 响应式 自适应 设备 风格 颜色 bootstrap bootstrap自适应 bootstrap响应式 蓝色 pc+wap 移动+电脑 手机+电脑 精美 大气 霸气 其他页 其他站

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到