<!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, [email protected]
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模板-灰色 自适应
共11个文件
jpg:5个
png:4个
html:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 175 浏览量
2022-11-09
21:30:09
上传
评论
收藏 236KB RAR 举报
温馨提示
灰色全屏图片画廊自适应css模板_灰色 高斯模糊 图片 画廊 展示 宽屏 自适应.rar
资源推荐
资源详情
资源评论
收起资源包目录
灰色全屏图片画廊自适应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
共 11 条
- 1
资源评论
reg183
- 粉丝: 1814
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功