<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href='#css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='#css?family=Roboto:400,100,100italic,300,300italic,400italic,500,700,500italic,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='#css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='#css?family=Raleway:400,100,300,200,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='#css?family=Merriweather:400,300,300italic,400italic,700,900,900italic,700italic' rel='stylesheet' type='text/css'>
<!-- js -->
<script src="js/jquery.min.js"></script>
<!-- //js -->
<!-- for-mobile-apps -->
<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="Black and White 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>
<!-- //for-mobile-apps -->
<!-- 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},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
<!-- hover-effects -->
<link href="css/hover.css" rel="stylesheet" media="all">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<!-- //hover-effects -->
</head>
<body>
<!-- banner -->
<!-- header -->
<div class="banner">
<div class="header">
<div class="container">
<div class="banner-nav">
<span class="menu"><img src="images/menu.png" alt=" "/></span>
<ul class="nav1">
<nav class="cl-effect-3">
<li><a href="index.html" class="act">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a class="scroll" href="#team">Team</a></li>
<li><a class="scroll" href="#services">Services</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a class="scroll" href="#contact">Contact Us</a></li>
</nav>
</ul>
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt=" " /></a>
</div>
</div>
<!-- script for menu -->
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- //script for menu -->
</div>
</div>
<!-- //header-->
<!-- Slider-starts-Here -->
<script src="js/responsiveslides.min.js"></script>
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider3").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
</script>
<!--//End-slider-script -->
<div id="top" class="callbacks_container">
<ul class="rslides" id="slider3">
<li>
<div class="banner-info">
<h3>We build it with passion</h3>
<p>Just to be clear, we do this for fun not for you, just kidding.</p>
<div class="more">
<a href="#">READ MORE</a>
</div>
</div>
</li>
<li>
<div class="banner-info">
<h3>We Protect it with Security</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<div class="more">
<a href="#">READ MORE</a>
</div>
</div>
</li>
<li>
<div class="banner-info">
<h3>We build it with passion</h3>
<p>Vivamus varius nec diam vitae hendrerit bigus mit consectetur adipiscing.</p>
<div class="more">
<a href="#">READ MORE</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- //banner -->
<div class="copyrights">Collect from <a href="http://www.moobnn.com/" >免费模板</a></div>
<!-- banner-bottom -->
<div id="services" class="banner-bottom">
<div class="container">
<div class="banner-bottom-left">
<div class="year1">
<h3>2011</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiselit.
<span>Vivamus varius nec diam vitae hendrerit bigus mit.</span></p>
</div>
<div class="year-pos">
<img src="images/1.png" alt=" " />
</div>
<div class="year1 year3">
<h3>2013</h3>
<p>Sed at auctor sem, nec tincidunt elit. Pellentesque
<span>enim turpis, porttitor ac orci in, ultrices efficitur nisl.</span>
<span>Ut odio libero, sodales a tellus eleifend, suscipit</span> dapibus mi.</p>
</div>
<div class="year-pos1">
<img src="images/2.png" alt=" " />
</div>
</div>
<div class="banner-bottom-right">
<div class="year1 year2">
<h3>2012</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiselit.
<span>Vivamus varius nec diam vitae hendrerit bigus mit.</span>
<span>Begitus vit urna nulla.</span></p>
</div>
<div class="year-pos2">
<img src="images/3.png" alt=" " />
</div>
<div class="year1 year4">
<h3>2014</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiselit.
<span>Vivamus varius nec diam vitae hendrerit bigus mit.</span>
<span>Begitus vit urna nulla.</span></p>
</div>
<div class="year-pos3">
<img src="images/4.png" alt=" " />
</div>
</div>
</div>
<div class="grid-bann">
<span> </span>
</div>
<div class="clearfix"> </div>
</div>
<!-- //banner-bottom -->
<!-- team -->
<div id="team" class="team">
<div class="container">
<h3>This is our team</h3>
<p class="para">We are small but effective and ...</p>
<div class="team-grid1 start">
<div class="team-fig">
<span> </span>
</div>
<h4>Justin Twice</h4>
<p>Founder & CEO</p>
<ul>
<li><a href="#" class="twitter"> </a></li>
<li><a href="#" class="instagram"> </a></li>
</ul>
</div>
<div class="team-grids">
<div class="team-grid start">
<div class="team-fig1">
<span> </span>
</div>
<h4>Mark Once</h4>
<p>Designer & Front-End Developer</p>
<ul>
<li><a href="#" class="twitter"> </a></li>
<li><a href="#" class="instagram"> </a></li>
</ul>
</div>
<div class="team-grid start">
<div class="team-fig1">
<span> </span>
</div>
<h4>Antonio Never</h4>
<p>Someone & Somewhere</p>
<ul>
<li><a href="#" class="twitter"> </a></li>
<li><a href="#" class="instagram"> </a></li>
</ul>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!-- //team -->
<!-- blog -->
<div class="blog">
<div class="container">
<h3>We provide you everything</h3>
<p class="para1">Maybe not everything, but we provide you some stuff.</p>
<div class="blog-grids">
<div class="blog-grid">
<div class="blog-fig figure">
<span> </span>
</div>
黑色个性设计培训学校网站bootstrap模板_黑色 大图 个性 时间轴 设计师 培训 学校 bootstrap 单页.rar （39个子文件） 
黑色个性设计培训学校网站bootstrap模板_黑色 大图 个性 时间轴 设计师 培训 学校 bootstrap 单页 跳转 手机 响应式 html5 cpts_20_ei js 
responsiveslides.min.js 3KB easing.js 5KB move-top.js 1KB modernizr.custom.js 9KB jquery.min.js 92KB css style.css 39KB bootstrap.css 118KB font-awesome.min.css 21KB
index.html 11KB about.html 7KB single.html 6KB images 
2.jpg 75KB
banner.png 58KB dot.png 675B 10.png 1KB 9.png 1KB 3.png 1KB arrow.png 686B menu.png 791B 6.jpg 46KB banner.jpg 93KB logo.png 1KB 1.jpg 71KB img-sp.png 2KB mes.png 466B 1.png 773B 5.jpg 29KB 6.png 50KB blog.png 118KB 5.png 26KB 4.png 773B 8.png 966B call.png 596B 7.png 48KB 3.jpg 49KB img.png 2KB 2.png 712B 4.jpg 37KB blog.html 8KB资源评论
