prodio
Version:
Simplified project management
349 lines (280 loc) • 18.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Carousel</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>
body {
background: #ededed;
}
.panel {
border-radius: 2px;
-webkit-box-shadow: #dddddd 0 1px 1px 0;
-moz-box-shadow: #dddddd 0 1px 1px 0;
box-shadow: #dddddd 0 1px 1px 0;
padding: 1em;
border: 1px solid #BBB;
background-color: #FFF;
}
</style>
</head>
<body>
<div class="ink-grid vertical-space">
<!--[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>
-->
<div class="panel">
<div id="car1" class="ink-carousel" data-space-after-last-slide="false">
<ul class="stage column-group half-gutters">
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/sports/1">
<div class="description">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</div>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/sports/2">
<div class="description">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>Devemos cultivar os nossos soft powers sagrados</p>
</div>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/sports/3">
<div class="description">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>Rumo ao inconseguimento de cenas</p>
</div>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/sports/4">
<div class="description">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</div>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/sports/5">
<div class="description">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</div>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/sports/6">
<div class="description">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</div>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/sports/7">
<div class="description">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</div>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/sports/8">
<div class="description">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</div>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/sports/9">
<div class="description">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</div>
</li>
</ul>
</div>
<nav id="p1" class="ink-navigation" data-instance="pagination1">
<ul class="pagination black">
</ul>
</nav>
</div>
<script>
Ink.requireModules(['Ink.UI.Carousel_1'], function(InkCarousel) {
new InkCarousel('#car1', {pagination: '#p1'});
});
</script>
<div class="panel vertical-space">
<div id="car2" class="ink-carousel">
<ul class="stage column-group half-gutters unstyled">
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/city/1">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impactoagilidade decisória.</p>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/city/2">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>Devemos cultivar os nossos soft powers sagrados</p>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/city/3">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>Rumo ao inconseguimento de cenas</p>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/city/4">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/city/5">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/city/6">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/city/7">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</li>
<li class="slide xlarge-25 large-25 medium-33 small-50 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/400/200/city/8">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</li>
</ul>
<nav id="p2" class="ink-navigation" data-instance="pagination2" data-next-label="" data-previous-label="">
<ul class="pagination dotted">
</ul>
</nav>
</div>
</div>
<script>
Ink.requireModules(['Ink.UI.Carousel_1'], function(InkCarousel) {
new InkCarousel('#car2', {pagination: '#p2'})
});
</script>
<div class="panel vertical-space">
<div id="car3" class="ink-carousel">
<ul class="stage column-group half-gutters unstyled">
<li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/1400/675/nightlife/1">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impactoagilidade decisória.</p>
</li>
<li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/1400/675/nightlife/2">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>Devemos cultivar os nossos soft powers sagrados</p>
</li>
<li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/1400/675/nightlife/3">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>Rumo ao inconseguimento de cenas</p>
</li>
<li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/1400/675/nightlife/4">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</li>
<li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/1400/675/nightlife/5">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</li>
<li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/1400/675/nightlife/6">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</li>
<li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/1400/675/nightlife/7">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</li>
<li class="slide xlarge-100 large-100 medium-100 small-100 tiny-100">
<img class="half-bottom-space" src="http://lorempixel.com/1400/675/nightlife/8">
<h4 class="no-margin">Highlight Title</h4>
<h5 class="slab">Baby Doe</h5>
<p>É importante questionar o quanto a constante divulgação das informações ainda não demonstrou convincentemente que vai participar na mudança do impacto na agilidade decisória.</p>
</li>
</ul>
<nav id="p3" class="ink-navigation" data-instance="pagination3" data-previous-label="" data-next-label="">
<ul class="pagination chevron">
</ul>
</nav>
</div>
<script>
Ink.requireModules(['Ink.UI.Carousel_1'], function(InkCarousel) {
new InkCarousel('#car3', { pagination: '#p3', nextLabel: '', previousLabel: ''});
});
</script>
</div>
</div>
</body>
</html>