Beautifully crafted timelines that are easy and intuitive to use. http://timeline.knightlab.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

48 lines
3.0 KiB

<!-- Description -->
<section id="description" class="container">
<h2>How it Works</h2>
<div class="row">
<div class="span6">
<p>TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines from different sources. Creating one is as easy as filling in a Google spreadsheet or as detailed as JSON.</p>
<h4>Sources</h4>
<p>It can pull in media from different sources and has built in support for: <em>Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia, SoundCloud and more media types are added regularly.</em></p>
<h4>Tips &amp; tricks</h4>
<ol>
<li>Keep it short, and write each event as a part of a larger narrative.</li>
<li>Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.</li>
<li>Include events that build up to major occurrences.<em>Not just the major events.</em></li>
</ol>
</div>
<div class="span6">
<div class="well">
<h4>Sign up for updates</h4>
<p>Get updates, tips and news by email. No Spam.</p>
<!-- MailChimp Signup Form-->
<div id="mc_embed_signup">
<form id="mc-embedded-subscribe-form" action="http://verite.us4.list-manage.com/subscribe/post?u=7cc197123f5f6d3b8dc4e176f&amp;id=d7f2b5d664" method="post" name="mc-embedded-subscribe-form" target="_blank" class="validate form-inline"><span class="mc-field-group">
<input id="mce-EMAIL" type="email" value="" name="EMAIL" placeholder="Email" class="input-medium required email"></span><span class="mc-field-group">
<input id="mce-NAME" type="text" value="" name="NAME" placeholder="Name" class="input-medium required"></span>
<button id="mc-embedded-subscribe" type="submit" value="Subscribe" name="subscribe" class="btn">Subscribe</button>
<div id="mce-responses" class="clear">
<div id="mce-error-response" style="display: none;" class="response alert alert-error"></div>
<div id="mce-success-response" style="display: none;" class="response alert alert-success"></div>
</div>
<div class="clear"></div>
</form>
</div>
<h4>Stay connected with us on twitter</h4>
<p>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=TimelineJS&amp;show_count=true" style="width:220px; height:20px;"></iframe>
</p>
<p>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=zlwise&amp;show_count=true" style="width:220px; height:20px;"></iframe>
</p>
<p>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=knightlab&amp;show_count=true" style="width:220px; height:20px;"></iframe>
</p>
</div>
</div>
</div>
</section>