<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Golden Template</title>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab: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="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1>Welcome To Our Studio!s</h1>
<h2>It’s nice to Meet you</h2>
<p class="text-center"><a href="#" class="button-submit">Tell Me More</a></p>
</div>
</div>
</header>
<section>
<article id="services">
<div class="width">
<div class="title">
<h2>Services</h2>
<p>Proin iaculis purus consequat sem cure.</p>
</div>
<div class="block">
<div class="item">
<h3>E-Commerce</h3>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p>
</div>
<div class="item">
<h3>Responsive Web</h3>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p>
</div>
<div class="item">
<h3>Web Security</h3>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt.</p>
</div>
</div>
</div>
</article>
<article id="portfolio">
<div class="width">
<div class="title">
<h2>Our Portfolio</h2>
<p>Proin iaculis purus consequat sem cure.</p>
</div>
<div class="block">
<div class="item">
<div class="thumb">
<img alt="" src="images/portfolio/burned.jpg" />
</div>
<div class="info">
<h3><a href="#">Ebony & Ivory</a></h3>
<p><a href="#">Brading</a></p>
</div>
</div>
<div class="item">
<div class="thumb">
<img alt="" src="images/portfolio/smart.jpg" />
</div>
<div class="info">
<h3><a href="#">Smart Stationary</a></h3>
<p><a href="#">Print Design</a></p>
</div>
</div>
<div class="item">
<div class="thumb">
<img alt="" src="images/portfolio/clever.jpg" />
</div>
<div class="info">
<h3><a href="#">Clever Poster</a></h3>
<p><a href="#">Print Design</a></p>
</div>
</div>
<div class="item">
<div class="thumb">
<img alt="" src="images/portfolio/vinyl.jpg" />
</div>
<div class="info">
<h3><a href="#">Vinyl Record</a></h3>
<p><a href="#">Product Mock-Up</a></p>
</div>
</div>
<div class="item">
<div class="thumb">
<img alt="" src="images/portfolio/treehouse.jpg" />
</div>
<div class="info">
<h3><a href="#">Treehouse Template</a></h3>
<p><a href="#">Web Design</a></p>
</div>
</div>
<div class="item">
<div class="thumb">
<img alt="" src="images/portfolio/burned.jpg" />
</div>
<div class="info">
<h3><a href="#">Burned Logo</a></h3>
<p><a href="#">Brading</a></p>
</div>
</div>
</div>
</div>
</article>
<article id="about">
<div class="width">
<div class="title">
<h2>About Us</h2>
<p>Proin iaculis purus consequat sem cure.</p>
</div>
<div class="block">
<div class="item">
<div class="left">
<h3>July 2010</h3>
<h4>Our Humble Beginnings</h4>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</p>
</div>
<div class="center">
<img alt="" src="images/about/001.jpg" />
</div>
</div>
<div class="item">
<div class="left">
<h3>January 2011</h3>
<h4>Facing Startup Battles</h4>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</p>
</div>
<div class="center">
<img alt="" src="images/about/002.jpg" />
</div>
</div>
<div class="item">
<div class="left">
<h3>December 2012</h3>
<h4>Enter The Dark Days</h4>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</p>
</div>
<div class="center">
<img alt="" src="images/about/003.jpg" />
</div>
</div>
<div class="item">
<div class="left">
<h3>February 2014</h3>
<h4>Our Triumph</h4>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit.</p>
</div>
<div class="center">
<img alt="" src="images/about/004.jpg" />
</div>
</div>
<div class="item">
<div class="left"></div>
<div class="center">
<a href="#" class="more"><span>Our</span> <span>Story</span> <span>Continues</span> <span>...</span></a>
</div>
</div>
</div>
</div>
</article>
<article id="team">
<div class="width">
<div class="title">
<h2>Our Amazing Team</h2>
<p>Proin iaculis purus consequat sem cure.</p>
</div>
<div class="block">
<div class="item">
<div class="thumb"></div>
<h3><a href="#">Kimberly Thompson</a></h3>
<p><a href="#">Marketer</a></p>
<ul>
<li><a href="#"><span class="icon twitter"></span></a></li>
<li><a href="#"><span class="icon facebook"></span></a></li>
<li><a href="#"><span class="icon pinterest"></span></a></li>
</ul>
</div>
<div class="item">
<div class="thumb"></div>
<h3><a href="#">Rico Massino</a></h3>
<p><a href="#">Coder</a></p>
<ul>
<li><a href="#"><span class="icon twitter"></span></a></li>
<li><a href="#"><span class="icon facebook"></span></a></li>
<li><a href="#"><span class="icon pinterest"></span></a></li>
</ul>
</div>
<div class="item">
<div class="thumb"></div>
<h3><a href="#">Uku Mason</a></h3>
<p><a href="#">Graphic Designer</a></p>
<ul>
<li><a href="#"><span class="icon twitter"></span></a></li>
<li><a href="#"><span class="icon facebook"></span></a></li>
<li><a href="#"><span class="icon pinterest"></span></a></li>
</ul>
</div>
</div>
<div class="info">
<p class="text-center">Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt proin iaculis.</p>
</div>
</div>
</article>
<article id="partners">
<div class="width">
<img alt="" src="images/partners.jpg" class="aligncenter" />
</div>
</article>
</section>
</div>
<footer>
<div id="footer">
<div class="width">
<div class="title">
<h2>Contact Us</h2>
<p>Proin iaculis purus consequat sem cure.</p>
<div class="form-block form-horz">
<div class="block">
<div class="float-left">
<div class="form-group">
<input type="text" placeholder="your Name *" />
</div>
<div class="form-group">
<input type="text" placeholder="your e-mail *" />
</div>
<div class="form-group">
<input type="text" placeholder="subject" />
</div>
</div>
<div class="float-right">
<div class="form-group">
<textarea placeholder="Your message *"></textarea>
</div>
</div>
</div>
<div class="block">
<div class="form-group">
<input type="submit" value="Send Message" class="button-submit" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<div class="width">
<ul>
<li><a href="#"><span class="icon black twitter"></span></a></li>
<li><a href="#"><span class="icon black facebook"></span></a></li>
<li><a href="#"><span class="icon black pinterest"></span></a></li>
<li><a href="#"><span class="icon black google"></span></a></li>
</ul>
<p>© Copyright 2014</p>
</div>
</div>
</footer>
</body>
</html>