@extends('users/layout')
@section('content')
<section>
<div>
<div class="background-holder overlay" style="background-image:url(template/assets/images/background-2.jpg);background-position: center bottom; height: 50px;">
</div><!--/.background-holder-->
<div class="container">
 <div class="row pt-6" data-inertia='{"weight":1.5}'>
  <div class="col-md-8 px-md-0 color-white" data-zanim-timeline="{}" data-zanim-trigger="scroll">
   <div class="overflow-hidden">
	<h1 class="color-white fs-4 fs-md-5 mb-0 zopacity" data-zanim='{"delay":0}'>EVENEMENTS</h1>
	<div class="nav zopacity" aria-label="breadcrumb" role="navigation" data-zanim='{"delay":0.1}'>
		<ol class="breadcrumb fs-1 pl-0 fw-700">
		<li class="breadcrumb-item">
			<a class="color-white" href="#">Accueil</a>
		</li>
		<!-- <li class="breadcrumb-item active" aria-current="page">Articles
		</li> -->
		</ol>
	</div>
	</div>
 </div>
 </div>
 </div>
 <!--/.row-->
 </div><!--/.container-->
 </section>

<section class="background-11">
	<div class="container">
		<div class="row">
			<div class="col"><h5 class="text-center fs-2 fs-lg-3" style="margin-top: -80px;">LES EVENEMENTS</h5>
				<hr class="short" data-zanim='{"from":{"opacity":0,"width":0},"to":{"opacity":1,"width":"4.20873rem"},"duration":0.8}' data-zanim-trigger="scroll"/>
			</div>
		</div>
   </div>
<div class="container-fluid">
	 <div class="row col-md-12 row text-center justify-content-center">
      @foreach($evenement as $v_evenement)
        		 <div class="col-md-4 col-lg-4 py-0 mt-4 mt-lg-0">
		   <div class="card card-height">
		    <img class="card-img-top" style="height: 280px;" src="{{URL($v_evenement->articles_image)}}" alt="Card image" style="width:100%">
		    <div class="card-body">
		      <h5 class="card-title" style="text-align: center;">{!! substr($cartitle, 0, 60) !!} ...</h5>
		      <p class="card-text" style="text-align:left;">{!! substr($cardescrip, 0, 190) !!}...</p>
		    </div>
		    <center><a href="{{('details-evenement/'.$v_evenement->id)}}" class="btn btn-primary">Voir Plus</a><br></br></center>
		  </div><br>
		 </div>
      @endforeach
   </div>
</div>
	</section>


  <style type="text/css">
		  @media(min-width: 1477px){
		  .card-height{
		  	height: 580px !important;
		   }
		  }
		  @media screen and (min-device-width: 1300px) and (max-device-width: 1476px){
		  .card-height{
		  	height: 570px !important;
		   }
		  }
		  @media screen and (min-device-width: 1150px) and (max-device-width: 1299px){
		  .card-height{
		  	height: 640px !important;
		   }
		  }
		  @media screen and (min-device-width: 1070px) and (max-device-width: 1142px){
		  .card-height{
		  	height: 700px !important;
		   }
		  }
  </style>


@endsection