index.html

---
layout: default
---

<nav class="main-nav">
  <div class="container-lg edged mx-auto clearfix">
    <div class="float-sm-right">
      <ul class="main-links d-flex flex-wrap flex-items-stretch border-left border-bottom border-sm-0 list-style-none">
        <li class="d-inline-block border-right">
          <a class="d-block p-3 p-sm-4" href="https://github.com/github/opensource.guide#readme">About</a>
        </li>
        <li class="d-inline-block border-right">
          <a class="d-block p-3 p-sm-4" href="https://github.com/github/opensource.guide/blob/gh-pages/CONTRIBUTING.md">Contribute</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

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

  <header class="py-4 py-md-6">
    <div class="container-lg mx-auto text-center px-3 pt-6">
      <h1 class="alt-h1">Open Source Guides</h1>
      <p class="alt-lead text-gray mb-md-5 col-md-8 mx-auto">
        Open source software is made by people just like you. Learn how to launch and grow your project.
      </p>
    </div>
  </header>

  <div class="container-lg px-3 pb-6">
    <div class="gut-md d-flex flex-wrap flex-items-stretch pb-md-6">
      {% assign articles = site.articles | 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 %}