ot_typo3/ot_templating/Resources/Private/Partials/Modern/EventsPreview.html

<section class="mt-50 events">
    <div class="container">
        <div class="row">

            <div class="col-lg-12 col-md-12">
                <div class="text-center">
                    <h2 class="mb-50">Prochains évènements</h2>
                </div>
            </div>

            <!-- Evenement avec illustration -->
            <div class="col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                <div class="card border-0 theme-bg o-hidden h-100">
                    <a href="#">
                        <img class="img-fluid" src="images/affiche_exemple.jpg" alt="">
                        <div class="p-4">
                            <h4 class="text-white"> Evènement avec illustration</h4>
                            <p class="mb-0 pb-0 text-white">01/01/2020 - London (UK)</p>
                        </div>
                    </a>
                </div>
            </div>


            <!-- Evenement sans illustration -->
            <div class="col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                <div class="card border-0 theme-bg o-hidden h-100">
                    <a href="#">
                        <img class="img-fluid" src="images/affiche_absente.jpg" alt="">
                        <div class="p-4">
                            <h4 class="text-white"> Evènement sans illustration </h4>
                            <p class="mb-0 pb-0 text-white">01/01/2020 - London (UK)</p>
                        </div>
                    </a>
                </div>
            </div>


            <!-- Evenement avec illustration -->
            <div class="col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                <div class="card border-0 theme-bg o-hidden h-100">
                    <a href="#">
                        <img class="img-fluid" src="images/affiche_exemple.jpg" alt="">
                        <div class="p-4">
                            <h4 class="text-white"> Evènement avec illustration </h4>
                            <p class="mb-0 pb-0 text-white">01/01/2020 - London (UK)</p>
                        </div>
                    </a>
                </div>
            </div>


            <!-- Voir tous les évènements -->
            <div class="col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                <div class="card border-0 theme-bg o-hidden h-100">
                    <a href="" class="p-4 more-events">
                        <h2 class="text-white"> <i class="fa fa-plus fa-3x"></i> </h2>
                        <h3 class="text-white"> Voir tous les évènements </h3>
                    </a>
                </div>
            </div>


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


<section class="mt-80 events reseau">
    <div class="container">
        <div class="row">

            <div class="col-lg-12 col-md-12">
                <div class="text-center">
                    <h2 class="mb-50">Prochains évènements de mon réseau</h2>
                </div>
            </div>

            <!-- Evenement avec illustration -->
            <div class="col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                <div class="card border-0 theme-bg o-hidden h-100">
                    <a href="#">
                        <img class="img-fluid" src="images/affiche_exemple.jpg" alt="">
                        <div class="p-4">
                            <h4 class="text-white"> Evènement avec illustration </h4>
                            <p class="mb-0 pb-0 text-white">01/01/2020 - London (UK)</p>
                        </div>
                    </a>
                </div>
            </div>


            <!-- Evenement sans illustration -->
            <div class="col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                <div class="card border-0 theme-bg o-hidden h-100">
                    <a href="#">
                        <img class="img-fluid" src="images/affiche_absente.jpg" alt="">
                        <div class="p-4">
                            <h4 class="text-white"> Evènement sans illustration </h4>
                            <p class="mb-0 pb-0 text-white">01/01/2020 - London (UK)</p>
                        </div>
                    </a>
                </div>
            </div>


            <!-- Evenement avec illustration -->
            <div class="col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                <div class="card border-0 theme-bg o-hidden h-100">
                    <a href="#">
                        <img class="img-fluid" src="images/affiche_exemple.jpg" alt="">
                        <div class="p-4">
                            <h4 class="text-white"> Evènement avec illustration </h4>
                            <p class="mb-0 pb-0 text-white">01/01/2020 - London (UK)</p>
                        </div>
                    </a>
                </div>
            </div>


            <!-- Voir tous les évènements -->
            <div class="col-lg-3 col-md-6 col-sm-12 sm-mb-30">
                <div class="card border-0 theme-bg o-hidden h-100">
                    <a href="#" class="p-4 more-events cmf-events">
                        <h3 class="text-white"> <img src="images/cmf_logo_blanc.png" alt="CMF" width="90px" class="img-fluid" /> </h3>
                        <h3 class="text-white"> Voir tous les évènements </h3>
                    </a>
                </div>
            </div>


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