<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<!--bootstarp-css-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!--/bootstarp-css -->
<!--css-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!--/css-->
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<!--/fonts-->
<!--js-->
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.min.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>
<!--/js-->
<!-- Script for gallery Here -->
<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>
<!--/Script for gallery Here -->
</head>
<body>
<!--header-->
<div class="header">
<div class="container">
<div class="logo">
<a href="#"><img src="images/logo.png" class="img-responsive" alt=""/></a>
</div>
<!--nav-->
<div class="navigation-0">
<span class="menu"> </span>
<ul>
<li><a class="scroll" href="#HOME" title="HOME"><span>HOME</span></a></li>
<li><a class="scroll" href="#services" title="SERVICES"><span>SERVICES</span></a></li>
<li><a class="scroll" href="#PORTFOLIO" title="PORTFOLIO"><span>PORTFOLIO</span></a></li>
<li><a class="scroll" href="#SKILLS" title="SKILLS"><span>SKILLS</span></a></li>
<li><a class="scroll" href="#BLOG" title=" BLOG"><span>BLOG</span></a></li>
<li><a class="scroll" href="#CUSTOMERS" title="CUSTOMERS"><span>CUSTOMERS</span></a></li>
<li><a class="scroll" href="#CONTACT-US" title="CONTACT-US"><span>CONTACT-US</span></a></li>
</ul>
</div>
<!-- script-nav -->
<script>
$("span.menu").click(function(){
$(".navigation-0 ul").slideToggle("slow" , function(){
});
});
</script>
<div class="clearfix"></div>
<!-- /script-nav -->
<!--/nav-->
<div class="clearfix"></div>
</div>
</div>
<!--header-->
<!--header-banner-->
<div id="HOME" class="top-banner">
<div class="top-banner-back">
<div class="container">
<div class="logo-2">
<a href="#"><img src="images/logo-d.png" class="img-responsive" alt=""/></a>
</div>
<div class="diam">
<a href="#"><img src="images/line.png" class="img-responsive" alt=""/></a>
</div>
<p>Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan
tincidunt. Quisque velit nisi, pretium ut lacinia in, elemena porttlit nisi, pretium ut
lacinia in elementumestibulum ac diam sit anet.</p>
<a class="theme" href="#">Purchase Theme</a>
</div>
</div>
<div class="clearfix"></div>
</div>
<!--/header-banner-->
<!--content-part-->
<!--our-services-->
<div class="content">
<div id="services" class="services">
<div class="container">
<div class="services-id">
<div class="services-word">
<h2>FULLY LAYERED AND CUSTOMIZABLE TEMPLATE</h2>
<span>OUR SERVICES</span>
<a href="#"><img src="images/line2.png" class="img-responsive" alt=""/></a>
<p>Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tinci
dunt. Quisque velit nisi, pretium ut lacinia in, elemena porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lac
inia in, elementum id enim. Vestibulum ac diam sit anet.</p>
</div>
<div class="grids">
<div class="col-md-3 grid">
<span class="icon1"></span>
<h2>School Pickups</h2>
<p>Donec sollicitudin molestie malesuada.
Curabitur aliquet quam id dui posuere
blandit. Nulla porttitor.</p>
</div>
<div class="col-md-3 grid">
<span class="icon2"></span>
<h2>Extensive Labrary</h2>
<p>Donec sollicitudin molestie malesuada.
Curabitur aliquet quam id dui posuere
blandit. Nulla porttitor.</p>
</div>
<div class="col-md-3 grid">
<span class="icon3"></span>
<h2>Outdoor Trips</h2>
<p>Donec sollicitudin molestie malesuada.
Curabitur aliquet quam id dui posuere
blandit. Nulla porttitor.</p>
</div>
<div class="col-md-3 grid">
<span class="icon4"></span>
<h2>Outdoor Trips</h2>
<p>Donec sollicitudin molestie malesuada.
Curabitur aliquet quam id dui posuere
blandit. Nulla porttitor.</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="mask">
<div class="container">
<h3>Design must reflect the practical and aesthetic in business but above all...
good design must primarily serve people.</h3>
<p>Thomas J. Watson</p>
</div>
</div>
</div>
<!--/our-services-->
<!--PORTFOLIO-->
<div id="PORTFOLIO"class="portfollio">
<div class="container">
<div class="design">
<h3>MODERN AND CLEAN DESIGN</h3>
<h4>OUR PORTFOLIO</h4>
<a href="#"><img src="images/line2.png" class="img-responsive" alt=""/></a>
<p>Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tinci
dunt. Quisque velit nisi, pretium ut lacinia in, elemena porttitor accumsan tincidunt. Quisque velit nisi, pretium ut lac
inia in, elementum id enim. Vestibulum ac diam sit anet.</p>
</div>
<div class="main">
<div class="container">
<ul id="og-grid" class="og-grid">
<li>
<a href="#" data-largesrc="images/img2_b.jpg" class="img-responsive" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
<img src="images/a.jpg" class="img-responsive" alt="img01"/>
</a>
</li>
<li>
<a href="#" data-largesrc="images/img3_b.jpg" class="img-responsive" data-title="Veggies sunt bona vobis" data-description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
262国外_HTML手机电脑网站_网页源码_移动端前端js效果_H5模板_自适应css样式ui组件.zip （46个子文件） 
262 js 
jquery.magnific-popup.js 45KB modernizr.custom.min.js 2KB grid.js 14KB easing.js 5KB move-top.js 1KB modernizr.custom.js 8KB jquery.mixitup.min.js 14KB jquery.min.js 92KB css style.css 38KB flexslider.css 3KB popuo-box.css 5KB bootstrap.css 118KB
index.html 30KB images 
c.jpg 31KB
left-arrow.png 3KB eight-banner.jpg 4KB line2.png 4KB seventh-banner.jpg 2KB logo-d.png 6KB b.jpg 17KB yak2.png 128KB up-arrow.png 3KB blog-4.jpg 14KB fourth-banner.jpg 3KB blog-1.jpg 14KB down-arrow.png 4KB menu.png 3KB logo.png 4KB port-icons.png 1KB img2_b.jpg 58KB a.jpg 20KB blog-2.jpg 12KB line.png 4KB yak4.png 102KB img3_b.jpg 44KB d.jpg 18KB img-sprite.png 36KB close.png 433B icon-eye.png 4KB blog-7.jpg 95KB yak3.png 106KB first-banner.jpg 7KB img39_b.jpg 93KB yak1.png 104KB to-top1.png 1KB img47_b.jpg 47KB资源评论
