<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!doctype html>
<html>
<head>
<title>Taisteal a Travel category Flat bootstrap Responsive website Template | Home :: w3layouts</title>
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<!--web-font-->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,700,300,600,800,400' rel='stylesheet' type='text/css'>
<!--//web-font-->
<!-- Custom Theme files -->
<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="Taisteal 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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- //Custom Theme files -->
<!-- js -->
<script src="js/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<!-- //js -->
<!-- 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" src="js/modernizr.custom.53451.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>
<!--//end-smoth-scrolling-->
</head>
<body>
<!--banner-->
<div class="banner">
<!--header-->
<div class="header">
<div class="container">
<div class="header-logo">
<a href="index.html"><img src="images/logo.png" alt="logo"/></a>
</div>
<div class="top-nav">
<span class="menu"> </span>
<ul class="nav1">
<li><a href="index.html" class="active scroll">HOME</a></li>
<li><a href="#about" class="scroll">ABOUT</a></li>
<li><a href="#portfolio" class="scroll">PORTFOLIOS</a></li>
<li><a href="#team" class="scroll">TEAM</a></li>
<li><a href="#blog" class="scroll">BLOG</a></li>
<li><a href="#contact" class="scroll">CONTACT</a></li>
</ul>
<!-- script-for-menu -->
<script>
$( "span.menu" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- /script-for-menu -->
</div>
<div class="clearfix"> </div>
</div>
</div>
<!--//header-->
<div class="container">
<div class="banner-title">
<h5>GRAB YOUR ATTENTION</h5>
<h1><span>TRAVELERS </span> REPOSE AND DREAM AMONG MY <span> LEAVES</span></h1>
<div class="download">
<a href="#">SHOW ON THE MAP</a>
</div>
</div>
</div>
</div>
<!--//banner-->
<div class="about" id="about">
<div class="container">
<h3>KNOW ABOUT US</h3>
<span></span>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim </p>
</div>
</div>
<div class="about-bottom">
<div class="col-md-6 about-bottom-left">
<h4>WE ARE THE BEST</h4>
<p class="top">Consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat </p>
<p>Volutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor
in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum </p>
<div class="read-more">
<a href="#">READ MORE<span></span></a>
</div>
</div>
<div class="col-md-6 about-bottom-right">
<img src="images/img1.jpg" alt="">
</div>
<div class="clearfix"> </div>
</div>
<div class="service">
<div class="container">
<h4>SERVICES WE PROVIDE</h4>
<p>Volutpat wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent </p>
<div class="service-grids">
<div class="col-md-4">
<img src="images/icon1.png" alt=""/>
<h5>CONSULTANCY</h5>
<p>Claritas est etiam processus dynaicus qui sequitur mutationem consuetudium lectorum. Mirum est notare quam </p>
</div>
<div class="col-md-4">
<img src="images/icon2.png" alt=""/>
<h5>TRAVEL-TRIPS</h5>
<p>Claritas est etiam processus dynaicus qui sequitur mutationem consuetudium lectorum. Mirum est notare quam </p>
</div>
<div class="col-md-4">
<img src="images/icon3.png" alt=""/>
<h5>REASERCH</h5>
<p>Claritas est etiam processus dynaicus qui sequitur mutationem consuetudium lectorum. Mirum est notare quam </p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--skills-->
<div class="skills">
<div class="container">
<h4>OUR SKILLS</h4>
<div class="skill-circles">
<div class="circle-grids">
<div class="circle" id="circles-1"></div>
<lable>GUIDANCE</lable>
</div>
<div class="circle-grids">
<div class="circle" id="circles-2"></div>
<lable>SPECIAL-OFFERS</lable>
</div>
<div class="circle-grids">
<div class="circle" id="circles-3"></div>
<lable>HOTELS</lable>
</div>
<div class="circle-grids">
<div class="circle" id="circles-4"></div>
<lable>FOOD</lable>
</div>
<div class="circle-grids crcl-5">
<div class="circle" id="circles-5"></div>
<lable>CONSULTANCY</lable>
</div>
<div class="clearfix"> </div>
<!--script-->
<script type="text/javascript" src="js/circles.js"></script>
<script>
var colors = [
['#79796D', '#FFFFFF'], ['rgb(69, 69, 59)', '#FFFFFF'], ['#1F1E19', '#FFFFFF'], ['#1F1E19', '#FFFFFF'],['#0F0E0A', '#FFFFFF']
];
for (var i = 1; i <= 5; i++) {
var child = document.getElementById('circles-' + i),
percentage = 75;
Circles.create({
id: child.id,
percentage: 75,
radius: 80,
width: 4,
number: 85,
text: '%',
colors: colors[i - 1]
});
}
</script>
<!--/end-->
</div>
</div>
</div>
<!--//skills-->
<!--project-->
<div class="projects about" id="portfolio">
<div class="container">
<h3> RECENT TRIPS</h3>
<span></span>
<p>Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim </p>
</div>
</div>
<div class="project-gallery">
<div class="gallery-grids">
<div class="gallery-grids-info">
<img src="images/img3.jpg" alt=""/>
<div class="caption">
<h4>PAPERCLIPS</h4>
<span></span>
<p>BRANDING</p>
</div>
</div>
<div class="gallery-grids-info">
<img src="images/img4.jpg" alt=""/>
HTML网站源码-海岸城市旅行响应式网页模板-适配移动端&PC端.zip （33个子文件） 
HTML网站源码-海岸城市旅行响应式网页模板-适配移动端&PC端 html js 
responsiveslides.min.js 3KB circles.js 7KB modernizr.custom.53451.js 9KB easing.js 5KB move-top.js 1KB modernizr.custom.js 9KB jquery.min.js 92KB css style.css 35KB bootstrap.css 118KB
index.html 19KB images 
img6.jpg 47KB
icon1.png 4KB banner.jpg 965KB logo.png 5KB img2.jpg 167KB img5.jpg 65KB img13.jpg 57KB img10.jpg 37KB move-up.png 3KB img11.jpg 52KB img4.jpg 33KB icons-sprite.png 7KB img1.jpg 335KB menu-icon.png 3KB img7.jpg 64KB img3.jpg 71KB img8.jpg 56KB icon3.png 4KB icons.png 3KB img14.jpg 147KB img12.jpg 39KB img9.jpg 38KB icon2.png 4KB资源评论
