<!--
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
版权申诉
195 浏览量
2024-03-26
09:51:36
上传
评论
收藏 924KB ZIP 举报
作品展示&图片展示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资源评论
