<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Home</title>
<meta name="description" content="Free Html5 Templates and Free Responsive Themes Designed by Kimmy | zerotheme.com">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/zerogrid.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
<!--[if lt IE 8]>
<div style=' clear: both; text-align:center; position: relative;'>
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<script src="js/css3-mediaqueries.js"></script>
<![endif]-->
<link href='./images/favicon.ico' rel='icon' type='image/x-icon'/>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/kwiks.js"></script>
<script type="text/javascript">
var Main = Main || {};
jQuery(window).load(function() {
window.responsiveFlag = jQuery('#responsiveFlag').css('display');
Main.gallery = new Gallery();
jQuery(window).resize(function() {
Main.gallery.update();
});
});
function Gallery(){
var self = this;
container = jQuery('.flexslider'),
clone = container.clone( false );
this.init = function (){
if( responsiveFlag == 'block' ){
var slides = container.find('.slides');
slides.kwicks({
max : 500,
spacing : 0
}).find('li > a').click(function (){
return false;
});
} else {
container.flexslider();
}
}
this.update = function () {
var currentState = jQuery('#responsiveFlag').css('display');
if(responsiveFlag != currentState) {
responsiveFlag = currentState;
container.replaceWith(clone);
container = clone;
clone = container.clone( false );
this.init();
}
}
this.init();
}
</script>
</head>
<body>
<!--------------Header--------------->
<div class="wrap-header">
<header>
<div id="logo"><a href="#"><img src="./images/logo.png"/></a></div>
<nav>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</div>
<!--------------Slideshow--------------->
<section class="featured">
<div id="container">
<div class="flexslider">
<ul class="slides">
<li>
<a href="#"><img src="images/img01.jpg" /></a>
<div class="flex-caption">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
</div>
</li>
<li>
<a href="#"><img src="images/img02.jpg" /></a>
<div class="flex-caption">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
</div>
</li>
<li>
<a href="#"><img src="images/img03.jpg" /></a>
<div class="flex-caption">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
</div>
</li>
<li>
<a href="#"><img src="images/img04.jpg" /></a>
<div class="flex-caption">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In venenatis porttitor massa eget pretium. Mauris vel erat sem, id tempor est. Pellentesque lobortis iaculis massa quis auctor.</p>
</div>
</li>
</ul>
</div>
</div>
<span id="responsiveFlag"></span>
</section>
<!--------------Content--------------->
<section id="content">
<div class="zerogrid">
<div class="row">
<div id="main-content" class="col-2-3">
<article>
<div class="heading">
<h2><a href="#">Sed accumsan libero quis mi commodo et suscipit enim lacinia</a></h2>
<div class="info">
<ul><li><span>By: </span>Admin</li><li><span>Date: </span>November 26, 2016</li><li><span>Categories: </span>Cake</li><li><span>Comments: </span>5</li></ul>
<div class="clearboth"></div>
</div>
<img src="images/inacup_vanilla.jpg"/>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra convallis auctor. Sed accumsan libero quis mi commodo et suscipit enim lacinia. Morbi rutrum vulputate est sed faucibus. Nulla sed nisl mauris, id tristique tortor. Sed iaculis dapibus urna nec dictum. Proin non enim odio. Proin vitae turpis libero, eget feugiat enim. Sed fringilla facilisis convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra convallis auctor. Sed accumsan libero quis mi commodo et suscipit enim lacinia. Morbi rutrum vulputate est sed faucibus. Nulla sed nisl mauris, id tristique tortor. Sed iaculis dapibus urna nec dictum. Proin non enim odio.</p>
<a class="more" href="#">Read more --></a>
</div>
</article>
<article>
<div class="heading">
<h2><a href="#">Sed accumsan libero quis mi commodo et suscipit enim lacinia</a></h2>
<div class="info">
<ul><li><span>By: </span>Admin</li><li><span>Date: </span>November 26, 2016</li><li><span>Categories: </span>Cake</li><li><span>Comments: </span>5</li></ul>
<div class="clearboth"></div>
</div>
<img src="images/inacup_samoa.jpg" />
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam viverra convallis auctor. Sed accumsan libero quis mi commodo et suscipit enim lacinia. Morbi rutrum vulputate est sed faucibus. Nulla sed nisl mauris, id tristique tortor. Sed iaculis dapibus urna nec dictum. Proin non enim odio. Proin vitae turpis libero, eget feugiat enim. Sed fringilla facilisis convallis.</p>
<a class="more" href="#">Read more --></a>
</div>
</article>
<article>
<div class="heading">
<h2><a href="#">Sed accumsan libero quis mi commodo et suscipit enim lacinia</a></h2>
<div class="info">
<ul><li><span>By: </span>Admin</li><li><span>Date: </span>November 26, 2016</li><li><span>Categories: </span>Cake</li><li><span>Comments: </span>5</li></ul>
<div class="clearboth"></div>
</div>
<img src="images/inacup_pumpkin.jpg" />
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam v
食品蛋糕DIY网站HTML5模板是一款简洁好看的个人博客网站模板。.rar
版权申诉
7 浏览量
2021-11-06
12:47:53
上传
评论
收藏 1.83MB RAR 举报
半抹灯芯
- 粉丝: 74
- 资源: 1075
最新资源
- 详解protobuf-c之在C语言中如何使用repeated生成数组和字符串(包含配置pb-callback-t)
- Python 程序语言设计模式思路-并发模式:消费者模式:协调生产者和消费者之间的数据交换
- pythonA*算法(A-star algorithm),寻路算法
- guitest.zip
- udp_echo.v
- udp_echo_server.v
- python双向广度优先搜索算法(Bidirectional Breadth-First Search, BBFS),寻路算法
- python迭代加深算法(Iterative Deepening Depth-First Search, IDDFS),寻路算法
- 京东商品链接采集助手 2024版
- 基于Java的ApplicationPower快速项目生成脚手架设计源码
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