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

<section id="about">
  <div class="container">
    <div class="text-center wow fadeInDown">
      <h2 class="section-heading">{% trans "ABOUT" %}</h2>
      <h3 class="section-subheading text-muted">{% trans "The timeline of ungleich" %}</h3>
    </div>
    <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.ch">
                {% trans "Digital Glarus project" %}</a></p>
          </div>
        </div>
      </li>
      <li>
        <div class="timeline-image">
          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/7.png' %}" alt="">
        </div>
        <div class="timeline-panel wow slideInLeft">
          <div class="timeline-heading">
            <h4> 2016</h4>
          </div>
          <div class="timeline-body">
            <p>{% blocktrans %}ungleich launches <a href="https://www.alplora.ch/de/">Alplora</a>, an animal tracking service with LoraWAN technology.{% endblocktrans %}</p>
          </div>
        </div>
      </li>
      <li class="timeline-inverted">
        <div class="timeline-image">
          <img class="img-circle img-responsive" src="{% static 'ungleich_page/img/about/8.png' %}" alt="">
        </div>
        <div class="timeline-panel wow slideInRight">
          <div class="timeline-heading">
            <h4> 2017</h4>
          </div>
          <div class="timeline-body">
            <p>{% blocktrans %}ungleich sells <a href="https://www.alplora.ch/de/">Alplora</a> to an IoT startup in canton Zürich.{% endblocktrans %}</p>
            <p>{% trans "ungleich showcases the most affordable Swiss VM hosting, Data Center Light." %}</p>
          </div>
        </div>
      </li>
      <li>
        <div class="timeline-image wow slideInDown">
          <h4>{% trans "and" %}<br>{% trans "the story continues!" %}</h4>
          <p>&nbsp;</p>
        </div>
      </li>
    </ul>
  </div>
</section>