<!--
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>The Webfolio Template | Home :: w3layouts</title>
<link href="./css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Rambla' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fauna+One' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!----click-top---->
<script type="text/javascript" src="./js/move-top.js"></script>
<script type="text/javascript" src="./js/easing.js"></script>
<!----//click-top---->
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
});
});
</script>
</head>
<body>
<div class="wrap">
<!---header--->
<div class="header">
<div class="logo">
<a href="index.html"><img src="./images/logo.png" alt=""/></a>
</div>
<div class="nav">
<ul>
<li class="active"><a href="index.html">HOME</a> </li>
<li><a href="#aboutme" class="scroll">ABOUTME</a></li>
<li><a href="#works" class="scroll">WORKS</a> </li>
<li><a href="#resume" class="scroll">RESUME</a> </li>
<div class="clear"> </div>
</ul>
</div>
<div class="clear"> </div>
</div>
<!---banner--->
<div class="banner" id="aboutme">
<img src="./images/quote.png" alt=""/>
<p>We also provide custom design and development to create a website that fits your exact needs. Get in touch for a quote!</p>
</div>
<img src="./images/line.png" alt=""/>
<!---content--->
<div class="content" id="works">
<div class="gallery">
<h2>Portfolio</h2>
<div class="section group">
<div class="grid_1_of_4 images_1_of_4">
<a href="single.html"><img src="./images/img1.jpg"></a>
</div>
<div class="grid_1_of_4 images_1_of_4">
<a href="single.html"><img src="./images/img2.jpg"></a>
</div>
<div class="grid_1_of_4 images_1_of_4">
<a href="single.html"><img src="./images/img3.jpg"></a>
</div>
<div class="grid_1_of_4 images_1_of_4">
<a href="single.html"><img src="./images/img4.jpg"></a>
</div>
</div>
<div class="section group">
<div class="grid_1_of_4 images_1_of_4">
<a href="single.html"><img src="./images/img5.jpg"></a>
</div>
<div class="grid_1_of_4 images_1_of_4">
<a href="single.html"><img src="./images/img6.jpg"></a>
</div>
<div class="grid_1_of_4 images_1_of_4">
<a href="single.html"><img src="./images/img7.jpg"></a>
</div>
<div class="grid_1_of_4 images_1_of_4">
<a href="single.html"><img src="./images/img8.jpg"></a>
</div>
</div>
<div class="section group">
<div class="grid_1_of_4 images_1_of_4">
<a href="single.html"><img src="./images/img9.jpg"></a>
</div>
<div class="grid_1_of_4 images_1_of_4">
<a href="single.html"><img src="./images/img10.jpg"></a>
</div>
<div class="grid_1_of_4 images_1_of_4">
<a href="single.html"><img src="./images/img11.jpg"></a>
</div>
<div class="grid_1_of_4 images_1_of_4">
<a href="single.html"><img src="./images/img12.jpg"></a>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
</div>
<!---footer-top--->
<div class="footer-top" id="resume">
<div class="wrap">
<div class="grid">
<div class="grid1">
<div class="img">
<a href="#"><img src="./images/avat1.png" alt=""/></a>
</div>
<div class="data">
<h3>Lorem Ipsum</h3>
<p><img src="./images/location.png" alt=""/> Lorem, Ipsum</p>
</div>
<div class="clear"></div>
</div>
<div class="grid2">
<ul>
<li><a href="#"><img src="./images/twitter.png" alt=""/></a></li>
<li><a href="#"><img src="./images/web.png" alt=""/></a></li>
</ul>
</div>
<div class="clear"> </div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at lectus ac purus accumsan sagittis ut vel sem. Duis eu lorem massa, ut eleifend felis. Duis sit amet lacus velit consectetur adipiscing elit. In at lectus ac purus accumsan sagittis ut vel sem Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at lectus ac purus accumsan sagittis ut vel sem. Duis eu lorem massa, ut eleifend felis. Duis sit amet lacus velit consectetur adipiscing elit. In at lectus ac purus accumsan sagittis ut vel sem</p>
</div>
<div class="grid3">
<div class="skills">
<h3>My Skills</h3>
<ul>
<li>
<div class="clearfix">
<p class="downloading">Ps</p>
<div class="progress">
<div class="progress-bar" style="width:90%"></div>
</div>
</div>
</li>
<li>
<div class="clearfix">
<p class="downloading">Ai</p>
<div class="progress">
<div class="progress-bar" style="width:80%"> </div>
</div>
</div>
</li>
<li>
<div class="clearfix">
<p class="downloading">Bs</p>
<div class="progress">
<div class="progress-bar" style="width:95%"> </div>
</div>
</div>
</li>
<li>
<div class="clearfix">
<p class="downloading">Cs</p>
<div class="progress">
<div class="progress-bar" style="width:75%"> </div>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<!---footer-bottom--->
<div class="footer-bottom">
<div class="wrap">
<p>Copyright 2014 WebFolio Template by <a href="http://w3layouts.com">w3layouts</a></p>
<a href="#" id="toTop"><span id="toTopHover"></span></a>
<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>
</div>
</div>
</body>
</html>
作品展示&图片展示HTML源码-设计作品图片列表网页模板.zip （86个子文件） 
作品展示&图片展示HTML源码-设计作品图片列表网页模板 html mobile css 
style.css 6KB
index.html 6KB single.html 3KB images 
skill1.png 215B
img6.jpg 12KB logo.png 3KB img2.jpg 21KB quote.png 515B img5.jpg 20KB line.png 12KB img10.jpg 21KB img11.jpg 18KB skill4.png 215B img4.jpg 18KB web.png 1KB twitter.png 767B img1.jpg 16KB img7.jpg 18KB img3.jpg 19KB img8.jpg 16KB location.png 419B skill2.png 215B skill3.png 215B avat1.png 1KB img12.jpg 18KB single.jpg 52KB img9.jpg 17KB smartphone js jquery.min.js 90KB css style.css 7KB index.html 6KB single.html 3KB images skill1.png 215B img6.jpg 12KB logo.png 3KB img2.jpg 21KB quote.png 515B img5.jpg 20KB line.png 12KB img10.jpg 21KB img11.jpg 18KB skill4.png 215B img4.jpg 18KB web.png 1KB twitter.png 767B img1.jpg 16KB img7.jpg 18KB img3.jpg 19KB img8.jpg 16KB location.png 419B skill2.png 215B skill3.png 215B avat1.png 2KB img12.jpg 18KB single.jpg 52KB img9.jpg 17KB web js easing.js 5KB move-top.js 1KB jquery.min.js 90KB css style.css 10KB index.html 8KB single.html 4KB images skill1.png 215B img6.jpg 26KB logo.png 3KB img2.jpg 24KB quote.png 555B img5.jpg 19KB line.png 14KB img10.jpg 20KB img11.jpg 20KB skill4.png 215B img4.jpg 18KB web.png 1KB twitter.png 1022B img1.jpg 24KB img7.jpg 21KB img3.jpg 12KB img8.jpg 21KB location.png 419B top.png 1KB skill2.png 215B skill3.png 215B avat1.png 3KB img12.jpg 17KB single.jpg 52KB img9.jpg 18KB资源评论
DTcode7
- 粉丝: 3w+
- 资源: 4986
最新资源
- 基于java的疗养院管理系统设计与实现.docx
- 基于java的旅游管理系统设计与实现.docx
- 基于java的人事管理系统设计与实现.docx
- 基于java的青年公寓服务平台设计与实现.docx
- 基于java的企业员工薪酬关系系统设计与实现.docx
- 西门子S7-300博途植物萃取饮料生产线控制系统程序案例，编程软件采用博途STEP7加博途WINCC RT Pro 内有CAD工艺流程图和PDF版电气图供参考 博图版本V15.1及以上23
- 基于java的失物招领平台设计与实现.docx
- 基于java的社区养老服务系统设计与实现.docx
- 基于java的乡政府管理系统设计与实现.docx
- 基于java的小区团购管理系统设计与实现.docx
- 基于java的校园资产管理系统设计与实现.docx
- 基于java的小学生身体素质测评管理系统设计与实现.docx
- 基于java的信息技术知识赛系统设计与实现.docx
- 基于java的疫情管理系统设计与实现.docx
- 基于java的学生网上选课系统设计与实现.docx
- 基于java的在线互动学习网站设计与实现.docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
