<!DOCTYPE HTML>
<html>
<head>
<title>Twenty</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body class="index loading">
<!-- Header -->
<header id="header" class="alt">
<h1 id="logo"><a href="index.html">Twenty</a></h1>
<nav id="nav">
<ul>
<li class="current"><a href="index.html">Welcome</a></li>
<li class="submenu">
<a href="">Layouts</a>
<ul>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="submenu">
<a href="">Submenu</a>
<ul>
<li><a href="#">Dolore Sed</a></li>
<li><a href="#">Consequat</a></li>
<li><a href="#">Lorem Magna</a></li>
<li><a href="#">Sed Magna</a></li>
<li><a href="#">Ipsum Nisl</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" class="button special">Sign Up</a></li>
</ul>
</nav>
</header>
<!-- Banner -->
<section id="banner">
<!--
".inner" is set up as an inline-block so it automatically expands
in both directions to fit whatever's inside it. This means it won't
automatically wrap lines, so be sure to use line breaks where
appropriate (<br />).
-->
<div class="inner">
<header>
<h2>TWENTY</h2>
</header>
<p>This is <strong>Twenty</strong>, a free<br />
responsive template</p>
<footer>
<ul class="buttons vertical">
<li><a href="#main" class="button fit scrolly">Tell Me More</a></li>
</ul>
</footer>
</div>
</section>
<!-- Main -->
<article id="main">
<header class="special container">
<span class="icon fa-bar-chart-o"></span>
<h2>As this is my <strong>twentieth</strong> freebie
I decided to give it a really creative name.</h2>
<p>Turns out <strong>Twenty</strong> was the best I could come up with. Anyway, lame name aside,<br />
it's minimally designed, fully responsive, built on HTML5/CSS3/<strong>skel</strong>,
and, like all my stuff,<br />
released for free under the license. Have fun!</p>
</header>
<!-- One -->
<section class="wrapper style2 container special-alt">
<div class="row half">
<div class="8u">
<header>
<h2>Behold the <strong>icons</strong> that visualize what you’re all about. or just take up space. your call bro.</h2>
</header>
<p>Sed tristique purus vitae volutpat ultrices. Aliquam eu elit eget arcu comteger ut fermentum lorem. Lorem ipsum dolor sit amet. Sed tristique purus vitae volutpat ultrices. eu elit eget commodo. Sed tristique purus vitae volutpat ultrices. Aliquam eu elit eget arcu commodo.</p>
<footer>
<ul class="buttons">
<li><a href="#" class="button">Find Out More</a></li>
</ul>
</footer>
</div>
<div class="4u skel-cell-important">
<ul class="feature-icons">
<li><span class="icon fa-clock-o"><span class="label">Feature 1</span></span></li>
<li><span class="icon fa-volume-up"><span class="label">Feature 2</span></span></li>
<li><span class="icon fa-laptop"><span class="label">Feature 3</span></span></li>
<li><span class="icon fa-inbox"><span class="label">Feature 4</span></span></li>
<li><span class="icon fa-lock"><span class="label">Feature 5</span></span></li>
<li><span class="icon fa-cog"><span class="label">Feature 6</span></span></li>
</ul>
</div>
</div>
</section>
<!-- Two -->
<section class="wrapper style1 container special">
<div class="row">
<div class="4u">
<section>
<span class="icon feature fa-check"></span>
<header>
<h3>This is Something</h3>
</header>
<p>Sed tristique purus vitae volutpat ultrices. Aliquam eu elit eget arcu commodo suscipit dolor nec nibh. Proin a ullamcorper elit, et sagittis turpis. Integer ut fermentum.</p>
</section>
</div>
<div class="4u">
<section>
<span class="icon feature fa-check"></span>
<header>
<h3>Also Something</h3>
</header>
<p>Sed tristique purus vitae volutpat ultrices. Aliquam eu elit eget arcu commodo suscipit dolor nec nibh. Proin a ullamcorper elit, et sagittis turpis. Integer ut fermentum.</p>
</section>
</div>
<div class="4u">
<section>
<span class="icon feature fa-check"></span>
<header>
<h3>Probably Something</h3>
</header>
<p>Sed tristique purus vitae volutpat ultrices. Aliquam eu elit eget arcu commodo suscipit dolor nec nibh. Proin a ullamcorper elit, et sagittis turpis. Integer ut fermentum.</p>
</section>
</div>
</div>
</section>
<!-- Three -->
<section class="wrapper style3 container special">
<header class="major">
<h2>Next look at this <strong>cool stuff</strong></h2>
</header>
<div class="row">
<div class="6u">
<section>
<a href="#" class="image feature"><img src="images/pic01.jpg" alt="" /></a>
<header>
<h3>A Really Fast Train</h3>
</header>
<p>Sed tristique purus vitae volutpat commodo suscipit amet sed nibh. Proin a ullamcorper sed blandit. Sed tristique purus vitae volutpat commodo suscipit ullamcorper sed blandit lorem ipsum dolore.</p>
</section>
</div>
<div class="6u">
<section>
<a href="#" class="image feature"><img src="images/pic02.jpg" alt="" /></a>
<header>
<h3>An Airport Terminal</h3>
</header>
<p>Sed tristique purus vitae volutpat commodo suscipit amet sed nibh. Proin a ullamcorper sed blandit. Sed tristique purus vitae volutpat commodo suscipit ullamcorper sed blandit lorem ipsum dolore.</p>
</section>
</div>
</div>
<div class="row">
<div class="6u">
<section>
<a href="#" class="image feature"><img src="images/pic03.jpg" alt="" /></a>
<header>
<h3>Hyperspace Travel</h3>
</header>
<p>Sed tristique purus vitae volutpat commodo suscipit amet sed nibh. Proin a ullamcorper sed blandit. Sed tristique purus vitae volutpat commodo suscipit ullamcorper sed blandit lorem ipsum dolore.</p>
</section>
</div>
<div class="6u">
<section>
<a href="#" class="image feature"><img src="images/pic04.jpg" alt="" /></a>
<header>
<h3>And Another Train</h3>
</header>
<p>Sed tristique purus vitae volutpat commodo suscipit amet sed nibh.
html5单页模版Twenty是一款清爽风格的城市交通工具html5单页网站模版。.rar （42个子文件） 
html5单页模版Twenty是一款清爽风格的城市交通工具html5单页网站模版。 chahua3285 css 
style-wide.css 272B style-narrow.css 912B images 
dark-bl.svg 646B dark-tl.svg 632B dark-br.svg 660B
overlay.png 20KB light-tl.svg 636B light-br.svg 664B light-tr.svg 650B light-bl.svg 650B dark-tr.svg 646B ie backgroundsize.min.htc 4KB v8.css 420B html5shiv.js 2KB v9.css 48B skel.css 4KB style-noscript.css 189B style-mobile.css 2KB style-narrower.css 1KB font-awesome.min.css 17KB style.css 19KB style-normal.css 746B images 
pic03.jpg 53KB banner.jpg 127KB pic01.jpg 48KB pic02.jpg 55KB pic04.jpg 27KB
no-sidebar.html 6KB fonts fontawesome-webfont.eot 37KB fontawesome-webfont.woff 43KB FontAwesome.otf 61KB fontawesome-webfont.svg 197KB fontawesome-webfont.ttf 79KB index.html 10KB js jquery.min.js 94KB jquery.dropotron.min.js 4KB skel.min.js 19KB init.js 9KB skel-layers.min.js 14KB right-sidebar.html 8KB left-sidebar.html 8KB contact.html 4KB资源评论
