{% load static %}
{% load i18n %}

<section id="about">
    <div class="container">
        <div class="row">
          <div class="col-lg-12 text-center wow fadeInDown">
            <h2 class="section-heading">{% trans "ABOUT" %}</h2>
            <h3 class="section-subheading text-muted">{% trans "The timeline of ungleich" %}</h3>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <ul class="timeline">
              <li>
            <div class="timeline-image">
              <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/1.jpg' %}" alt="">
            </div>
            <div class="timeline-panel wow slideInLeft">
              <div class="timeline-heading">
                <h4>2000</h4>
              </div>
              <div class="timeline-body">
                <p>{% trans "The first incarnation of ungleich" %}</p>
                <p>{% trans "in Germany" %}</p>
              </div>
              </div></li>
              <li class="timeline-inverted">
            <div class="timeline-image">
              <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/2.jpg' %}" alt="">
            </div>
            <div class="timeline-panel wow slideInRight">
              <div class="timeline-heading">
                <h4>2013</h4>
              </div>
              <div class="timeline-body">
                <p>{% trans "ungleich founded" %} </p>
                <p>{% trans "in Switzerland" %}                              </p>
              </div>
            </div>
              </li>
              <li>
            <div class="timeline-image">
              <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/6.jpg' %}" alt="">
            </div>
            <div class="timeline-panel wow slideInLeft">
              <div class="timeline-heading">
                <h4>2014</h4>
              </div>
              <div class="timeline-body">
                <p>{% trans "ungleich present at various conferences" %}: <br><a href="http://www.linuxtag.org/2014/en/program/talk-details/?eventid=1238">Linuxtag</a>, <a href="https://www.usenix.org/conference/ucms14/summit-program/presentation/schottelius">UCMS</a>, Linux Erfa, <a href="https://www.ethz.ch/en.html">ETH Zurich</a><br>
                </p>
              </div>
            </div>
              </li>
              <li class="timeline-inverted">
            <div class="timeline-image">
              <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/4.jpg' %}" alt="">
            </div>
            <div class="timeline-panel wow slideInRight">
              <div class="timeline-heading">
                <h4> 2015</h4>
              </div>
              <div class="timeline-body">
                <p>{% trans "ungleich introduces HA-Hosting" %} </p>
                <p>{% trans "and introduces affordable 24X7 support." %}</p>
                <p>{% trans "ungleich launches" %}<a href="https://digitalglarus.ungleich.ch/digitalglarus/">
                    {% trans "Digital Glarus project" %}</a></p>
              </div>
            </div>
              </li>
              <li class="timeline-inverted">
            <div class="timeline-image wow slideInDown">
              <h4>{% trans "and" %}<br>{% trans "the story continues!" %}</h4>
              <p>&nbsp;</p>
            </div>
              </li>
            </ul>
          </div>
        </div>
    </div>
</section>