<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href='http://fonts.useso.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!-- js -->
<script src="js/jquery.min.js"></script>
<!-- //js -->
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Agriculture_firm Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<!-- start-smoth-scrolling -->
<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},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
</head>
<body>
<!-- banner -->
<div id="home" class="banner">
<div class="container">
<div class="navi">
<div class="head-logo">
<a href="index.html"><img src="images/logo.png" alt=" "></a>
</div>
<div class="banner-nav">
<span class="menu"><img src="images/menu.png" alt=" "/></span>
<nav class="cl-effect-3">
<ul class="nav1">
<li class="active"><a href="#home" class="scroll">Home</a></li>
<li><a href="#about" class="scroll">ABOUT</a></li>
<li><a href="#products" class="scroll">PRODUCTS</a></li>
<li><a href="#pricing" class="scroll">PRICING</a></li>
<li><a href="#contact" class="scroll">CONTACT</a></li>
</ul>
</nav>
</div>
<div class="clearfix"> </div>
</div>
<!-- script for menu -->
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- //script for menu -->
<div class="banner-info">
<div class="banner-info-left">
<h3>OUR MISSION IS TO MAKE YOUR <span> BUSINESS GROW</span></h3>
<p>Donec rutrum congue leo eget malesuada<span>Curabitur non nulla sit amet.</span></p>
<div class="start">
<a href="#">Learn More...</a>
</div>
</div>
<div class="banner-info-right">
<div class="banner-info-fig">
<a href="images/4.jpg" class="b-link-stripe b-animate-go swipebox" title="">
<img class="img-responsive" src="images/4-.jpg" />
</a>
</div>
<div class="banner-info-fig">
<a href="images/5.jpg" class="b-link-stripe b-animate-go swipebox" title="">
<img class="img-responsive" src="images/5-.jpg" />
</a>
</div>
<div class="clearfix"> </div>
<div class="banner-info-fig">
<a href="images/6.jpg" class="b-link-stripe b-animate-go swipebox" title="">
<img class="img-responsive" src="images/6-.jpg" />
</a>
</div>
<div class="banner-info-fig">
<a href="images/7.jpg" class="b-link-stripe b-animate-go swipebox" title="">
<img class="img-responsive" src="images/7-.jpg" />
</a>
</div>
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
<link rel="stylesheet" href="css/swipebox.css">
<script src="js/jquery.swipebox.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
<!-- Portfolio Ends 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>
</div>
</div>
<!-- //banner -->
<div class="copyrights">Collect from <a href="http://www.htmldivcss.com/" >免费模板</a></div>
<!-- banner-bottom -->
<div class="banner-bottom">
<div class="container">
<!-- Slider-starts-Here -->
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider3").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!--//End-slider-script -->
<div id="top" class="callbacks_container">
<ul class="rslides" id="slider3">
<li>
<div class="banner-bottom-info">
<h3>OUR BEGINING</h3>
<p>Donec rutrum congue leo eget malesuada.Curabitur non nulla sit amet
nisl tempus convallis quis ac lactus.Sed porttitor lactus nibh.Proin
eget tortor risus.Nulla porttitor accumsan tincidunt.Nulla
porttitoraccumsan tincidunt.
Curabitur aliquet quam id dui posuere blandit.
Nulla Quis lorum nisl tempus convallis quis ac lactus.Sed porttitorlactus nibh
eget tortor risus.Nulla porttitor accumsan tincidunt.</p>
</div>
</li>
<li>
<div class="banner-bottom-info">
<h3>OUR PROCESSING</h3>
<p>Nulla porttitor congue leo eget malesuada.Curabitur non nulla sit amet
nisl tempus convallis quis ac lactus.Sed porttitor lactus nibh.Proin
eget tortor risus.Nulla porttitor accumsan tincidunt.Nulla
porttitoraccumsan tincidunt.
Curabitur aliquet quam id dui posuere blandit.
Nulla Quis lorum nisl tempus convallis quis ac lactus.Sed porttitorlactus nibh
eget tortor risus.Nulla porttitor accumsan tincidunt.</p>
</div>
</li>
<li>
<div class="banner-bottom-info">
<h3>OUR REQUIREMENT</h3>
<p>Curabitur rutrum congue leo eget malesuada.Curabitur non nulla sit amet
nisl tempus convallis quis ac lactus.Sed porttitor lactus nibh.Proin
eget tortor risus.Nulla porttitor accumsan tincidunt.Nulla
709web_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
28 浏览量
2023-08-03
10:46:16
上传
评论
收藏 2.22MB ZIP 举报
709web_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip （54个子文件） 
709 js 
jquery.magnific-popup.js 45KB jquery.swipebox.min.js 7KB responsiveslides.min.js 3KB modernizr.custom.min.js 2KB easing.js 5KB classie.js 2KB move-top.js 1KB modernizr.custom.js 7KB jquery.mixitup.min.js 14KB jquery.min.js 92KB
1.jpg 165KB css style.css 34KB demo.css 2KB component.css 2KB normalize.css 2KB popuo-box.css 8KB bootstrap.css 118KB swipebox.css 4KB
index.html 27KB images 4-.jpg 145KB
plus.png 1023B 2.jpg 51KB s-22.jpg 87KB 6-.jpg 79KB s-11.jpg 164KB s-6.jpg 43KB arrow.png 547B s-66.jpg 107KB menu.png 351B 6.jpg 22KB banner.jpg 246KB logo.png 2KB 1.jpg 36KB s-1.jpg 62KB 3-.jpg 153KB s-33.jpg 141KB clock.png 500B s-4.jpg 56KB eye.png 485B 5.jpg 23KB
icons.svg 1KB s-2.jpg 39KB 2-.jpg 125KB img-sprite.png 3KB s-44.jpg 125KB s-3.jpg 55KB 5-.jpg 57KB s-5.jpg 50KB 3.jpg 62KB 7.jpg 29KB s-55.jpg 145KB 7-.jpg 97KB 1-.jpg 84KB 4.jpg 40KB资源评论
