<!-- Portfolio -->
<section>

  <div class="block">
    <h3 style="font-weight:300;font-family: Righteous;color: #0D575C;" class="title is-1 has-text-centered m-4 is-size-4-mobile">Quelques réalisations</h3>

  </div>






  <div class="container ">
    <!-- Start Carousel -->


    <div class="owl-carousel4 owl-theme">
      {% for realisation in realisations %}
      <div style="border-radius:0px;border: 1px solid rgb(230, 230, 230);width: 90%;margin-left: auto;margin-right: auto;display: block;" class="item ">
          <div class="hero-body p-0">
            <div class="container has-text-centered">
              <div class="columns is-vcentered">
                <div style="background-color: #F5F4EB;" class="column is-5">
                  <figure class="image is-4by3">
                    <img style="border-radius:20px;" src="{{realisation.imageMiseEnAvant.url}}" alt="Réalisation de Papa Abdou Mbodji">
                  </figure>
                </div>
                <div style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;" class="column is-6 pl-6">
                  <div class="subtitle is-3 has-text-left">
                    {{realisation.nom}}
                  </div>
                  <div style="font-weight:400" class="subtitle is-6 has-text-left">
                    {{realisation.description}}
                  </div>
                  <h2 class="subtitle is-4 has-text-left ">
                    <span style="font-size: 13px;">catégorie : &nbsp;</span><span class="tag is-success is-light">{{realisation.categorie}}</span>&nbsp;&nbsp;
                    {% if realisation.link %}<span style="font-size: 13px;">action : &nbsp;</span><a target="_blank" href="{{realisation.link}}" class="tag is-warning is-light">Voir plus</a>{% endif %}
                  </h2>
                  
                  <br>
                  
                </div>
              </div>
            </div>
          </div>

            <!-- cards -->
           
      </div>
      {% endfor %}
    </div>

  </div>


  <script type="text/javascript">

    function openImg() {
      document.getElementById('samadefaut').className += " is-active";
    }

    $(document).ready(function () {
      $('.owl-carousel4').owlCarousel({
        loop: true,
        autoPlay: 10000,
        margin: 10,
        nav: true,
        items: 1,
        responsive: {
          0: {
            items: 1,
            loop: true
          },
          600: {
            items: 3,
            loop: true
          },
          1000: {
            items: 2,
            loop: true
          }
        }
      })
    });
  </script>

</section>