<div id="contents">
    <div class="bg-white p-5 rounded">
        <div class="col-sm-8 mx-auto">

            <h3>Welcome to the Infra Blog!</h3>
            <p><i>Here you can find all kinds of wonderful information about Infra projects and infrastructure updates</i></p>


{% for article in articles %}
    <!-- Post -->
    <div class="row">
        <div class="callout">
            <article class="post">
                <header>
                    <div class="title">
                        <h2><a href="/blog/{{ article.slug }}.html">{{ article.title }}</a></h2>
                        <p>Posted on: {{ article.date }}</p>
                        <p>{{ article.summary }}</p>
                        <footer>
                            <ul class="actions">
                                <div style="text-align: right"><a href="/blog/{{ article.slug }}.html" class="button medium">Continue Reading</a></div>
                            </ul>
                            <ul class="stats">
                                {% for tag in article.tags %}
                                    <li><a href="#">{{ tag.name }}</a></li>
                                {% endfor %}
                            </ul>
                        </footer>
            </article>
        </div>
    </div>
{% endfor %}

        </div>
    </div>
</div>
