master

分支 (1)

管理

管理

master

bootstrap-works
/
index.html

<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Home</title>
<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="" />
<!-- 字体文件 -->
<link href='css/font.css' rel='stylesheet' type='text/css'>

<!-- css -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/viewbox.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/hoverex-all.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/portfolio.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<!-- /css -->
<!-- js files -->
<script src="js/jquery.min.js"></script>
<script src="js/retina-1.1.0.js"></script>
<!--script src="js/jquery.hoverdir.js"></script!-->
<script src="js/jquery.hoverex.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/modernizr.custom.js"></script>
<!-- js files -->
<script src="js/bootstrap.min.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script type="text/javascript" src="js/numscroller-1.0.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.slide.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/grayscale.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.viewbox.min.js"></script>
<!-- /js  -->
<style type="text/css">
	.bg img{
		width: 600px;
		height: 450px;
	}
</style>
</head>
<body id="scrollzipPoint">
	<audio src="http://m10.music.126.net/20210527131706/d5a1854b2567635b3a07b5c24f324c12/ymusic/035e/525c/540f/4409be4089e6486c07f8ce6de67a7e61.mp3" autoplay="autoplay">
		当前浏览器不支持audio
	</audio>
<div class="topbar-w3ls">
	<a href="index.html" class="logo"><h1>颜</h1></a>
	<div class="top-agileits">
		<form class="search-container" action="#" method="post">
			<input id="search-box" type="text" class="search-box" name="q" placeholder="使劲搜"/>
			<label for="search-box"><span id="searchBtn" class="glyphicon glyphicon-search search-icon" ></span></label>
			<input type="submit" id="search-submit" />
		</form>
		<!-- <p><span class="glyphicon glyphicon-phone-alt"></span> <a href="add.html">加入我们</a></p> -->
		<div class="clearfix"></div>
	</div>
</div>
<!-- 轮播区域 -->
<section class="banner">
	<!-- 导航 -->
	<div class="navbar-wrapper">
		<div class="container-fluid">
			<nav class="navbar navbar-inverse navbar-static-top">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
				</div>
				<div id="navbar" class="navbar-collapse collapse">
					<ul class="nav navbar-nav">
						<li class="active"><a href="index.html" class="page-scroll">主页</a></li>
						<li><a href="#about" class="page-scroll">关于</a></li>
						<li><a href="#team" class="page-scroll">助手</a></li>
						<li><a href="#portfolio" class="page-scroll">作品集</a></li>
						<li><a href="#testimonial" class="page-scroll">日常</a></li>
						<li><a href="#contact" class="page-scroll">联系</a></li>
					</ul>
				</div>
			</nav>
		</div>
	</div>
	<!-- /导航结束 -->
	<div id="slideshow-banner">
		<ul>
			<li class="slideshow-item"><img src="images/banner.jpg" alt="" /></li>
			<li class="slideshow-item"><img src="images/QQ截图20210527122913.jpg" alt="" /></li>
			<li class="slideshow-item"><img src="images/QQ截图20210527123302.jpg" alt="" /></li>
			<li class="slideshow-item"><img src="images/QQ截图20210527123434.jpg" alt="" /></li>
		</ul>
	</div>
</section>
<!-- /轮播图结束 -->
<!-- 关于 -->
<section class="about-w3ls" id="about">
	<div class="container-fluid">
		<div class="col-lg-6 col-md-6 col-sm-6 about-info1">
			<img src="images/about-pic.png" class="mini img-responsive slideanim" alt="">
			<h2 class="w3layouts w3 w3l agileinfo slideanim">关于Me</h2>
			<img src="images/aboutMe.jpg" class="max img-responsive slideanim" alt="">
		</div>
		<div class="col-lg-6 col-md-6 col-sm-6 about-info2">
			<p class="about-p1 w3layouts w3 w3l agileinfo slideanim"><strong>我说我是一名学渣你可能不信，但事实上我就是的，别的不会就会写一堆的英语单词和中文汉字，日常特长没有就会吃喝拉撒<u>颓废</u></strong></p>
			<p class="about-p1 wthree w3-agileits agileits-w3layouts agile w3-agile slideanim">来自：武汉信息传播职业技术学院的一封信</p>
			<ul class="sides slideanim">
				<li><p><span class="fa fa-fighter-jet" aria-hidden="true"></span> 没有微信</p></li>
				<li><p><span class="fa fa-fighter-jet" aria-hidden="true"></span> 没qq</p></li>
				<li><p><span class="fa fa-fighter-jet" aria-hidden="true"></span> 更没有钉钉</p></li>
			</ul>
		</div>
		<div class="clearfix"></div>
	</div>
