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.
141 lines
6.6 KiB
141 lines
6.6 KiB
12 years ago
|
<section id="examples" class="container">
|
||
|
<h2>Examples {{ static_url }}</h2>
|
||
|
<p>Have you made a timeline? <span><a href="https://docs.google.com/a/digitalartwork.net/spreadsheet/viewform?formkey=dE5PR01xc2h5cmRySkowLVIzOUVYeUE6MQ#gid=0" target="_blank">Let us know</a>, and we might feature it here.</span></p>
|
||
|
|
||
|
<!-- Examples Row 1-->
|
||
|
<div class="row">
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p><a href="http://s.24p.co/K39NNO" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_lemonde.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/K39NNO" target="_blank"><img src="{{ static_url }}/img/examples/logos/logo_lemonde.png" alt="Le Monde"><br/>Chronology of the french presidential race</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/NYbSv8" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_radiolab-colorwalking.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/NYbSv8" target="_blank"><img src="{{ static_url }}/img/examples/logos/logo_radiolab.png" alt="Radiolab"><br/>Color Walking</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/RWGfIi" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_madonna.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/RWGfIi" target="_blank"><img src="{{ static_url }}/img/examples/logos/logo_vh1.png" alt="VH1"><br/>Madonna's Most Controversial Moments</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/QpHu1a" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_artetv.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/QpHu1a" target="_blank"><img src="{{ static_url }}/img/examples/logos/logo_arte.png" alt="ARTE.tv"><br/>Comment le progrès nous aura-t-il fait évoluer en l'an 42012 ?</a></h3>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<!-- Examples Row 2-->
|
||
|
<div class="row">
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/PN5dEG" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_denver_shooting.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/PN5dEG" target="_blank">Denver Post: Aurora, Colorado movie theater shooting</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/SKn2sz" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_gigaom_wwdc.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/SKn2sz" target="_blank"><img src="{{ static_url }}/img/examples/logos/logo_gigaom.png" alt="GIGAOM"><br/>WWDC in the era of the iPhone</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/KeFZ0N" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_hats.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/KeFZ0N" target="_blank">Spokesman-Review: A History of Hats</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/JiSZD9" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_moneylaundering.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/JiSZD9" target="_blank">San Antonio Express-News: Money Laundering</a></h3>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<!-- Examples Row 3-->
|
||
|
<div class="row">
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/KNOHCA" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_danceclub.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/KNOHCA" target="_blank">History of Electronic & Club Dance Music</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/J7Qdz1" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_ghana.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/J7Qdz1" target="_blank">History of Ghana</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/IPmrRY" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_transmedia.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/IPmrRY" target="_blank">Marketing transmedia: Prometheus</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/IPmwFo" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_tutorialzine.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/IPmwFo" target="_blank">Tutorialzine</a></h3>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
<!-- Examples Row 4-->
|
||
|
<div class="row">
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/IBS1xY" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_akira.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/IBS1xY" target="_blank">Akira Toriyama's World</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="http://s.24p.co/K62nLC" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_austrian.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="http://s.24p.co/K62nLC" target="_blank">Austrian Boy Murdered - www.vol.at</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="/examples/shit-people-say/" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_shtpeoplesay.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="/examples/shit-people-say/" target="_blank">Sh*t People Say</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="/examples/houston/" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_houston.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="/examples/houston/" target="_blank">Whitney Houston 1963 - 2012</a></h3>
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
<!-- Examples Row 5-->
|
||
|
<div class="row">
|
||
|
<div class="span3">
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="/examples/republican/" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_republican.jpg" class="thumbnail"></a></p>
|
||
|
<h3><a href="/examples/republican/" target="_blank">The Republican Run-Up</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<!-- Example-->
|
||
|
<div class="span3">
|
||
|
<p> <a href="/examples/user-interface/" target="_blank"><img src="{{ static_url }}/img/examples/thumbs/thumb_userinterface.png" class="thumbnail"></a></p>
|
||
|
<h3><a href="/examples/user-interface/" target="_blank">Revolutionary User Interfaces</a></h3>
|
||
|
</div>
|
||
|
|
||
|
<div class="span3">
|
||
|
</div>
|
||
|
|
||
|
</div>
|
||
|
|
||
|
</section>
|