<!doctype html>
<!--
Design by Free Responsive Templates
http://www.free-responsive-templates.com
Released for free under a Creative Commons Attribution 3.0 Unported License (CC BY 3.0)
Coder: lsa, free.responsive.templates@gmail.com
Created: 12 September 2012
-->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Free Responsive Template #26- Summer Park-模板在线moobnn.com</title>
<link href='http://fonts.googleapis.com/css?family=Lustria|Niconne|McLaren' rel='stylesheet' type='text/css'>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
// DOM ready
$(function() {
// Create the dropdown base
$("<select />").appendTo("nav");
// Create default option "Go to..."
$("<option />", {
"selected": "selected",
"value" : "",
"text" : "Select a page"
}).appendTo("nav select");
// Populate dropdown with menu items
$("nav a").each(function() {
var el = $(this);
$("<option />", {
"value" : el.attr("href"),
"text" : el.text()
}).appendTo("nav select");
});
// To make dropdown actually work
$("nav select").change(function() {
window.location = $(this).find("option:selected").val();
});
});
</script>
</head>
<body>
<div class="wrapper">
<header>
<h1><a href="">summer park</a></h1>
<span>enjoy your stay</span>
<div class="clearfloat"></div>
<hr>
<nav>
<ul>
<li class="active"><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a></li>
<li><a href="">Blog</a></li>
<li class="lastNavBtn"><a href="">Contact</a></li>
</ul>
</nav>
<hr>
<div class="clearfloat"></div>
</header>
<section>
<div class="box">
<img src="images/pic1.jpg" alt="pic1">
<h2>Spring</h2>
<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
</p>
<p class="button"><a href="">Details</a></p>
</div>
<div class="box">
<img src="images/pic2.jpg" alt="pic2">
<h2>Summer</h2>
<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
</p>
<p class="button"><a href="">Details</a></p>
</div>
<div class="box">
<img src="images/pic3.jpg" alt="pic3">
<h2>Autumn</h2>
<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
</p>
<p class="button"><a href="">Details</a></p>
</div>
<div class="box lastBox">
<img src="images/pic4.jpg" alt="pic4">
<h2>Winter</h2>
<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
</p>
<p class="button"><a href="">Details</a></p>
</div>
</section>
<div class="clearfloat"></div>
<section>
<div class="wg">
<div class="welcome">
<h2>Welcome</h2>
<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.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
</p>
<hr>
<p class="readMore"><a href="">Read more...</a></p>
</div>
<div class="gallery">
<ul>
<li>
<img src="images/pic2.jpg" alt="pic2">
<p>Title name 1</p>
</li>
<li class="lastGal">
<img src="images/pic3.jpg" alt="pic3">
<p>Title name 2</p>
</li>
</ul>
<div class="clearfloat"></div>
<hr>
<p class="readMore"><a href="">Read more...</a></p>
</div>
<div class="clearfloat"></div>
</div>
</section>
<div class="clearfloat"></div>
<footer>
<hr>
<div class="icons">
<ul>
<li><a href=""><img src="images/facebook.png" alt="facebook icon"></a></li>
<li><a href=""><img src="images/twitter.png" alt="twitter icon"></a></li>
<li><a href=""><img src="images/googleplus.png" alt="google plus icon"></a></li>
<li><a href=""><img src="images/dribbble.png" alt="dribble icon"></a></li>
</ul>
</div>
<p>
Copyright © <a href="#">Your Site Name</a> | Collect Form <a href="http://www.moobnn.com/" title="模板在线">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络 淘宝店</a>
</p>
</footer>
</div>
</body>
</html>
灰色全屏图片画廊自适应css模板_灰色 高斯模糊 图片 画廊 展示 宽屏 自适应.rar （11个子文件） 
灰色全屏图片画廊自适应css模板_灰色 高斯模糊 图片 画廊 展示 宽屏 自适应 frt_26 css 
styles.css 4KB images 
pic3.jpg 54KB pic1.jpg 59KB pic2.jpg 53KB
twitter.png 928B facebook.png 766B siteBackground.jpg 23KB dribbble.png 2KB pic4.jpg 37KB googleplus.png 659B
index.html 6KB资源评论
