79 lines
5 KiB
PHP
79 lines
5 KiB
PHP
<section id="commitments-visual-with-cards" class="position-relative">
|
|
<div class="line-border-large bg-tertiary pb-5">
|
|
<div
|
|
class="container d-flex flex-column flex-md-row justify-content-center justify-content-evenly align-items-start pt-5 pb-4">
|
|
<div class="row justify-content-evenly align-items-start gx-5">
|
|
<div class="col-12 mb-3">
|
|
<h2>{{ $title }}</h2>
|
|
</div>
|
|
<div class="col-12 col-md-5">
|
|
<div class="bottom-left-shadow mb-3">
|
|
<img class="line-border-small bg-white p-3 img-fluid" src="{{ Vite::asset($picture) }}"
|
|
alt="{{ $picture_alt }}" title="{{ $picture_title }}">
|
|
</div>
|
|
<div class="bottom-left-shadow mb-3">
|
|
<div class="line-border-small bg-white p-3">
|
|
{!! $text !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-7">
|
|
<div class="row w-100 mx-auto gx-5">
|
|
<div class="col-12">
|
|
{!! $subtext !!}
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="row w-100 mx-auto">
|
|
<div class="col-6">
|
|
@foreach ($collection->slice(0, 2) as $item)
|
|
<div class="custom-card bottom-left-shadow position-relative my-4">
|
|
<div class="position-absolute d-flex justify-content-between align-items-center w-100 z-1">
|
|
<p class="h6 m-0 p-2 text-white bg-secondary rotate-left">
|
|
{{ $item->title }}</p>
|
|
<img class="img-fluid" src="{{ Vite::asset($item->picto) }}"
|
|
alt="{{ $item->picto_alt }}" title="{{ $item->picto_title }}">
|
|
</div>
|
|
<div class="line-border-small bg-white p-3 pt-5">
|
|
{!! $item->text !!}
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="col-6">
|
|
@foreach ($collection->slice(2, 2) as $item)
|
|
<div class="custom-card bottom-left-shadow position-relative my-4">
|
|
<div class="position-absolute d-flex justify-content-between align-items-center w-100 z-1">
|
|
<p class="h6 m-0 p-2 text-white bg-secondary rotate-left">
|
|
{{ $item->title }}</p>
|
|
<img class="img-fluid" src="{{ Vite::asset($item->picto) }}"
|
|
alt="{{ $item->picto_alt }}" title="{{ $item->picto_title }}">
|
|
</div>
|
|
<div class="line-border-small bg-white p-3 pt-5">
|
|
{!! $item->text !!}
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="custom-card bottom-left-shadow position-relative">
|
|
<div class="position-absolute w-fit z-1">
|
|
<p class="h6 m-0 p-2 text-white bg-secondary rotate-left">
|
|
{{ $collection->last()->title }}</p>
|
|
</div>
|
|
<div class="line-border-small bg-white d-flex justify-content-between align-items-center p-3">
|
|
<img class="img-fluid" src="{{ Vite::asset($collection->last()->picto) }}"
|
|
alt="{{ $collection->last()->picto_alt }}" title="{{ $collection->last()->picto_title }}">
|
|
<div class="ms-2">
|
|
{!! $collection->last()->text !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|