<!--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
资源评论
