<!--A Design by W3layouts
Author: W3layout
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>Portfolic a Personal Portfolio Category Flat Bootstarp Responsive Website Template | Home :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<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="Portfolic Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'><!--//fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<!-- slide -->
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 1
$("#slider1").responsiveSlides({
auto: true,
nav: true,
speed: 500,
namespace: "callbacks",
pager: true,
});
});
</script>
</head>
<body>
<!--header-->
<div class="header">
<div class="header-top">
<div class="container">
<div class="top-nav">
<span class="menu"> </span>
<ul>
<li class="active" ><a href="index.html" >Home </a> </li>
<li><a href="about.html" data-hover="About" > About </a></li>
<li><a href="404.html" data-hover=" Archives"> Archives </a></li>
<li><a href="blog.html" data-hover="Blog"> Blog</a></li>
<li><a href="contact.html" data-hover="Contact">Contact </a></li>
</ul>
<!--script-->
<script>
$("span.menu").click(function(){
$(".top-nav ul").slideToggle(500, function(){
});
});
</script>
</div>
<div class="header-top-on">
<ul class="social-in">
<li><a href="#"><i> </i></a></li>
<li><a href="#"><i class="tin"> </i></a></li>
<li><a href="#"><i class="gmail"> </i></a></li>
<li><a href="#"><i class="dribble"> </i></a></li>
<li><a href="#"><i class="browser"> </i></a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!---->
<div class="container">
<div class="header-bottom">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="" ></a>
</div>
<div class="search">
<form>
<input type="text" value="Search the site..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" >
<input type="submit" value="">
</form>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!---->
<div class="container">
<div class="banner-top">
<div class="slider">
<ul class="rslides" id="slider1">
<li><img src="images/ban1.jpg" alt="">
</li>
<li><img src="images/ban2.jpg" alt="">
</li>
<li><img src="images/ban.jpg" alt="">
</li>
<li><img src="images/ban2.jpg" alt="">
</li>
</ul>
</div>
</div>
</div>
<!--content-->
<div class="content">
<div class="container">
<div class="port">
<h2>“ Welcome to the demo site for <span>Portfolic</span> WordPress portfolio theme ”</h2>
<ul id="filters">
<li><span class="filter " data-filter="app card icon set see is web">All</span><label class="arrow"> </label></li>
<li><span class="filter" data-filter="app"> Apps</span><label class="arrow arrow1"> </label></li>
<li><span class="filter" data-filter="card"> Freebies </span><label class="arrow arrow2 "> </label></li>
<li><span class="filter" data-filter="icon"> Icons </span><label class="arrow arrow3"> </label></li>
<li><span class="filter" data-filter="set"> Illustrations </span><label class="arrow arrow4"> </label></li>
<li><span class="filter" data-filter="see"> Logos </span><label class="arrow arrow5"> </label></li>
<li><span class="filter" data-filter="is"> Websites </span><label class="arrow arrow6"> </label></li>
<div class="clearfix"> </div>
</ul>
</div>
<div id="portfoliolist">
<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper ">
<a href="single.html">
<img class="img-responsive" src="images/pi.jpg" alt="" />
</a>
<div class="gir">
<h5>Giraffes</h5>
<p>Loream ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor iaculis dapibus</p>
</div>
</div>
</div>
<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html">
<img class="img-responsive" src="images/pi1.jpg" alt="" />
</a>
<div class="gir">
<h5>Colorful ice Creams</h5>
<p>Loream ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor iaculis dapibus</p>
</div>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html">
<img class="img-responsive" src="images/pi2.jpg" alt="" />
</a>
<div class="gir">
<h5>Interesting Faces</h5>
<p>Loream ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor iaculis dapibus</p>
</div>
</div>
</div>
<div class="portfolio set mix_all" data-cat="set" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper ">
<a href="single.html">
<img class="img-responsive" src="images/pi3.jpg" alt="" />
</a>
<div class="gir">
<h5>Robots</h5>
<p>Loream ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor iaculis dapibus</p>
</div>
</div>
</div>
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper ">
<a href="single.html">
<img class="img-responsive" src="images/pi4.jpg" alt="" />
</a>
<div class="gir">
<h5>Tunic</h5>
<p>Loream ipsum dolor sit amet, consectetur adipiscing elit. Curabitur auctor iaculis dapibus</p>
</div>
</div>
</div>
<div class="portfolio is mix_all" data-cat="is" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a href="single.html">
<img class="img-responsive" src="images/pi5.jpg" alt="" />
</a>
<div class="gir">
<h5>Rain Clouds</h5>
<p>Loream ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
作品展示&图片展示HTML源码-文件图片列表响应式网页模板-适配移动端.zip （40个子文件） 
作品展示&图片展示HTML源码-文件图片列表响应式网页模板-适配移动端 html js 
responsiveslides.min.js 3KB easing.js 5KB move-top.js 1KB jquery.mixitup.min.js 14KB jquery.min.js 94KB css style.css 22KB bootstrap.css 118KB
404.html 4KB index.html 12KB contact.html 5KB about.html 8KB single.html 8KB images 
ban1.jpg 171KB pi2.jpg 7KB sin2.jpg 72KB sin1.jpg 36KB
menu.png 152B pi1.jpg 5KB si1.jpg 49KB logo.png 4KB back.jpg 7KB a1.jpg 43KB pi5.jpg 3KB pi4.jpg 6KB si.jpg 16KB si2.jpg 17KB pi7.jpg 3KB pi3.jpg 24KB si3.jpg 26KB img-sprite.png 18KB up.png 4KB ar.png 3KB portfolic-portfolio-theme.png 872KB pi.jpg 6KB ban.jpg 243KB ab.png 29KB sin.jpg 63KB ban2.jpg 208KB pi6.jpg 4KB blog.html 9KB资源评论
