seq-theme-two-up
Version:
A two column layout, one for showing content, the other a featured image
98 lines (89 loc) • 6.17 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two Up - Sequence.js Theme</title>
<link href="css/sequence-theme.two-up.css" rel="stylesheet" media="all">
<!--[if lt IE 9]>
<link href="css/sequence-theme.two-up-ie8.css" rel="stylesheet" media="all">
<![endif]-->
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="sequence" class="seq">
<div class="seq-nav">
<ul role="navigation" aria-label="Pagination" class="seq-pagination">
<li><a href="#step1" rel="step1" title="Go to slide 1"><span class="numeral">1</span><span class="seq-tooltip">Powered by Sequence.js</span></a></li><!--
--><li><a href="#step2" rel="step2" title="Go to slide 2"><span class="numeral">2</span><span class="seq-tooltip">Create Unique Animated Themes</span></a></li><!--
--><li><a href="#step3" rel="step3" title="Go to slide 3"><span class="numeral">3</span><span class="seq-tooltip">Rapid Development of Step-Based Applications</span></a></li>
</ul>
<button class="seq-next seq-swipe" type="button" aria-label="Next">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21.5" viewBox="30.4 23.7 20 21.5" enable-background="new 30.4 23.7 20 21.5" role="img" aria-labelledby="title-swipe-icon"><title id="title-swipe-icon">Swipe Icon</title><path d="M33 23.7c-.1 0-.3.1-.4.2l-2.1 2.1c-.2.2-.2.6 0 .9l2.1 2.1c.2.2.6.2.9 0s.2-.6 0-.9l-1.1-1.1h5.2c.3 0 .6-.3.6-.6s-.3-.6-.6-.6h-5.2l1.1-1.1c.2-.2.3-.6 0-.9-.1-.1-.2-.1-.5-.1zm14.6 0c-.3 0-.6.3-.6.7 0 .1.1.3.2.4l1.1 1.1h-5.2c-.3 0-.6.3-.6.6s.2.5.6.5h5.2l-1.1 1.1c-.2.2-.2.6 0 .9s.6.2.9 0l2.1-2.1c.2-.2.2-.6 0-.9l-2.1-2.1c-.2-.2-.3-.2-.5-.2zm-7.3 1.3c-.8 0-1.4.6-1.4 1.4v8.8c-.5-.6-1.1-1.3-1.6-1.6-.3-.2-.7-.4-1.1-.4-.7 0-1.2.5-1.3 1.2-.1.8.4 1.6.8 2.2l1.5 2.4 1.2 1.9c.6 1 .7 1.8.7 2.9v1.2c0 .1.1.2.2.2h8.2c.1 0 .2-.1.2-.2.1-.8.2-1.6.4-2.4.7-2 1.3-3.9 1.3-6.4v-4c0-.8-.6-1.4-1.4-1.4-.4 0-.7.1-1.2.6 0-.8-.6-1.4-1.4-1.4-.5 0-.9.2-1.2.6-.1-.7-.7-1.2-1.4-1.2-.5 0-.9.2-1.2.6v-3.5c.2-.8-.5-1.5-1.3-1.5z"/></svg>
</button>
</div>
<button class="seq-next-button seq-next" type="button" aria-label="Next">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="16.1 -0.7 60 60" enable-background="new 16.1 -0.7 60 60" role="img" aria-labelledby="title-down-arrow"><title id="title-down-arrow">Down/Next Arrow</title><path d="M46.407 1.399l27.435 27.435-28.213 28.213-27.435-27.435z"/><path fill="#fff" d="M46.1 59.3l-30-30 30-30 30 30-30 30zm-22.9-30l22.9 22.9 22.9-22.9-22.9-22.9-22.9 22.9zM39.278 23.872l11.031 11.031-4.172 4.172-11.031-11.031zM57.172 28.079l-11.031 11.031-4.172-4.172 11.031-11.031z"/></svg>
</button>
<div class="seq-screen">
<ul class="seq-canvas">
<li class="step1 seq-in">
<div data-seq class="seq-feature seq-half">
<div style="background-image: url(images/fern-leaves.jpg)">
<!-- This image is hidden via CSS and is only here for accessibility. The image shown is actually a background-image set via an inline style above -->
<img src="images/fern-leaves.jpg" alt="A close-up of green fern leaves" />
</div>
</div>
<div data-seq class="seq-content seq-half seq-valign">
<div>
<h2>Powered by Sequence.js</h2>
<h3>The responsive CSS animation framework</h3>
<a class="seq-button" href="http://sequencejs.com/" target="_blank">Find Out More</a>
</div>
</div>
</li>
<li class="step2">
<div data-seq class="seq-feature seq-half seq-half-right">
<div style="background-image: url(images/autumn-leaves.jpg)">
<!-- This image is hidden via CSS and is only here for accessibility. The image shown is actually a background-image set via an inline style above -->
<img src="images/autumn-leaves.jpg" alt="Focused on a single autumn leave hanging from a thin branch. More leaves appear out of focus in the background" />
</div>
</div>
<div data-seq class="seq-content seq-half seq-half-left seq-valign">
<div>
<h2>Create Unique Animated Themes</h2>
<h3>For sliders, presentations, banners, and other step-based applications</h3>
<a class="seq-button" href="http://sequencejs.com/" target="_blank">Find Out More</a>
</div>
</div>
</li>
<li class="step3">
<div data-seq class="seq-feature seq-half seq-half-right">
<div style="background-image: url(images/purple-flowers.jpg)">
<!-- This image is hidden via CSS and is only here for accessibility. The image shown is actually a background-image set via an inline style above -->
<img src="images/purple-flowers.jpg" alt="A close-up of several purple flowers with yellow centers. A few rain drops sit on the pettels" />
</div>
</div>
<div data-seq class="seq-content seq-half seq-half-left seq-valign">
<div>
<h2>Rapid Development of Step-Based Applications</h2>
<h3>All of the JavaScript functionality you need built-in</h3>
<a class="seq-button" href="http://sequencejs.com/" target="_blank">Find Out More</a>
</div>
</div>
</li>
</ul>
</div>
<small class="seq-attribution">Icons by <a href="https://thenounproject.com/term/slide-horizontal/112966/" target="_blank">Aha-Soft</a> & <a href="https://thenounproject.com/term/down/98532/" target="_blank">Chris Evans</a> from the <a href="https://thenounproject.com/" target="_blank">Noun Project</a> ● Photos from <a href="https://unsplash.com/" target="_blank">Unsplash</a></small>
</div>
<script src="scripts/imagesloaded.pkgd.min.js"></script>
<script src="scripts/hammer.min.js"></script>
<script src="scripts/sequence.min.js"></script>
<script src="scripts/sequence-theme.two-up.js"></script>
</body>
</html>