Permalink
Fetching contributors…
Cannot retrieve contributors at this time
712 lines (586 sloc) 32.6 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sequence.js - The responsive CSS animation framework</title>
<meta name="description" content="Sequence.js - The responsive CSS animation framework. For creating sliders, presentations, banners, and other step-based applications"/>
<link rel="canonical" href="http://www.sequencejs.com/" />
<link rel="publisher" href="https://plus.google.com/+IanLunn/"/>
<meta property="og:locale" content="en_GB" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Sequence.js - The responsive CSS animation framework" />
<meta property="og:description" content="Sequence.js - The responsive CSS animation framework. For creating sliders, presentations, banners, and other step-based applications" />
<meta property="og:url" content="http://ianlunn.github.io/Sequence/" />
<meta property="og:site_name" content="Sequence.js - The responsive CSS animation framework" />
<meta property="og:image" content="http://www.sequencejs.com/images/sequence-logo.png" />
<meta name="twitter:card" content="summary"/>
<meta name="twitter:description" content="Sequence.js - The responsive CSS animation framework. For creating sliders, presentations, banners, and other step-based applications"/>
<meta name="twitter:title" content="Sequence.js - The responsive CSS animation framework"/>
<meta name="twitter:site" content="@IanLunn"/>
<meta name="twitter:domain" content="http://www.sequencejs.com/"/>
<meta name="twitter:image:src" content="http://www.sequencejs.com/images/sequence-logo.png"/>
<meta name="twitter:creator" content="@IanLunn"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" media="all">
<link href='//fonts.googleapis.com/css?family=Ubuntu:500,400,300,700|Montserrat:400,700|Droid+Sans+Mono' rel='stylesheet' type='text/css'>
<link href="css/demo-page.css" rel="stylesheet" media="all">
<link href="css/sequence-theme.intro.css" rel="stylesheet" media="all">
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="apple-touch-icon" href="images/touch-icon.png" />
<!--[if lt IE 9]>
<script src="scripts/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--[if lt IE 10]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Sequence.js Themes will use the <a href="http://www.sequencejs.com/documentation/#browser-support-and-fallback-mode" title="Browser Support and Fallback Mode">Fallback Theme</a>. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="header">
<div class="container valign">
<div>
<div class="logo">
<object class="header__logo" type="image/svg+xml" data="images/sequence-logo.svg" width="180" height="35">
<a href="http://www.sequencejs.com/">
<img src="images/sequence-logo.png" alt="Sequence.js" />
</a>
</object>
</div>
<ul class="nav">
<li><a href="https://github.com/IanLunn/Sequence" title="Fork Sequence.js Project on GitHub"><i class="fa fa-github"></i> Fork on GitHub</a></li>
<li><a href="http://www.sequencejs.com/" title="Sequence.js - The responsive CSS animation framework">Visit Full Site <i class="fa fa-arrow-circle-right"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="main container">
<div class="title">
<h1>The responsive CSS animation framework</h1>
<h2>For creating sliders, presentations, banners, and other step-based applications</h2>
</div>
<div class="social aligncenter">
<div class="social-button">
<iframe src="http://ghbtns.com/github-btn.html?user=IanLunn&repo=Sequence&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
</div>
<div class="social-button">
<a href="https://twitter.com/share" class="twitter-share-button" data-related="IanLunn" data-dnt="true">Tweet</a>
</div>
<div class="social-button">
<a class="FlattrButton" style="display:none;" rev="flattr;button:compact;" href="http://github.com/IanLunn/Sequence"></a>
</div>
</div>
<div id="sequence" class="seq">
<div class="seq-screen">
<ul class="seq-canvas">
<li class="seq-step1 seq-in" id="step1">
<div class="seq-code-pane seq-valign">
<button type="button" class="seq-view-code">
<i class="fa fa-angle-double-up"></i> Show Code
</button>
<div class="seq-code">
<div class="seq-code-block" data-seq>
<i class="seq-step-icon">1</i>
<code>
<span><strong>.seq-in</strong> .content {</span>
<span class="seq-code-1">transform: translateY(0);</span>
<span class="seq-code-1">transition: .2s;</span>
<span>}</span>
</code>
</div>
</div>
</div>
<div class="seq-content seq-valign" data-seq>
<div class="seq-instruction">
<div class="seq-title">
<object class="seq-instruction-icon" data="images/bracket-open.svg" type="image/svg+xml">
<img src="images/bracket-open.png" alt="An opening code bracket" />
</object>
<h2>Step 1</h2>
<object class="seq-instruction-icon" data="images/bracket-close.svg" type="image/svg+xml">
<img src="images/bracket-close.png" alt="A closing code bracket" />
</object>
</div>
<h3>Easily add CSS transitions to step-based applications using "in" and "out" CSS classes</h3>
<div class="seq-step">
<p>Step 1 is currently in its <code>in<sup class="seq-step-icon">1</sup></code> position. Watch what happens when you <a href="#" title="" class="seq-next">go to the next step →</a></p>
</div>
</div>
</div>
</li>
<li class="seq-step2" id="step2">
<div class="seq-code-pane seq-valign">
<button type="button" class="seq-view-code">
<i class="fa fa-angle-double-up"></i> Show Code
</button>
<div class="seq-code">
<div class="seq-code-block" data-seq>
<i class="seq-step-icon">2</i>
<code>
<span>.seq-out .content {</span>
<span class="seq-code-1">transform: translateY(-100%);</span>
<span class="seq-code-1">transition: .2s;</span>
<span>}</span>
</code>
</div>
<div class="seq-code-block" data-seq>
<i class="seq-step-icon">3</i>
<code>
<span>.content {</span>
<span class="seq-code-1">transform: translateY(100%);</span>
<span>}</span>
</code>
</div>
<div class="seq-code-block" data-seq>
<i class="seq-step-icon">4</i>
<code>
<span>.seq-in .content {</span>
<span class="seq-code-1">transform: translateY(0);</span>
<span class="seq-code-1">transition: .25s;</span>
<span>}</span>
</code>
</div>
</div>
</div>
<div class="seq-content seq-valign" data-seq>
<div class="seq-instruction">
<div class="seq-title">
<object class="seq-instruction-icon" data="images/bracket-open.svg" type="image/svg+xml">
<img src="images/bracket-open.png" alt="An opening code bracket" />
</object>
<h2>Step 2</h2>
<object class="seq-instruction-icon" data="images/bracket-close.svg" type="image/svg+xml">
<img src="images/bracket-close.png" alt="A closing code bracket" />
</object>
</div>
<h3>Sequence.js takes care of the functionality so you can concentrate on presenting your content in style</h3>
<div class="seq-step">
<p>By going to the next step, you caused step 1 to transition from <code>in<sup class="seq-step-icon">1</sup></code> to <code>out<sup class="seq-step-icon">2</sup></code> and step 2 to transition from <code>start<sup class="seq-step-icon">3</sup></code> to <code>in<sup class="seq-step-icon">4</sup></code>. All with just several of lines of CSS.</p>
<p class="seq-tip seq-bulb">When navigating backwards Sequence.js can automatically reverse these transitions.</p>
</div>
</div>
</div>
</li>
<li class="seq-step3" id="step3">
<div class="seq-code-pane seq-valign">
<button type="button" class="seq-view-code">
<i class="fa fa-angle-double-up"></i> Show Code
</button>
<div class="seq-code">
<div class="seq-code-block" data-seq>
<code>
<span>.seq-in .rotate {</span>
<span class="seq-code-1">animation-name: rotate;</span>
<span class="seq-code-1">animation-duration: 1s;</span>
<span>}</span>
</code>
</div>
<div class="seq-code-block" data-seq>
<code>
<span>.seq-in .fade {</span>
<span class="seq-code-1">animation-name: fade;</span>
<span class="seq-code-1">animation-duration: 1s;</span>
<span>}</span>
</code>
</div>
<div class="seq-code-block" data-seq>
<code>
<span>.seq-in .threed {</span>
<span class="seq-code-1">animation-name: threed;</span>
<span class="seq-code-1">animation-duration: 1s;</span>
<span>}</span>
</code>
</div>
</div>
</div>
<div class="seq-content seq-valign" data-seq>
<div class="seq-instruction">
<div class="seq-title">
<object class="seq-instruction-icon" data="images/bracket-open.svg" type="image/svg+xml">
<img src="images/bracket-open.png" alt="An opening code bracket" />
</object>
<h2>Step 3</h2>
<object class="seq-instruction-icon" data="images/bracket-close.svg" type="image/svg+xml">
<img src="images/bracket-close.png" alt="A closing code bracket" />
</object>
</div>
<h3>Create unique animated applications using any CSS properties you wish</h3>
<div class="seq-step">
<p class="seq-tip seq-bulb">Sequence.js doesn't limit you to specific HTML/CSS. Use the properties, attributes, workflow, conventions, and libraries you're familiar with.</p>
</div>
<ul class="seq-examples">
<li>
<object class="seq-transform seq-example" data="images/square.svg" type="image/svg+xml">
<img src="images/square.png" alt="A blue square" width="42" height="42" />
</object>
<p>Transform</p>
</li>
<li>
<object class="seq-scale seq-example" data="images/square.svg" type="image/svg+xml">
<img src="images/square.png" alt="A blue square" width="42" height="42" />
</object>
<p>Scale</p>
</li>
<li>
<object class="seq-rotate seq-example" data="images/square.svg" type="image/svg+xml">
<img src="images/square.png" alt="A blue square" width="42" height="42" />
</object>
<p>Rotate</p>
</li>
<li>
<object class="seq-fade seq-example" data="images/square.svg" type="image/svg+xml">
<img src="images/square.png" alt="A blue square" width="42" height="42" />
</object>
<p>Fade</p>
</li>
<li>
<object class="seq-threed seq-example" data="images/square.svg" type="image/svg+xml">
<img src="images/square.png" alt="A blue square" width="42" height="42" />
</object>
<p>3D</p>
</li>
<li>
<div class="seq-doors seq-example" role="img" aria-label="Two small blue rectangles vertically split, moving toward and away from each other like sliding doors"></div>
<p>&amp; more</p>
</li>
</ul>
</div>
</div>
</li>
<li class="seq-step4" id="step4">
<div class="seq-code-pane seq-valign">
<button type="button" class="seq-view-code">
<i class="fa fa-angle-double-up"></i> Show Code
</button>
<div class="seq-code">
<div class="seq-code-block" data-seq>
<code>
<span>.seq-in .touch {</span>
<span class="seq-code-1">animation-name: rotate;</span>
<span class="seq-code-1">animation: .35s 1.8s;</span>
<span>}</span>
</code>
</div>
<div class="seq-code-block" data-seq>
<code>
<span>.seq-in .touch-title-1 {</span>
<span class="seq-code-1">animation-name: fade-out;</span>
<span class="seq-code-1">animation: .3s 1.5s;</span>
<span>}</span>
</code>
</div>
<div class="seq-code-block" data-seq>
<code>
<span>.seq-in .touch-title-2 p {</span>
<span class="seq-code-1">animation-name: slide-in;</span>
<span class="seq-code-1">animation: .3s 2.35s;</span>
<span>}</span>
</code>
</div>
</div>
</div>
<div class="seq-content seq-valign" data-seq>
<div class="seq-touch">
<p class="seq-touch-title seq-touch-title-1">Build for a multi-device, modern web...</p>
<div class="seq-touch-title seq-touch-title-2">
<p>Fully responsive with touch support</p>
</div>
<img class="seq-phone" src="images/phone.png" srcset="images/phone.png 1x, images/phone@2x.png 2x" alt="A hand holding an illustrated generic mobile phone" />
<img class="seq-swipe" src="images/swipe.png" srcset="images/swipe.png 1x, images/swipe@2x.png 2x" alt="A closed hand with the index finger extended swiping over a mobile phone" />
</div>
</div>
</li>
<li class="seq-step5" id="step5">
<div class="seq-code-pane seq-valign">
<button type="button" class="seq-view-code">
<i class="fa fa-angle-double-up"></i> Show Code
</button>
<div class="seq-code">
<div class="seq-code-block" data-seq>
<i class="seq-step-icon">5</i>
<code>
<span>.seq-in .content {</span>
<span class="seq-code-1">transform: <strong>translateZ(0)</strong>;</span>
<span class="seq-code-1"><strong>will-change: transform</strong>;</span>
<span>}</span>
</code>
</div>
<div class="seq-code-block" data-seq>
<i class="seq-step-icon">6</i>
<code>
<span><strong>.seq-next</strong> {</span>
<span class="seq-code-1">/* Makes an element a functioning next button */</span>
<span>}</span>
</code>
</div>
<div class="seq-code-block" data-seq>
<i class="seq-step-icon">7</i>
<code>
<span><strong>.seq-touch</strong> {</span>
<span class="seq-code-1">/* Styles for touch devices */</span>
<span>}</span>
</code>
</div>
</div>
</div>
<div class="seq-content seq-valign" data-seq>
<div class="seq-instruction">
<h3>All of the features you need for animated applications</h3>
<div class="seq-step">
<p><a href="http://www.sequencejs.com/documentation/" title="Read the Sequence.js documentation">Fully documented</a>, along with <a href="http://www.sequencejs.com/documentation/#options" title="Learn more about Sequence.js options">30+ options</a>, and an <a href="http://www.sequencejs.com/documentation/#api" title="Learn more about the Sequence.js API">easy-to-use API</a>.</p>
<ul class="seq-features">
<li>
<i class="fa fa-check"></i> Responsive Support
</li>
<li>
<i class="fa fa-check"></i> Hardware Accelerated Animation<sup class="seq-step-icon">5</sup>
</li>
<li>
<i class="fa fa-check"></i> Touch Support
</li>
<li>
<i class="fa fa-check"></i> Easy-to-add UI<sup class="seq-step-icon">6</sup>
</li>
<li>
<i class="fa fa-check"></i> Auto Play/Cycle
</li>
<li>
<i class="fa fa-check"></i> State Classes for Easy Styling<sup class="seq-step-icon">7</sup>
</li>
<li>
<i class="fa fa-check"></i> Preloader
</li>
<li>
<i class="fa fa-check"></i> &amp; More
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="seq-step6" id="step6">
<div class="seq-code-pane seq-valign">
<button type="button" class="seq-view-code">
<i class="fa fa-angle-double-up"></i> Show Code
</button>
<div class="seq-code">
<div class="seq-code-block" data-seq>
<code>
<span>.browser-icon {</span>
<span class="seq-code-1">transform: scale(0);</span>
<span class="seq-code-1">transition: .2s;</span>
<span class="seq-code-1">transition-timing-function: cubic-bezier(.55,1.58,.63,.99);</span>
<span>}</span>
</code>
</div>
<div class="seq-code-block" data-seq>
<code>
<span>.seq-in .browser-icon {</span>
<span class="seq-code-1">transform: scale(1);</span>
<span>}</span>
</code>
</div>
<div class="seq-code-block" data-seq>
<i class="seq-step-icon">8</i>
<code>
<span>.seq-fallback {</span>
<span class="seq-code-1">/* Fallback specific styles */</span>
<span>}</span>
</code>
</div>
</div>
</div>
<div class="seq-content seq-valign" data-seq>
<div class="seq-instruction">
<h3>Supported in modern browsers</h3>
<ul class="seq-examples seq-browsers">
<li>
<img class="seq-browser-icon seq-browser-icon-1" src="images/browsers/firefox_64x64.png" srcset="images/browsers/firefox_64x64.png 1x, images/browsers/firefox_128x128.png 2x" alt="Mozilla Firefox browser logo" width="64" height="64" />
<p>Firefox</p>
</li>
<li>
<img class="seq-browser-icon seq-browser-icon-2" src="images/browsers/opera_64x64.png" srcset="images/browsers/opera_64x64.png 1x, images/browsers/opera_128x128.png 2x" alt="Opera browser logo" width="64" height="64" />
<p>Opera</p>
</li>
<li>
<img class="seq-browser-icon seq-browser-icon-3" src="images/browsers/safari_64x64.png" srcset="images/browsers/safari_64x64.png 1x, images/browsers/safari_128x128.png 2x" alt="Apple Safari browser logo" width="64" height="64" />
<p>Safari</p>
</li>
<li>
<img class="seq-browser-icon seq-browser-icon-4" src="images/browsers/chrome_64x64.png" srcset="images/browsers/chrome_64x64.png 1x, images/browsers/chrome_128x128.png 2x" alt="Google Chrome browser logo" width="64" height="64" />
<p>Chrome</p>
</li>
<li>
<img class="seq-browser-icon seq-browser-icon-5" src="images/browsers/edge_64x64.png" srcset="images/browsers/edge_64x64.png 1x, images/browsers/edge_128x128.png 2x" alt="Microsoft Edge browser logo" width="64" height="64" />
<p>Edge/<br class="seq-small-break" />IE10+</p>
</li>
</ul>
<h3>With a fallback theme for legacy browsers</h3>
<div class="seq-step">
<p class="seq-tip seq-bulb">A traditional side-to-side slider is automatically shown when a browser doesn't support CSS transitions and transforms. Use the <code>.seq-fallback</code> class to style Sequence.js in older browsers<sup class="seq-step-icon">8</sup>.</p>
</div>
<ul class="seq-examples seq-browsers">
<li>
<img class="seq-browser-icon seq-browser-icon-6" src="images/browsers/ie9_64x64.png" srcset="images/browsers/ie9_64x64.png 1x, images/browsers/ie9_128x128.png 2x" alt="Microsoft Internet Explorer 9 browser logo" width="64" height="64" />
<p>IE9</p>
</li>
<li>
<img class="seq-browser-icon seq-browser-icon-7" src="images/browsers/ie8_64x64.png" srcset="images/browsers/ie8_64x64.png 1x, images/browsers/ie8_128x128.png 2x" alt="Microsoft Internet Explorer 8 browser logo" width="64" height="64" />
<p>IE8</p>
</li>
</ul>
</div>
</div>
</li>
<li class="seq-step7" id="step7">
<div class="seq-code-pane seq-valign">
<button type="button" class="seq-view-code">
<i class="fa fa-angle-double-up"></i> Show Code
</button>
<div class="seq-code">
<div class="seq-code-block" data-seq>
<code>
<span>/* Install via NPM */</span>
<span><strong>npm install sequencejs</strong></span>
</code>
</div>
<div class="seq-code-block" data-seq>
<code>
<span>/* Install via Bower */</span>
<span><strong>bower install sequencejs</strong></span>
</code>
</div>
</div>
</div>
<div class="seq-content seq-valign" data-seq>
<div class="seq-instruction">
<p class="seq-follow-on">This presentation was powered by...</p>
<object class="seq-logo" type="image/svg+xml" data="images/sequence-logo.svg" width="240" height="48">
<img src="images/sequence-logo.png" alt="Sequence.js logo" width="240" height="46" />
</object>
<p>Make your animated step-based application today...</p>
<a href="http://www.sequencejs.com/themes/" title="View themes created with Sequence.js" class="seq-button seq-button-highlight">View Example Themes <i class="fa fa-tag"></i></a>
<a href="http://www.sequencejs.com/download/" title="Download Sequence.js" class="seq-button seq-button-link">Download Now <i class="fa fa-arrow-circle-down"></i></a>
</div>
</div>
</li>
</ul>
</div>
<fieldset class="seq-nav" aria-controls="sequence" aria-label="Slider buttons">
<button type="button" class="seq-prev" aria-label="Previous"><i class="fa fa-chevron-circle-left"></i> Previous</button>
<button type="button" class="seq-next" aria-label="Next">Next <i class="fa fa-chevron-circle-right"></i></button>
</fieldset>
</div>
<ul role="navigation" aria-label="Pagination" aria-controls="sequence" class="seq-pagination">
<li class="seq-current"><a href="#step1" rel="step1" title="Go to slide 1: Intro"><i class="fa fa-bookmark"></i> <span>Intro</span></a></li>
<li><a href="#step2" rel="step2" title="Go to slide 2: How It Works"><i class="fa fa-info-circle"></i> <span>How It Works</span></a></li>
<li><a href="#step3" rel="step3" title="Go to slide 3: Animation"><i class="fa fa-bolt"></i> <span>Animation</span></a></li>
<li><a href="#step4" rel="step4" title="Go to slide 4: Responsive/Touch"><i class="fa fa-expand"></i> <span>Responsive/Touch</span></a></li>
<li><a href="#step5" rel="step5" title="Go to slide 5: Features"><i class="fa fa-cog"></i> <span>Features</span></a></li>
<li><a href="#step6" rel="step6" title="Go to slide 6: Support"><i class="fa fa-tablet"></i> <span>Support</span></a></li>
<li><a href="#step7" rel="step7" title="Go to slide 7: Download"><i class="fa fa-arrow-circle-down"></i> <span>Download</span></a></li>
</ul>
<div class="title">
<h1>Example Themes</h1>
<p class="tagline">View some of the themes we've created and made available in the <a href="http://www.sequencejs.com/themes/" title="Sequence.js Theme Store">Theme Store</a></p>
</div>
<ul class="products group">
<li class="product">
<a href="http://www.sequencejs.com/themes/modern-slide-in/" title="Modern Slide In">
<img src="http://www.sequencejs.com/wp-content/uploads/modern-slide-in-wide-580x362.png" alt="Modern Slide In - Wide Example" height="362" width="580">
<h3>Modern Slide In</h3>
</a>
</li>
<li class="product">
<a href="http://www.sequencejs.com/themes/two-up/" title="Two Up">
<img src="http://www.sequencejs.com/wp-content/uploads/two-up-wide-580x362.png" alt="Two Up - Wide Example" height="362" width="580">
<h3>Two Up</h3>
</a>
</li>
<li class="product">
<a href="http://www.sequencejs.com/themes/photo-stack/" title="Photo Stack">
<img src="http://www.sequencejs.com/wp-content/uploads/photo-stack-wide-580x362.png" alt="Photo Stack - Wide Example" height="362" width="580">
<h3>Photo Stack</h3>
</a>
</li>
<li class="product">
<a href="http://www.sequencejs.com/themes/photo-slide/" title="Photo Slide">
<img src="http://www.sequencejs.com/wp-content/uploads/photo-slide-wide-example-580x362.png" alt="Photo Slide - Wide Example" height="362" width="580">
<h3>Photo Slide</h3>
</a>
</li>
</ul>
<div class="button-set">
<a href="http://www.sequencejs.com/themes/" class="button button-highlight" title="Sequence.js Theme Store">Theme Store <i class="fa fa-tag"></i></a>
</div>
<div class="title">
<h1>Get Started</h1>
<p class="tagline">Getting started is easy with our in-depth documentation and ready-made themes</p>
</div>
<div class="button-set">
<a href="http://www.sequencejs.com/documentation/" class="button button-highlight" title="Sequence.js Documentation">Documentation <i class="fa fa-book"></i></a>
<a href="http://www.sequencejs.com/download/" class="button button-link" title="Download Sequence.js">Download <i class="fa fa-arrow-circle-down"></i></a>
</div>
<div class="code-block">
<p>Install via Bower:</p>
<pre><code>bower install sequencejs</code></pre>
<p>Install via NPM:</p>
<pre><code>npm install sequencejs</code></pre>
</div>
</div>
<a href="http://www.sequencejs.com/" class="full-button">
Visit Full Site <i class="fa fa-arrow-circle-right"></i>
</a>
<div class="footer">
<div class="container">
<div class="sponsor">
<a href="https://www.browserstack.com/" title="BrowserStack - Cross Browser Testing Tool" target="_blank"><img src="images/browserstack-logo.png" alt="BrowserStack Logo" srcset="images/browserstack-logo.png 1x, images/browserstack-logo@2x.png 2x" height="35" width="160"></a>
<p>Cross browser testing environment provided by <a href="https://www.browserstack.com/" title="BrowserStack - Cross Browser Testing Tool" target="_blank">BrowserStack</a>.</p>
</div>
<div class="made-by group">
<ul>
<li>
<!-- "IL" logo Copyright (c) Ian Lunn Design Limited 2015 -->
<a cass="icon__ild" href="http://ianlunn.co.uk/" title="Ian Lunn - Freelance Web Designer &amp; Front End Developer" target="_blank" class="ild-ident">
<svg class="" onmouseenter="el=this;el.classList.add('active');setTimeout(function(){el.classList.remove('active')},600);" xmlns="http://www.w3.org/2000/svg" width="24" height="30" viewBox="0 0 52 52">
<g class="circle-holder">
<path class="circle" fill="#2E96D6" d="M5.4 26c0-11.4 9.2-20.6 20.6-20.6s20.6 9.2 20.6 20.6c0 11.4-9.2 20.6-20.6 20.6s-20.6-9.2-20.6-20.6zm-5.4 0c0 14.4 11.6 26 26 26s26-11.6 26-26-11.6-26-26-26-26 11.6-26 26z"></path>
</g>
<path class="i" fill="#fff" d="M15 22h9v16h-9v-16z"></path>
<path class="l" fill="#fff" d="M28 14h9v24h-9v-24z"></path>
</svg>
</a>
</li>
<li><a class="icon__twitter" href="https://twitter.com/IanLunn/" title="Ian Lunn on Twitter" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a class="icon__github" href="https://github.com/IanLunn/Sequence/" title="Sequence on GitHub" target="_blank"><i class="fa fa-github"></i></a></li>
</ul>
<p>Made by<br /><a href="http://ianlunn.co.uk/" title="Ian Lunn - Freelance Web Designer &amp; Front End Developer" target="_blank">Ian Lunn - Web Designer &amp; Front End Developer</a></p>
<p class="follow"><a href="https://twitter.com/IanLunn" class="twitter-follow-button" data-show-count="false" data-dnt="true" data-size="large">Follow @IanLunn</a> for Sequence.js news, web design &amp; development<br /> links, tips, and opinions</p>
<small>Copyright &copy; 2015 <a href="http://ianlunn.co.uk/" title="Ian Lunn - Freelance Web Designer &amp; Front End Developer" target="_blank">Ian Lunn Design Limited</a></small>
</div>
</div>
</div>
<script type="text/javascript">
/* <![CDATA[ */
(function() {
var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
t.parentNode.insertBefore(s, t);
})();
/* ]]> */</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-11991680-7', 'auto');
ga('send', 'pageview');
</script>
<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.intro.js"></script>
</body>
</html>