<!DOCTYPE HTML>
<html>
<head>
<title>metro扁平UI网页组件 - 网页模板</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" />
<!-- start portfolios -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/fliplightbox.min.js"></script>
<script type="text/javascript">
$('body').flipLightBox()
</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
$('#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>
<!-- start 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 : 450
});
});
</script>
<!-- alerts -->
<link type="text/css" rel="stylesheet" href="css/JFAlert.css" />
<script type="text/javascript" src="js/JFCore.js"></script>
<!-- Set here the key for your domain in order to hide the watermark on the web server -->
<script type="text/javascript">
(function() {
JC.init({
domainKey: ''
});
})();
</script>
</head>
<body>
<div class="wrap">
<div class="span_of_2"><!-- start span_of_2 -->
<div class="span1_of_1"><!-- start span1_of_1 -->
<div class="container"><!-- start container -->
<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="logo web">Photography</span></li>
<li><span class="filter" data-filter="app card icon web">Inspirations</span></li>
<li><span class="filter" data-filter="logo web">Icon</span></li>
</ul>
<div id="portfoliolist">
<div class="portfolio logo1" data-cat="logo">
<div class="portfolio-wrapper">
<a href="#"> <img src="images/s1.jpg" alt="Image 1" /> </a>
<div class="label_style">
<a href="#"><span class="icon_1"></span></a>
<div class="label_text">
<h2>scarabaeidae</h2>
<p>Rezonum & Collections</p>
</div>
</div>
</div>
</div>
<div class="portfolio app left" data-cat="app">
<div class="portfolio-wrapper">
<a href="#"> <img src="images/s2.jpg" alt="Image 2" /> </a>
<div class="label_style">
<a href="#"><span class="icon_2"></span></a>
<div class="label_text">
<h2>scarabaeidae</h2>
<p>Rezonum & Collections</p>
</div>
</div>
</div>
</div>
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper">
<a href="#"> <img src="images/s3.jpg" alt="Image 3" /> </a>
<div class="label_style">
<a href="#"><span class="icon_3"></span></a>
<div class="label_text">
<h2>scarabaeidae</h2>
<p>Rezonum & Collections</p>
<form>
<input type="button" value="buy it now" />
</form>
</div>
</div>
</div>
</div>
<div class="portfolio card left" data-cat="card">
<div class="portfolio-wrapper">
<a href="#"> <img src="images/s4.jpg" alt="Image 4" /> </a>
<div class="label_style">
<a href="#"><span class="icon_4"></span></a>
<div class="label_text">
<h2>scarabaeidae</h2>
<p>Rezonum & Collections</p>
<form>
<input type="button" class="bg" value="buy it now" />
</form>
</div>
</div>
</div>
</div>
</div>
</div><!-- end container -->
<div class="span_btm">
<img src="images/pic1.jpg" alt=""/>
<div class="span_text">
<h3>ios games / slots</h3>
<p>Written by <a href="#">eiusmod tempor incididunt</a> </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
<form>
<span><input type="button" class="bg" value="like it now" /> </span>
<span><input type="button" class="bg1" value="learn more" /> </span>
<div class="clear"></div>
<span class="or">or</span>
</form>
</div>
</div>
</div><!-- end span1_of_1 -->
<div class="span1_of_2"><!-- start span1_of_2 -->
<div class="slider"><!-- start slider -->
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>Flat Design websites</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<div class="da-slide">
<h2>Clean & Flat Design</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</div>
<div class="da-slide">
<h2>Clean & Flat Design</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="da-slide">
<h2>Flat Design websites</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
</div>
</div><!-- end slider -->
<div class="grids_of_2">
<div class="grid1_of_1">
<div class="temparature">
<h4 class="left">4<sup>o</sup>c</h4>
<span class="right bg"></span>
<div class="clear"></div>
</div>
<div class="temp_list_main">
<div class="temp_main">
<ul class="temp_list">
<li><span class="temp_img"><img src="images/temp1.jpg" alt=""/></span><span class="temp_text"><h4>Mon</h4><h5>30<sup>o</sup></h5></span><div class="clear"></div></li>
</ul>
<ul class="temp_list_icon">
<li><i class="icon_1"></i></li>
</ul>
<div class="clear"></div>
</div>
<div class="temp_main top">
<ul class="temp_list">
<li><span class="temp_img"><img src="images/temp2.jpg" alt=""/></span><span class="temp_text"><h4>Thu</h4><h5>27<sup>o</sup></h5></span><div class="clear"></div></li>
</ul>
<ul class="temp_list_icon">
<li><i class="icon_2"></i></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="grid1_of_2">
<form>
<input type="button" value="button one" class="bg1" />
<input type="button" value="button two" c
metro扁平UI网页组件.zip （29个子文件） 
metro扁平UI网页组件 
metro扁平UI网页组件.jpg 165KB jiaoben2305 css 
slider.css 20KB JFAlert.css 3KB style.css 20KB images user1.jpg 3KB user3.jpg 3KB pic1.jpg 49KB
star-empty-50.png 608B user2.jpg 2KB temp2.jpg 2KB star-rating-50.png 615B s4.jpg 29KB s2.jpg 14KB sprites.png 9KB s3.jpg 21KB s1.jpg 35KB user4.jpg 2KB slide-pagenat.png 526B temp1.jpg 2KB fonts Overpass_Regular-webfont.ttf 61KB
index.html 12KB js jquery.min.js 91KB jquery.easing.min.js 5KB jquery.cslider.js 7KB jquery.starRating.js 1KB JFCore.js 137KB jquery.mixitup.min.js 14KB modernizr.custom.28468.js 7KB fliplightbox.min.js 14KB资源评论
