{{ "<!-- About Section -->" | safeHTML }}
<section id="about">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2 class="section-heading">{{ with .Site.Params.about.title }}{{ . | markdownify }}{{ end }}</h2>
        <h3 class="section-subheading text-muted">{{ with .Site.Params.about.subtitle }}{{ . | markdownify }}{{ end }}</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <ul class="timeline">

          {{ range $i, $e := .Site.Params.about.events }}
            <li {{ if (not (modBool $i 2)) }}class="timeline-inverted" {{ end }}>
              <div class="timeline-image">
                {{ $url := printf "img/about/%s" .img }}
                <img class="img-circle img-responsive" src="{{ $url | absURL }}" alt="">
              </div>
              <div class="timeline-panel">
                <div class="timeline-heading">
                  <h4>{{ .date }}</h4>
                  <h4 class="subheading">{{ .title | markdownify }}</h4>
                </div>
                <div class="timeline-body">
                  <p class="text-muted">{{ .description  | markdownify }}</p>
                </div>
              </div>
            </li>
          {{ end }}

          <li class="timeline-inverted">
            <div class="timeline-image">
              <h4>{{ with .Site.Params.about.endpoint }}{{ . | markdownify }}{{ end }}</h4>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</section>
