index.html

---
layout: default
---

<div class="container d-flex flex-row p-5 mb-4 bg-light rounded-3 justify-content-between">
  <div class="col-lg-6 justify-content-center">
    <h1 class="display-5">{{ site.greeting }}</h1>
    <p class="col-md-8 fs-4 mb-4">{{ site.description }}</p>
    <a href="{{ "/datasets" | relative_url }}" class="btn btn-primary btn-lg" role="button">Browse all datasets</a>
  </div>
  <img alt="Example homepage hero image" class="d-none d-md-block img-responsive rounded-circle" src="{{ site.baseurl }} {{ site.hero_image }}" style="max-height: 300px" />
</div>

<h3>Browse by Category</h3>
<div class="card-grid">
{% for category in site.dataset_categories %}
  {% if category.featured == true %}
    {% capture logo_alt %}{{ category.name }}{% if category.logo_credit and category.logo_credit != empty %} logo by {{ category.logo_credit }}{% endif %}{% endcapture %}
    <a class="card border card-grid-item hover-overlay" href="{{ site.baseurl }}/categories/{{ category.name | slugify }}" title="{{ logo_alt }}">
      {% if category.logo and category.logo != empty %}
        <img class="card-img-top" src="{{ site.baseurl }}{{ category.logo }}" alt="{{ logo_alt }}">
      {% endif %}
      {{ category.name }}
    </a>
  {% endif %}
{% endfor %}
</div>