<!--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>The Skecth-Website Website Template | Home :: w3layouts</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="//fonts.googleapis.com/css?family=IM+Fell+English:400,400italic|Open+Sans:300,400" rel="stylesheet" type="text/css">
<link href="./css/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!---strat-slider---->
<link rel="stylesheet" type="text/css" href="./css/slider.css" />
<script type="text/javascript" src="./js/modernizr.custom.28468.js"></script>
<script type="text/javascript" src="./js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider({
autoplay : true,
bgincrement : 500
});
});
</script>
<!-- start gallery_sale -->
<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_bg">
<div class="wrap">
<div class="header">
<div class="logo">
<a href="index.html"><img src="./images/logo.png" alt=""/> </a>
</div>
<div class="social-icons">
<ul>
<li><a href="#" target="_blank"></a></li>
<li><a href="#" target="_blank"></a></li>
</ul>
</div>
<div class="h_menu">
<ul>
<li class="active"><a href="index.html">Home</a></li>
<li><a href="work.html">Work</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
<!-- start slider -->
<div class="slider_bg">
<div class="wrap">
<div class="slider">
<!---start-da-slider----->
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>Lorem Ipsum is simply amet</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
<a href="details.html" class="da-link">Lorem Ipsum</a>
</div>
<div class="da-slide">
<h2>Clean,Flat & poloshed Design</h2>
<p>Proin facilisis aliquam nunc quis varius When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road,</p>
<a href="details.html" class="da-link">Lorem Ipsum</a>
</div>
<div class="da-slide">
<h2>Lorem Ipsum is simply amet</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</p>
<a href="details.html" class="da-link">Lorem Ipsum</a>
</div>
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
</div>
</div>
</div>
</div>
<!-- start top_grid -->
<div class="top_bg">
<div class="wrap">
<div class="top_grid">
<h2>our work</h2>
<ul id="filters" class="clearfix">
<li><span class="filter active" data-filter="icon logo web">UI</span></li>
<li><span class="filter" data-filter="app card web">website</span></li>
<li><span class="filter" data-filter="icon web card">photography</span></li>
<li><span class="filter" data-filter="web app icon card">freebie</span></li>
<li><span class="filter" data-filter="icon app web logo">identity</span></li>
<li><span class="filter" data-filter="app card icon logo web">all</span></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<!-- start main -->
<div class="main_bg">
<div class="wrap">
<div class="main">
<div id="portfoliolist">
<div class="grid_list">
<div class="portfolio logo1" data-cat="logo">
<div class="portfolio-wrapper">
<a href="details.html">
<img src="./images/pic1.jpg" alt="Image 2" />
</a>
<div class="label">
<div class="label-text">
<a class="text-title">work #1</a>
<span class="text-category">photography</span>
</div>
<a href="details.html"><div class="label-bg"></div></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="grid_list1 grid_top">
<div class="portfolio app" data-cat="app">
<div class="portfolio-wrapper">
<a href="details.html">
<img src="./images/pic2.jpg" alt="Image 2" />
</a>
<div class="label">
<div class="label-text">
<a class="text-title">work #2</a>
<span class="text-category">photography</span>
</div>
<a href="details.html"><div class="label-bg"></div></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="grid_list2 grid_top">
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper">
<a href="details.html">
<img src="./images/pic4.jpg" alt="Image 2" />
</a>
<div class="label">
<div class="label-text">
<a class="text-title">work #4</a>
<span class="text-category">photography</span>
</div>
<a href="details.html"><div class="label-bg"></div></a>
</div>
</div>
</div>
<div class="portfolio web grid_top" data-cat="web">
<div class="portfolio-wrapper">
<a href="details.html">
<img src="./images/pic6.jpg" alt="Image 2" />
</a>
<div class="label">
<div class="label-text">
<a class="text-title">work #6</a>
<span class="text-category">photography</span>
</div>
<a href="details.html"><div class="label-bg"></div></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="grid_list2 grid_top">
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper">
<a href="details.html">
<img src="./images/pic3.jpg" alt="Image 2" />
</a>
<div class="label">
<div class="label-text">
<a class="text-title">work #3</a>
<span class="text-category">photography</span>
</div>
<a href="details.html"><div class="label-bg"></div><
特写镜头摄影网页模板_html5 bootstrap 响应式模板UI前端源码.rar （115个子文件） 
slider.css 20KB slider.css 20KB style.css 15KB style.css 12KB style.css 8KB
index.html 11KB index.html 11KB index.html 7KB contact.html 5KB work.html 5KB about.html 5KB work.html 5KB contact.html 4KB contact.html 4KB about.html 4KB work.html 4KB details.html 4KB details.html 4KB about.html 3KB details.html 3KB
det_pic.jpg 98KB slider_bg.jpg 68KB pic2.jpg 46KB pic1.jpg 38KB ser_pic2.jpg 35KB ser_pic2.jpg 35KB about_pic.jpg 30KB about_pic.jpg 30KB ser_pic1.jpg 27KB ser_pic1.jpg 27KB pic2.jpg 26KB ser_pic4.jpg 25KB ser_pic4.jpg 25KB ser_pic3.jpg 18KB ser_pic3.jpg 18KB pic5.jpg 14KB pic5.jpg 14KB pic5.jpg 14KB slider_bg.jpg 14KB ser_pic2.jpg 11KB about_pic.jpg 11KB pic1.jpg 9KB ser_pic1.jpg 9KB pic6.jpg 9KB pic6.jpg 9KB pic6.jpg 9KB pic2.jpg 9KB ser_pic4.jpg 9KB slider_bg.jpg 8KB ser_pic3.jpg 7KB pic3.jpg 6KB pic3.jpg 6KB pic3.jpg 6KB pic4.jpg 6KB pic4.jpg 6KB pic4.jpg 6KB pic1.jpg 3KB icon3.jpg 2KB icon1.jpg 1KB icon1.jpg 1KB icon1.jpg 1KB icon2.jpg 1KB icon2.jpg 1KB icon2.jpg 1KB icon_3.jpg 714B icon_3.jpg 714B icon_3.jpg 714B icon_5.jpg 713B icon_5.jpg 713B icon_5.jpg 713B icon_6.jpg 688B icon_6.jpg 688B icon_6.jpg 688B icon_1.jpg 683B icon_1.jpg 683B icon_1.jpg 683B icon_4.jpg 677B icon_4.jpg 677B icon_4.jpg 677B icon_2.jpg 661B icon_2.jpg 661B icon_2.jpg 661B jquery.min.js 92KB jquery.min.js 92KB jquery.mixitup.min.js 14KB jquery.mixitup.min.js 14KB fliplightbox.min.js 14KB fliplightbox.min.js 14KB modernizr.custom.28468.js 7KB modernizr.custom.28468.js 7KB jquery.cslider.js 7KB jquery.cslider.js 7KB jquery.easing.min.js 5KB jquery.easing.min.js 5KB responsive.menu.js 3KB
logo.png 9KB logo.png 8KB logo.png 6KB mail.png 1KB mail.png 1KB共 115 条
- 1
- 2
资源评论
dunming_6725413
- 粉丝: 20
- 资源: 6947
最新资源
- 焊接工艺评定报告 （全套）.zip
- 焊接工艺评定以及指导书焊接参数.zip
- 焊接缺陷图片和说明.zip
- 焊接责任人培训资料.zip
- 焊接责任工程师培训讲义.zip
- 焊接质量控制文件.zip
- 焊接软件E-Weld V3.0ML.zip
- 蜗杆蜗轮传动全焊接固定球阀.zip
- 机器人自动焊接机.zip
- 压力容器用焊接节点图.zip
- 压力容器焊接材料的选用.zip
- 圆柱体相贯线焊接专机工作台设计.zip
- 金属管热压缩口机sw20可编辑全套设计资料100%好用.zip
- 角橡胶履带轮sw16可编辑全套设计资料100%好用.zip
- cruise模型，增程汽车仿真模型，串联混动，基于cruise simulink联合仿真 实现增程器多点控制策略，及电制动优先的能量回收策略 提供cruise模型、控制策略文件以及策略说明文档，方
- 空压机模型sw16可编辑全套设计资料100%好用.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
