<!DOCTYPE HTML>
<html>
<head>
<title>Projects</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/responsive-nav.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
$(function() {
var filterList = {
init : function() {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector : '.portfolio',
filterSelector : '.filter',
effects : ['fade'],
easing : 'snap',
// call the hover effect
onMixEnd : filterList.hoverEffect()
});
},
hoverEffect : function() {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(function() {
$(this).find('.label').stop().animate({
bottom : 0
}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({
top : -30
}, 500, 'easeOutQuad');
}, function() {
$(this).find('.label').stop().animate({
bottom : -40
}, 200, 'easeInQuad');
$(this).find('img').stop().animate({
top : 0
}, 300, 'easeOutQuad');
});
}
};
// Run the show!
filterList.init();
});
</script>
</head>
<body>
<!----start-header----->
<div class="header">
<div class="wrap">
<div class="top-header">
<div class="logo">
<a href="index.html"><h1><span>Site</span>name</h1></a>
</div>
</div>
<!---start-top-nav---->
<div class="top-nav">
<div class="top-nav-left">
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="blog.html">Blog</a></li>
<li class="active"><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<script>
var navigation = responsiveNav("#nav");
</script>
</div>
<div class="top-nav-right">
<div class="search">
<form>
<input type="text" value="" />
<input type="submit" value="" />
<div class="clear"></div>
</form>
</div>
</div>
<div class="clear"> </div>
</div>
<!---End-top-nav---->
</div>
</div>
<!----End-header----->
<!---start-content---->
<div class="wrap">
<div class="about-desc">
<div class="content">
<div class="about-data">
<h2>Our Projects</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
<div class="portfolio_main">
<ul id="filters" class="clearfix">
<li>
<span class="filter active" data-filter="app card icon web">All</span>
</li>
<li>
<span class="filter" data-filter="app icon">App</span>
</li>
<li>
<span class="filter" data-filter="card ">Card</span>
</li>
<li>
<span class="filter" data-filter="icon app card ">Icon</span>
</li>
<li>
<span class="filter" data-filter="web card icon">Web</span>
</li>
</ul>
<div id="portfoliolist">
<div class="portfolio logo1" data-cat="logo">
<div class="portfolio-wrapper">
<div class="fancyDemo">
<a rel="group" href="single.html"><img src="images/s1.jpg" alt=""class="img-responsive"/></a>
</div>
<div class="label">
<div class="label-text">
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio app" data-cat="app">
<div class="portfolio-wrapper">
<div class="fancyDemo">
<a rel="group" href="single.html"><img src="images/s2.jpg" alt=""class="img-responsive"/></a>
</div>
<div class="label">
<div class="label-text">
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper">
<div class="fancyDemo">
<a rel="group" href="single.html"><img src="images/s3.jpg" alt=""class="img-responsive"/></a>
</div>
<div class="label">
<div class="label-text">
<span class="text-category">Web design</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<div class="fancyDemo">
<a rel="group" href="single.html"><img src="images/s4.jpg" alt=""class="img-responsive"/></a>
</div>
<div class="label">
<div class="label-text">
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio app" data-cat="app">
<div class="portfolio-wrapper">
<div class="fancyDemo">
<a rel="group" href="single.html"><img src="images/s5.jpg" alt=""class="img-responsive"/></a>
</div>
<div class="label">
<div class="label-text">
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<div class="fancyDemo">
<a rel="group" href="single.html"><img src="images/s6.jpg" alt=""class="img-responsive"/></a>
</div>
<div class="label">
<div class="label-text">
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<div class="fancyDemo">
<a rel="group" href="single.html"><img src="images/s7.jpg" alt=""class="img-responsive"/></a>
</div>
<div class="label">
<div class="label-text">
<span class="text-category">Business card</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio logo1" data-cat="web">
<div class="portfolio-wrapper">
<div class="fancyDemo">
<a rel="group" href="single.html"><img src="images/s8.jpg" alt=""class="img-responsive"/></a>
</div>
<div class="label">
<div class="label-text">
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</div>
<div class="portfolio app" data-cat="app">
<div class="portfolio-wrapper">
<div class="fancyDemo">
<a rel="group" href="single.html"><img src="images/s2.jpg" alt=""class="img-responsive"/></a>
</div>
<div class="label">
<div
蓝色黑色搭配商务模板是一款蓝色跟黑色两种颜色搭配的商业网站模板下载。_html网站模板_网页源码移动端前端_H5模板_.rar
31 浏览量
2023-08-05
15:53:14
上传
评论
收藏 1.02MB RAR 举报
蓝色黑色搭配商务模板是一款蓝色跟黑色两种颜色搭配的商业网站模板下载。_html网站模板_网页源码移动端前端_H5模板_.rar （45个子文件） 
蓝色黑色搭配商务模板是一款蓝色跟黑色两种颜色搭配的商业网站模板下载。 chahua3410 js 
jquery.easing.min.js 5KB responsive-nav.js 12KB owl.carousel.js 52KB jquery.mixitup.min.js 14KB jquery-1.10.2.min.js 91KB css style.css 25KB owl.carousel.css 2KB
404.html 3KB projects.html 11KB services.html 6KB index.html 8KB contact.html 5KB about.html 6KB single.html 7KB images 
hamburger-retina.gif 1KB
team-img2.jpg 15KB s5.jpg 57KB
search-icon.png 476B icon6.png 790B list-img.png 220B s1.jpg 34KB s2.jpg 31KB s6.jpg 34KB icon1.png 941B icon4.png 817B team-img3.jpg 16KB s7.jpg 38KB icon5.png 2KB twitter-icon.png 503B arrows.png 568B bg.jpg 1.17MB avatar.png 2KB img-sprite.png 3KB blog-img2.jpg 47KB shadow.png 114KB team-img1.jpg 11KB icon3.png 2KB s3.jpg 39KB banner-img.png 267KB blog-img1.jpg 44KB s4.jpg 31KB s8.jpg 43KB hamburger.gif 1KB icon2.png 2KB blog.html 7KB资源评论
