@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}'>{{__('master.ARTICLES')}}</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">{{__('master.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;">{{__('master.LES PUBLICATIONS')}}</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">

	<style type="text/css">
		.card-style2 {
		    position: relative;
		    display: flex;
		    transition: all 300ms ease;
		    border: 1px solid rgba(0, 0, 0, 0.09);
		    padding: 0;
		    height: 100%;
		}
		.card-style2 .card-img {
		    position: relative;
		    display: block;
		    background: #ffffff;
		    overflow: hidden;
		    border-radius: 0.25rem;
		    border-bottom-right-radius: 0;
		    border-bottom-left-radius: 0;
		}
		.card-style2 .card-img img {
		    transition: all 0.3s linear 0s;
		}
		.card-style2:hover .card-img img {
		    transform: scale(1.05);
		}
		.card-style2 .date {
		    position: absolute;
		    right: 30px;
		    top: 30px;
		    z-index: 1;
		    color: #16bae1;
		    overflow: hidden;
		    padding-bottom: 10px;
		    line-height: 24px;
		    text-align: center;
		    border: 2px solid #ededed;
		    display: inline-block;
		    background-color: #ffffff;
		    text-transform: uppercase;
		    border-radius: 0.25rem;
		}
		.card-style2 .date span {
		    position: relative;
		    color: #ffffff;
		    font-weight: 500;
		    font-size: 20px;
		    display: block;
		    text-align: center;
		    padding: 12px;
		    margin-bottom: 10px;
		    background-color: #00baee;
		    border-radius: 0.25rem;
		}
		.card-style2 .card-body {
		    position: relative;
		    display: block;
		    background: #ffffff;
		    padding: 2rem;
		}
		.card-style2 .card-body h3 {
		    margin-bottom: 0.8rem;
		}
		.card-style2 .card-body h3 a {
		    color: #004975;
		}
		.card-style2 .card-body h3 a:hover {
		    color: #00baee;
		}
		.card-style2 .card-footer {
		    border-top: 1px solid rgba(0, 0, 0, 0.09);
		    background: transparent;
		    padding-right: 2rem;
		    padding-left: 2rem;
		    -ms-flex-align: end;
		    align-items: flex-end;
		}
		.card-style2 .card-footer ul {
		    display: flex;
		    justify-content: space-between;
		    list-style: none;
		    margin-bottom: 0;
		}
		.card-style2 .card-footer ul li {
		    font-size: 15px;
		}
		.card-style2 .card-footer ul li a {
		    color: #394952;
		}
		.card-style2 .card-footer ul li a:hover {
		    color: #00baee;
		}
		.card-style2 .card-footer ul li i {
		    color: #00baee;
		    font-size: 14px;
		    margin-right: 8px;
		}
	</style>

	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" integrity="sha256-2XFplPlrFClt0bIdPgpz8H7ojnk10H69xRqd9+uTShA=" crossorigin="anonymous" />

	<section>
	<div class="container">
	    <div class="row">
	    	@foreach($articles as $v_articles)
	    		        <div class="col-lg-4 col-md-6 mb-2-6" style="margin-bottom: 10px">
	            <article class="card card-style2">
	                <div class="card-img">
	                    <img class="rounded-top" src="{{asset($v_articles->articles_image)}}" style="width: 350px; height: 280px">
	                    <div class="date"><span>{{$day}}</span>{{$months[$month-1]}}</div>
	                </div>
	                <div class="card-body">
	                    <h3 class="h5"><a href="{{url('details-article/'.$v_articles->id)}}">