<!--
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>Costamar A Travel Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</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="Costamar 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='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<script src="js/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
$(function () {
$("#slider").responsiveSlides({
auto: true,
speed: 500,
namespace: "callbacks",
pager: true,
});
});
</script>
</head>
<body>
<!-- header -->
<div class="banner">
<div class="callbacks_container">
<ul class="rslides" id="slider">
<li>
<img src="images/banner.jpg" class="img-responsive" alt="">
</li>
<li>
<img src="images/banner2.jpg" class="img-responsive" alt="">
</li>
<li>
<img src="images/banner3.jpg" class="img-responsive" alt="">
</li>
</ul>
</div>
<div class="header">
<div class="logo">
<a href="index.html"><img src="images/logo.png" class="img-responsive" alt="" /></a>
</div>
<div class="head-nav">
<span class="menu"> </span>
<ul class="cl-effect-16">
<li class="active"><a href="index.html" data-hover="HOME">HOME</a></li>
<li><a href="about.html" data-hover="ABOUT">ABOUT</a></li>
<li><a href="404.html" data-hover="FLIGHTS">FLIGHTS</a></li>
<li><a href="destination.html" data-hover="DESTINATIONS">DESTINATIONS</a></li>
<li><a href="contact.html" data-hover="CONTACTS">CONTACTS</a></li>
<div class="clearfix"> </div>
</ul>
</div>
<div class="clearfix"> </div>
<!-- script-for-nav -->
<script>
$( "span.menu" ).click(function() {
$( ".head-nav ul" ).slideToggle(300, function() {
// Animation complete.
});
});
</script>
<!-- script-for-nav -->
</div>
</div>
<!-- header -->
<!-- get -->
<div class="get">
<div class="container">
<div class="col-md-9 get-left">
<h1>Lorem Ipsum is simply dummy text of the printing and industry</h1>
</div>
<div class="col-md-3 get-right">
<a href="#" class="btn btn-1c btn1 btn-1d">GET STARTED</a>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- get -->
<!-- welcome -->
<div class="welcome">
<div class="col-md-6 welcome-left">
<img src="images/right.jpg" class="img-responsive" alt="" />
<div class="welcome-lefttop">
<h5>Contrary to popular belief, Lorem Ipsum simpl</h5>
<li><span>01.</span>There are many variations of passages </li>
<li><span>02.</span>Lorem ipsum dolor sit amet, consectet </li>
<li><span>03.</span>Ut wisi enim ad minim veniam, quis </li>
<li><span>04.</span>Duis autem vel eum iriure in hendrerit </li>
<div class="button">
<a href="#" class="btn btn-1c btn1 btn-1d">LEARN MORE</a>
</div>
</div>
</div>
<div class="col-md-6 welcome-right">
<h3>welcome</h3>
<h6>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution</h6>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
<div class="clearfix"> </div>
</div>
<!-- welcome -->
<!-- hand -->
<div class="hand">
<div class="container">
<h2>On the other hand, we dnounce </h2>
<div class="col-md-3 flights">
<i class="fligh"> </i>
<h4>flights</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-3 resturants">
<i class="rest"> </i>
<h4> resturants</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-3 beech">
<i class="beec"> </i>
<h4>beech</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col-md-3 cars">
<i class="ca"> </i>
<h4>cars</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- hand -->
<!-- midban-->
<div class="vero">
<div class="container">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<div class="vero-top">
<div class="col-md-4 vero-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<label> </label>
<h6>At vero eos et accusamus</h6>
<div class="button-1">
<a class="read-more" href="#">more</a>
</div>
</div>
<div class="col-md-4 vero-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<label> </label>
<h6>At vero eos et accusamus</h6>
<div class="button-1">
<a class="read-more" href="#">more</a>
</div>
</div>
<div class="col-md-4 vero-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<label> </label>
<h6>At vero eos et accusamus</h6>
<div class="button-1">
<a class="read-more" href="#">more</a>
</div>
</div>
<div class="clearfix"> </div>
</div>
</li>
<li>
<div class="vero-top">
<div class="col-md-4 vero-1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<label> </label>
<h6>At vero eos et accusamus</h6>
<div class="button-1">
<a class="read-more" href="#">more</a>
</div>
</div>
<div class="col-md-4 vero-2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<label> </label>
HTML+CSS+JS+JQ+Bootstrap的户外丛林旅行响应式网页.7z （37个子文件） 
【web课设】户外丛林旅行响应式网页-HTML源码 html js 
responsiveslides.min.js 3KB jquery.flexslider.js 39KB jquery.flexisel.js 8KB jquery.min.js 92KB css style.css 33KB flexslider.css 4KB bootstrap.css 118KB
404.html 3KB index.html 11KB contact.html 6KB about.html 9KB images 
pic5.jpg 4KB pic6.jpg 5KB midbanner.jpg 251KB
end.png 3KB 01.jpg 1.59MB menu.png 3KB banner.jpg 696KB logo.png 10KB t3.jpg 30KB
link1-bg.gif 1KB banner3.jpg 389KB pic4.jpg 4KB right.jpg 143KB marker02.png 1KB left.png 7KB t1.jpg 59KB stic.png 3KB stat.png 3KB t4.jpg 49KB img-sprite.png 18KB Untitled-2.psd 144KB dest_banner.jpg 354KB t2.jpg 44KB marker020.png 317B banner2.jpg 231KB destination.html 10KB资源评论
