{% extends 'Default/base.html.twig' %}

{% block title %}Nos articles{% endblock %}

{% block headId %}h-articles{% endblock %}

{% block headBackImg %}
    <img src="{{ asset('images/quino-al-302041-unsplash.jpg') }}" alt="" class="cover">
{% endblock %}

{% block banner_content %}
    <div class="flex col middle h100 relative gpadding w100" id="banner-content">
        {% embed 'Default/banner_two_side_model.html.twig' with {'current_dot':'5'}  %}
            {% block banner_content_img %}
                <img src="{{ asset('images/actu.svg') }}" alt="" class="contain">
            {% endblock %}
            {% block banner_content_title %}
                Les actualités
            {% endblock %}
            {% block banner_content_desc %}
                Lire les dernières actualités technologiques
            {% endblock %}
        {% endembed %}
    </div>
{% endblock %}

{% block menu %}
    {%  include 'Default/menu.html.twig' with {'page':'articles' } %}
{% endblock %}

{% block body %}
    <section class="articles gpadding">
        <div class="flex wrap space relative">
            <figure class="bg-white article mw100 center">
                <div class="about primary-color">
                    <img src="{{ asset('images/map.jpg') }}" class="w100" alt="">
                    <div class="flex col around top-20 bottom-15 adapt">
                        <h3 class="adapt">Titre de l’article</h3>
                        <p class="adapt semibold text-center top-20 adapt">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                    </p>
                    </div>
                </div>
                <figcaption class="adapt primary-color-bg center mw100 top-10-in bottom-10-in adapt">
                    <a href="{{ path('show_article') }}" class="upper white semibold">LIRE L’ARTICLE</a>
                </figcaption>
            </figure>
            <figure class="bg-white article mw100 center">
                <div class="about primary-color">
                    <img src="{{ asset('images/map.jpg') }}" class="w100" alt="">
                    <div class="flex col around top-20 bottom-15 adapt">
                        <h3 class="adapt">Titre de l’article</h3>
                        <p class="adapt semibold text-center top-20 adapt">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                    </p>
                    </div>
                </div>
                <figcaption class="adapt primary-color-bg center mw100 top-10-in bottom-10-in adapt">
                    <a href="{{ path('show_article') }}" class="upper white semibold">LIRE L’ARTICLE</a>
                </figcaption>
            </figure>
            <figure class="bg-white article mw100 center">
                <div class="about primary-color">
                    <img src="{{ asset('images/map.jpg') }}" class="w100" alt="">
                    <div class="flex col around top-20 bottom-15 adapt">
                        <h3 class="adapt">Titre de l’article</h3>
                        <p class="adapt semibold text-center top-20 adapt">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                    </p>
                    </div>
                </div>
                <figcaption class="adapt primary-color-bg center mw100 top-10-in bottom-10-in adapt">
                    <a href="{{ path('show_article') }}" class="upper white semibold">LIRE L’ARTICLE</a>
                </figcaption>
            </figure>
            <figure class="bg-white article mw100 center">
                <div class="about primary-color">
                    <img src="{{ asset('images/map.jpg') }}" class="w100" alt="">
                    <div class="flex col around top-20 bottom-15 adapt">
                        <h3 class="adapt">Titre de l’article</h3>
                        <p class="adapt semibold text-center top-20 adapt">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                    </p>
                    </div>
                </div>
                <figcaption class="adapt primary-color-bg center mw100 top-10-in bottom-10-in adapt">
                    <a href="{{ path('show_article') }}" class="upper white semibold">LIRE L’ARTICLE</a>
                </figcaption>
            </figure>
            <figure class="bg-white article mw100 center">
                <div class="about primary-color">
                    <img src="{{ asset('images/map.jpg') }}" class="w100" alt="">
                    <div class="flex col around top-20 bottom-15 adapt">
                        <h3 class="adapt">Titre de l’article</h3>
                        <p class="adapt semibold text-center top-20 adapt">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                    </p>
                    </div>
                </div>
                <figcaption class="adapt primary-color-bg center mw100 top-10-in bottom-10-in adapt">
                    <a href="{{ path('show_article') }}" class="upper white semibold">LIRE L’ARTICLE</a>
                </figcaption>
            </figure>
            <figure class="bg-white article mw100 center">
                <div class="about primary-color">
                    <img src="{{ asset('images/map.jpg') }}" class="w100" alt="">
                    <div class="flex col around top-20 bottom-15 adapt">
                        <h3 class="adapt">Titre de l’article</h3>
                        <p class="adapt semibold text-center top-20 adapt">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.                    </p>
                    </div>
                </div>
                <figcaption class="adapt primary-color-bg center mw100 top-10-in bottom-10-in adapt">
                    <a href="{{ path('show_article') }}" class="upper white semibold">LIRE L’ARTICLE</a>
                </figcaption>
            </figure>
        </div>
    </section>
{% endblock %}
{% block footer %}
    {% include 'Default/footer.html.twig' with {'footer_bg_class':'bg-white primary-color'} %}
{% endblock %}