</section>
<!-- /关于结束 -->
<!-- 组队 -->
<section class="team-w3ls slideanim" id="team">
	<div class="container">
		<h3 class="slideanim">合伙人</h3>
		<p class="text-header wthree w3-agileits agileits-w3layouts agile w3-agile slideanim">加利福利亚毕业生</p>
		<div class="col-lg-4 col-md-4 col-sm-4 team-agile1">
			<div class="team-info">
				<img src="images/team-img1.jpg" alt="" class="img-responsive slideanim">
				<div class="team-details slideanim">
					<h4 class="slideanim">雷进洲</h4>
					<p class="team-p1 slideanim">设计部</p>
					<ul class="social-icons1 slideanim">
					<li><a href="#"><i class="fa fa-qq"></i></a></li>
					<li><a href="#"><i class="fa fa-wechat"></i></a></li>
					<li><a href="#"><i class="fa fa-weibo"></i></a></li>
					<li><a href="#"><i class="fa fa-pagelines"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-4 col-sm-4 team-agile2">
			<div class="team-info">
				<img src="images/team-img2.jpg" alt="" class="img-responsive slideanim">
				<div class="team-details slideanim">
					<h4 class="slideanim">颜宏周</h4>
					<p class="team-p1 slideanim">研发部</p>
					<ul class="social-icons1 slideanim">
						<li><a href="http://wpa.qq.com/msgrd?v=3&uin=+184773349&site=qq&menu=yes"><i class="fa fa-qq"></i></a></li>
						<li><a href="#"><i class="fa fa-wechat"></i></a></li>
						<li><a href="#"><i class="fa fa-weibo"></i></a></li>
						<li><a href="#"><i class="fa fa-pagelines"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="col-lg-4 col-md-4 col-sm-4 team-agile3">
			<div class="team-info">
				<img src="images/team-img3.jpg" alt="" class="img-responsive slideanim">
				<div class="team-details slideanim">
					<h4 class="slideanim">貂蝉</h4>
					<p class="team-p1 slideanim">UI-设计部</p>
					<ul class="social-icons1 slideanim">
						<li><a href="#"><i class="fa fa-qq"></i></a></li>
						<li><a href="#"><i class="fa fa-wechat"></i></a></li>
						<li><a href="#"><i class="fa fa-weibo"></i></a></li>
						<li><a href="#"><i class="fa fa-pagelines"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- 组队 -->

