@extends('layout_en.master')
@section('content')
@section('fpactive','active')
<section id="inner-banner">
<div class="overlay">
<div class="container">
<div class="row"> 
<div class="col-sm-6"><h1>
FINANCE A PROJECT</h1></div>
<div class="col-sm-6">
  <h6 class="breadcrumb"><a href="{{url('/')}}">ACCUEL</a> / Finance a project</h6></div>
</div>
</div>
</div>
</section>


<section id="about-sec">
<div class="container">
<div class="row text-center">
<!-- <h1>Fondement</h1>
 -->
<!--  <hr style="border-color: white;">
 -->
 <h5 style="text-align: justify; border-style: solid; border-width: 3px; border-color: rgb(241, 204, 76); padding: 20px;">
 <div class="mt-3" style="line-height: 2em;">
   The financing problem is particularly acute in Africa, where investment funds are very scarce and/or the high cost of financial resources is a brake on the harmonious development of micro-enterprises. Thus, Your Support or Financial and Material Support is indispensable to lift thousands of poor families out of their multidimensional vulnerability to ignite their integral fulfillment and total empowerment. 
  Funding is provided in all areas of the Sustainable Development Goals (SDGs).
 
</div>

</h5>
<div class="text-center">
</div>
</div>
</div>
</section>

<section id="about-sec">
<div class="container">
  <!-- Latest compiled and minified CSS -->
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> -->

  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> -->

  <style type="text/css">
    .product-grid{
        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: 310px !important;
    }
    .product-grid .title{
        font-size: 18px;
        text-transform: capitalize;
        margin: 0 0 5px;
        height: 50px !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="row col-md-12">
   @foreach($financerprojets as $v_financerprojets)
    <div class="col-md-4 col-sm-8" style="margin-bottom: 30px">
        <div class="product-grid">
            <div class="product-image">
                <a href="{{('details-projet/'.$v_financerprojets->idprojet)}}" class="image">
                    <img class="pic-1" src="{{asset($v_financerprojets->photo)}}">
                    <img class="pic-2" src="{{asset($v_financerprojets->photo)}}">
                </a>
                <ul class="social">
                    <li><a href="{{('details-projet/'.$v_financerprojets->idprojet)}}" data-tip="Quick View"><i class="fa fa-eye"></i></a></li>
                </ul>
                <!-- <div class="product-rating">
                   
                    
                                        
                    
                </div> -->
            </div>
            <div class="product-content">
                <h3 class="title"><a href="{{('en/details-projet/'.$v_financerprojets->idprojet)}}">
                  {{$v_financerprojets->name}}
                </a></h3>
                <p style="text-align: justify; color: black !important; height: 190px !important; font-size: 14px; ">
                 {{substr($v_financerprojets->description, 0, 300)}}...
                </p>
                <div class="price pull-left">Needs: {{$v_financerprojets->price}} $</div>
                <a class="add-to-cart" href="{{url('en/details-projet/'.$v_financerprojets->idprojet)}}"> Read more </a>

                
            </div>
        </div>
    </div>
    
    
    @endforeach
  </div>
</div>
</section>

@endsection