TimelineJS/website/templates/_description.html

<!-- 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 anyone to build visually,rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core look and functionality.</p>
      <h4>Sources</h4>
      <p>It can pull in media from a variety of 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>