Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 341 lines (261 sloc) 11.9 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 Features.<br />
<span>Everything you want and need is right here.</span></h1>
</header>
<article class="columns">
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Features</h2><hr /><p>Typography &amp; Shortcodes</p>
</div></header>
<div class="rightSide clearfix">
<section class="col1">
<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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">List items</h2><hr /><p>Hope you like them all</p>
</div></header>
<div class="rightSide clearfix">
<section class="col1-6">
<ul class="contentList square">
<li>First item</li>
<li>Second</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</section>
<section class="col1-6">
<ul class="contentList circle">
<li>First item</li>
<li>Second</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</section>
<section class="col1-6">
<ul class="contentList disc">
<li>First item</li>
<li>Second</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</section>
<section class="col1-6">
<ul class="contentList arrow">
<li>First item</li>
<li>Second</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</section>
<section class="col1-6">
<ul class="contentList check">
<li>First item</li>
<li>Second</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</section>
<section class="col1-6 noMargin">
<ul class="contentList cross">
<li>First item</li>
<li>Second</li>
<li>Third item</li>
<li>Fourth item</li>
</ul>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Dropcaps</h2><hr /><p>Three types of letters</p>
</div></header>
<div class="rightSide clearfix">
<section class="col1-3">
<p class="dropcap circle"><span>A</span>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</section>
<section class="col1-3">
<p class="dropcap square"><span>B</span>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</section>
<section class="col1-3 noMargin">
<p class="dropcap empty"><span>C</span>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Highlighted content</h2><hr /><p>Box design</p>
</div></header>
<div class="rightSide clearfix">
<section class="col1-2">
<p>Lorem ipsum dolor sit amet <mark>highlighted content is here</mark> labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip. Lorem ipsum dolor sit amet labore et dolore magna alique <mark class="alt">highlighted content can also look like this</mark> aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</section>
<section class="col1-2 box noMargin">
<div>
<h3>Box Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</div>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Inline images, quotes &amp; buttons</h2><hr /><p>All kinds of goodies, right?</p>
</div></header>
<div class="rightSide clearfix">
<section class="col1-2">
<figure class="leftImage">
<img alt="About us" src="images/photos/pic104.jpg">
<figcaption>&rarr; Left aligned image</figcaption>
</figure>
<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. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
</section>
<section class="col1-2 noMargin">
<blockquote class="clearfix"><p>Lorem ipsum dolor sit amet labore et dolore magna aliqua! Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
<em class="cite">Julia Robson, Google CEO</em></p></blockquote>
<br>
<a href="#" class="chunkyButton blue">Download</a>
<a href="#" class="chunkyButton blue">Get file</a>
<a href="#" class="chunkyButton yellow">Email</a>
<a href="#" class="chunkyButton yellow">Subscribe</a>
<a href="#" class="chunkyButton red">Download</a>
<a href="#" class="chunkyButton red">Get file</a>
<a href="#" class="chunkyButton green">Email</a>
<a href="#" class="chunkyButton green">Subscribe</a>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Basic table</h2><hr />
</div></header>
<div class="rightSide clearfix">
<section class="col1">
<table>
<thead>
<tr>
<th class="first"><!-- empty --></th>
<th><h3>Header one</h3></th>
<th><h3>Header two</h3></th>
<th><h3>Header three</h3></th>
<th><h3>Header four</h3></th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">Section one</td>
<td>Table Item</td>
<td>Table Item</td>
<td>Table Item</td>
<td>Table Item</td>
</tr>
<tr>
<td class="first">Section two</td>
<td>Table Item</td>
<td>Table Item</td>
<td>Table Item</td>
<td>Table Item</td>
</tr>
<tr>
<td class="first">Section three</td>
<td>Table Item</td>
<td>Table Item</td>
<td>Table Item</td>
<td>Table Item</td>
</tr>
</tbody>
</table>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Alert boxes</h2><hr />
</div></header>
<div class="rightSide clearfix">
<section class="col1">
<div class="alert note"><p>This is just a reminder that you have to do this.</p></div>
<div class="alert confirm"><p>This is a confirmation message that you can use.</p></div>
<div class="alert error"><p>This is a big fat error!</p></div>
</section>
</div>
<header class="leftSide"><div class="clearfix">
<h2 class="sectionHeader">Tabs</h2><hr />
</div></header>
<div class="rightSide clearfix">
<section class="col1">
<div class="tabsWidget" id="tabs">
<ul>
<li><a class="selected" href="#">Tab #1</a></li>
<li><a href="#">Tab #2</a></li>
<li><a href="#">Tab #3</a></li>
</ul>
<div class="tabsContent">
<div class="selected"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p></div>
<div><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae.</p></div>
<div><p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt.</p></div>
</div>
</div>
</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>