index.html

---
layout: default
---

{% include nav.html %}

<div class="bg-gray-light">

  <header class="py-4 py-md-6">
    <div class="container-lg p-responsive mx-auto text-center pt-6">
      <h1 class="alt-h1">{{ site.title }}</h1>
      <p class="alt-lead text-gray mb-md-5 col-md-8 mx-auto">
        {{ site.data.locale[site.locale].index.lead }}
      </p>
      <p class="alt-lead" id="opensourcefriday" style="display:none">
        It's Friday! Invest a few hours contributing to the software you use and love:
        <a href='https://opensourcefriday.com'>opensourcefriday.com</a>
      </p>
    </div>
  </header>

  <div class="container-lg p-responsive pb-6">
    <div class="gutter-sm d-flex flex-wrap flex-items-stretch pb-md-6">
      {% assign articles = site.articles | where: 'locale', site.locale | sort: 'order' %}
      {% for article in articles %}
      <div class="col-12 col-sm-9 mx-auto col-md-6 mt-4 mt-lg-5">
        <a href="{{ article.url | relative_url }}" class="guide-cover {{ article.class }} card height-full d-block">

          <div class="lh-none guide-cover-img text-center pt-4">
            <img src="{{ site.baseurl }}/assets/images/illos/{{ article.class }}.svg" class="" alt="{{ article.title }} illustration">
          </div>

          <div class="flex-self-end p-4 text-center p-lg-5">
            <h3 class="alt-h3 text-bold lh-condensed mb-2 text-black">
              {{ article.title }}
            </h3>
            <div class="mb-0 text-gray">
              {{ article.description | markdownify }}
            </div>
          </div>

        </a>
      </div>
      {% endfor %}
    </div>
  </div>

</div>

{% include footer.html %}