<!-- 图集 -->
<section class="portfolio-w3ls" id="portfolio">
	<div class="container">
		<h3 class="slideanim">作品集合</h3>
		<p class="text-header slideanim">点击看效果</p>
	</div>
	 <div id="portfoliowrap" class="slideanim">
        <div class="portfolio-centered">
            <div class="recentitems portfolio">

                <div class="portfolio-item web-design" style="width: 330px;height: 330px;margin-left: 3;">
                    <div class="he-wrap tpl6">
					<img src="作品集/bili/bili.gif" alt="">
						<div class="he-view">
							<div class="bg a0" data-animate="fadeIn">
								<a href="作品集/bili/bili.html" class="toCheck" target="_blank" title="查看">查看 <i class="fa fa-search"></i></a>

                        	</div><!-- bg -->
						</div><!--  view -->
					</div><!--  wrap -->
				</div><!-- end col-12 -->

				<div class="portfolio-item web-design" style="width: 330px;height: 330px;margin-left: 3;">
					<div class="he-wrap tpl6">
					<img src="作品集/穿搭速递/cdsd.gif" alt="">
						<div class="he-view">
							<div class="bg a0" data-animate="fadeIn">
								<a href="作品集/穿搭速递/潮流.html" class="toCheck" target="_blank" title="查看">查看 <i class="fa fa-search"></i></a>

							</div><!-- bg -->
						</div><!--  view -->
					</div><!--  wrap -->
				</div><!-- end col-12 -->

				<div class="portfolio-item web-design" style="width: 330px;height: 330px;margin-left: 3;">
					<div class="he-wrap tpl6">
					<img src="作品集/pet/pet.gif" alt="">
						<div class="he-view">
							<div class="bg a0" data-animate="fadeIn">
								<a href="作品集/pet/pet.html" class="toCheck" target="_blank" title="查看" target="_blank">查看 <i class="fa fa-search"></i></a>

							</div><!-- bg -->
						</div><!--  view -->
					</div><!--  wrap -->
				</div><!-- end col-12 -->

				<div class="portfolio-item web-design" style="width: 330px;height: 330px;margin-left: 3;">
					<div class="he-wrap tpl6">
					<img src="作品集/cpdd/cpdd.gif" alt="">
						<div class="he-view">
							<div class="bg a0" data-animate="fadeIn">
								<a href="作品集/cpdd/cpdd.html" class="toCheck" target="_blank" title="查看">查看 <i class="fa fa-search"></i></a>

							</div><!-- bg -->
						</div><!--  view -->
					</div><!--  wrap -->
				</div><!-- end col-12 -->

				<div class="portfolio-item web-design" style="width: 330px;height: 330px;margin-left: 3;">
					<div class="he-wrap tpl6">
					<img src="作品集/cube/cube.gif" alt="">
						<div class="he-view">
							<div class="bg a0" data-animate="fadeIn">
								<a href="作品集/cube/cube.html" class="toCheck" target="_blank" title="查看">查看 <i class="fa fa-search"></i></a>

							</div><!-- bg -->
						</div><!--  view -->
					</div><!--  wrap -->
				</div><!-- end col-12 -->

				<div class="portfolio-item web-design" style="width: 330px;height: 330px;margin-left: 3;">
					<div class="he-wrap tpl6">
					<img src="作品集/project/project.gif" alt="">
						<div class="he-view">
							<div class="bg a0" data-animate="fadeIn">
								<a href="作品集/project/project.html" class="toCheck" target="_blank" title="查看">查看 <i class="fa fa-search"></i></a>

							</div><!-- bg -->
						</div><!--  view -->
					</div><!--  wrap -->
				</div><!-- end col-12 -->

				<div class="portfolio-item web-design" style="width: 330px;height: 330px;margin-left: 3;">
					<div class="he-wrap tpl6">
					<img src="作品集/ENstudy/ENstudy.gif" alt="">
						<div class="he-view">
							<div class="bg a0" data-animate="fadeIn">
								<a href="作品集/ENstudy/ENstudy.html" class="toCheck" target="_blank" title="查看">查看 <i class="fa fa-search"></i></a>

							</div><!-- bg -->
						</div><!--  view -->
					</div><!--  wrap -->
				</div><!-- end col-12 -->

				<div class="portfolio-item web-design" style="width: 330px;height: 330px;margin-left: 3;">
					<div class="he-wrap tpl6">
					<img src="作品集/DLAM/DLAM.jpg" alt="">
						<div class="he-view">
							<div class="bg a0" data-animate="fadeIn">
								<a href="作品集/DLAM/DLAM.html" class="toCheck" target="_blank" title="查看">查看 <i class="fa fa-search"></i></a>

							</div><!-- bg -->
						</div><!--  view -->
					</div><!--  wrap -->
				</div><!-- end col-12 -->


				<div class="portfolio-item web-design" style="width: 330px;height: 330px;margin-left: 3;">
					<div class="he-wrap tpl6">
					<img src="作品集/heartByDance/heartByDance.gif" alt="">
						<div class="he-view">
							<div class="bg a0" data-animate="fadeIn">
								<a href="作品集/heartByDance/heartByDance.html" target="_blank" class="toCheck" title="查看">查看 <i class="fa fa-search"></i></a>

							</div><!-- bg -->
						</div><!--  view -->
					</div><!--  wrap -->
				</div><!-- end col-12 -->

				<div class="portfolio-item web-design" style="width: 330px;height: 330px;margin-left: 3;">
					<div class="he-wrap tpl6">
					<img src="作品集/loading/loading.gif" alt="">
						<div class="he-view">
							<div class="bg a0" data-animate="fadeIn">
								<a href="作品集/loading/loading.html" target="_blank" class="toCheck" title="查看">查看 <i class="fa fa-search"></i></a>

							</div><!-- bg -->
						</div><!--  view -->
					</div><!--  wrap -->
				</div><!-- end col-12 -->

            </div>
        </div>
	 </div>
