<!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">
前端静态模板-灰绿宽屏-学生作业毕设实训素材.zip
版权申诉
149 浏览量
2022-04-07
22:10:04
上传
评论
收藏 2.24MB ZIP 举报
前端静态模板-灰绿宽屏-学生作业毕设实训素材.zip （40个子文件） 
灰绿宽屏 css 
gallery.css 7KB style.css 39KB images 
heart.png 3KB
pic10.jpg 47KB 2.jpg 10KB banner_bg.jpg 146KB pic3.jpg 182KB pic1.jpg 100KB f-logo.png 4KB pic2.jpg 99KB pic8.jpg 54KB border2.png 3KB pic12.jpg 36KB nav_icon.png 3KB pic6.jpg 130KB pic4.jpg 191KB heart1.png 3KB border1.png 3KB pic13.jpg 31KB Thumbs.db 1.37MB pic5.jpg 128KB pic9.jpg 14KB img-sprite1.png 23KB logo.png 4KB pic11.jpg 47KB border.png 3KB pic.jpg 76KB marker2.png 3KB icon-eye.png 4KB
single.html 8KB index.html 36KB js jquery.min.js 92KB move-top.js 1KB easing.js 5KB jquery.scrollTo.js 2KB hover_pack.js 12KB jquery.mixitup.min.js 14KB jquery.wmuSlider.js 12KB modernizr.custom.28468.js 7KB responsive-nav.js 1KB资源评论
