<!DOCTYPE HTML>
<!--
Directive by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Directive by HTML5 UP</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/skel.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-wide.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
</head>
<body>
<!-- Header -->
<div id="header">
<span class="logo icon fa-paper-plane-o"></span>
<h1>Hi. This is Directive.</h1>
<p>A responsive HTML5 + CSS3 site template designed by <a href="http://html5up.net">HTML5 UP</a>
<br />
and released for free under the <a href="http://html5up.net/license">Creative Commons license</a>.</p>
</div>
<!-- Main -->
<div id="main">
<header class="major container 75%">
<h2>We conduct experiments that
<br />
may or may not seriously
<br />
break the universe</h2>
<!--
<p>Tellus erat mauris ipsum fermentum<br />
etiam vivamus nunc nibh morbi.</p>
-->
</header>
<div class="box alt container">
<section class="feature left">
<a href="#" class="image icon fa-signal"><img src="images/pic01.jpg" alt="" /></a>
<div class="content">
<h3>The First Thing</h3>
<p>Vitae natoque dictum etiam semper magnis enim feugiat amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce lacus.</p>
</div>
</section>
<section class="feature right">
<a href="#" class="image icon fa-code"><img src="images/pic02.jpg" alt="" /></a>
<div class="content">
<h3>The Second Thing</h3>
<p>Vitae natoque dictum etiam semper magnis enim feugiat amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce lacus.</p>
</div>
</section>
<section class="feature left">
<a href="#" class="image icon fa-mobile"><img src="images/pic03.jpg" alt="" /></a>
<div class="content">
<h3>The Third Thing</h3>
<p>Vitae natoque dictum etiam semper magnis enim feugiat amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce lacus.</p>
</div>
</section>
</div>
<!--
<div class="box container">
<header>
<h2>A lot of generic stuff</h2>
</header>
<section>
<header>
<h3>Paragraph</h3>
<p>This is the subtitle for this particular heading</p>
</header>
<p>Phasellus nisl nisl, varius id <sup>porttitor sed pellentesque</sup> ac orci. Pellentesque
habitant <strong>strong</strong> tristique <b>bold</b> et netus <i>italic</i> malesuada <em>emphasized</em> ac turpis egestas. Morbi
leo suscipit ut. Praesent <sub>id turpis vitae</sub> turpis pretium ultricies. Vestibulum sit
amet risus elit.</p>
</section>
<section>
<header>
<h3>Blockquote</h3>
</header>
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget.
tempus euismod. Vestibulum ante ipsum primis in faucibus.</blockquote>
</section>
<section>
<header>
<h3>Divider</h3>
</header>
<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra
ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia.</p>
<hr />
<p>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra
ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel. Praesent nec orci
facilisis leo magna. Cras sit amet urna eros, id egestas urna. Quisque aliquam
tempus euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia.</p>
</section>
<section>
<header>
<h3>Unordered List</h3>
</header>
<ul class="default">
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
</ul>
</section>
<section>
<header>
<h3>Ordered List</h3>
</header>
<ol class="default">
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
<li>Donec consectetur vestibulum dolor et pulvinar. Etiam vel felis enim, at viverra ligula. Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</li>
</ol>
</section>
<section>
<header>
<h3>Table</h3>
</header>
<div class="table-wrapper">
<table class="default">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>45815</td>
<td>Something</td>
<td>Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</td>
<td>29.99</td>
</tr>
<tr>
<td>24524</td>
<td>Nothing</td>
<td>Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</td>
<td>19.99</td>
</tr>
<tr>
<td>45815</td>
<td>Something</td>
<td>Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</td>
<td>29.99</td>
</tr>
<tr>
<td>24524</td>
<td>Nothing</td>
<td>Ut porttitor sagittis lorem, quis eleifend nisi ornare vel.</td>
<td>19.99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3"></td>
<td>100.00</td>
</tr>
</tfoot>
</table>
</div>
</section>
<section>
<header>
<h3>Form</h3>
</header>
<form method="post" action="#">
<div class="row">
<div class="6u 12u(mobilep)">
<label for="name">Name</label>
<input class="text" type="text" name="name" id="name" value="" placeholder="John Doe" />
</div>
<div class="6u 12u(mobilep)">
<label for="email">Email</label>
<input class="text" type="text" nam
x20_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip （45个子文件） 
x20 js 
skel.min.js 23KB init.js 4KB jquery.min.js 94KB css style.css 18KB skel.css 6KB style-narrower.css 285B style-narrow.css 205B style-wide.css 493B ie PIE.htc 40KB v8.css 2KB html5shiv.js 2KB backgroundsize.min.htc 4KB style-normal.css 1KB style-mobile.css 2KB font-awesome.min.css 23KB images 
bottom-1600.svg 885B top-1280.svg 895B
overlay.png 2KB xoverlay.png 40KB top-1600.svg 893B bottom-1280.svg 887B top-3200.svg 893B bottom-3200.svg 885B style-mobilep.css 1KB sass style-wide.scss 584B style-normal.scss 1KB _vars.scss 619B style-narrower.scss 367B ie v8.scss 2KB style-mobilep.scss 1KB style-narrow.scss 253B style-mobile.scss 2KB style.scss 15KB _mixins.scss 1KB
index.html 11KB images 
pic02.jpg 6KB header.jpg 38KB pic03.jpg 5KB pic01.jpg 4KB fonts FontAwesome.otf 92KB fontawesome-webfont.eot 59KB fontawesome-webfont.woff 70KB fontawesome-webfont.woff2 55KB fontawesome-webfont.svg 306KB fontawesome-webfont.ttf 119KB资源评论
