prodio
Version:
Simplified project management
208 lines (181 loc) • 12.4 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Article page</title>
<meta name="description" content="">
<meta name="author" content="ink, cookbook, recipes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- Place favicon.ico and apple-touch-icon(s) here -->
<link rel="shortcut icon" href="../img/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="../img/touch-icon.57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../img/touch-icon.72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../img/touch-icon.114.png">
<link rel="apple-touch-startup-image" href="../img/splash.320x460.png" media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="../img/splash.768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="../img/splash.1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
<!-- load inks CSS -->
<link rel="stylesheet" type="text/css" href="../css/ink-flex.min.css">
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
<!-- load inks CSS for IE8 -->
<!--[if lt IE 9 ]>
<link rel="stylesheet" href="../css/ink-ie.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
<![endif]-->
<!-- test browser flexbox support and load legacy grid if unsupported -->
<script type="text/javascript" src="../js/modernizr.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.flexbox,
nope : '../css/ink-legacy.min.css'
});
</script>
<!-- load inks javascript files -->
<script type="text/javascript" src="../js/holder.js"></script>
<script type="text/javascript" src="../js/ink-all.min.js"></script>
<script type="text/javascript" src="../js/autoload.js"></script>
<style type="text/css">
body {
background: #ededed;
}
header h1 small:before {
content: "|";
margin: 0 0.5em;
font-size: 1.6em;
}
article header{
padding: 0;
overflow: hidden;
}
article footer {
background: none;
}
article {
padding-bottom: 2em;
border-bottom: 1px solid #ccc;
}
.date {
float: right;
}
summary {
font-weight: 700;
line-height: 1.5;
}
footer {
background: #ccc;
}
</style>
</head>
<body>
<div class="ink-grid">
<!--[if lte IE 9 ]>
<div class="ink-alert basic">
<button class="ink-dismiss">×</button>
<p>
<strong>You are using an outdated Internet Explorer version.</strong>
Please <a href="http://browsehappy.com/">upgrade to a browser</a> to improve your web experience.
</p>
</div>
-->
<!-- Add your site or application content here -->
<header class="clearfix vertical-padding">
<h1 class="logo xlarge-push-left large-push-left">
site name<small>smaller text</small>
</h1>
<nav class="ink-navigation xlarge-push-right large-push-right half-top-space">
<ul class="menu horizontal black">
<li class="active"><a href="#">item</a></li>
<li><a href="#">item</a></li>
<li><a href="#">item</a></li>
</ul>
</nav>
</header>
<section class="column-group gutters article">
<div class="xlarge-70 large-70 medium-60 small-100 tiny-100">
<article>
<header>
<h1 class="push-left">Article title</h1>
<p class="push-right">Published: <time pubdate="pubdate">2009-10-09</time></p>
</header>
<summary>But being in a great hurry to resume scolding the man in the purple Shirt, who was waiting for it in the entry, and seeming to hear nothing but the word "clam," Mrs. Hussey hurried towards an open door leading to the kitchen, and bawling out "clam for two," disappeared.</summary>
<figure class="ink-image vertical-space">
<img src="holder.js/1200x600/auto/ink" alt="">
<figcaption class="dark over-bottom">
"Because you wear silver shoes and have killed the Wicked Witch. Besides, you have white in your frock, and only witches and sorceresses wear white."
</figcaption>
</figure>
<p><blockquote>"Queequeg," said I, "do you think that we can make out a supper for us both on one clam?"</blockquote></p>
<p>However, a warm savory steam from the kitchen served to belie the apparently cheerless prospect before us. But when that smoking chowder came in, the mystery was delightfully explained. Oh, sweet friends! hearken to me. It was made of small juicy clams, scarcely bigger than hazel nuts, mixed with pounded ship biscuit, and salted pork cut up into little flakes; the whole enriched with butter, and plentifully seasoned with pepper and salt. Our appetites being sharpened by the frosty voyage, and in particular, Queequeg seeing his favourite fishing food before him, and the chowder being surpassingly excellent, we despatched it with great expedition: when leaning back a moment and bethinking me of Mrs. Hussey's clam and cod announcement, I thought I would try a little experiment. Stepping to the kitchen door, I uttered the word "cod" with great emphasis, and resumed my seat. In a few moments the savoury steam came forth again, but with a different flavor, and in good time a fine cod-chowder was placed before us.</p>
<footer>
<p><small>Creative Commons Attribution-ShareAlike License</small></p>
</footer>
</article>
</div>
<section class="xlarge-30 large-30 medium-40 small-100 tiny-100">
<h2>Related</h2>
<ul class="unstyled">
<li class="column-group half-gutters">
<div class="all-40 small-50 tiny-50"><img src="holder.js/640x380/auto/ink" alt=""></div>
<div class="all-60 small-50 tiny-50"><p>"Where's them crabs, Hoo-Hoo?" Edwin demanded. "Granser's set upon having a snack."</p></div>
</li>
<li class="column-group half-gutters">
<div class="all-40 small-50 tiny-50"><img src="holder.js/640x380/auto/ink" alt=""></div>
<div class="all-60 small-50 tiny-50"><p>"Where's them crabs, Hoo-Hoo?" Edwin demanded. "Granser's set upon having a snack."</p></div>
</li>
<li class="column-group half-gutters">
<div class="all-40 small-50 tiny-50"><img src="holder.js/640x380/auto/ink" alt=""></div>
<div class="all-60 small-50 tiny-50"><p>"Where's them crabs, Hoo-Hoo?" Edwin demanded. "Granser's set upon having a snack."</p></div>
</li>
<li class="column-group half-gutters">
<div class="all-40 small-50 tiny-50"><img src="holder.js/640x380/auto/ink" alt=""></div>
<div class="all-60 small-50 tiny-50"><p>"Where's them crabs, Hoo-Hoo?" Edwin demanded. "Granser's set upon having a snack."</p></div>
</li>
<li class="column-group half-gutters">
<div class="all-40 small-50 tiny-50"><img src="holder.js/640x380/auto/ink" alt=""></div>
<div class="all-60 small-50 tiny-50"><p>"Where's them crabs, Hoo-Hoo?" Edwin demanded. "Granser's set upon having a snack."</p></div>
</li>
</ul>
</section>
</section>
<section class="column-group gutters">
<div class="all-20 small-100 tiny-100">
<h3>heading</h3>
<img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
<p>"Red is not the right word," was the reply. "The plague was scarlet. The whole face and body turned scarlet in an hour's time. Don't I know? Didn't I see enough of it? And I am telling you it was scarlet because—well, because it was scarlet. There is no other word for it."</p>
</div>
<div class="all-20 small-100 tiny-100">
<h3>heading</h3>
<img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
<p>"Red is not the right word," was the reply. "The plague was scarlet. The whole face and body turned scarlet in an hour's time. Don't I know? Didn't I see enough of it? And I am telling you it was scarlet because—well, because it was scarlet. There is no other word for it."</p>
</div>
<div class="all-20 small-100 tiny-100">
<h3>heading</h3>
<img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
<p>"Red is not the right word," was the reply. "The plague was scarlet. The whole face and body turned scarlet in an hour's time. Don't I know? Didn't I see enough of it? And I am telling you it was scarlet because—well, because it was scarlet. There is no other word for it."</p>
</div>
<div class="all-20 small-100 tiny-100">
<h3>heading</h3>
<img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
<p>"Red is not the right word," was the reply. "The plague was scarlet. The whole face and body turned scarlet in an hour's time. Don't I know? Didn't I see enough of it? And I am telling you it was scarlet because—well, because it was scarlet. There is no other word for it."</p>
</div>
<div class="all-20 small-100 tiny-100">
<h3>heading</h3>
<img class="half-bottom-space" src="holder.js/1200x600/auto/ink" alt="">
<p>"Red is not the right word," was the reply. "The plague was scarlet. The whole face and body turned scarlet in an hour's time. Don't I know? Didn't I see enough of it? And I am telling you it was scarlet because—well, because it was scarlet. There is no other word for it."</p>
</div>
</section>
</div>
<footer class="clearfix">
<div class="ink-grid">
<ul class="unstyled inline half-vertical-space">
<li class="active"><a href="#">About</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Contacts</a></li>
</ul>
<p class="note">Identification of the owner of the copyright, either by name, abbreviation, or other designation by which it is generally known.</p>
</div>
</footer>
</body>
</html>