<!DOCTYPE HTML>
<!--
Tessellate 1.0 by HTML5 UP
html5up.net | @n33co
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Tessellate by HTML5 UP</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic" rel="stylesheet" type="text/css" />
<!--[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-noscript.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]-->
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie/v9.css" /><![endif]-->
</head>
<body>
<!-- Header -->
<section id="header" class="dark">
<header>
<h1>Welcome to Tessellate</h1>
<p>A free responsive site template by <a href="#/">HTML5 UP</a></p>
</header>
<footer>
<a href="#first" class="button scrolly">Proceed to second phase</a>
</footer>
</section>
<!-- First -->
<section id="first" class="main">
<header>
<div class="container">
<h2>Tessellate is a free responsive site template</h2>
<p>Gravida dis placerat lectus ante vel nunc euismod eget ornare varius gravida euismod lorem ipsum dolor sit amet consequat<br />
feugiat. Gravida dis placerat lectus ante vel nunc euismod eget ornare varius gravida euismod lorem ipsum dolor sit amet.</p>
</div>
</header>
<div class="content dark style1 featured">
<div class="container">
<div class="row">
<div class="4u">
<section>
<span class="feature-icon"><span class="fa fa-clock-o"></span></span>
<header>
<h3>Gravida</h3>
</header>
<p>Gravida dis placerat lectus ante vel nunc euismod est turpis sodales.
Diam tempor dui lacinia accumsan vivamus. Gravida dis placerat lectus
ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia
accumsan vivamus.</p>
</section>
</div>
<div class="4u">
<section>
<span class="feature-icon"><span class="fa fa-bolt"></span></span>
<header>
<h3>Vivamus</h3>
</header>
<p>Gravida dis placerat lectus ante vel nunc euismod est turpis sodales.
Diam tempor dui lacinia accumsan vivamus. Gravida dis placerat lectus
ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia
accumsan vivamus.</p>
</section>
</div>
<div class="4u">
<section>
<span class="feature-icon"><span class="fa fa-cloud"></span></span>
<header>
<h3>Accumsan</h3>
</header>
<p>Gravida dis placerat lectus ante vel nunc euismod est turpis sodales.
Diam tempor dui lacinia accumsan vivamus. Gravida dis placerat lectus
ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia
accumsan vivamus.</p>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<footer>
<a href="#second" class="button scrolly">Gravida tempor lacinia</a>
</footer>
</div>
</div>
</div>
</div>
</section>
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div>
<!-- Second -->
<section id="second" class="main">
<header>
<div class="container">
<h2>Euismod sed feugiat lorem tempus magna</h2>
<p>Gravida dis placerat lectus ante vel nunc euismod eget ornare varius gravida euismod lorem ipsum dolor sit amet consequat<br />
feugiat. Gravida dis placerat lectus ante vel nunc euismod eget ornare varius gravida euismod lorem ipsum dolor sit amet.</p>
</div>
</header>
<div class="content dark style2">
<div class="container">
<div class="row">
<div class="4u">
<section>
<h3>Augue vivamus sed ipsum commodo lorem dolor</h3>
<p>Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam
tempor dui lacinia eget ornare varius gravida. Gravida dis placerat lectus ante
vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus
augue cubilia vivamus nisi eu eget ornare varius gravida euismod. Gravida dis
lorem ipsum dolor placerat magna tempus feugiat.</p>
<p>Lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia
accumsan vivamus augue cubilia vivamus nisi eu eget ornare varius gravida dolore
euismod lorem ipsum dolor.</p>
<footer>
<a href="#third" class="button scrolly">Accumsan nisi tempor</a>
</footer>
</section>
</div>
<div class="8u">
<div class="row no-collapse">
<div class="6u"><a href="http://ineedchemicalx.deviantart.com/art/You-and-I-collide-401457901" class="image full"><img src="images/pic01.jpg" alt="" /></a></div>
<div class="6u"><a href="http://ineedchemicalx.deviantart.com/art/Emperor-of-the-Stars-370265193" class="image full"><img src="images/pic02.jpg" alt="" /></a></div>
</div>
<div class="row no-collapse">
<div class="6u"><a href="http://ineedchemicalx.deviantart.com/art/Sherlockin-369847236" class="image full"><img src="images/pic03.jpg" alt="" /></a></div>
<div class="6u"><a href="http://ineedchemicalx.deviantart.com/art/A-breath-of-Hope-366359145" class="image full"><img src="images/pic04.jpg" alt="" /></a></div>
</div>
<div class="row no-collapse">
<div class="6u"><a href="http://ineedchemicalx.deviantart.com/art/The-Pursuit-355003425" class="image full"><img src="images/pic05.jpg" alt="" /></a></div>
<div class="6u"><a href="http://ineedchemicalx.deviantart.com/art/Cherish-320041163" class="image full"><img src="images/pic06.jpg" alt="" /></a></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Third -->
<section id="third" class="main">
<header>
<div class="container">
<h2>Ornare varius lorem ipsum ante lectus</h2>
<p>Gravida dis placerat lectus ante vel nunc euismod eget ornare varius gravida euismod lorem ipsum dolor sit amet consequat<br />
feugiat. Gravida dis placerat lectus ante vel nunc euismod eget ornare varius gravida euismod lorem ipsum dolor sit amet.</p>
</div>
</header>
<div class="content dark style3">
<div class="container">
<span class="image featured"><img src="images/pic07.jpg" alt="" /></span>
<div class="row">
<div class="4u">
<h3>Diam vivamus turpis lorem sodales lectus ornare</h3>
<p>Gravida dis placerat lectus ante vel nunc euismod est turpis sodales. Diam
tempor dui lacinia eget ornare varius gravida. Gravida dis placerat lectus ante
vel nunc euismod est turpis sodales. Diam tempor dui lacinia accumsan vivamus
augue cubilia vivamus nisi eu eget ornare varius gravida euismod. Gravida dis
lorem ipsum dolor placerat magna tempus feugiat.</p>
<p>Lectus ante vel nunc euismod est turpis sodales. Diam tempor dui lacinia
accumsan vivamus augue cubilia vivamus nisi eu eget ornare varius gravida dolore
euismod lorem ipsum dolor sit amet consequat. vivamus nisi eu eget ornare varius
gravida dolore euismod lorem i