Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

executable file 279 lines (230 sloc) 11.47 kb
<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Metro - Responsive Portfolio Theme</title>
<meta name="description" content="Metro is an extremely cool html theme for agency portfolios or business, with unique design elements and great features.">
<meta name="author" content="rubenbristian.com">
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<link id="windStyle" rel="stylesheet" href="css/style.dark.css">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<div id="wrapper" class="clearfix"><div id="main">
<header class="mainHeader clearfix">
<a href="index.html"><img id="logo" src="images/logo.png" alt="Metro Studio" /></a>
<nav id="menu">
<ul>
<li><a href="index.html">Home</a>
<hr />
<ul>
<li><a href="index.html">Masonry</a></li>
<li><a href="index2.html">Traditional</a></li>
</ul>
</li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="#">Features</a>
<hr />
<ul>
<li><a href="shortcodes.html">Shortcodes</a></li>
<li><a href="columns.html">Columns</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="pricing.html">Pricing Table</a></li>
<li><a href="404.html">404</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<h1><strong>Metro Studio.</strong> Creative Design Agency of the Decade.<br />
<span>We create clean, unique &amp; unforgettable digital brands.</span></h1>
</header>
<article class="columns clearfix">
<header class="leftSide"><div class="clearfix">
<h3 class="sectionHeader">Who we are</h3><hr /><p>We are a team of <strong>8 geeks</strong><br />We drink <strong>12 coffees</strong> a day<br />We won <strong>15</strong> web <strong>awards</strong><br />We had over <strong>120 clients</strong></p>
</div></header>
<div class="rightSide clearfix">
<section class="col1">
<h3 class="sectionHeader">A few words about us</h3><hr />
<figure class="rightImage">
<a href="images/photos/pic140.jpg" data-rel="prettyPhoto" class="prettyHover" title="Back in 2004"><img alt="About us" src="images/photos/pic129.jpg"></a>
<figcaption>&rarr; Back in 2004</figcaption>
</figure>
<p>We are an award-winning &amp; creative web agency located in the heart of London.
<br /><br />
Focused on developing great products and apps, our team of designers, coders and developers work all day long to craft and deliver high quality web applications and software. We work hard and we can makee your ideas &amp; dreams come true!
<br /><br />
We started back in 2004 when the web was still a bunch of lorem ipsum content pixellated with a lot of weird images. Now, almost 8 years after, we made ourselves a great portfolio and a really cool list of clients. If you like our work and style you can be our next partner in business!
</p>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h3 class="sectionHeader">Brands</h3><hr /><p>Some of those cool clients that we talked about</p>
</div></header>
<div class="rightSide less clearfix">
<img src="images/photos/clients.png" alt="Clients" />
</div>
<header class="leftSide"><div class="clearfix">
<h3 class="sectionHeader">What we do</h3><hr /><p>Our great list of services</p>
</div></header>
<div class="rightSide clearfix">
<section class="col1-2"><h2 class="sectionHeader">Project Strategy</h2><hr />
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. <br /><br /></p>
<section class="col1-4">
<ul class="contentList arrow">
<li>Creation</li>
<li>Audit</li>
<li>Research</li>
</ul>
</section>
<section class="col1-4 noMargin">
<ul class="contentList arrow">
<li>Naming</li>
<li>Value Proposal</li>
<li>Brand Architecture</li>
</ul>
</section>
</section>
<section class="col1-2 noMargin"><h2 class="sectionHeader">Brand Delivery</h2><hr />
<p>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. <br /><br /></p>
<section class="col1-4">
<ul class="contentList arrow">
<li>Viral Campaigns</li>
<li>Press Release</li>
<li>Social Media</li>
</ul>
</section>
<section class="col1-4 noMargin">
<ul class="contentList arrow">
<li>Online Videos</li>
<li>Blogging</li>
<li>Plans &amp; Structures</li>
</ul>
</section>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h3 class="sectionHeader">Our awesome team</h3><hr /><a href="#"></a>
<p>Follow our talended folks!</p>
</div></header>
<div class="rightSide clearfix">
<section class="col1-2">
<figure class="leftImage">
<a href="images/photos/pic137.jpg" title="Mark Twain" data-rel="prettyPhoto[team]" class="prettyHover"><img alt="Team Member" src="images/photos/pic109.jpg" /></a>
</figure>
<h2 class="sectionHeader">Mark Twain</h2><hr />
<span class="subtitle">Art Director</span>
<p>Rationem non potentiae falsa namque me testatur sed, suos alloquitur hanc nec benedictus.</p>
<div class="miniSocialIcons">
<ul class="socialIcons mini clearfix">
<li><a href="#" class="facebook">Facebook</a></li>
<li><a href="#" class="dribbble">Dribbble</a></li>
</ul>
</div>
</section>
<section class="col1-2 noMargin">
<figure class="leftImage">
<a href="images/photos/pic136.jpg" title="Huckleberry Finn" data-rel="prettyPhoto[team]" class="prettyHover"><img alt="Team Member" src="images/photos/pic110.jpg" /></a>
</figure>
<h2 class="sectionHeader">Huck Finn</h2><hr />
<span class="subtitle">Lead Developer</span>
<p>Rationem non potentiae falsa namque me testatur sed, suos alloquitur hanc nec benedictus.</p>
<div class="miniSocialIcons">
<ul class="socialIcons mini clearfix">
<li><a href="#" class="facebook">Facebook</a></li>
<li><a href="#" class="twitter">Twitter</a></li>
<li><a href="#" class="forrst">Forrst</a></li>
</ul>
</div>
</section>
<span class="rowSep">&nbsp;</span>
<section class="col1-2">
<figure class="leftImage">
<a href="images/photos/pic135.jpg" title="Tom Sawyer" data-rel="prettyPhoto[team]" class="prettyHover"><img alt="Team Member" src="images/photos/pic111.jpg" /></a>
</figure>
<h2 class="sectionHeader">Tom Sawyer</h2><hr />
<span class="subtitle">Junior Designer</span>
<p>Rationem non potentiae falsa namque me testatur sed, suos alloquitur hanc nec benedictus.</p>
<div class="miniSocialIcons">
<ul class="socialIcons mini clearfix">
<li><a href="#" class="dribbble">Dribbble</a></li>
<li><a href="#" class="flickr">Flickr</a></li>
<li><a href="#" class="tumblr">Tumblr</a></li>
</ul>
</div>
</section>
<section class="col1-2 noMargin">
<figure class="leftImage">
<a href="images/photos/pic139.jpg" title="Jim" data-rel="prettyPhoto[team]" class="prettyHover"><img alt="Team Member" src="images/photos/pic112.jpg" /></a>
</figure>
<h2 class="sectionHeader">Jim</h2><hr />
<span class="subtitle">SEO specialist</span>
<p>Rationem non potentiae falsa namque me testatur sed, suos alloquitur hanc nec benedictus.</p>
<div class="miniSocialIcons">
<ul class="socialIcons mini clearfix">
<li><a href="#" class="facebook">Facebook</a></li>
<li><a href="#" class="twitter">Twitter</a></li>
<li><a href="#" class="flickr">Flickr</a></li>
<li><a href="#" class="tumblr">Tumblr</a></li>
<li><a href="#" class="linkedin">LinkedIn</a></li>
</ul>
</div>
</section>
<span class="rowSep">&nbsp;</span>
<section class="col1-2">
<figure class="leftImage">
<a href="images/photos/pic138.jpg" title="Tom Sawyer" data-rel="prettyPhoto[team]" class="prettyHover"><img alt="Team Member" src="images/photos/pic127.jpg" /></a>
</figure>
<h2 class="sectionHeader">Alice Wonderland</h2><hr />
<span class="subtitle">Coding Rookie</span>
<p>Rationem non potentiae falsa namque me testatur sed, suos alloquitur hanc nec benedictus.</p>
<div class="miniSocialIcons">
<ul class="socialIcons mini clearfix">
<li><a href="#" class="stumbleupon">Dribbble</a></li>
<li><a href="#" class="forrst">Flickr</a></li>
<li><a href="#" class="twitter">Tumblr</a></li>
</ul>
</div>
</section>
<section class="col1-2 noMargin">
<figure class="leftImage"><img alt="Team Member" src="images/photos/pic126.jpg" /></figure>
<h2 class="sectionHeader">Your name</h2><hr />
<span class="subtitle">Anything you want</span>
<p>We're still looking for talented folks to work with us. If you think you have the potential, don't hesitate to <a href="contact.html">contact us</a></p>
</section>
</div>
</article>
</div></div>
<footer class="clearfix"><div>
<p>Copyright 2011 @ Made by <a href="http://rubenbristian.com">Ruben Bristian</a></p>
<p class="right">
Powered by WordPress. Just kidding! It's an HTML Theme
</p>
</div></footer>
<!--! end of #container -->
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/plugins.min.js"></script>
<script defer src="js/script.min.js"></script>
<!-- end scripts-->
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
<script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.