<!DOCTYPE HTML>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<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="Fix duty 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>
<link href='#css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/swipebox.css">
<script src="js/jquery-1.8.3.min.js"></script>
<!------ Light Box ------>
<script src="js/jquery.swipebox.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$(".swipebox").swipebox();
});
</script>
<!------ Eng Light Box ------>
<!---- 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},1200);
});
});
</script>
<!---End-smoth-scrolling---->
<script src="js/responsiveslides.min.js"></script>
<script>
$(function () {
$("#slider").responsiveSlides({
auto: true,
nav: true,
speed: 500,
namespace: "callbacks",
pager: true,
});
});
</script>
</head>
<body>
<div class="header" id="head">
<div class="header-top">
<div class="container">
<div class="logo">
<a href="index.html"><img src="images/logo.png"></a>
</div>
<div class="top-menu">
<span class="menu"> </span>
<ul>
<li><a href="#home" class="active" class="scroll">home</a></li>
<li><a href="#aboutus" class="scroll">about us</a></li>
<li><a href="#service" class="scroll">service</a></li>
<li><a href="#portfolio" class="scroll">portfolio</a></li>
<li><a href="#testimonial" class="scroll">testimonial</a></li>
<li><a href="#team" class="scroll">team</a></li>
<li><a href="#pricing" class="scroll">pricing</a></li>
<li><a href="#blog" class="scroll">blog</a></li>
<li><a href="#contact" class="scroll">contact</a></li>
</ul>
</div>
<!--script-nav-->
<script>
$("span.menu").click(function(){
$(".top-menu ul").slideToggle("slow" , function(){
});
});
</script>
<div class="clearfix"> </div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="callbacks_container">
<ul class="rslides" id="slider">
<li>
<h3>Happiness is not something you postpone for the <span>future</span>; </h3>
<p>it is something you design for the present</p>
</li>
<li>
<h3>human being has so many skins inside for the <span>moment</span>; </h3>
<p>it is something you design for the present</p>
</li>
<li>
<h3>Happiness is not something you postpone for the <span>prefect</span>; </h3>
<p>it is something you design for the present</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content">
<div class="about-section" id="aboutus">
<div class="about-grids">
<div class="col-md-6 left-grid">
<img src="images/pic1.jpg" />
<div class="center-icon"> </div>
</div>
<div class="col-md-6 right-grid">
<div class="right-top">
<h3>We Love <span>Creativity</span></h3>
<p>How wonderful it is that nobody need wait a single moment before starting to improve the world.</p>
<p class="lable1">A human being has so many skins inside, covering the depths of the heart. We know so many things, but we don't know ourselves! Why, thirty or forty skins or hides, as thick and hard as an ox's or bear's, cover the soul. Go into your own ground and learn to know yourself there.
</p>
<p class="lable1">How wonderful it is that nobody need wait a single moment before starting to improve the world.How wonderful it is that nobody need wait a single moment before starting to improve the world.
</p>
</div>
<div class="right-bottom">
<h4>Do your little bit of good where you are; its those little bits of good put together that overwhelm the world.<h4>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="services-section" id="service">
<div class="container">
<div class="col-md-6 service-leftgrid">
<img src="images/icon1.png">
<h3>We work <span>Creativity</span></h3>
<p>A human being has so many skins inside, covering the depths of the heart. We know so many things, but we don't know ourselves! Why, thirty or forty skins or hides, as thick and hard as an ox's or bear's, cover the soul. Go into your own ground and learn to know yourself there.
</p>
</div>
<div class="col-md-6 service-rightgrid">
<div class="service1">
<div class="right-grid1">
<img src="images/img1.png">
</div>
<div class="right-grid2">
<h4>web design</h4>
<p>How wonderful it is that nobody need wait a singlemoment before starting to improve the world.</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="service2">
<div class="right-grid1">
<img src="images/img2.png">
</div>
<div class="right-grid2">
<h4>Web Development</h4>
<p>How wonderful it is that nobody need wait a singlemoment before starting to improve the world.</p>
</div>
<div class="clearfix"> </div>
</div>
<div class="service3">
<div class="right-grid1">
<img src="images/img3.png">
</div>
<div class="right-grid2">
<h4>Custom Work</h4>
<p>How wonderful it is that nobody need wait a singlemoment before starting to improve the world.</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="portfolio-section" id="portfolio">
<div class="continer">
<div class="portfolio-header">
<img src="images/icon2.png">
<h3>We Work <span>Perfectly</span></h3>
<p>A human being has so many skins inside, covering.</p>
</div>
<div class="portfolio" id="portfolio">
<ul id="filters" class="clearfix">
<li><span class="filter active" data-filter="app card icon web">All</span></li>
<li><span class="filter" data-filter="app">design</span></li>
<li><span class="filter" data-filter="card">wordpress</span></li>
<li><span class="filter" data-filter="app card icon">logos</span></li>
<li><span class="filter" data-filter="card icon web">custom</span></li>
</ul>
<!-- portfolio-section -->
</div>
<div class="copyrights">Collect from <a href="http://www.moobnn.com/" >免费模板</a></div>
<div id="portfoliolist">
<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
<div class="portfolio-