<!DOCTYPE HTML>
<!--
Citrusy: A responsive HTML5 website template collect from 即刻工作室
Released for free under the Creative Commons Attribution 3.0 license
Visit for more great templates or follow us on Twitter @HTML5T
-->
<html>
<head>
<title>Citrusy collect from 即刻工作室</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<noscript>
<link rel="stylesheet" href="css/5grid/core.css" />
<link rel="stylesheet" href="css/5grid/core-desktop.css" />
<link rel="stylesheet" href="css/5grid/core-1200px.css" />
<link rel="stylesheet" href="css/5grid/core-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<script src="css/5grid/jquery.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none"></script>
<!--[if IE 9]><link rel="stylesheet" href="css/style-ie9.css" /><![endif]-->
</head><body class="homepage">
<div id="header-wrapper">
<header id="header">
<div class="5grid-layout">
<div class="row">
<div class="12u" id="logo"> <!-- Logo -->
<h1><a href="#" class="mobileUI-site-name">Citrusy</a></h1>
<p>collect from 即刻工作室</p>
</div>
</div>
</div>
<div class="5grid-layout">
<div class="row">
<div class="12u" id="menu">
<nav class="mobileUI-site-nav">
<ul>
<li class="current_page_item"><a href="index.html">Homepage</a></li>
<li><a href="threecolumn.html">Three Column</a></li>
<li><a href="twocolumn1.html">Two Column #1</a></li>
<li><a href="twocolumn2.html">Two Column #2</a></li>
<li><a href="onecolumn.html">One Column</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
<div id="wrapper">
<div class="5grid-layout">
<div class="row">
<div id="banner" class="12u">
<div class="container"><a href="#"><img src="images/pics01.jpg" alt=""></a></div>
</div>
</div>
</div>
<div id="marketing">
<div class="5grid-layout">
<div class="row divider">
<div class="3u">
<section>
<div class="mbox-style">
<h2 class="title">Maecenas luctus lectus</h2>
<div class="content">
<p class="subtitle">Pellentesque pede. Donec pulvinar metus. In eu odio at lectus mollis. </p>
<p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum.</p>
</div>
<p class="button-style2"><a href="#">More Details</a></p>
</div>
</section>
</div>
<div class="3u">
<section>
<div class="mbox-style">
<h2 class="title">Etiam posuere augue</h2>
<div class="content">
<p class="subtitle">Pellentesque pede. Donec pulvinar metus. In eu odio at lectus mollis. </p>
<p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum.</p>
</div>
<p class="button-style2"><a href="#">More Details</a></p>
</div>
</section>
</div>
<div class="3u">
<section>
<div class="mbox-style">
<h2 class="title">Fusce ultrices fringilla</h2>
<div class="content">
<p class="subtitle">Pellentesque pede. Donec pulvinar metus. In eu odio at lectus mollis. </p>
<p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum.</p>
</div>
<p class="button-style2"><a href="#">More Details</a></p>
</div>
</section>
</div>
<div class="3u">
<section>
<div class="mbox-style">
<h2 class="title">Nulla luctus eleifend</h2>
<div class="content">
<p class="subtitle">Pellentesque pede. Donec pulvinar metus. In eu odio at lectus mollis. </p>
<p>Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum.</p>
</div>
<p class="button-style2"><a href="#">More Details</a></p>
</div>
</section>
</div>
</div>
</div>
</div>
<div id="page">
<div class="5grid-layout">
<div class="row">
<div class="3u">
<div id="sidebar2">
<section>
<div class="sbox1">
<h2>Sidebar 2</h2>
<ul class="style1">
<li class="first"><a href="#">Maecenas luctus lectus at sapien</a></li>
<li><a href="#">Etiam rhoncus volutpat erat</a></li>
<li><a href="#">Donec dictum metus in sapien</a></li>
<li><a href="#">Nulla luctus eleifend purus</a></li>
<li><a href="#">Maecenas luctus lectus at sapien</a></li>
</ul>
</div>
</section>
<section>
<div class="sbox2">
<h2>Nulla eleifend</h2>
<ul class="style1">
<li class="first"><a href="#">Maecenas luctus lectus at sapien</a></li>
<li><a href="#">Donec dictum metus in sapien</a></li>
<li><a href="#">Integer gravida nibh quis urna</a></li>
<li><a href="#">Etiam posuere augue sit amet nisl</a></li>
<li><a href="#">Mauris vulputate dolor sit amet nibh</a></li>
<li><a href="#">Nulla luctus eleifend purus</a></li>
</ul>
</div>
</section>
</div>
</div>
<div class="6u">
<div class="mobileUI-main-content" id="content">
<section>
<div class="post">
<h2>Integer gravida nibh quis urna</h2>
<p><a href="#"><img src="images/pics03.jpg" alt=""></a><br>
Welcome to <strong>Citrusy</strong>, a free responsive HTML5 website template designed by <a href="http//shop109193845.taobao.com" title="即刻工作室">即刻工作室</a>. It features a modern business-oriented design, content-dense layout, and an easily replaceable banner. And like all of our templates, it is built on HTML5 and CSS3, has full responsive support for desktops, tablets, and mobile devices, and is 100% free to use personally or commercially under the Creative Commons license. Be sure to check out our website for more awesome free HTML5 templates and follow us on Twitter for updates and new releases! Enjoy!</p>
<p class="button-style3"><a href="#">Read Full Article</a></p>
</div>
</section>
</div>
</div>
<div class="3u" id="sidebar1">
<section>
<h2>Sidebar 1</h2>
<ul class="style2">
<li class="first">
<p class="date"><a href="#">October <b>23</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. </a></p>
</li>
<li>
<p class="date"><a href="#">October <b>20</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.</a></p>
</li>
<li>
<p class="date"><a href="#">October <b>18</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.</a></p>
</li>
<li>
<p class="date"><a href="#">October <b>13</b></a></p>
<p><a href="#">Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.</a></p>
</li>
</ul>
</section>
</div>
</div>
</div>
</div>
</div>
<div id="footer-wrapper">
<div class="5grid-layout">
<div class="row" id="footer-content">
<div class="3u" id="box1">
<section>
<h2>Maecenas luctus lectus</h2>
<p><a href="#"><img src="images/pics02.jpg" alt=""></a></p>
<p> </p>
<p>Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna, consequat.</p
H917_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip （32个子文件） 
H917 
twocolumn1.html 7KB twocolumn2.html 7KB threecolumn.html 8KB css 
style.css 5KB 5grid mobileUI-flat.css 1013B core.css 6KB core-noscript.css 3KB core-1000px.css 415B html5shiv.js 2KB init.js 17KB core-1200px.css 415B jquery.js 91KB core-fluid.css 394B core-mobile.css 1KB mobileUI-beveled.css 2KB core-desktop.css 2KB style-1000px.css 482B style-desktop.css 5KB style-fluid.css 482B style-mobile.css 4KB images 
img01.png 9KB img12.png 253B img10.png 230B
img11.jpg 774B
spacer.gif 43B style-1200px.css 482B index.html 10KB onecolumn.html 9KB images pics01.jpg 369KB pics02.jpg 53KB spacer.gif 43B pics03.jpg 56KB资源评论
