<!DOCTYPE html>
<html>
<head>
<title>Home</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='#css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='#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="copyrights">Collect from <a href="http://www.moobnn.com/" >企业网站模板</a></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 auctor iaculis dapibus</p>
</div>
</div>
</div>
<div class="portfolio see mix_all" data-cat="see" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">