</section>

<!-- 指数 -->
<section class="stats-agileits" id="stats">
	<div class="container">
		<h3 class="slideanim">-评分</h3>
		<p class="text-header slideanim">指数</p>
		<div class="stats-grid stats-grid-1 slideanim">
			<div class="numscroller" data-slno='1' data-min='0' data-max='158' data-delay='3' data-increment="1">85</div>
			<h4>H5</h4>
		</div>
		<div class="stats-grid stats-grid-2 slideanim">
			<div class="numscroller" data-slno='1' data-min='0' data-max='63' data-delay='3' data-increment="1">95</div>
			<h4>CSs3</h4>
		</div>
		<div class="stats-grid stats-grid-3 slideanim">
			<div class="numscroller" data-slno='1' data-min='0' data-max='421' data-delay='3' data-increment="1">80</div>
			<h4>Vue</h4>
		</div>
		<div class="stats-grid stats-grid-4 slideanim">
			<div class="numscroller" data-slno='1' data-min='0' data-max='562' data-delay='3' data-increment="1">90</div>
			<h4>react</h4>
		</div>
		<div class="clearfix"></div>
	</div>
</section>
<!-- 、指数 -->
<!-- 名言 -->
<section class="test-w3ls slideanim" id="testimonial">
	<div class="container">
		<h3 class="slideanim">标杆墙</h3>
		<p class="text-header slideanim">自律的人最强</p>
		<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover">
			<!-- 索引1 -->
			<ol class="carousel-indicators slideanim">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<!-- 列表墙 -->
			<div class="carousel-inner slideanim" role="listbox">
				<div class="item active">
					<div class="test-agile">
						<div class="col-lg-4 col-md-4 col-sm-4 test-info1">
							<img src="images/test-img1.jpeg" class="img-responsive" alt="">
						</div>
						<div class="col-lg-8 col-md-8 col-sm-8 test-info2">
							<p class="test-p1">任何成功，勤奋和努力是必要条件，如果没有一个最低times;时的勤奋和努力，为什么你会成功呢？如果你想干times;时就成功，别人比你工作时间长，聪明程度一样，人家比你一倍努力，这就应了中国的古话：天道酬勤。董事长该干啥？我琢磨了一下，主要有三点：什么时候点做什么样的事情，这决定了公司的方向和战略；用什么样的人来干这件事情，寻找德才兼备的人不容易；怎么让人有动力愿意打仗，怎么样能够把事情做成。做好这个位置，最重要的是看人看事的眼光，是经验、阅历和胸怀。<span class="line-w3ls"></span></p>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="item">
					<div class="test-agile">
						<div class="col-lg-4 col-md-4 col-sm-4 test-info1">
							<img src="images/test-img2.jpg" class="img-responsive" alt="">
						</div>
						<div class="col-lg-8 col-md-8 col-sm-8 test-info2">
							<p class="test-p1">在点评《赢在中国》一位选手的时候，马云说道:“你自己很善良，也很有激情，也很幽默，也会讲很多的故事，但你的团队离开你的时候，你要想到一点，我们需要雷锋，但不能让雷锋穿补丁的衣服上街去，让他们跟你分享成功是很重要的。”人家问我你喜欢能干的员工还是听话的员工，我说Yes，就是既要听话又要能干，因为我不相信能干和听话是矛盾的，能干的人一定不听话，听话的人一定不能干，这种人要来干什么，不听话本身就不能干，对不对?<span class="line-w3ls"></span></p>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="item">
					<div class="test-agile">
						<div class="col-lg-4 col-md-4 col-sm-4 test-info1">
							<img src="images/test-img3.jpg" class="img-responsive" alt="">
						</div>
						<div class="col-lg-8 col-md-8 col-sm-8 test-info2">
							<p class="test-p1">既然选择远方，当不负青春，砥砺前行。青春由磨砺而出彩，人生因奋斗而升华！3、但行前路，不负韶华！每一个裂缝都是为透出光而努力，美好的一天，上帝不会就这样给你，需要自己去创造。你要做冲出的黑马 而不是坠落的星星，纵然世间黑暗，仍有一点星光，试一下，你会比你自己想象中的还要强大，眼里有不朽的光芒 心里有永恒的希望，等待的不仅仅是未来，还有希望…。只有极致的拼搏，才能配得上极致的风景。如果痛恨所处的黑暗，请你成为你想要的光，以蝼蚁之行，展鸿鹄之志，一个人至少拥有一个梦想，有一个理由去坚强。你可以一无所有，但绝不能一无是处。努力的时间还不够 哪有时间去绝望啊 彗星般的人生可以短暂，但绝不黯淡或沉沦。、抱怨身处黑暗，不如提灯前行。<span class="line-w3ls"></span></p>
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
			<!-- 左兰 -->
			<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</div>
