@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}'>{{__('Vacances de poste')}}</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">{{__('Vacances de poste')}}
    </li>
    </ol>
  </div>
  </div>
 </div>
 </div>
 </div>
 <!--/.row-->
 </div><!--/.container-->
 </section>

<br>
<div class="mt-6">

  <style type="text/css">
    .product-grid{
        font-family: 'Roboto', sans-serif;
        text-align: center;
        transition: all 0.5s;
    }
    .product-grid:hover{ box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3); }
    .product-grid .product-image{
        position: relative;
        overflow: hidden;
    }
    .product-grid .product-image a.image{ display: block; }
    .product-grid .product-image img{
        width: 100%;
        height: auto;
    }
    .product-image .pic-1{
        opacity: 1;
        backface-visibility: hidden;
        transition: all 0.5s;
    }
    .product-grid:hover .product-image .pic-1{ opacity: 0; }
    .product-image .pic-2{
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.5s;
    }
    .product-grid:hover .product-image .pic-2{ opacity: 1; }
    .product-grid .product-sale-label{
        color: #fff;
        background: red;
        font-size: 14px;
        font-style: italic;
        text-transform: uppercase;
        width: 55px;
        height: 55px;
        line-height: 55px;
        border-radius: 50px;
        position: absolute;
        top: 10px;
        left: 10px;
    }
    .product-grid .social{
        padding: 0;
        margin: 0;
        list-style: none;
        position: absolute;
        top: 15px;
        right: 7px;
    }
    .product-grid .social li{
        transform: translateX(60px);
        transition: all 0.3s ease 0.3s;
    }
    .product-grid .social li:nth-child(2){ transition: all 0.3s ease 0.4s; }
    .product-grid:hover .social li{ transform: translateX(0); }
    .product-grid .social li a{
        color: #707070;
        background: #fff;
        font-size: 16px;
        line-height: 40px;
        width: 40px;
        height: 40px;
        margin: 0 0 7px;
        border-radius: 50px;
        display: block;
        transition: all 0.3s ease 0s;
    }
    .product-grid .social li a:hover{ color: #6DA84A; }
    .product-grid .product-rating{
        background: rgba(255,255,255,0.95);
        width: 100%;
        padding: 10px;
        opacity: 0;
        position: absolute;
        bottom: -60px;
        left: 0;
        transition: all .2s ease-in-out 0s;
    }
    .product-grid:hover .product-rating{
        opacity: 1;
        bottom: 0;
    }
    .product-grid .rating{
        padding: 0;
        margin: 0;
        list-style: none;
        float: left;
    }
    .product-grid .rating li{
        color: #6DA84A;
        font-size: 13px;
    }
    .product-grid .rating li.far{ color: #999; }
    .product-grid .add-to-cart{
        color: red;
        font-size: 14px;
        font-weight: 600;
        border-bottom: 1px solid #6DA84A;
        float:right;
        transition: all .2s ease-in-out 0s;
    }
    .product-grid .add-to-cart:hover{
        color: #000;
        border-color: #000;
    }
    .product-grid .add-to-cart1{
        color: #000;
        font-size: 14px;
        font-weight: 600;
        border-bottom: 1px solid #6DA84A;
        float:right;
        transition: all .2s ease-in-out 0s;
    }
    .product-grid .product-content{
        background: #F5F5F5;
        padding: 15px;
        height: 150px !important;
    }
    .product-grid .title{
        font-size: 18px;
        text-transform: capitalize;
        margin: 0 0 5px;
        height: 90px !important;
    }
    .product-grid .title a{
        color: #111;
        transition: all 500ms;
    }
    .product-grid .title a:hover{ color: #6DA84A; }
    .product-grid .price{
        color: red;
        font-size: 17px;
        text-decoration: underline;
    }
    .product-grid .price span{
        text-decoration: line-through;
        margin-right: 5px;
        display: inline-block;
        opacity: 0.6;
    }
    .product-grid .price1{
        color: #000;
        font-size: 17px;
        text-decoration: underline;
    }

    @media only screen and (max-width:990px){
        .product-grid{ margin-bottom: 40px; }
    }

  </style>
  

  <div class="container">
    <div class="row">
      <div class="col"><h5 class="text-center fs-2 fs-lg-3" style="margin-top: -80px;">{{__('Vacance de poste')}}</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>
    
    <br><br>
      <div class="row">
          <div class="col-md-3" style="margin-bottom: 30px; background-color: #eee; height: 100px !important;">
            
            
            <div class="list-group">
              <a href="{{url('/carriere')}}" class="list-group-item list-group-item-action">
                Carrière
              </a>
              <a href="{{url('/vacancedeposte')}}" class="list-group-item list-group-item-action active">Vacance de poste</a>
              
            </div>
              
          </div>
          <div class="row col-md-9">
            @foreach($offre as $offres)
            <div class="col-md-4 col-sm-8" style="margin-bottom: 30px">
                <div class="product-grid">
                    <div class="product-image">
                        <a href="{{url('detail-offre/'.$offres->id)}}" class="image">
                            <img class="pic-1" src="{{asset('job/job.jpg')}}">
                            <img class="pic-2" src="{{asset('job/job.jpg')}}">
                        </a>
                        <ul class="social">
                            <li><a href="{{url('detail-offre/'.$offres->id)}}" data-tip="Quick View"><i class="fa fa-eye"></i></a></li>
                            
                        </ul>
                    </div>
                    <div class="product-content">
                        <h3 class="title"><a href="{{url('detail-offre/'.$offres->id)}}">{{$offres->articles_title}}</a></h3>
                        <a class="price1" href="{{url('detail-offre/'.$offres->id)}}" > Détails </a>
                        
                    </div>
                </div>
            </div>
            @endforeach
            
            
            
            
          </div>

      </div>
  </div>
</div>
<br></br>
@endsection