<!DOCTYPE HTML>
<html>
<head>
<title>The Bak-one Website Template | Home :: </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='#css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="css/imgeffect.css" />
<script src="js/jquery.min.js"></script>
<!-- start gallery Script -->
<script type="text/javascript" src="js/jquery.easing.min.js"></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: 0}, 500, 'easeOutQuad');
},
function () {
$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeInQuad');
$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
</script>
<!-- Add fancyBox main JS and CSS files -->
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
<link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
<script>
$(document).ready(function() {
$('.popup-with-zoom-anim').magnificPopup({
type: 'inline',
fixedContentPos: false,
fixedBgPos: true,
overflowY: 'auto',
closeBtnInside: true,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
</script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<!----end gallery----------->
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
});
});
</script>
</head>
<body>
<!----start-header----------->
<div class="header_bg">
<div class="wrap">
<div class="header">
<!--------start-logo------>
<div class="logo"> <a href="index.html"><img src="images/logo.png" alt="" /></a> </div>
<!--------end-logo--------->
<!----start-nav-------->
<div class="nav">
<ul>
<li><a href="#home" class="scroll">Home</a></li>
<li class="active"><a href="#portfolio" class="scroll">Portfolio</a></li>
<li><a href="#about" class="scroll">About</a></li>
<li><a href="#contact" class="scroll">Contact</a></li>
<div class="clear"> </div>
</ul>
</div>
<!-----end-nav-------->
<div class="clear"> </div>
</div>
</div>
</div>
<!------end-header------------>
<!-- start slider -->
<div class="slider_bg">
<div class="wrap">
<!---start-da-slider----->
<div class="da-slide">
<h2><span>We Build</span>Brand</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<a href="#" class="da-link">Learnmore</a> <a href="#portfolio" class="scroll"><span class="da-img"> </span> </a> </div>
<!---//End-da-slider----->
</div>
</div>
<div class="copyrights">Collect from <a href="http://www.moobnn.com/" >免费模板</a></div>
<!-----end-slider-------->
<!--start portfolio------>
<div class="wrap" id="portfolio">
<div class="main">
<!-- start gallery -->
<div class="gallery1">
<!--start-mfp -->
<div id="small-dialog1" class="mfp-hide">
<div class="pop_up">
<h2>Lorem ipsum sit amet</h2>
<img src="images/icon1.png" alt=""/>
<p class="para">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p>
</div>
</div>
<!--end-mfp -->
<!---start-content----->
<div class="gallery">
<div class="clear"> </div>
<div class="container">
<h2>Portfolio</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<ul id="filters" class="clearfix">
<li><span class="filter active" data-filter="app card icon logo web">All</span></li>
<li><span class="filter" data-filter="app web">Web Design</span></li>
<li><span class="filter" data-filter="icon web card">Graphic Design</span></li>
<li><span class="filter" data-filter="web app icon card">Flat Design</span></li>
</ul>
<div id="portfoliolist">
<div class="portfolio logo" data-cat="logo">
<div class="portfolio-wrapper"> <a class="popup-with-zoom-anim" href="#small-dialog1">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info"> <img src="images/zoom-white.png"/>
<h3>Example Title</h3>
<p><a href="#">Wed Desing</a></p>
</div>
</div>
</li>
</ul>
</a> </div>
</div>
<div class="portfolio app" data-cat="app">
<div class="portfolio-wrapper"> <a class="popup-with-zoom-anim" href="#small-dialog1">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-2">
<div class="ch-info"> <img src="images/zoom-white.png"/>
<h3>Example Title</h3>
<p><a href="#">Wed Desing</a></p>
</div>
</div>
</li>
</ul>
</a> </div>
</div>
<div class="hide">
<div class="portfolio web" data-cat="web">
<div class="portfolio-wrapper"> <a class="popup-with-zoom-anim" href="#small-dialog1">
<ul class="ch-grid">
<li>
<div class="ch-item ch-img-3">
<div class="ch-info"> <img src="images/zoom-white.png"/>
<h3>Example Title</h3>
<p><a href="#">Wed Desing</a></p>
</div>
</div>
</li>
</ul>
</a> </div>
</div>
</div>
<div class="portfolio card" data-cat="card">
<div class="portfolio-wrapper"> <a class="popup-with-zoom-anim" href="#small-dialog1">
<ul
Bak-one简洁单页响应式html5模板-简洁 响应式 单页 跳转 设计 案例 展示 绿色 css3.rar
版权申诉
123 浏览量
2022-11-20
09:12:55
上传
评论
收藏 554KB RAR 举报
Bak-one简洁单页响应式html5模板_简洁 响应式 单页 跳转 设计 案例 展示 绿色 css3.rar （36个子文件） 
Bak-one简洁单页响应式html5模板_简洁 响应式 单页 跳转 设计 案例 展示 绿色 css3 yzts_17_BakOne css 
magnific-popup.css 9KB style.css 19KB imgeffect.css 3KB images 
fax2.png 3KB icon4.png 15KB location.png 3KB
banner.jpg 172KB fax.png 3KB social-icons.png 2KB img1.jpg 68KB icon6.png 14KB fax1.png 3KB nav-icon.png 234B img2.jpg 68KB buttonimg.png 3KB icon5.png 11KB top-move.png 574B icon2.png 11KB icon1.png 16KB Thumbs.db 139KB phone.png 3KB logo.png 4KB zoom-white.png 2KB icon3.png 14KB mail.png 3KB img3.jpg 65KB buttonimgh.png 3KB
index.html 18KB js jquery.min.js 91KB move-top.js 1KB easing.js 5KB jquery.easing.min.js 5KB jquery.scrollTo.js 2KB jquery.magnific-popup.js 45KB jquery.mixitup.min.js 14KB fliplightbox.min.js 14KB资源评论
