@extends('layouts.master')

@section('galerieactive', 'current-menu-item')

@section('content')

<style type="text/css">
    .img-post {
/*        width: 280px;*/
/*        height: 250px; /* Hauteur fixe */*/
        overflow: hidden; /* Cacher tout contenu excédentaire */
        border: 1px solid #ccc;
        margin-bottom: 20px;
    }

    .img-post img {
        width: auto !important; /* Remplir la largeur de la div parente */
        height: 100% !important; /* Maintenir le ratio d'aspect */
        display: block; /* Supprimer l'espace en bas de l'image */
    }  
    .lien a {
        color:#a13502;
        font-size: 16px;
/*        font-weight: bold;*/
    } 
    .lien{
            margin-bottom: 40px;
    }

    .lien a:hover {
        color: #FDDB05 !important;
    } 
    .post-heading{
        height:80px;
        overflow:hidden;    
    } 
    .post-content {
        height:90px;
        overflow:hidden;  
        margin-bottom: 0px !important;   
    }  
</style>

       <section class="slider">
           <!-- CSS STYLE-->
           <link rel="stylesheet" type="text/css" href="{{asset('template/css/style.css')}}" media="screen" />

           <!-- SLIDER REVOLUTION 4.x SCRIPTS  -->
           <script type="text/javascript" src="{{asset('template/rs-plugin/js/jquery.themepunch.plugins.min.js')}}"></script>
           <script type="text/javascript" src="{{asset('template/rs-plugin/js/jquery.themepunch.revolution.min.js')}}"></script>

           <!-- SLIDER REVOLUTION 4.x CSS SETTINGS -->
           <link rel="stylesheet" type="text/css" href="{{asset('template/rs-plugin/css/settings.css')}}" media="screen" />

           <div class="tp-banner-fullscreen-container" >
               <div class="tp-banner" >
                   <ul>
                       <!-- SLIDE  -->
                       <li data-transition="fade" data-slotamount="9" data-masterspeed="1000" >
                           <!-- MAIN IMAGE -->
                           <img src="{{asset('template/assets/img/page-title/bg-page-tittle.jpg')}}"  alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">

                       </li>
                       
                   </ul>
               </div>
           </div>

               <script type="text/javascript">
                       jQuery(document).ready(function() {
                              jQuery('.tp-banner').revolution(
                               {
                                   delay:9000,
                                   startwidth:1502,
                                   startheight:550,
                                   hideThumbs:10,
                               });
                       });
                   </script>
       </section>




       <!-- Main Content -->

       <div id="main-content" class="site-main clearfix">

           <div id="content-wrap" class="bg-color" >

               <div class="bg-color-overlay"></div>





              <section class="our-gallery">

                  <div class="themesflat-spacer clearfix" data-desktop="122" data-mobile="122" data-smobile="60"></div>

                  <div class="container">

                      <div class="row">
                          <div class="col-md-4 ">
                              <div class="sidebar">
                                  <div class="widget align-center widget_about-me wow fadeInUp">
                                      <h2>Nos activités</h2>
                                      <!-- <p>“Praesent scelerisque, odio eu fermentum malesuada, nisi arcu volutpat nisl, sit amet convallis nunc.”</p>
                                      <a href="team.html">Kamrul Bondi</a> -->
                                  </div><!-- /.widget_about-me -->
                      
                                  
                              </div>                      
                          </div>
                          <style type="text/css">
                              .moncss{
                                font-size: 16px; line-height: 40px;
                              }
                              /*.moncss p li{
                                font-size: 16px !important; line-height: 40px !important;
                              }*/
                          </style>
                          <div class="col-md-8">
                              <div class="side-content">
                                  <!-- Letest-post -->
                                  <article class="box-letest-post wow fadeInUp">
                                      <div class="img-post">
                                          <img src="{{asset($detailactivite['image'])}}" alt="Image">
                                      </div>
                                      <div class="post-heading">
                                      <h2><a href="javascript:void(0)">{!! $detailactivite['titre'] !!}</a></h2>
                                      </div>
                                      <div class="moncss">{!! $detailactivite['description'] !!}                                      
                                      </div>
                                      <div class="vedio margin-bottom-40">
                                          <div class="row">
                                            @foreach($detailactivite['autreimage'] as $index => $autreimages )
                                              <div class="col-md-6" style="padding: 20px;">
                                                  <img class="img" src="{{asset($detailactivite['autreimage'][$index])}}" alt="Image">
                                              </div>
                                              <div class="themesflat-spacer clearfix" data-desktop="0" data-mobile="0" data-smobile="60"></div>
                                            @endforeach
                                          </div>
                                      </div>
                              
                                      <!--/#comments -->
                                  </article>
                                  <!--End Letest-post -->              
                              </div>

                          </div>
                      </div>

                      

                  </div>



              </section>



               





              



           </div><!-- /#content-wrap -->

       </div><!-- /#main-content -->

       <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 
       <script src="{{url('template/assets/js/jquery-validate.js')}}"></script> -->

       <!-- <script src="{{url('template/assets/js/jquery.min.js')}}"></script> -->



@endsection