<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link rel="shortcut icon" type="image/x-icon" href="images/fav-icon.png" />
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<link href="css/theme-style.css" rel='stylesheet' type='text/css' />
<script src="js/jquery.easing.min.js"></script>
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/fav-icon.png" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
</script>
<!----webfonts---->
<!----//webfonts---->
<!----requred-js-files---->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<!----//requred-js-files---->
<script type="text/javascript" src="js/jquery.smint.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('.subMenu').smint({
'scrollSpeed' : 1000
});
});
</script>
</head>
<body onLoad="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<!----start-container----->
<div class="head-bg sTop">
<div class="conatiner">
<div class="col-lg-12 header-note">
<a href="#"><img src="images/logo.png" title="Flat style" /></a>
<h1>We are a Creative Digital Agency</h1>
<a class="btn btn-primary big-btn" href="#">Learn More <span> </span></a>
</div>
</div>
</div>
<!----//End-container----->
<!----start-top-nav---->
<nav class="subMenu navbar-custom navbar-scroll-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<img src="images/nav-icon.png" title="drop-down-menu" />
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-left navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="active">
<a id="sTop" class="subNavBtn" href="#">Home</a>
</li>
<li class="page-scroll">
<a id="s1" class="subNavBtn" href="#">About</a>
</li>
<li class="page-scroll">
<a id="s2" class="subNavBtn" href="#">Portfolio</a>
</li>
<li class="page-scroll">
<a id="s3" class="subNavBtn" href="#">Testimonials</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
<a id="s4" class="right-msg subNavBtn msg-icon"href="#"><span> </span></a>
<div class="clearfix"> </div>
</div>
<!-- /.container -->
</nav>
<!----//End-top-nav---->
<!---- start-top-grids---->
<div class="container">
<div class="row section s1 top-grids">
<div class="col-md-3 top-grid">
<span class="icon1"> </span>
<h2>Responsive Design</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="col-md-3 top-grid">
<span class="icon2"> </span>
<h2>Web Development</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="col-md-3 top-grid">
<span class="icon3"> </span>
<h2>Internet Marketing</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="col-md-3 top-grid">
<span class="icon4"> </span>
<h2>IOS Development</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!---- //End-top-grids---->
<!----start-about---->
<div class="about">
<div class="container">
<div class="col-md-6 divice">
<img class="img-responsive" src="images/divice.png" title="divice" />
</div>
<div class="col-md-6 divice-info">
<h3>Responsive Design</h3>
<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 veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<a class="btn btn-primary btn-red" href="#">Read More <span> </span></a>
</div>
</div>
</div>
<!----//End-about---->
<!----start-portfolio---->
<div class="portfolio section s2">
<div class="container portfolio-head">
<h3> Portfolio</h3>
<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 veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
<!---- start-portfolio-script----->
<script src="js/hover_pack.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: -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>
<!----//End-portfolio-script----->
<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">Branding</span></li>
<li><span class="filter" data-filter="card">Illustraions</span></li>
<li><span class="filter" data-filter="icon">Web design</span></li>
</ul>
<div id="portfoliolist">
<div class="portfolio logo1 mix_all" data-cat="logo" style="display: inline-block; opacity: 1;">
<div class="portfolio-wrapper">
<a data-toggle="modal" data-target=".bs-example-modal-md" href="#" class="b-link-strip
大气手机app应用展示响应式模板网站_大气 手机 app 应用 展示 宽屏 响应式 手机 响应式 案例 精品 精美 单l网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar （36个子文件） 
大气手机app应用展示响应式模板网站_大气 手机 app 应用 展示 宽屏 响应式 手机 响应式 案例 精品 精美 单页 跳转 图片 大图 扁平化 responsive html5 css3 bootstrap ftmp8_51_ha js 
bootstrap.min.js 28KB jquery.easing.min.js 5KB jquery.smint.js 4KB hover_pack.js 12KB respond.min.js 4KB html5shiv.js 2KB jquery.mixitup.min.js 14KB jquery.min.js 94KB css bootstrap.min.css 98KB theme-style.css 15KB bootstrap.css 118KB
index.html 17KB images 
p5.png 170KB racket-icon.png 713B arrow.png 295B logo.png 3KB social-icons.png 3KB
p8.jpg 21KB p4.jpg 24KB p6.jpg 25KB link-ico.png 2KB pagenate.png 764B bg.jpg 76KB fav-icon.png 827B close.png 1KB p7.jpg 7KB p2.jpg 14KB p3.jpg 16KB icons.png 11KB people.jpg 3KB divice.png 68KB p5.jpg 21KB msg.png 614B arrowh.png 308B p1.jpg 15KB nav-icon.png 477B资源评论
