<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Declare page as mobile friendly -->
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0"/>
<!-- Declare page as iDevice WebApp friendly -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- iDevice WebApp Splash Screen, Regular Icon, iPhone, iPad, iPod Retina Icons -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/splash/splash-icon.png">
<!-- iPhone 3, 3Gs -->
<link rel="apple-touch-startup-image" href="images/splash/splash-screen.png" media="screen and (max-device-width: 320px)" />
<!-- iPhone 4 -->
<link rel="apple-touch-startup-image" href="images/splash/splash-screen_402x.png" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" />
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" sizes="640x1096" href="images/splash/splash-screen_403x.png" />
<!-- Page Title -->
<title>��Epsilon Elements������html5��Ӧʽ�ֻ�wap��վģ�����ع�������-����ģ�塾http//www.lanrenmb.com/HTML5/��</title>
<!-- Stylesheet Load -->
<link href="styles/style.css" rel="stylesheet" type="text/css">
<link href="styles/framework-style.css" rel="stylesheet" type="text/css">
<link href="styles/framework.css" rel="stylesheet" type="text/css">
<link href="styles/bxslider.css" rel="stylesheet" type="text/css">
<link href="styles/swipebox.css" rel="stylesheet" type="text/css">
<link href="styles/icons.css" rel="stylesheet" type="text/css">
<link href="styles/retina.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
<!--Page Scripts Load -->
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/hammer.js" type="text/javascript"></script>
<script src="scripts/jquery-ui-min.js" type="text/javascript"></script>
<script src="scripts/subscribe.js" type="text/javascript"></script>
<script src="scripts/contact.js" type="text/javascript"></script>
<script src="scripts/jquery.swipebox.js" type="text/javascript"></script>
<script src="scripts/bxslider.js" type="text/javascript"></script>
<script src="scripts/colorbox.js" type="text/javascript"></script>
<script src="scripts/retina.js" type="text/javascript"></script>
<script src="scripts/custom.js" type="text/javascript"></script>
<script src="scripts/framework.js" type="text/javascript"></script>
</head>
<body>
<div id="preloader">
<div id="status">
<p class="center-text">
Loading the content...
<em>Loading depends on your connection speed!</em>
</p>
</div>
</div>
<div class="header">
<a class="logo-home" href="index.html"><img src="images/logob.png" alt="img" width="40"></a>
<div class="header-text">
<strong>FLATY</strong>
<em>flat and gorgeous</em>
</div>
</div>
<div class="header-clear"></div>
<div class="content">
<a href="#" class="content-tab tab-one">Type</a>
<a href="#" class="content-tab tab-two">jQuery</a>
<a href="#" class="content-tab tab-three">Other</a>
<div class="decoration"></div>
<div class="clear"></div>
<div id="tab-one">
<div class="container no-bottom">
<div class="heading">
<div class="heading-left">
<em>a few type features</em>
<h3>TYPOGRAPHY FEATURES</h3>
</div>
<div class="heading-right">
<span class="icon icon-pencil"></span>
</div>
</div>
</div>
<div class="decoration"></div>
<!--Text Columns-->
<div class="container no-bottom">
<h4>1/1</h4>
<p>
Lorem ipsum dolor sit, consectetur adipiscing. Aliquam pellentesque, purus quis pellentesque fermentum, justo arcu posuere justo.
Lorem ipsum dolor sit, consectetur adipiscing.
</p>
</div>
<div class="column">
<div class="one-half">
<h4>1/2</h4>
<p class="no-bottom">
Lorem ipsum dolor sit, consectetur adipiscing. Aliquam pellentesque, purus quis pellentesque fermentum.
</p>
</div>
<div class="one-half">
<h4>2/2</h4>
<p class="no-bottom">
Lorem ipsum dolor sit, consectetur adipiscing. Aliquam pellentesque, purus quis pellentesque fermentum.
</p>
</div>
</div>
<div class="column">
<div class="one-third">
<h4>1/3</h4>
<p class="no-bottom">
Lorem ipsum dolor sit, consectetur adipiscing. Aliquam pellentesque, purus quis pellentesque.
</p>
</div>
<div class="one-third">
<h4>2/3</h4>
<p class="no-bottom">
Lorem ipsum dolor sit, consectetur adipiscing. Aliquam pellentesque, purus quis pellentesque.
</p>
</div>
<div class="one-third">
<h4>3/3</h4>
<p class="no-bottom">
Lorem ipsum dolor sit, consectetur adipiscing. Aliquam pellentesque, purus quis pellentesque.
</p>
</div>
</div>
<div class="decoration"></div>
<div class="container">
<img class="center-icon half-bottom" src="images/icons-large/icon1_402x.png" alt="img">
<h3 class="center-text uppercase">A large centered icon!</h3>
<p class="center-text no-bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing. <br>
Aliquam pellentesque, purus quis pellentesque fermentum, justo arcu posuere justo. <br>
</p>
</div>
<div class="decoration"></div>
<div class="column">
<div class="one-half">
<img class="center-icon" src="images/icons-large/icon2_402x.png" alt="img">
<h3 class="center-text uppercase">Big Icons?</h3>
<p class="center-text no-bottom">
Lorem ipsum dolor sit, consectetur adipiscing. <br>
Aliquam pellentesque, purus quis pellentesque fermentum, justo arcu posuere justo. <br>
</p>
</div>
<div class="one-half">
<img class="center-icon" src="images/icons-large/icon1_402x.png" alt="img">
<h3 class="center-text uppercase">Centerd up!</h3>
<p class="center-text no-bottom">
Lorem ipsum dolor sit, consectetur adipiscing. <br>
Aliquam pellentesque, purus quis pellentesque fermentum, justo arcu posuere justo. <br>
</p>
</div>
</div>
<!--<div class="container no-bottom">
<img class="column-icon" src="images/icons-large/icon1@2x.png" width="85" alt="img">
<h3>A large icon</h3>
<p>Lorem ipsum dolor sit amet, consec tetur adipiscing elit. </p>
</div> -->
<div class="decoration"></div>
<div class="column">
<div class="one-third">
<img class="center-icon" src="images/icons-large/icon2_402x.png" alt="img">
<h3 class="uppercase center-text">One Thirds</h3>
<p class="center-text no-bottom">
Lorem ipsum dolor sit, consectetur adipiscing.
Aliquam pellentesque, purus quis pellentesque fermentum, justo arcu posuere justo. <br>
</p>
</div>
<div class="one-third">
<img class="center-icon