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 222 lines (181 sloc) 8.676 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">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> The Columns.<br />
<span>Everything you want and need is right here.</span></h1>
</header>
<article class="columns clearfix">
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Two halfs</h2><hr />
</div></header>
<div class="rightSide clearfix">
<section class="col1-2">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</section>
<section class="col1-2 noMargin">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">One &amp; two thirds</h2><hr />
</div></header>
<div class="rightSide clearfix">
<section class="col1-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section class="col2-3 noMargin">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Only thirds</h2><hr />
</div></header>
<div class="rightSide clearfix">
<section class="col1-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section class="col1-3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
<section class="col1-3 noMargin">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Only fourths</h2><hr />
</div></header>
<div class="rightSide clearfix">
<section class="col1-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</section>
<section class="col1-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</section>
<section class="col1-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</section>
<section class="col1-4 noMargin">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Even fifths</h2><hr />
</div></header>
<div class="rightSide clearfix">
<section class="col1-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section class="col1-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section class="col1-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section class="col1-5">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section class="col1-5 noMargin">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Of course there are sixths</h2><hr />
</div></header>
<div class="rightSide clearfix">
<section class="col1-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section class="col1-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section class="col1-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section class="col1-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section class="col1-6">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
<section class="col1-6 noMargin">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Full width</h2><hr />
</div></header>
<div class="rightSide clearfix">
<section class="col1">
<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. 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.</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.