<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>MappingHistory</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="wrapper"><!-- #wrapper -->
<header><!-- header -->
<h1><a href="#">Mapping History</a></h1>
<h2>Your tag line here</h2>
<img src="images/extrav1.png" width="280" height="200" alt=""> <img src="images/extrav2.png" width="280" height="200" alt=""> <img src="images/extrav3.png" width="280" height="200" alt=""><!-- header image -->
</header><!-- end of header -->
<nav><!-- top nav -->
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Our Team</a></li>
<li><a href="#">History</a></li>
<li><a href="">Vision</a></li>
</ul>
</li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Maps</a></li>
<li><a href="#">Books</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Travel Planning</a></li>
<li><a href="#">Reservations</a></li>
</ul>
</li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav><!-- end of top nav -->
<section id="main"><!-- #main content and sidebar area -->
<section id="container"><!-- #container -->
<section id="content"><!-- #content -->
<article>
<h2><a href="#">First Interesting Article or Section Title</a></h2>
<img src="images/windrose.png" alt="" class="alignleft" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. <a href="#">Duis sagittis ipsum</a>. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Duo partem graeco repudiare ne, vix cu graeci nostrud blandit. Agam graecis omnesque usu ut, veniam commune ne sit, vide lucilius complectitur at ius.</p>
</article>
<article>
<h2><a href="#">Second Section or Article Title</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Usu pericula argumentum repudiandae ea, ut vis deserunt oportere, assum nominavi percipitur ei ius. Nam timeam atomorum philosophia te, ut eum amet laoreet pertinax, an duo error aperiri reformidans. Et alii quas partiendo mei, wisi quaestio convenire et vix.</p>
</article>
</section><!-- end of #content -->
</section><!-- end of #container -->
<aside id="sidebar"><!-- sidebar -->
<h3>Things To Do</h3>
<ul>
<li><a href="#">Play Games</a></li>
<li><a href="#">Chat With Friends</a></li>
<li><a href="#">Swap Stories</a></li>
<li><a href="#">Sell Stuff</a></li>
<li><a href="#">Buy Stuff</a></li>
<li><a href="#">Trade Stuff</a></li>
</ul>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
</ul>
<h3>Did You Know?</h3>
<ul>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
<li><a href="#">Curabitur sodales</a></li>
<li><a href="#">Sed dignissim</a></li>
<li><a href="#">Fusce nec</a></li>
<li><a href="#">Nulla quis</a></li>
</ul>
<h3>Connect With Us</h3>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
</ul>
</aside><!-- end of sidebar -->
</section><!-- end of #main content and sidebar-->
<div class="copyrights">Collect from <a href="http://www.htmldivcss.com/" >Website Template</a></div>
<footer>
<section id="footer-area">
<section id="footer-outer-block">
<aside id="first" class="footer-segment">
<h3>Explore More</h3>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
<li><a href="#">four linkylinks</a></li>
<li><a href="#">five linkylinks</a></li>
</ul>
</aside><!-- end of #first footer segment -->
<aside id="second" class="footer-segment">
<h3>Our Most Popular</h3>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
<li><a href="#">four linkylinks</a></li>
<li><a href="#">five linkylinks</a></li>
</ul>
</aside><!-- end of #second footer segment -->
<aside id="third" class="footer-segment">
<h3>Just The Basics</h3>
<ul>
<li><a href="#">one linkylink</a></li>
<li><a href="#">two linkylinks</a></li>
<li><a href="#">three linkylinks</a></li>
<li><a href="#">four linkylinks</a></li>
<li><a href="#">five linkylinks</a></li>
</ul>
</aside><!-- end of #third footer segment -->
<aside id="fourth" class="footer-segment">
<h3>Recent Testimonial</h3>
<p>Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.More Templates <a href="http://www.htmldivcss.com/" target="_blank" title="模板在线">模板在线</a></p>
</aside><!-- end of #fourth footer segment -->
</section><!-- end of #footer-outer-block -->
</section><!-- end of #footer-area -->
</footer>
</div><!-- #wrapper -->
<!-- Free template created by http://freehtml5templates.com -->
</body>
</html>
