50 lines
3.0 KiB
PHP
50 lines
3.0 KiB
PHP
@isset($destinations)
|
|
<section class="bg-solitude-blue">
|
|
<div class="container">
|
|
<div class="row pb-5 align-items-center justify-content-center">
|
|
<div class="col-12 col-lg-7 text-center position-relative page-title-double-large">
|
|
<div class="d-flex flex-column justify-content-center extra-very-small-screen">
|
|
<h3 class="text-dark-gray alt-font ls-minus-1px fw-700 mb-20px">Explore Your Global Horizons: Study
|
|
in Top Destinations</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@php
|
|
$transformArray = [80, 40, 80];
|
|
$flipperDirectionArray = ['to-left', 'to-top', 'to-right', 'to-left', 'to-bottom', 'to-bottom'];
|
|
@endphp
|
|
|
|
<div class="row row-cols-1 row-cols-lg-3 row-cols-md-2 justify-content-center">
|
|
@foreach ($destinations as $index => $destination)
|
|
@php
|
|
$transformIndex = $index % count($transformArray);
|
|
$directionIndex = $index % count($flipperDirectionArray);
|
|
@endphp
|
|
<div class="col text-center rotate-box-style-01 lg-mb-45px"
|
|
data-bottom-top="transform: translateY({{ $transformArray[$transformIndex] }}px)"
|
|
data-top-bottom="transform: translateY(-{{ $transformArray[$transformIndex] }}px)">
|
|
<div class="rm-rotate-box text-center">
|
|
<div class="flipper {{ $flipperDirectionArray[$directionIndex] }}">
|
|
<div class="thumb-wrap">
|
|
<div class="front overflow-hidden h-250px md-h-250px border-radius-4px overflow-hidden"
|
|
style="background-image:url('{{ $destination->image }}')">
|
|
</div>
|
|
<div class="back border-radius-4px overflow-hidden">
|
|
<div class="box-overlay bg-dark-gray"></div>
|
|
<div class="content-wrap last-paragraph-no-margin">
|
|
<p class="text-white p-4 opacity-7 lh-30 sm-w-70 xs-w-100 mx-auto">
|
|
{{ str()->limit($destination->short_description, 250) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="fs-20 d-inline-block mt-30px fw-600 text-dark-gray">
|
|
<a href="{{ route('country.single', $destination->slug)}}" class="destination">Study in {{ $destination->title }}</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endisset
|