<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/gallery.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="js/jquery.min.js"></script>
<script src="js/hover_pack.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
});
});
</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>
<div class="header-top">
<div class="wrap">
<div class="logo">
<ul>
<li><a href="index.html"><img src="images/logo.png" alt=""></a></li>
<li class="line"> | I'am Your tag line</li>
<div class="clear"> </div>
</ul>
</div>
<div class="menu">
<a class="toggleMenu" href="#"><img src="images/nav_icon.png" alt="" /> </a>
<ul class="nav" id="nav">
<li class="current"><a href="#home">Home</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#works">Works</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#contact">Contact</a></li>
<div class="clear"></div>
</ul>
<script type="text/javascript" src="js/responsive-nav.js"></script>
</div>
<div class="clear"></div>
</div>
</div>
<div class="slider_left" id="home">
<div class="wmuSlider example1">
<div class="wmuSliderWrapper">
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="slider_text">
<h1>Meet <span class="head">Brandi!</span></h1>
<h2><span class="green">/Creative</span> one page template.</h2>
<div class="m_1"><span class="left_line"> </span> <p>We are a team of professionals</p><span class="right_line"> </span></div>
<div class="social">
<ul>
<li class="twitter" title="twitter"><a href="#"><span> </span></a></li>
<li class="facebook" title="facebook"><a href="#"><span> </span></a></li>
<li class="google" title="google+"><a href="#"><span> </span></a></li>
<li class="dribble" title="dribble"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
</article>
<article style="position: relative; width: 100%; opacity: 1;">
<div class="slider_text">
<h1>Lorem<span class="head"> dolor!</span></h1>
<h2><span class="green">/tincidu</span> one page template.</h2>
<div class="m_1"><span class="left_line"> </span> <p>augue duis dolore te feugait</p><span class="right_line"> </span></div>
<div class="social">
<ul>
<li class="twitter" title="twitter"><a href="#"><span> </span></a></li>
<li class="facebook" title="facebook"><a href="#"><span> </span></a></li>
<li class="google" title="google+"><a href="#"><span> </span></a></li>
<li class="dribble" title="dribble"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="slider_text">
<h1>quod <span class="head">mazim !</span></h1>
<h2><span class="green">/Creative</span> one page template.</h2>
<div class="m_1"><span class="left_line"> </span> <p>We are a team of professionals</p><span class="right_line"> </span></div>
<div class="social">
<ul>
<li class="twitter"><a href="#"><span> </span></a></li>
<li class="facebook"><a href="#"><span> </span></a></li>
<li class="google"><a href="#"><span> </span></a></li>
<li class="dribble"><a href="#"><span> </span></a></li>
</ul>
</div>
</div>
</article>
</div>
<ul class="wmuSliderPagination">
<li><a href="#" class="">0</a></li>
<li><a href="#" class="">1</a></li>
<li><a href="#" class="">2</a></li>
</ul>
</div>
<script src="js/jquery.wmuSlider.js"></script>
<script>
$('.example1').wmuSlider();
</script>
</div>
<div class="test-monials-grids" id="features">
<div class="wrap">
<h3 class="m_2">Features</h3>
<div class="m_3"><span class="left_line1"> </span><img src="images/heart.png" alt=""/><span class="right_line1"> </span></div>
<div class="gallery autoplay items-3">
<div id="item-1" class="control-operator"></div>
<div id="item-2" class="control-operator"></div>
<div id="item-3" class="control-operator"></div>
<figure class="item">
<div class="box1">
<div class="col_1_of_3 span_1_of_3">
<ul class="icon1">
<li><i class="feather"> </i>
<div class="desc">
<h4>Branding</h4>
<p>soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum. </p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="col_1_of_3 span_1_of_3">
<ul class="icon1">
<li><i class="pencil"> </i>
<div class="desc">
<h4>Development</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim </p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="col_1_of_3 span_1_of_3">
<ul class="icon1">
<li><i class="megaphone"> </i>
<div class="desc">
<h4>Consulting</h4>
<p>claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. </p>
</div>
<div class="clear"></div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</figure>
<figure class="item">
<div class="box1">
279国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip （42个子文件） 
279 js 
jquery.wmuSlider.js 12KB jquery.scrollTo.js 2KB hover_pack.js 12KB responsive-nav.js 1KB modernizr.custom.28468.js 7KB easing.js 5KB move-top.js 1KB jquery.mixitup.min.js 14KB jquery.min.js 92KB css style.css 39KB gallery.css 7KB
index.html 36KB single.html 8KB images 
pic12.jpg 36KB pic5.jpg 128KB
img-sprite1.png 23KB pic6.jpg 130KB heart.png 3KB banner_bg.jpg 146KB pic.jpg 76KB img-sprite1.psd 303KB 2.jpg 10KB pic10.jpg 47KB Thumbs.db 1.37MB border2.png 3KB pic8.jpg 54KB border.png 3KB heart1.png 3KB pic9.jpg 14KB logo.png 4KB pic4.jpg 191KB pic2.jpg 99KB logo.psd 148KB pic3.jpg 182KB pic1.jpg 100KB f-logo.png 4KB pic11.jpg 47KB icon-eye.png 4KB border1.png 3KB marker2.png 3KB nav_icon.png 3KB pic13.jpg 31KB资源评论