</section>
<!-- 结 -->
<!-- news -->
<section class="update-w3ls" >
	<div class="container">
		<h3 class="slideanim">新鲜事</h3>
		<p class="text-header slideanim">现在我们正在发生什么？</p>
		<div class="col-lg-6 col-md-6 update-info1">
			<div class="update-agileits slideanim">
				<div class="col-sm-6 col-xs-6 update-agile1">
					<img src="images/update1.jpg" alt="" class="img-up slideanim">
				</div>
				<div class="col-sm-6 col-xs-6 update-agile2">
					<a href="#" data-toggle="modal" data-target="#basicModal1" class="slideanim"><h4>这个头像被热搜</h4></a>
					<p class="update-p1 slideanim">5-1</p>
					<p class="update-p2 slideanim">今天在我们寝室里，有一个人突然惊叫起来，习以为常的我们以为是元神又爆出什么好东西。然后然后他说：“这种帅气的头像哪里找啊！！！！”</p>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="col-lg-6 col-md-6 update-info2">
			<div class="update-agileits slideanim">
				<div class="col-sm-6 col-xs-6 update-agile1">
					<img src="images/update2.jpg" alt="" class="img-up slideanim">
				</div>
				<div class="col-sm-6 col-xs-6 update-agile2">
					<a href="#" data-toggle="modal" data-target="#basicModal2" class="slideanim"><h4>这个头像也上了热搜</h4></a>
					<p class="update-p1 slideanim">5-2</p>
					<p class="update-p2 slideanim">据上次的热搜时间，这次的头像热搜又展帷幕。在某班级某女生的一次尖叫成功的推动了同学头像统一 </p>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="clearfix"></div>
		<div class="modal fade" id="basicModal1" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title text-center" id="myModalLabel1">Literati</h4>
					</div>
					<div class="modal-body">
						<div class="col-lg-6 col-md-6 col-sm-12">
							<img src="images/update1.jpg" alt="" class="img-responsive">
						</div>
						<div class="col-lg-6 col-md-6 col-sm-12">
							 |
						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade" id="basicModal2" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title text-center" id="myModalLabel2">Literati</h4>
					</div>
					<div class="modal-body">
						<div class="col-lg-6 col-md-6 col-sm-12">
							<img src="images/update2.jpg" alt="" class="img-responsive">
						</div>
						<div class="col-lg-6 col-md-6 col-sm-12">
						<!-- 占位符 -->

						</div>
						<div class="clearfix"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- / -->

