<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Calm Template</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://cdn.raulvalverde.com/css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/tinynav.min.js"></script>
<script type="text/javascript">
$(function () {
$('#nav').tinyNav({
active: 'selected',
indent: '?'
});
});
</script>
</head>
<body>
<div id="container">
<header>
<div class="width">
<div class="block">
<div class="logo">
<a href="#"><img alt="" src="images/logo.png" /></a>
</div>
<nav class="menu">
<ul id="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="block">
<div class="welcome">
<h1>Welcome Ladies & Gents to Calm Website.</h1>
<p>A theme more stylish than any other on ThemeForest.</p>
</div>
<div class="find">
<h2>Find Us Online</h2>
<nav class="share">
<ul>
<li class="twiiter"><a href="#">Twitter</a></li>
<li class="facebook"><a href="#">Facebook</a></li>
<li class="pink"><a href="#">Pink</a></li>
<li class="google"><a href="#">Google</a></li>
<li class="green"><a href="#">Green</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<section>
<div class="width">
<nav class="category">
<ul class="filter-menu">
<li><a href="#" data-filter="*" class="current">All</a></li>
<li><a href="#" data-filter=".design">Design</a></li>
<li><a href="#" data-filter=".branding">Branding</a></li>
<li><a href="#" data-filter=".graphic">Graphic</a></li>
<li><a href="#" data-filter=".animation">Animation</a></li>
<li><a href="#" data-filter=".illustration">Illustration</a></li>
<li><a href="#" data-filter=".photography">Photography</a></li>
</ul>
</nav>
<div class="block filter-container">
<article class="item design">
<p><img alt="" src="images/section/001.jpg" /></p>
<h2><a href="#">Working in Shop</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item branding">
<p><img alt="" src="images/section/002.jpg" /></p>
<h2><a href="#">Touch and Swipe</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item graphic">
<p><img alt="" src="images/section/003.jpg" /></p>
<h2><a href="#">What if you hire Arek</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item branding">
<p><img alt="" src="images/section/004.jpg" /></p>
<h2><a href="#">What if you hire Arek</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item illustration">
<p><img alt="" src="images/section/005.jpg" /></p>
<h2><a href="#">Working in Shop</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item photography">
<p><img alt="" src="images/section/006.jpg" /></p>
<h2><a href="#">Touch and Swipe</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item graphic">
<p><img alt="" src="images/section/007.jpg" /></p>
<h2><a href="#">What if you hire Arek</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item design">
<p><img alt="" src="images/section/008.jpg" /></p>
<h2><a href="#">What if you hire Arek</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item photography">
<p><img alt="" src="images/section/009.jpg" /></p>
<h2><a href="#">Working in Shop</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item animation">
<p><img alt="" src="images/section/010.jpg" /></p>
<h2><a href="#">Touch and Swipe</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item design">
<p><img alt="" src="images/section/011.jpg" /></p>
<h2><a href="#">What if you hire Arek</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item graphic">
<p><img alt="" src="images/section/012.jpg" /></p>
<h2><a href="#">What if you hire Arek</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item design">
<p><img alt="" src="images/section/001.jpg" /></p>
<h2><a href="#">Working in Shop</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item animation">
<p><img alt="" src="images/section/002.jpg" /></p>
<h2><a href="#">Touch and Swipe</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item graphic">
<p><img alt="" src="images/section/003.jpg" /></p>
<h2><a href="#">What if you hire Arek</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
<article class="item branding">
<p><img alt="" src="images/section/004.jpg" /></p>
<h2><a href="#">What if you hire Arek</a></h2>
<p><a href="#">Branding</a> / <a href="#">Design</a></p>
<nav>
<ul>
<li class="zoom"><a href="#">Zoom</a></li>
<li class="max"><a href="#">Max</a></li>
</ul>
</nav>
</article>
</div>
</div>
</section>
</div>
<footer>
<div class="width">
<div class="block">
<div class="item">
<h3>About Us</h3>
<p>Duis id eros ac eros cursus gravida a non magna. Sed vitae nisl diam, non sollicitudin mi. In dui arcu, rhoncus ac consequat eget, cursus sit amet risus.</p>
<nav class="info">
<ul>
<li>Address: Street 9890, New Something 1234, Country</li>
<li>Telephone: 1234 5678</li>
<li>Fax: 9876 5432</li>
</ul>
</nav>
<nav class="social">
<ul>
<li class="twiiter"><a href="#">Twitter</a></li>
<li class="facebook"><a href="#">Facebook</a></li>
<li class="instagram"><a href="#">Instagram</a></li>
<li class="foursquare"><a href="#">Foursquare</a></li>
<li class="flickr"><a href="#">Flickr</a></li>
</ul>
</nav>
</div>
<div class="item">
<h3>Latest Posts</h3>
<nav class="posts">
<ul>
<li><a href="#">Curabitur pharetra, ante!</a> <span>25 April 2013</span></li>
<li><a href="#">Gentle Marimba by Alastair Cameron</a> <span>01 May 2013</span></li>
<li><a href="#">Curabitur pharetra, ante!</a> <span>25 April 2013</span></li>
<li><a href="#">Gentle Marimba by Alastair Cameron</a> <span>01 May 2013</span></li>
</ul>
</nav>
</div>
<div class="item">
<h3>Latest Comments</h3>
<nav class="comments">
<ul>
<li><a href="#">Dann Petty on Curabitur pharetra, ante lobortis dictum.</a></li>
<li><a href="#">Kevin Kalde on Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. </a></li>
<li><a href="#">Sean McCabe on Class aptent taciti sociosqu ad litora torquent per </a></li>
</ul>
</nav>
</div>
<div class="item">
<h3>Flickr Photostream</h3>
<nav class="photos">
<ul>
<li><a href="#"><img alt="" src="images/photos/001.jpg" /></a></li>
<li><a href="#"><img alt="" src="images/photos/002.jpg" /></a></li>
<li><a href="#"><img alt="" src="images/photos/003.jpg" /></a></li>
<li><a href="#"><img alt="" src="images/photos/004.jpg" /></a></li>
<li><a href="#"><img alt="" src="images/photos/005.jpg" /></a></li>
<li><a href="#"><img alt="" src="images/photos/006.jpg" /></a></li>
<li><a href="#"><img alt="" src="images/photos/007.jpg" /></a></li>
<li><a href="#"><img alt="" src="images/photos/008.jpg" /></a></li>
<li><a href="#"><img alt="" src="images/photos/009.jpg" /></a></li>
<li><a href="#"><img alt="" src="images/photos/010.jpg" /></a></li>
<li><a href="#"><img alt="" src="images/photos/011.jpg" /></a></li>
<li><a href="#"><img alt="" src="images/photos/012.jpg" /></a></li>
</ul>
</nav>
</div>
</div>
<div class="block footer">
<nav class="options">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<p>Copyright 2013 Calm. All Rights Reserved</p>
</div>
</div>
</footer>
</body>
</html>