<!-- 底部联系 -->
<section class="contact-us slideanim" id="contact">
	<h3 class="text-center slideanim">联系我	 </h3>
	<p class="text-center slideanim">了解更多信息.</p>
	<div class="container">
		<div class="row">
			<div class="col-lg-5 col-md-5">
				<div class="contact-info">
					<h4 class="slideanim">联系方式 :-</h4>
					<p class="slideanim"><span>Phone</span>17671078240</p>
					<p class="slideanim"><span>Email</span><a href="mailto:184773349@qq.com">184773349@qq.com</a></p>
					<p class="addr slideanim"><span>地址</span>**************************</p>
					<ul class="social-icons2">
						<li><a href="#"><i class="fa fa-qq"></i></a></li>
						<li><a href="#"><i class="fa fa-wechat"></i></a></li>
						<li><a href="#"><i class="fa fa-weibo"></i></a></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-7 col-md-7">
				<form action="#" method="post">
					<div class="row">
						<div class="col-sm-12 form-group slideanim">
							<input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
						</div>
					</div>
					<div class="row email-bar">
						<div class="col-sm-12 form-group slideanim">
							<input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
						</div>
					</div>
					<textarea class="form-control slideanim" id="comments" name="comments" placeholder="Comment" rows="5" required></textarea><br>
					<div class="row">
						<div class="col-sm-12 form-group">
							<button class="btn btn-outline1 btn-lg" type="submit">发送</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</section>
<!-- /Contact -->
<!-- Footer Section -->
<section class="footer">
	<div class="container">
		<div class="copyright">
			<p>前端一锅端</p>
		</div>
	</div>
</section>
<!-- /Footer Section -->
<!-- back to top -->
<a href="#0" class="cd-top">Top</a>
<!-- /back to top -->

<script type="text/javascript">
	$('#slideshow-banner').slide({
		cdTime : 5000,
	    controllerLeftButton : "images/left.png",
	    controllerRightButton : "images/right.png"
	});
</script>

<script>
		$(function(){

			$('.thumbnail').viewbox();
			$('.thumbnail-2').viewbox();

			(function(){
				var vb = $('.popup-link').viewbox();
				$('.popup-open-button').click(function(){
					vb.trigger('viewbox.open');
				});
				$('.close-button').click(function(){
					vb.trigger('viewbox.close');
				});
			})();

			(function(){
				var vb = $('.popup-steps').viewbox({navButtons:false});

				$('.steps-button').click(function(){
					vb.trigger('viewbox.open',[0]);
				});

				$('.next-button').click(function(){
					vb.trigger('viewbox.open',[1]);
				});
				$('.prev-button').click(function(){
					vb.trigger('viewbox.open',[0]);
				});
				$('.ok-button').click(function(){
					vb.trigger('viewbox.close');
				});
			})();

		});
</script>

<script>

(function($) {
	"use strict";
	var ser = $("#search-box").val();
	$("searchBtn").click(function(){
		//搜索事件
	})
	var $container = $('.portfolio'),
		$items = $container.find('.portfolio-item'),
		portfolioLayout = 'fitRows';

		if( $container.hasClass('portfolio-centered') ) {
			portfolioLayout = 'masonry';
		}

		$container.isotope({
			filter: '*',
			animationEngine: 'best-available',
			layoutMode: portfolioLayout,
			animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false
		},
		masonry: {
		}
		}, refreshWaypoints());

		function refreshWaypoints() {
			setTimeout(function() {
			}, 1000);
		}

		$('nav.portfolio-filter ul a').on('click', function() {
				var selector = $(this).attr('data-filter');
				$container.isotope({ filter: selector }, refreshWaypoints());
				$('nav.portfolio-filter ul a').removeClass('active');
				$(this).addClass('active');
				return false;
		});

		function getColumnNumber() {
			var winWidth = $(window).width(),
			columnNumber = 1;

			if (winWidth > 1200) {
				columnNumber = 5;
			} else if (winWidth > 950) {
				columnNumber = 4;
			} else if (winWidth > 600) {
				columnNumber = 3;
			} else if (winWidth > 400) {
				columnNumber = 2;
			} else if (winWidth > 250) {
				columnNumber = 1;
			}
				return columnNumber;
			}

			function setColumns() {
				var winWidth = $(window).width(),
				columnNumber = getColumnNumber(),
				itemWidth = Math.floor(winWidth / columnNumber);

				$container.find('.portfolio-item').each(function() {
					$(this).css( {
					width : itemWidth + 'px'
				});
			});
		}

		function setPortfolio() {
			setColumns();
			$container.isotope('reLayout');
		}

		$container.imagesLoaded(function () {
			setPortfolio();
		});

		$(window).on('resize', function () {
		setPortfolio();
	});
})(jQuery);
</script>
<script>
$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});
</script>
<!-- /js files -->
</body>
</html>